[Response Ops] [Rule Form] Add Rule Form Flyout v2

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

@@ -32,6 +32,7 @@ export type RuleTypeWithDescription = RuleType<string, string> & { description?:
 export type RuleTypeIndexWithDescriptions = Map<string, RuleTypeWithDescription>;
 
 export type RuleTypeParams = Record<string, unknown>;
+export type RuleTypeMetaData = Record<string, unknown>;
 
 export interface RuleFormBaseErrors {
   name?: string[];
@@ -104,7 +105,7 @@ export interface RuleTypeParamsExpressionProps<
   metadata?: MetaData;
   charts: ChartsPluginSetup;
   data: DataPublicPluginStart;
-  dataViews: DataViewsPublicPluginStart;
+  dataViews?: DataViewsPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
 }
 

src/platform/packages/shared/response-ops/rule_form/index.ts

@@ -10,7 +10,7 @@
 export * from './src/types';
 export * from './src/rule_type_modal';
 
-export { RuleForm } from './src/rule_form';
+export { RuleForm, type RuleFormProps } from './src/rule_form';
 
 export {
   fetchUiConfig,

src/platform/packages/shared/response-ops/rule_form/src/common/hooks/use_load_rule_type_aad_template_fields.ts

@@ -7,7 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EcsFlat } from '@elastic/ecs';
+import { useRef } from 'react';
+import { isEmpty } from 'lodash';
 import { ActionVariable } from '@kbn/alerting-types';
 import type { HttpStart } from '@kbn/core-http-browser';
 import { useQuery } from '@tanstack/react-query';
@@ -24,12 +25,24 @@ export interface UseLoadRuleTypeAadTemplateFieldProps {
 }
 
 export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplateFieldProps) => {
+  const ecsFlat = useRef<Record<string, any>>({});
   const { http, ruleTypeId, enabled, cacheTime } = props;
 
   const queryFn = async () => {
     if (!ruleTypeId) {
       return;
     }
+    if (isEmpty(ecsFlat.current)) {
+      // If we use import { EcsFlat } from '@elastic/ecs' then it will sometimes balloon the bundle size
+      // by about 1MB, or not, depending on how Webpack is feeling today. If you delete this dynamic import,
+      // it's possible that it won't make the bundle size explode, and then you will commit that change, and
+      // we will all continue to live our lives safe and secure, falsely believing that the danger has passed,
+      // until one day somebody makes another change to this package and, for mysterious, unknowable reasons,
+      // Webpack decides that today the bundle size shall be engorged once again.
+      // To avoid all that maybe just don't delete this dynamic import.
+      ecsFlat.current = await import('@elastic/ecs').then((ecs) => ecs.EcsFlat);
+    }
+
     return fetchRuleTypeAadTemplateFields({ http, ruleTypeId });
   };
 
@@ -44,7 +57,7 @@ export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplat
     select: (dataViewFields) => {
       return dataViewFields?.map<ActionVariable>((d) => ({
         name: d.name,
-        description: getDescription(d.name, EcsFlat),
+        description: getDescription(d.name, ecsFlat.current),
       }));
     },
     cacheTime,

src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page_confirm_create_rule.tsx → src/platform/packages/shared/response-ops/rule_form/src/components/confirm_create_rule/confirm_create_rule.tsx

@@ -14,19 +14,19 @@ import {
   CONFIRM_RULE_SAVE_CONFIRM_BUTTON_TEXT,
   CONFIRM_RULE_SAVE_CANCEL_BUTTON_TEXT,
   CONFIRM_RULE_SAVE_MESSAGE_TEXT,
-} from '../translations';
+} from '../../translations';
 
