[8.x] fix: [Search:Search Applications:Content page]Missing error tex…

…t for Select searchable indices field (#200736) (#201241)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:Search Applications:Content page]Missing error text for
Select searchable indices field
(#200736)](#200736)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-21T16:41:47Z","message":"fix:
[Search:Search Applications:Content page]Missing error text for Select
searchable indices field (#200736)\n\nCloses: #200141 \r\nCloses:
#199815\r\n\r\n### Description\r\nFields which are in error should have
error text that for user it should\r\nbe instantly clear what is the
error and how to fix it.\r\n\r\n### What was changed: \r\n1. Error
handling was added
for`\r\napplications/components/indices_select_combobox.tsx`
component\r\n\r\n### Screen\r\n<img width=\"806\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/54a51822-d66a-4f50-be3f-2d8b203b0cd1\">","sha":"0abcf06a1a28db146e7dac5a748f9a83d10366cd","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Search:Search Applications:Content page]Missing error text for Select
searchable indices
field","number":200736,"url":"https://github.com/elastic/kibana/pull/200736","mergeCommit":{"message":"fix:
[Search:Search Applications:Content page]Missing error text for Select
searchable indices field (#200736)\n\nCloses: #200141 \r\nCloses:
#199815\r\n\r\n### Description\r\nFields which are in error should have
error text that for user it should\r\nbe instantly clear what is the
error and how to fix it.\r\n\r\n### What was changed: \r\n1. Error
handling was added
for`\r\napplications/components/indices_select_combobox.tsx`
component\r\n\r\n### Screen\r\n<img width=\"806\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/54a51822-d66a-4f50-be3f-2d8b203b0cd1\">","sha":"0abcf06a1a28db146e7dac5a748f9a83d10366cd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/200736","number":200736,"mergeCommit":{"message":"fix:
[Search:Search Applications:Content page]Missing error text for Select
searchable indices field (#200736)\n\nCloses: #200141 \r\nCloses:
#199815\r\n\r\n### Description\r\nFields which are in error should have
error text that for user it should\r\nbe instantly clear what is the
error and how to fix it.\r\n\r\n### What was changed: \r\n1. Error
handling was added
for`\r\napplications/components/indices_select_combobox.tsx`
component\r\n\r\n### Screen\r\n<img width=\"806\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/54a51822-d66a-4f50-be3f-2d8b203b0cd1\">","sha":"0abcf06a1a28db146e7dac5a748f9a83d10366cd"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/add_indices_flyout.tsx

@@ -19,7 +19,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiFormRow,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
@@ -90,25 +89,22 @@ export const AddIndicesFlyout: React.FC<AddIndicesFlyoutProps> = ({ onClose }) =
         )}
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiFormRow
+        <IndicesSelectComboBox
           fullWidth
+          onChange={onIndicesChange}
+          selectedOptions={selectedOptions}
+          ignoredOptions={existingIndices}
           label={i18n.translate(
             'xpack.enterpriseSearch.searchApplications.searchApplication.indices.addIndicesFlyout.selectableLabel',
             { defaultMessage: 'Select searchable indices' }
           )}
-        >
-          <IndicesSelectComboBox
-            fullWidth
-            onChange={onIndicesChange}
-            selectedOptions={selectedOptions}
-            ignoredOptions={existingIndices}
-          />
-        </EuiFormRow>
+        />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween" direction="rowReverse">
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="enterpriseSearchAddIndicesFlyoutAddSelectedButton"
               fill
               data-telemetry-id="entSearchApplications-indices-addNewIndices-submit"
               iconType="plusInCircle"
@@ -122,6 +118,7 @@ export const AddIndicesFlyout: React.FC<AddIndicesFlyoutProps> = ({ onClose }) =
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
+              data-test-subj="enterpriseSearchAddIndicesFlyoutCancelButton"
               data-telemetry-id="entSearchApplications-indices-addNewIndices-cancel"
               flush="left"
               onClick={onClose}

x-pack/plugins/enterprise_search/public/applications/applications/components/search_applications/components/indices_select_combobox.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexItem,
   EuiHealth,
   EuiHighlight,
+  EuiFormRow,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -36,12 +37,14 @@ export type IndicesSelectComboBoxProps = Omit<
 > & {
   'data-telemetry-id'?: string;
   ignoredOptions?: string[];
+  label?: string;
 };
 
 export const IndicesSelectComboBox = ({ ignoredOptions, ...props }: IndicesSelectComboBoxProps) => {
   const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined);
   const { makeRequest } = useActions(FetchIndicesForSearchApplicationsAPILogic);
   const { status, data } = useValues(FetchIndicesForSearchApplicationsAPILogic);
+  const isInvalid = Boolean(searchQuery && !props.selectedOptions?.length);
 
   useEffect(() => {
     makeRequest({ searchQuery });
@@ -85,7 +88,20 @@ export const IndicesSelectComboBox = ({ ignoredOptions, ...props }: IndicesSelec
     renderOption,
     ...props,
   };
-  return <EuiComboBox async {...defaultedProps} />;
+
+  return (
+    <EuiFormRow
+      label={props.label || null}
+      fullWidth={props.fullWidth}
+      isInvalid={isInvalid}
+      error={i18n.translate(
+        'xpack.enterpriseSearch.searchApplications.indicesSelectComboBox.error',
+        { defaultMessage: 'No indices match the entered value' }
+      )}
+    >
+      <EuiComboBox async isInvalid={isInvalid} {...defaultedProps} />
+    </EuiFormRow>
+  );
 };
 
 export const indexToOption = (