[8.x] [Response Ops][Rule Form V2] Rule form v2: Actions Modal and Actions Form (#187434)

packages/kbn-alerts-ui-shared/src/alerts_search_bar/index.tsx

@@ -16,8 +16,9 @@ import { SEARCH_BAR_PLACEHOLDER } from './translations';
 import type { AlertsSearchBarProps, QueryLanguageType } from './types';
 import { useLoadRuleTypesQuery, useAlertsDataView, useRuleAADFields } from '../common/hooks';
 
-const SA_ALERTS = { type: 'alerts', fields: {} } as SuggestionsAbstraction;
+export type { AlertsSearchBarProps } from './types';
 
+const SA_ALERTS = { type: 'alerts', fields: {} } as SuggestionsAbstraction;
 const EMPTY_FEATURE_IDS: ValidFeatureId[] = [];
 
 export const AlertsSearchBar = ({

packages/kbn-alerts-ui-shared/src/common/constants/index.ts

@@ -10,3 +10,5 @@
 export * from './alerts';
 export * from './i18n_weekdays';
 export * from './routes';
+
+export const VIEW_LICENSE_OPTIONS_LINK = 'https://www.elastic.co/subscriptions';

packages/kbn-alerts-ui-shared/src/common/hooks/index.ts

@@ -9,6 +9,10 @@
 
 export * from './use_alerts_data_view';
 export * from './use_create_rule';
+export * from './use_update_rule';
+export * from './use_resolve_rule';
+export * from './use_load_connectors';
+export * from './use_load_connector_types';
 export * from './use_get_alerts_group_aggregations_query';
 export * from './use_health_check';
 export * from './use_load_alerting_framework_health';

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.test.tsx

@@ -13,7 +13,7 @@ import { renderHook } from '@testing-library/react-hooks/dom';
 import { waitFor } from '@testing-library/react';
 import { httpServiceMock } from '@kbn/core/public/mocks';
 
-import { useLoadActionTypes } from './use_load_connector_types';
+import { useLoadConnectorTypes } from './use_load_connector_types';
 
 const queryClient = new QueryClient();
 
@@ -46,7 +46,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call API endpoint with the correct parameters', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: true,
         }),
@@ -74,7 +74,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call the correct endpoint if system actions is true', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: true,
         }),