-export interface RulePageConfirmCreateRuleProps {
+export interface ConfirmCreateRuleProps {
   onCancel: () => void;
   onConfirm: () => void;
 }
 
-export const RulePageConfirmCreateRule = (props: RulePageConfirmCreateRuleProps) => {
+export const ConfirmCreateRule = (props: ConfirmCreateRuleProps) => {
   const { onCancel, onConfirm } = props;
 
   return (
     <EuiConfirmModal
-      data-test-subj="rulePageConfirmCreateRule"
+      data-test-subj="confirmCreateRuleModal"
       title={CONFIRMATION_RULE_SAVE_TITLE}
       onCancel={onCancel}
       onConfirm={onConfirm}

src/platform/packages/shared/response-ops/rule_form/src/components/confirm_create_rule/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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".
+ */
+
+export * from './confirm_create_rule';

src/platform/packages/shared/response-ops/rule_form/src/components/confirm_rule_close/confirm_rule_close.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+import { EuiConfirmModal, EuiText } from '@elastic/eui';
+import {
+  RULE_FORM_CANCEL_MODAL_TITLE,
+  RULE_FORM_CANCEL_MODAL_CONFIRM,
+  RULE_FORM_CANCEL_MODAL_CANCEL,
+  RULE_FORM_CANCEL_MODAL_DESCRIPTION,
+} from '../../translations';
+
+export interface ConfirmRuleCloseRuleProps {
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const ConfirmRuleClose = (props: ConfirmRuleCloseRuleProps) => {
+  const { onCancel, onConfirm } = props;
+
+  return (
+    <EuiConfirmModal
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      data-test-subj="confirmRuleCloseModal"
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+      title={RULE_FORM_CANCEL_MODAL_TITLE}
+      confirmButtonText={RULE_FORM_CANCEL_MODAL_CONFIRM}
+      cancelButtonText={RULE_FORM_CANCEL_MODAL_CANCEL}
+    >
+      <EuiText>
+        <p>{RULE_FORM_CANCEL_MODAL_DESCRIPTION}</p>
+      </EuiText>
+    </EuiConfirmModal>
+  );
+};

src/platform/packages/shared/response-ops/rule_form/src/components/confirm_rule_close/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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".
+ */
+
+export * from './confirm_rule_close';

src/platform/packages/shared/response-ops/rule_form/src/components/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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".
+ */
+
+export * from './request_code_block';
+export * from './confirm_create_rule';
+export * from './confirm_rule_close';

src/platform/packages/shared/response-ops/rule_form/src/request_code_block/request_code_block.tsx → src/platform/packages/shared/response-ops/rule_form/src/components/request_code_block/request_code_block.tsx

@@ -16,11 +16,11 @@ import {
   UpdateRuleBody,
   transformCreateRuleBody,
   transformUpdateRuleBody,
-} from '../common/apis';
-import { BASE_ALERTING_API_PATH } from '../constants';
-import { useRuleFormState } from '../hooks';
-import { SHOW_REQUEST_MODAL_ERROR } from '../translations';
-import { RuleFormData } from '../types';
+} from '../../common/apis';
+import { BASE_ALERTING_API_PATH } from '../../constants';
+import { useRuleFormState } from '../../hooks';
+import { SHOW_REQUEST_MODAL_ERROR } from '../../translations';
+import { RuleFormData } from '../../types';
 
 const stringifyBodyRequest = ({
   formData,

src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx

@@ -11,11 +11,12 @@ 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 { RuleFormData, RuleFormPlugins } from './types';
+import type { RuleFormData, RuleFormPlugins, RuleTypeMetaData } from './types';
 import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';
 import { RuleFormStateProvider } from './rule_form_state';
 import { useCreateRule } from './common/hooks';
 import { RulePage } from './rule_page';
+import { RuleFlyout } from './rule_flyout';
 import {
   RuleFormCircuitBreakerError,
   RuleFormErrorPromptWrapper,
@@ -44,9 +45,13 @@ export interface CreateRuleFormProps {
   shouldUseRuleProducer?: boolean;
   canShowConsumerSelection?: boolean;
   showMustacheAutocompleteSwitch?: boolean;
+  isFlyout?: boolean;
   isServerless?: boolean;
   onCancel?: () => void;
   onSubmit?: (ruleId: string) => void;
+  onChangeMetaData?: (metadata?: RuleTypeMetaData) => void;
+  initialValues?: Partial<RuleFormData>;
+  initialMetadata?: RuleTypeMetaData;
 }
 
 export const CreateRuleForm = (props: CreateRuleFormProps) => {
@@ -61,9 +66,13 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     shouldUseRuleProducer = false,
     canShowConsumerSelection = true,
     showMustacheAutocompleteSwitch = false,
+    isFlyout,
     isServerless = false,
     onCancel,
     onSubmit,
+    onChangeMetaData,
+    initialMetadata,
+    initialValues = {},
   } = props;
 
   const { http, docLinks, notifications, ruleTypeRegistry, ...deps } = plugins;
@@ -158,24 +167,30 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
     );
   }
 
+  const RuleFormUIComponent = isFlyout ? RuleFlyout : RulePage;
+
   return (
     <div data-test-subj="createRuleForm">
       <RuleFormStateProvider
         initialRuleFormState={{
-          formData: getDefaultFormData({
-            ruleTypeId,
-            name: `${ruleType.name} rule`,
-            consumer: getInitialConsumer({
-              consumer,
-              ruleType,
-              shouldUseRuleProducer,
-            }),
-            schedule: getInitialSchedule({
-              ruleType,
-              minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
+          formData: {
+            ...getDefaultFormData({
+              ruleTypeId,
+              name: `${ruleType.name} rule`,
+              consumer: getInitialConsumer({
+                consumer,
+                ruleType,
+                shouldUseRuleProducer,
+              }),
+              schedule: getInitialSchedule({
+                ruleType,
+                minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
+              }),
+              actions: [],
             }),
-            actions: [],
-          }),
+            ...initialValues,
+          },
+          metadata: initialMetadata,
           plugins,
           connectors,
           connectorTypes,
@@ -201,7 +216,13 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           }),
         }}
       >
-        <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />
+        <RuleFormUIComponent
+          isEdit={false}
+          isSaving={isSaving}
+          onCancel={onCancel}
+          onSave={onSave}
+          onChangeMetaData={onChangeMetaData}
+        />
       </RuleFormStateProvider>
     </div>
   );

src/platform/packages/shared/response-ops/rule_form/src/edit_rule_form.tsx

@@ -10,10 +10,11 @@
 import React, { useCallback, useMemo } from 'react';
 import { EuiLoadingElastic } from '@elastic/eui';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import type { RuleFormData, RuleFormPlugins } from './types';
+import type { RuleFormData, RuleFormPlugins, RuleTypeMetaData } from './types';
 import { RuleFormStateProvider } from './rule_form_state';
 import { useUpdateRule } from './common/hooks';
 import { RulePage } from './rule_page';
+import { RuleFlyout } from './rule_flyout';
 import { RuleFormHealthCheckError } from './rule_form_errors/rule_form_health_check_error';
 import { useLoadDependencies } from './hooks/use_load_dependencies';
 import {
@@ -32,8 +33,11 @@ export interface EditRuleFormProps {
   plugins: RuleFormPlugins;
   showMustacheAutocompleteSwitch?: boolean;
   connectorFeatureId?: string;
+  isFlyout?: boolean;
   onCancel?: () => void;
   onSubmit?: (ruleId: string) => void;
+  onChangeMetaData?: (metadata?: RuleTypeMetaData) => void;
+  initialMetadata?: RuleTypeMetaData;
 }
 
 export const EditRuleForm = (props: EditRuleFormProps) => {
@@ -44,6 +48,9 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
     connectorFeatureId = 'alerting',
     onCancel,
     onSubmit,
+    isFlyout,
+    onChangeMetaData,
+    initialMetadata,
   } = props;
   const { http, notifications, docLinks, ruleTypeRegistry, application, ...deps } = plugins;
   const { toasts } = notifications;
@@ -179,6 +186,8 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
     return action;
   });
 
+  const RuleFormUIComponent = isFlyout ? RuleFlyout : RulePage;
+
   return (
     <div data-test-subj="editRuleForm">
       <RuleFormStateProvider
@@ -197,6 +206,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
             actions: actionsWithFrequency,
           },
           id,
+          metadata: initialMetadata,
           plugins,
           minimumScheduleInterval: uiConfig?.minimumScheduleInterval,
           selectedRuleType: ruleType,
@@ -211,7 +221,13 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
           showMustacheAutocompleteSwitch,
         }}
       >
-        <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />
+        <RuleFormUIComponent
+          isEdit={true}
+          isSaving={isSaving}
+          onSave={onSave}
+          onCancel={onCancel}
+          onChangeMetaData={onChangeMetaData}
+        />
       </RuleFormStateProvider>
     </div>
   );