[Response Ops][Rules] Add New Rule Form to Stack Management

packages/kbn-alerts-ui-shared/src/common/apis/update_rule/transform_update_rule_body.ts

@@ -54,6 +54,6 @@ export const transformUpdateRuleBody: RewriteResponseCase<UpdateRuleBody> = ({
       ...(uuid && { uuid }),
     };
   }),
-  ...(alertDelay ? { alert_delay: alertDelay } : {}),
+  ...(alertDelay !== undefined ? { alert_delay: alertDelay } : {}),
   ...(flapping !== undefined ? { flapping: transformUpdateRuleFlapping(flapping) } : {}),
 });

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

@@ -8,4 +8,4 @@
  */
 
 // Feature flag for frontend rule specific flapping in rule flyout
-export const IS_RULE_SPECIFIC_FLAPPING_ENABLED = false;
+export const IS_RULE_SPECIFIC_FLAPPING_ENABLED = true;

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

@@ -10,10 +10,11 @@
 import { useMutation } from '@tanstack/react-query';
 import type { HttpStart, IHttpFetchError } from '@kbn/core-http-browser';
 import { createRule, CreateRuleBody } from '../apis/create_rule';
+import { Rule } from '../types';
 
 export interface UseCreateRuleProps {
   http: HttpStart;
-  onSuccess?: (formData: CreateRuleBody) => void;
+  onSuccess?: (rule: Rule) => void;
   onError?: (error: IHttpFetchError<{ message: string }>) => void;
 }
 

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

@@ -15,10 +15,11 @@ export interface UseLoadConnectorsProps {
   http: HttpStart;
   includeSystemActions?: boolean;
   enabled?: boolean;
+  cacheTime?: number;
 }
 
 export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
-  const { http, includeSystemActions = false, enabled = true } = props;
+  const { http, includeSystemActions = false, enabled = true, cacheTime } = props;
 
   const queryFn = () => {
     return fetchConnectors({ http, includeSystemActions });
@@ -27,6 +28,7 @@ export const useLoadConnectors = (props: UseLoadConnectorsProps) => {
   const { data, isLoading, isFetching, isInitialLoading } = useQuery({
     queryKey: ['useLoadConnectors', includeSystemActions],
     queryFn,
+    cacheTime,
     refetchOnWindowFocus: false,
     enabled,
   });

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

@@ -17,10 +17,11 @@ export interface UseLoadRuleTypeAadTemplateFieldProps {
   http: HttpStart;
   ruleTypeId?: string;
   enabled: boolean;
+  cacheTime?: number;
 }
 
 export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplateFieldProps) => {
-  const { http, ruleTypeId, enabled } = props;
+  const { http, ruleTypeId, enabled, cacheTime } = props;
 
   const queryFn = () => {
     if (!ruleTypeId) {
@@ -43,6 +44,7 @@ export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplat
         description: getDescription(d.name, EcsFlat),
       }));
     },
+    cacheTime,
     refetchOnWindowFocus: false,
     enabled,
   });

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

