[Synthetics] Update use of combobox icons (elastic#163118)

bryce-b · Aug 9, 2023 · 21b799e · 21b799e
1 parent 04ed363
commit 21b799e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 32 deletions.
diff --git a/...nthetics/public/apps/synthetics/components/settings/alerting_defaults/connector_field.tsx b/...nthetics/public/apps/synthetics/components/settings/alerting_defaults/connector_field.tsx
@@ -6,19 +6,15 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiIcon } from '@elastic/eui';
+import { EuiComboBox, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useGetUrlParams, useUrlParams } from '../../../hooks';
 import { useAlertingDefaults } from './hooks/use_alerting_defaults';
 import { alertFormI18n } from './translations';
-import { ClientPluginsStart } from '../../../../../plugin';
 import { AddConnectorFlyout } from './add_connector_flyout';
 
-type ConnectorOption = EuiComboBoxOptionOption<string>;
-
 export function DefaultConnectorField({
   isLoading,
   isDisabled,
@@ -30,21 +26,7 @@ export function DefaultConnectorField({
   selectedConnectors: string[];
   onChange: (connectors: string[]) => void;
 }) {
-  const { actionTypeRegistry } = useKibana<ClientPluginsStart>().services.triggersActionsUi;
-
-  const { options, connectors } = useAlertingDefaults();
-
-  const renderOption = (option: ConnectorOption) => {
-    const { label, value } = option;
-
-    const { actionTypeId: type } = connectors?.find((dt) => dt.id === value) ?? {};
-    return (
-      <ConnectorSpan>
-        <EuiIcon type={actionTypeRegistry.get(type as string).iconClass} />
-        <span>{label}</span>
-      </ConnectorSpan>
-    );
-  };
+  const { options } = useAlertingDefaults();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -108,7 +90,6 @@ export function DefaultConnectorField({
         onBlur={onBlur}
         isDisabled={isDisabled}
         data-test-subj={`default-connectors-input-${isLoading ? 'loading' : 'loaded'}`}
-        renderOption={renderOption}
         fullWidth
         aria-label={TAGS_LABEL}
         isLoading={isLoading}
@@ -127,16 +108,6 @@ const RowWrapper = styled(EuiFormRow)`
   }
 `;
 
-const ConnectorSpan = styled.span`
-  .euiIcon {
-    margin-right: 5px;
-  }
-  > img {
-    width: 16px;
-    height: 20px;
-  }
-`;
-
 export const TAGS_LABEL = i18n.translate('xpack.synthetics.monitorManagement.paramForm.tagsLabel', {
   defaultMessage: 'Tags',
 });
diff --git a/...g_defaults/hooks/use_alerting_defaults.ts → ..._defaults/hooks/use_alerting_defaults.tsx b/...g_defaults/hooks/use_alerting_defaults.ts → ..._defaults/hooks/use_alerting_defaults.tsx
@@ -7,7 +7,10 @@
 
 import { useFetcher } from '@kbn/observability-shared-plugin/public';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { EuiIcon } from '@elastic/eui';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { ClientPluginsStart } from '../../../../../../plugin';
 import { selectDynamicSettings } from '../../../../state/settings/selectors';
 import { fetchActionTypes } from '../../../../state/settings/api';
 import { getConnectorsAction } from '../../../../state/settings/actions';
@@ -16,6 +19,7 @@ export const useAlertingDefaults = () => {
   const { data: actionTypes } = useFetcher(() => fetchActionTypes(), []);
   const { connectors, connectorsLoading, loading, settings } = useSelector(selectDynamicSettings);
   const { defaultConnectors } = settings || {};
+  const { actionTypeRegistry } = useKibana<ClientPluginsStart>().services.triggersActionsUi;
 
   const dispatch = useDispatch();
 
@@ -29,6 +33,12 @@ export const useAlertingDefaults = () => {
       value: connectorAction.id,
       label: connectorAction.name,
       'data-test-subj': connectorAction.name,
+      prepend: (
+        <EuiIcon
+          type={actionTypeRegistry.get(connectorAction.actionTypeId as string).iconClass}
+          size="s"
+        />
+      ),
     }));
 
   return {