Get action types from API

x-pack/plugins/security_solution/public/cases/components/configure_cases/index.tsx

@@ -9,16 +9,16 @@ import styled, { css } from 'styled-components';
 
 import { EuiCallOut } from '@elastic/eui';
 
+import { SUPPORTED_CONNECTORS } from '../../../../../case/common/constants';
 import { useKibana } from '../../../common/lib/kibana';
 import { useConnectors } from '../../containers/configure/use_connectors';
+import { useActionTypes } from '../../containers/configure/use_action_types';
 import { useCaseConfigure } from '../../containers/configure/use_configure';
-import { ActionType } from '../../../../../triggers_actions_ui/public';
 
 import { ClosureType } from '../../containers/configure/types';
 
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ActionConnectorTableItem } from '../../../../../triggers_actions_ui/public/types';
-import { connectorsConfiguration } from '../connectors';
 
 import { SectionWrapper } from '../wrappers';
 import { Connectors } from './connectors';
@@ -49,8 +49,6 @@ const FormWrapper = styled.div`
   `}
 `;
 
-const actionTypes: ActionType[] = Object.values(connectorsConfiguration);
-
 interface ConfigureCasesComponentProps {
   userCanCrud: boolean;
 }
@@ -78,12 +76,20 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
   } = useCaseConfigure();
 
   const { loading: isLoadingConnectors, connectors, refetchConnectors } = useConnectors();
+  const { loading: isLoadingActionTypes, actionTypes, refetchActionTypes } = useActionTypes();
+  const supportedActionTypes = useMemo(
+    () => actionTypes.filter((actionType) => SUPPORTED_CONNECTORS.includes(actionType.id)),
+    [actionTypes]
+  );
 
   const onConnectorUpdate = useCallback(async () => {
     refetchConnectors();
+    refetchActionTypes();
     refetchCaseConfigure();
-  }, [refetchCaseConfigure, refetchConnectors]);
-  const isLoadingAny = isLoadingConnectors || persistLoading || loadingCaseConfigure;
+  }, [refetchCaseConfigure, refetchConnectors, refetchActionTypes]);
+
+  const isLoadingAny =
+    isLoadingConnectors || persistLoading || loadingCaseConfigure || isLoadingActionTypes;
   const updateConnectorDisabled = isLoadingAny || !connectorIsValid || connector.id === 'none';
   const onClickUpdateConnector = useCallback(() => {
     setEditFlyoutVisibility(true);
@@ -154,11 +160,11 @@ const ConfigureCasesComponent: React.FC<ConfigureCasesComponentProps> = ({ userC
       triggersActionsUi.getAddConnectorFlyout({
         consumer: 'case',
         onClose: onCloseAddFlyout,
-        actionTypes,
+        actionTypes: supportedActionTypes,
         reloadConnectors: onConnectorUpdate,
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [supportedActionTypes]
   );
 
   const ConnectorEditFlyout = useMemo(

x-pack/plugins/security_solution/public/cases/containers/configure/api.ts

@@ -7,6 +7,7 @@
 import { isEmpty } from 'lodash/fp';
 import {
   ActionConnector,
+  ActionType,
   CasesConfigurePatch,
   CasesConfigureResponse,
   CasesConfigureRequest,
@@ -16,6 +17,7 @@ import { KibanaServices } from '../../../common/lib/kibana';
 import {
   CASE_CONFIGURE_CONNECTORS_URL,
   CASE_CONFIGURE_URL,
+  ACTION_TYPES_URL,
 } from '../../../../../case/common/constants';
 
 import { ApiProps } from '../types';
@@ -89,3 +91,12 @@ export const patchCaseConfigure = async (
     decodeCaseConfigureResponse(response)
   );
 };
+
+export const fetchActionTypes = async ({ signal }: ApiProps): Promise<ActionType[]> => {
+  const response = await KibanaServices.get().http.fetch(ACTION_TYPES_URL, {
+    method: 'GET',
+    signal,
+  });
+
+  return response;
+};

x-pack/plugins/security_solution/public/cases/containers/configure/use_action_types.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+import { useStateToaster, errorToToaster } from '../../../common/components/toasters';
+import * as i18n from '../translations';
+import { fetchActionTypes } from './api';
+import { ActionType } from './types';
+
+export interface UseActionTypesResponse {
+  loading: boolean;
+  actionTypes: ActionType[];
+  refetchActionTypes: () => void;
+}
+
+export const useActionTypes = (): UseActionTypesResponse => {
+  const [, dispatchToaster] = useStateToaster();
+  const [loading, setLoading] = useState(true);
+  const [actionTypes, setActionTypes] = useState<ActionType[]>([]);
+
+  const refetchActionTypes = useCallback(() => {
+    let didCancel = false;
+    const abortCtrl = new AbortController();
+    const getActionTypes = async () => {
+      try {
+        setLoading(true);
+        const res = await fetchActionTypes({ signal: abortCtrl.signal });
+        if (!didCancel) {
+          setLoading(false);
+          setActionTypes(res);
+        }
+      } catch (error) {
+        if (!didCancel) {
+          setLoading(false);
+          setActionTypes([]);
+          errorToToaster({
+            title: i18n.ERROR_TITLE,
+            error: error.body && error.body.message ? new Error(error.body.message) : error,
+            dispatchToaster,
+          });
+        }
+      }
+    };
+    getActionTypes();
+    return () => {
+      didCancel = true;
+      abortCtrl.abort();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    refetchActionTypes();
+  }, [refetchActionTypes]);
+
+  return {
+    loading,
+    actionTypes,
+    refetchActionTypes,
+  };
+};