@@ -15,10 +15,11 @@ import { RuleFormData } from '../../rule_form';
 export interface UseResolveProps {
   http: HttpStart;
   id?: string;
+  cacheTime?: number;
 }
 
 export const useResolveRule = (props: UseResolveProps) => {
-  const { id, http } = props;
+  const { id, http, cacheTime } = props;
 
   const queryFn = () => {
     if (id) {
@@ -30,6 +31,7 @@ export const useResolveRule = (props: UseResolveProps) => {
     queryKey: ['useResolveRule', id],
     queryFn,
     enabled: !!id,
+    cacheTime,
     select: (rule): RuleFormData | null => {
       if (!rule) {
         return null;

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

@@ -10,10 +10,11 @@
 import { useMutation } from '@tanstack/react-query';
 import type { HttpStart, IHttpFetchError } from '@kbn/core-http-browser';
 import { updateRule, UpdateRuleBody } from '../apis/update_rule';
+import { Rule } from '../types';
 
 export interface UseUpdateRuleProps {
   http: HttpStart;
-  onSuccess?: (formData: UpdateRuleBody) => void;
+  onSuccess?: (rule: Rule) => void;
   onError?: (error: IHttpFetchError<{ message: string }>) => void;
 }
 

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

@@ -27,8 +27,6 @@ import { TypeRegistry } from '../type_registry';
 
 export type { SanitizedRuleAction as RuleAction } from '@kbn/alerting-types';
 
-export type { Flapping } from '@kbn/alerting-types';
-
 export type RuleTypeWithDescription = RuleType<string, string> & { description?: string };
 
 export type RuleTypeIndexWithDescriptions = Map<string, RuleTypeWithDescription>;

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

@@ -27,7 +27,7 @@ export const DEFAULT_FREQUENCY = {
   summary: false,
 };
 
-export const GET_DEFAULT_FORM_DATA = ({
+export const getDefaultFormData = ({
   ruleTypeId,
   name,
   consumer,
@@ -50,6 +50,7 @@ export const GET_DEFAULT_FORM_DATA = ({
     ruleTypeId,
     name,
     actions,
+    alertDelay: { active: 1 },
   };
 };
 

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

@@ -12,7 +12,7 @@ import { EuiLoadingElastic } from '@elastic/eui';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { type RuleCreationValidConsumer } from '@kbn/rule-data-utils';
 import type { RuleFormData, RuleFormPlugins } from './types';
-import { DEFAULT_VALID_CONSUMERS, GET_DEFAULT_FORM_DATA } from './constants';
+import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';
 import { RuleFormStateProvider } from './rule_form_state';
 import { useCreateRule } from '../common/hooks';
 import { RulePage } from './rule_page';
@@ -24,6 +24,7 @@ import {
 } from './rule_form_errors';
 import { useLoadDependencies } from './hooks/use_load_dependencies';
 import {
+  getAvailableRuleTypes,
   getInitialConsumer,
   getInitialMultiConsumer,
   getInitialSchedule,
@@ -42,7 +43,8 @@ export interface CreateRuleFormProps {
   shouldUseRuleProducer?: boolean;
   canShowConsumerSelection?: boolean;
   showMustacheAutocompleteSwitch?: boolean;
-  returnUrl: string;
+  onCancel?: () => void;
+  onSubmit?: (ruleId: string) => void;
 }
 
 export const CreateRuleForm = (props: CreateRuleFormProps) => {
@@ -56,16 +58,18 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     shouldUseRuleProducer = false,
     canShowConsumerSelection = true,
     showMustacheAutocompleteSwitch = false,
-    returnUrl,
+    onCancel,
+    onSubmit,
   } = props;
 
   const { http, docLinks, notifications, ruleTypeRegistry, i18n, theme } = plugins;
   const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useCreateRule({
     http,
-    onSuccess: ({ name }) => {
+    onSuccess: ({ name, id }) => {
       toasts.addSuccess(RULE_CREATE_SUCCESS_TEXT(name));
+      onSubmit?.(id);
     },
     onError: (error) => {
       const message = parseRuleCircuitBreakerErrorMessage(
@@ -86,6 +90,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
   const {
     isInitialLoading,
     ruleType,
+    ruleTypes,
     ruleTypeModel,
     uiConfig,
     healthCheckError,
@@ -153,7 +158,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     <div data-test-subj="createRuleForm">
       <RuleFormStateProvider
         initialRuleFormState={{
-          formData: GET_DEFAULT_FORM_DATA({
+          formData: getDefaultFormData({
             ruleTypeId,
             name: `${ruleType.name} rule`,
             consumer: getInitialConsumer({
@@ -174,6 +179,11 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
           selectedRuleTypeModel: ruleTypeModel,
           selectedRuleType: ruleType,
+          availableRuleTypes: getAvailableRuleTypes({
+            consumer,
+            ruleTypes,
+            ruleTypeRegistry,
+          }).map(({ ruleType: rt }) => rt),
           validConsumers,
           flappingSettings,
           canShowConsumerSelection,
@@ -185,7 +195,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           }),
         }}
       >
-        <RulePage isEdit={false} isSaving={isSaving} returnUrl={returnUrl} onSave={onSave} />
+        <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />
       </RuleFormStateProvider>
     </div>
   );

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

@@ -24,24 +24,27 @@ import {
   RuleFormRuleTypeError,
 } from './rule_form_errors';
 import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';
-import { parseRuleCircuitBreakerErrorMessage } from './utils';
+import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';
+import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';
 
 export interface EditRuleFormProps {
   id: string;
   plugins: RuleFormPlugins;
   showMustacheAutocompleteSwitch?: boolean;
-  returnUrl: string;
+  onCancel?: () => void;
+  onSubmit?: (ruleId: string) => void;
 }
 
 export const EditRuleForm = (props: EditRuleFormProps) => {
-  const { id, plugins, returnUrl, showMustacheAutocompleteSwitch = false } = props;
+  const { id, plugins, showMustacheAutocompleteSwitch = false, onCancel, onSubmit } = props;
   const { http, notifications, docLinks, ruleTypeRegistry, i18n, theme, application } = plugins;
   const { toasts } = notifications;
 
   const { mutate, isLoading: isSaving } = useUpdateRule({
     http,
     onSuccess: ({ name }) => {
       toasts.addSuccess(RULE_EDIT_SUCCESS_TEXT(name));
+      onSubmit?.(id);
     },
     onError: (error) => {
       const message = parseRuleCircuitBreakerErrorMessage(
@@ -62,6 +65,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
   const {
     isInitialLoading,
     ruleType,
+    ruleTypes,
     ruleTypeModel,
     uiConfig,
     healthCheckError,
@@ -156,17 +160,31 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
           connectors,
           connectorTypes,
           aadTemplateFields,
-          formData: fetchedFormData,
+          formData: {
+            ...getDefaultFormData({
+              ruleTypeId: fetchedFormData.ruleTypeId,
+              name: fetchedFormData.name,
+              consumer: fetchedFormData.consumer,
+              actions: fetchedFormData.actions,
+            }),
+            ...fetchedFormData,
+          },
           id,
           plugins,
           minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
           selectedRuleType: ruleType,
           selectedRuleTypeModel: ruleTypeModel,
+          availableRuleTypes: getAvailableRuleTypes({
+            consumer: fetchedFormData.consumer,
+            ruleTypes,
+            ruleTypeRegistry,
+          }).map(({ ruleType: rt }) => rt),
           flappingSettings,
+          validConsumers: DEFAULT_VALID_CONSUMERS,
           showMustacheAutocompleteSwitch,
         }}
       >
-        <RulePage isEdit={true} isSaving={isSaving} returnUrl={returnUrl} onSave={onSave} />
+        <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />
       </RuleFormStateProvider>
     </div>
   );

packages/kbn-alerts-ui-shared/src/rule_form/hooks/use_load_dependencies.test.tsx

@@ -46,10 +46,6 @@ jest.mock('../../common/hooks/use_load_rule_type_aad_template_fields', () => ({
   useLoadRuleTypeAadTemplateField: jest.fn(),
 }));
 
-jest.mock('../utils/get_authorized_rule_types', () => ({
-  getAvailableRuleTypes: jest.fn(),
-}));
-
 jest.mock('../../common/hooks/use_fetch_flapping_settings', () => ({
   useFetchFlappingSettings: jest.fn(),
 }));
@@ -63,7 +59,6 @@ const { useLoadRuleTypeAadTemplateField } = jest.requireMock(
   '../../common/hooks/use_load_rule_type_aad_template_fields'
 );
 const { useLoadRuleTypesQuery } = jest.requireMock('../../common/hooks/use_load_rule_types_query');
-const { getAvailableRuleTypes } = jest.requireMock('../utils/get_authorized_rule_types');
 const { useFetchFlappingSettings } = jest.requireMock(
   '../../common/hooks/use_fetch_flapping_settings'
 );
@@ -168,13 +163,6 @@ useLoadRuleTypesQuery.mockReturnValue({
   },
 });
 
-getAvailableRuleTypes.mockReturnValue([
-  {
-    ruleType: indexThresholdRuleType,
-    ruleTypeModel: indexThresholdRuleTypeModel,
-  },
-]);
-
 const mockConnector = {
   id: 'test-connector',
   name: 'Test',
@@ -236,7 +224,7 @@ const toastsMock = jest.fn();
 const ruleTypeRegistryMock: RuleTypeRegistryContract = {
   has: jest.fn(),
   register: jest.fn(),
-  get: jest.fn(),
+  get: jest.fn().mockReturnValue(indexThresholdRuleTypeModel),
   list: jest.fn(),
 };
 
@@ -272,6 +260,7 @@ describe('useLoadDependencies', () => {
       isLoading: false,
       isInitialLoading: false,
       ruleType: indexThresholdRuleType,
+      ruleTypes: [...ruleTypeIndex.values()],
       ruleTypeModel: indexThresholdRuleTypeModel,
       uiConfig: uiConfigMock,
       healthCheckError: null,
@@ -317,39 +306,6 @@ describe('useLoadDependencies', () => {
     });
   });
 
-  test('should call getAvailableRuleTypes with the correct params', async () => {
-    const { result } = renderHook(
-      () => {
-        return useLoadDependencies({
-          http: httpMock as unknown as HttpStart,
-          toasts: toastsMock as unknown as ToastsStart,
-          ruleTypeRegistry: ruleTypeRegistryMock,
-          validConsumers: ['stackAlerts', 'logs'],
-          consumer: 'logs',
-          capabilities: {
-            actions: {
-              show: true,
-              save: true,
-              execute: true,
-            },
-          } as unknown as ApplicationStart['capabilities'],
-        });
-      },
-      { wrapper }
-    );
-
-    await waitFor(() => {
-      return expect(result.current.isInitialLoading).toEqual(false);
-    });
-
-    expect(getAvailableRuleTypes).toBeCalledWith({
-      consumer: 'logs',
-      ruleTypeRegistry: ruleTypeRegistryMock,
-      ruleTypes: [indexThresholdRuleType],
-      validConsumers: ['stackAlerts', 'logs'],
-    });
-  });
-
   test('should call resolve rule with the correct params', async () => {
     const { result } = renderHook(
       () => {
@@ -377,6 +333,7 @@ describe('useLoadDependencies', () => {
     expect(useResolveRule).toBeCalledWith({
       http: httpMock,
       id: 'test-rule-id',
+      cacheTime: 0,
     });
   });