fix: [Search:Search Applications:Content page]Missing error text for …

…Select searchable indices field (#200736) Closes: #200141 Closes: #199815 ### Description Fields which are in error should have error text that for user it should be instantly clear what is the error and how to fix it. ### What was changed: 1. Error handling was added for` applications/components/indices_select_combobox.tsx` component ### Screen <img width="806" alt="image" src="https://github.com/user-attachments/assets/54a51822-d66a-4f50-be3f-2d8b203b0cd1">
elastic · Nov 21, 2024 · 0abcf06 · 0abcf06
1 parent 71667b0
commit 0abcf06
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/...rch/public/applications/applications/components/search_application/add_indices_flyout.tsx b/...rch/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}

diff --git a/...ations/applications/components/search_applications/components/indices_select_combobox.tsx b/...ations/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 = (