@@ -91,7 +91,7 @@ describe('useLoadConnectorTypes', () => {
   test('should call the correct endpoint if system actions is false', async () => {
     const { result } = renderHook(
       () =>
-        useLoadActionTypes({
+        useLoadConnectorTypes({
           http,
           includeSystemActions: false,
         }),

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connector_types.ts

@@ -11,13 +11,14 @@ import { useQuery } from '@tanstack/react-query';
 import type { HttpStart } from '@kbn/core-http-browser';
 import { fetchConnectorTypes } from '../apis';
 
-export interface UseLoadActionTypesProps {
+export interface UseLoadConnectorTypesProps {
   http: HttpStart;
   includeSystemActions?: boolean;
+  enabled?: boolean;
 }
 
-export const useLoadActionTypes = (props: UseLoadActionTypesProps) => {
-  const { http, includeSystemActions } = props;
+export const useLoadConnectorTypes = (props: UseLoadConnectorTypesProps) => {
+  const { http, includeSystemActions, enabled = true } = props;
 
   const queryFn = () => {
     return fetchConnectorTypes({ http, includeSystemActions });
@@ -27,6 +28,7 @@ export const useLoadActionTypes = (props: UseLoadActionTypesProps) => {
     queryKey: ['useLoadConnectorTypes', includeSystemActions],
     queryFn,
     refetchOnWindowFocus: false,
+    enabled,
   });
 
   return {

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_connectors.ts

@@ -14,10 +14,11 @@ import { fetchConnectors } from '../apis';
 export interface UseLoadConnectorsProps {
   http: HttpStart;
   includeSystemActions?: boolean;
+  enabled?: boolean;
 }
 
 export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
-  const { http, includeSystemActions = false } = props;
+  const { http, includeSystemActions = false, enabled = true } = props;
 
   const queryFn = () => {
     return fetchConnectors({ http, includeSystemActions });
@@ -27,6 +28,7 @@ export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
     queryKey: ['useLoadConnectors', includeSystemActions],
     queryFn,
     refetchOnWindowFocus: false,
+    enabled,
   });
 
   return {

packages/kbn-alerts-ui-shared/src/common/hooks/use_load_rule_type_aad_template_fields.ts

@@ -15,14 +15,17 @@ import { fetchRuleTypeAadTemplateFields, getDescription } from '../apis';
 
 export interface UseLoadRuleTypeAadTemplateFieldProps {
   http: HttpStart;
-  ruleTypeId: string;
+  ruleTypeId?: string;
   enabled: boolean;
 }
 
 export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplateFieldProps) => {
   const { http, ruleTypeId, enabled } = props;
 
   const queryFn = () => {
+    if (!ruleTypeId) {
+      return;
+    }
     return fetchRuleTypeAadTemplateFields({ http, ruleTypeId });
   };
 
@@ -35,7 +38,7 @@ export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplat
     queryKey: ['useLoadRuleTypeAadTemplateField', ruleTypeId],
     queryFn,
     select: (dataViewFields) => {
-      return dataViewFields.map<ActionVariable>((d) => ({
+      return dataViewFields?.map<ActionVariable>((d) => ({
         name: d.name,
         description: getDescription(d.name, EcsFlat),
       }));

packages/kbn-alerts-ui-shared/src/common/hooks/use_resolve_rule.ts

@@ -41,6 +41,7 @@ export const useResolveRule = (props: UseResolveProps) => {
       };
     },
     refetchOnWindowFocus: false,
+    retry: false,
   });
 
   return {

packages/kbn-alerts-ui-shared/src/common/test_utils/actions_test_utils.ts

@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { ActionType } from '@kbn/actions-types';
+import { RuleSystemAction } from '@kbn/alerting-types';
+import { ActionConnector, ActionTypeModel, GenericValidationResult, RuleAction } from '../types';
+import { actionTypeRegistryMock } from './action_type_registry.mock';
+
+export const getConnector = (
+  id: string,
+  overwrites?: Partial<ActionConnector>
+): ActionConnector => {
+  return {
+    id: `connector-${id}`,
+    secrets: { secret: 'secret' },
+    actionTypeId: `actionType-${id}`,
+    name: `connector-${id}`,
+    config: { config: `config-${id}` },
+    isPreconfigured: false,
+    isSystemAction: false,
+    isDeprecated: false,
+    ...overwrites,
+  };
+};
+
+export const getAction = (id: string, overwrites?: Partial<RuleAction>): RuleAction => {
+  return {
+    id: `action-${id}`,
+    uuid: `uuid-action-${id}`,
+    group: `group-${id}`,
+    actionTypeId: `actionType-${id}`,
+    params: {},
+    ...overwrites,
+  };
+};
+
+export const getSystemAction = (
+  id: string,
+  overwrites?: Partial<RuleSystemAction>
+): RuleSystemAction => {
+  return {
+    uuid: `uuid-system-action-${id}`,
+    id: `system-action-${id}`,
+    actionTypeId: `actionType-${id}`,
+    params: {},
+    ...overwrites,
+  };
+};
+
+export const getActionType = (id: string, overwrites?: Partial<ActionType>): ActionType => {
+  return {
+    id: `actionType-${id}`,
+    name: `actionType: ${id}`,
+    enabled: true,
+    enabledInConfig: true,
+    enabledInLicense: true,
+    minimumLicenseRequired: 'basic',
+    supportedFeatureIds: ['stackAlerts'],
+    isSystemActionType: false,
+    ...overwrites,
+  };
+};
+
+export const getActionTypeModel = (
+  id: string,
+  overwrites?: Partial<ActionTypeModel>
+): ActionTypeModel => {
+  return actionTypeRegistryMock.createMockActionTypeModel({
+    id: `actionTypeModel-${id}`,
+    iconClass: 'test',
+    selectMessage: 'test',
+    validateParams: (): Promise<GenericValidationResult<unknown>> => {
+      const validationResult = { errors: {} };
+      return Promise.resolve(validationResult);
+    },
+    actionConnectorFields: null,
+    ...overwrites,
+  });
+};

packages/kbn-alerts-ui-shared/src/common/types/rule_types.ts

@@ -43,6 +43,10 @@ export interface RuleFormBaseErrors {
   tags?: string[];
 }
 
+export interface RuleFormActionsErrors {
+  filterQuery?: string[];
+}
+
 export interface RuleFormParamsErrors {
   [key: string]: string | string[] | RuleFormParamsErrors;
 }

packages/kbn-alerts-ui-shared/src/rule_form/constants.ts

@@ -32,10 +32,12 @@ export const GET_DEFAULT_FORM_DATA = ({
   name,
   consumer,
   schedule,
+  actions,
 }: {
   ruleTypeId: RuleFormData['ruleTypeId'];
   name: RuleFormData['name'];
   consumer: RuleFormData['consumer'];
+  actions: RuleFormData['actions'];
   schedule?: RuleFormData['schedule'];
 }) => {
   return {
@@ -47,6 +49,7 @@ export const GET_DEFAULT_FORM_DATA = ({
     consumer,
     ruleTypeId,
     name,
+    actions,
   };
 };
 

packages/kbn-alerts-ui-shared/src/rule_form/create_rule_form.tsx

@@ -10,9 +10,9 @@
 import React, { useCallback } from 'react';
 import { EuiLoadingElastic } from '@elastic/eui';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import type { RuleCreationValidConsumer } from '@kbn/rule-data-utils';
+import { type RuleCreationValidConsumer } from '@kbn/rule-data-utils';
 import type { RuleFormData, RuleFormPlugins } from './types';
-import { ALERTING_FEATURE_ID, DEFAULT_VALID_CONSUMERS, GET_DEFAULT_FORM_DATA } from './constants';
+import { DEFAULT_VALID_CONSUMERS, GET_DEFAULT_FORM_DATA } from './constants';
 import { RuleFormStateProvider } from './rule_form_state';
 import { useCreateRule } from '../common/hooks';
 import { RulePage } from './rule_page';
@@ -40,23 +40,27 @@ export interface CreateRuleFormProps {
   validConsumers?: RuleCreationValidConsumer[];
   filteredRuleTypes?: string[];
   shouldUseRuleProducer?: boolean;
+  canShowConsumerSelection?: boolean;
+  showMustacheAutocompleteSwitch?: boolean;
   returnUrl: string;
 }
 
 export const CreateRuleForm = (props: CreateRuleFormProps) => {
   const {
     ruleTypeId,
     plugins,
-    consumer = ALERTING_FEATURE_ID,
+    consumer = 'alerts',
     multiConsumerSelection,
     validConsumers = DEFAULT_VALID_CONSUMERS,
     filteredRuleTypes = [],
     shouldUseRuleProducer = false,
+    canShowConsumerSelection = true,
+    showMustacheAutocompleteSwitch = false,
     returnUrl,
   } = props;
 
-  const { http, docLinks, notification, ruleTypeRegistry, i18n, theme } = plugins;
-  const { toasts } = notification;
+  const { http, docLinks, notifications, ruleTypeRegistry, i18n, theme } = plugins;
+  const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useCreateRule({
     http,
@@ -79,16 +83,25 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     },
   });
 
-  const { isInitialLoading, ruleType, ruleTypeModel, uiConfig, healthCheckError } =
-    useLoadDependencies({
-      http,
-      toasts: notification.toasts,
-      ruleTypeRegistry,
-      ruleTypeId,
-      consumer,
-      validConsumers,
-      filteredRuleTypes,
-    });
+  const {
+    isInitialLoading,
+    ruleType,
+    ruleTypeModel,
+    uiConfig,
+    healthCheckError,
+    connectors,
+    connectorTypes,
+    aadTemplateFields,
+  } = useLoadDependencies({
+    http,
+    toasts: notifications.toasts,
+    capabilities: plugins.application.capabilities,
+    ruleTypeRegistry,
+    ruleTypeId,
+    consumer,
+    validConsumers,
+    filteredRuleTypes,
+  });
 
   const onSave = useCallback(
     (newFormData: RuleFormData) => {
@@ -101,8 +114,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           tags: newFormData.tags,
           params: newFormData.params,
           schedule: newFormData.schedule,
-          // TODO: Will add actions in the actions PR
-          actions: [],
+          actions: newFormData.actions,
           notifyWhen: newFormData.notifyWhen,
           alertDelay: newFormData.alertDelay,
         },
@@ -151,12 +163,18 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
               ruleType,
               minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
             }),
+            actions: [],
           }),
           plugins,
+          connectors,
+          connectorTypes,
+          aadTemplateFields,
           minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
           selectedRuleTypeModel: ruleTypeModel,
           selectedRuleType: ruleType,
           validConsumers,
+          canShowConsumerSelection,
+          showMustacheAutocompleteSwitch,
           multiConsumerSelection: getInitialMultiConsumer({
             multiConsumerSelection,
             validConsumers,