[8.x] [Search][Connectors] Choose connector selectable custom icon (#…

…197068) (#197440) # Backport This will backport the following commits from `main` to `8.x`: - [[Search][Connectors] Choose connector selectable custom icon (#197068)](#197068)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: José Luis González <[email protected]>
elastic · Oct 23, 2024 · 35686d8 · 35686d8
1 parent 4eb4ada
commit 35686d8
Showing 1 changed file with 63 additions and 70 deletions.
diff --git a/...content/components/connectors/create_connector/components/choose_connector_selectable.tsx b/...content/components/connectors/create_connector/components/choose_connector_selectable.tsx
@@ -5,22 +5,24 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useActions, useValues } from 'kea';
 
 import {
   EuiBadge,
   EuiFlexItem,
   EuiIcon,
-  EuiInputPopover,
-  EuiSelectable,
-  EuiSelectableOption,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexGroup,
+  EuiText,
   useEuiTheme,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
+import connectorLogo from '../../../../../../assets/images/connector.svg';
 import { KibanaLogic } from '../../../../../shared/kibana';
 import { NewConnectorLogic } from '../../../new_index/method_connector/new_connector_logic';
 import { SelfManagePreference } from '../create_connector';
@@ -36,9 +38,39 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
   selfManaged,
 }) => {
   const { euiTheme } = useEuiTheme();
-  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<Array<EuiComboBoxOptionOption<OptionData>>>(
+    []
+  );
+  const renderOption = (
+    option: EuiComboBoxOptionOption<OptionData>,
+    searchValue: string,
+    contentClassName: string
+  ) => {
+    const { _append, key, label, _prepend } = option as EuiComboBoxOptionOption<OptionData> & {
+      _append: JSX.Element[];
+      _prepend: JSX.Element;
+    };
+    return (
+      <EuiFlexGroup
+        gutterSize="m"
+        key={key + '-span'}
+        justifyContent="spaceBetween"
+        className={contentClassName}
+      >
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false}>{_prepend}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" textAlign="left">
+              {label}
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiFlexItem grow={false}>{_append}</EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
   const [selectableOptions, selectableSetOptions] = useState<
-    Array<EuiSelectableOption<OptionData>>
+    Array<EuiComboBoxOptionOption<OptionData>>
   >([]);
   const { connectorTypes } = useValues(KibanaLogic);
   const allConnectors = useMemo(
@@ -50,9 +82,9 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
 
   const getInitialOptions = () => {
     return allConnectors.map((connector, key) => {
-      const append: JSX.Element[] = [];
+      const _append: JSX.Element[] = [];
       if (connector.isTechPreview) {
-        append.push(
+        _append.push(
           <EuiBadge key={key + '-preview'} iconType="beaker" color="hollow">
             {i18n.translate(
               'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.thechPreviewBadgeLabel',
@@ -62,7 +94,7 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
         );
       }
       if (connector.isBeta) {
-        append.push(
+        _append.push(
           <EuiBadge key={key + '-beta'} iconType={'beta'} color="hollow">
             {i18n.translate(
               'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.BetaBadgeLabel',
@@ -74,7 +106,7 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
         );
       }
       if (selfManaged === 'native' && !connector.isNative) {
-        append.push(
+        _append.push(
           <EuiBadge key={key + '-self'} iconType={'warning'} color="warning">
             {i18n.translate(
               'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.OnlySelfManagedBadgeLabel',
@@ -85,12 +117,11 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
           </EuiBadge>
         );
       }
-
       return {
-        append,
+        _append,
+        _prepend: <EuiIcon size="l" type={connector.iconPath} />,
         key: key.toString(),
         label: connector.name,
-        prepend: <EuiIcon size="l" type={connector.iconPath} />,
       };
     });
   };
@@ -100,73 +131,35 @@ export const ChooseConnectorSelectable: React.FC<ChooseConnectorSelectableProps>
   useEffect(() => {
     selectableSetOptions(initialOptions);
   }, [selfManaged]);
-  const [searchValue, setSearchValue] = useState('');
-
-  const openPopover = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-  const closePopover = useCallback(() => {
-    setIsOpen(false);
-  }, []);
 
   return (
     <EuiFlexItem>
-      <EuiSelectable
+      <EuiComboBox
         aria-label={i18n.translate(
-          'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.euiSelectable.selectableInputPopoverLabel',
+          'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.euiComboBox.accessibleScreenReaderLabelLabel',
           { defaultMessage: 'Select a data source for your connector to use.' }
         )}
+        prepend={<EuiIcon type={selectedConnector?.iconPath ?? connectorLogo} size="l" />}
+        singleSelection
+        fullWidth
+        placeholder={i18n.translate(
+          'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text',
+          { defaultMessage: 'Choose a data source' }
+        )}
         options={selectableOptions}
-        onChange={(newOptions, _, changedOption) => {
-          selectableSetOptions(newOptions);
-          closePopover();
-          if (changedOption.checked === 'on') {
-            const keySelected = Number(changedOption.key);
-            setSelectedConnector(allConnectors[keySelected]);
-            setSearchValue(allConnectors[keySelected].name);
-          } else {
+        selectedOptions={selectedOption}
+        onChange={(selectedItem) => {
+          setSelectedOption(selectedItem);
+          if (selectedItem.length === 0) {
             setSelectedConnector(null);
-            setSearchValue('');
+            return;
           }
+          const keySelected = Number(selectedItem[0].key);
+          setSelectedConnector(allConnectors[keySelected]);
         }}
-        listProps={{
-          isVirtualized: true,
-          rowHeight: Number(euiTheme.base * 3),
-          showIcons: false,
-        }}
-        singleSelection
-        searchable
-        searchProps={{
-          fullWidth: true,
-          isClearable: true,
-          onChange: (value) => {
-            if (value !== selectedConnector?.name) {
-              setSearchValue(value);
-            }
-          },
-          onClick: openPopover,
-          onFocus: openPopover,
-          placeholder: i18n.translate(
-            'xpack.enterpriseSearch.createConnector.chooseConnectorSelectable.placeholder.text',
-            { defaultMessage: 'Choose a data source' }
-          ),
-          value: searchValue,
-        }}
-      >
-        {(list, search) => (
-          <EuiInputPopover
-            fullWidth
-            closePopover={closePopover}
-            disableFocusTrap
-            closeOnScroll
-            isOpen={isOpen}
-            input={search!}
-            panelPaddingSize="none"
-          >
-            {list}
-          </EuiInputPopover>
-        )}
-      </EuiSelectable>
+        renderOption={renderOption}
+        rowHeight={(euiTheme.base / 2) * 5}
+      />
     </EuiFlexItem>
   );
 };