[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/flyout/README.md

@@ -0,0 +1,5 @@
+This export path is only for lazy loading the flyout. Importing `@kbn/response-ops-rule-form` directly generally increases a plugin's bundle size unnecessarily.
+
+Flyout UI is handled at the root of this component to avoid UI glitches. We want to render loading states and the fully loaded flyout body within the same <EuiFlyout> component, otherwise the user will see multiple flyouts and overlay masks flickering in and out.
+
+This should be the ONLY export path for contexts that use the rule form as a flyout and not as the full page.

src/platform/packages/shared/response-ops/rule_form/flyout/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 './rule_form_flyout';

src/platform/packages/shared/response-ops/rule_form/flyout/rule_form_flyout.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { EuiFlyoutResizable, EuiLoadingElastic } from '@elastic/eui';
+import React, { Suspense, lazy, useCallback } from 'react';
+import type { RuleFormProps } from '../src/rule_form';
+import type { RuleTypeMetaData } from '../src/types';
+import {
+  RuleFlyoutUIContextProvider,
+  useRuleFlyoutUIContext,
+  RuleFormErrorPromptWrapper,
+} from '../lib';
+
+const RuleForm: React.LazyExoticComponent<React.FC<RuleFormProps<any>>> = lazy(() =>
+  import('../src/rule_form').then((module) => ({ default: module.RuleForm }))
+);
+
+const RuleFormFlyoutWithContext = <MetaData extends RuleTypeMetaData>(
+  props: RuleFormProps<MetaData>
+) => {
+  const { onClickClose, hideCloseButton } = useRuleFlyoutUIContext();
+  const onClose = useCallback(() => {
+    if (onClickClose) {
+      onClickClose();
+    } else {
+      props.onCancel?.();
+    }
+  }, [onClickClose, props]);
+  return (
+    <EuiFlyoutResizable
+      ownFocus
+      onClose={onClose}
+      aria-labelledby="flyoutTitle"
+      size={620}
+      minWidth={500}
+      className="ruleFormFlyout__container"
+      hideCloseButton={hideCloseButton}
+    >
+      <Suspense
+        fallback={
+          <RuleFormErrorPromptWrapper hasBorder={false} hasShadow={false}>
+            <EuiLoadingElastic size="xl" />
+          </RuleFormErrorPromptWrapper>
+        }
+      >
+        <RuleForm {...props} isFlyout />
+      </Suspense>
+    </EuiFlyoutResizable>
+  );
+};
+
+export const RuleFormFlyout = <MetaData extends RuleTypeMetaData>(
+  props: RuleFormProps<MetaData>
+) => {
+  return (
+    <RuleFlyoutUIContextProvider>
+      <RuleFormFlyoutWithContext {...props} />
+    </RuleFlyoutUIContextProvider>
+  );
+};

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/lib/README.md

@@ -0,0 +1 @@
+This export path is for utility functions that might be necessary both for plugins that import from `@kbn/response-ops-rule-form` or from `@kbn/response-ops-rule-form/flyout` to keep their bundle size down.

src/platform/packages/shared/response-ops/rule_form/lib/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 './is_valid_rule_form_plugins';
+export * from './rule_flyout_ui_context';
+export * from './rule_form_error_prompt_wrapper';

src/platform/packages/shared/response-ops/rule_form/lib/is_valid_rule_form_plugins.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 type { RuleFormProps } from '../src/rule_form';
+
+const requiredPluginNames = [
+  'http',
+  'i18n',
+  'theme',
+  'userProfile',
+  'application',
+  'notifications',
+  'charts',
+  'settings',
+  'data',
+  'unifiedSearch',
+  'docLinks',
+  'dataViews',
+];
+
+type RequiredRuleFormPlugins = Omit<
+  RuleFormProps['plugins'],
+  'actionTypeRegistry' | 'ruleTypeRegistry'
+>;
+export const isValidRuleFormPlugins = (input: unknown): input is RequiredRuleFormPlugins => {
+  if (typeof input !== 'object' || input === null) {
+    return false;
+  }
+
+  requiredPluginNames.forEach((pluginName) => {
+    if (!(pluginName in input)) {
+      // eslint-disable-next-line no-console
+      console.error(`RuleForm plugins is missing required plugin: ${pluginName}`);
+      return false;
+    }
+  });
+
+  return true;
+};

src/platform/packages/shared/response-ops/rule_form/lib/rule_flyout_ui_context.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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, { createContext, useState } from 'react';
+
+const initialRuleFlyoutUIContext: {
+  onClickClose: (() => void) | null;
+  hideCloseButton: boolean;
+  setOnClickClose: (onClickClose: () => void) => void;
+  setHideCloseButton: (hideCloseButton: boolean) => void;
+} = {
+  onClickClose: null,
+  hideCloseButton: false,
+  setOnClickClose: () => {},
+  setHideCloseButton: () => {},
+};
+
+export const RuleFlyoutUIContext = createContext(initialRuleFlyoutUIContext);
+
+export const RuleFlyoutUIContextProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [onClickClose, setOnClickClose] = useState<(() => void) | null>(null);
+  const [hideCloseButton, setHideCloseButton] = useState<boolean>(false);
+  return (
+    <RuleFlyoutUIContext.Provider
+      value={{
+        onClickClose,
+        hideCloseButton,
+        setOnClickClose,
+        setHideCloseButton,
+      }}
+    >
+      {children}
+    </RuleFlyoutUIContext.Provider>
+  );
+};
+
+export const useRuleFlyoutUIContext = () => {
+  return React.useContext(RuleFlyoutUIContext);
+};

src/platform/packages/shared/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx → src/platform/packages/shared/response-ops/rule_form/lib/rule_form_error_prompt_wrapper.tsx

@@ -13,14 +13,16 @@ import { EuiPageTemplate } from '@elastic/eui';
 interface RuleFormErrorPromptWrapperProps {
   hasBorder?: boolean;
   hasShadow?: boolean;
+  isFlyout?: boolean;
 }
 
 export const RuleFormErrorPromptWrapper: React.FC<
   React.PropsWithChildren<RuleFormErrorPromptWrapperProps>
-> = ({ children, hasBorder, hasShadow }) => {
+> = ({ children, hasBorder, hasShadow, isFlyout }) => {
   const styles = {
     backgroundColor: 'transparent',
   };
+
   return (
     <EuiPageTemplate offset={0} css={styles}>
       <EuiPageTemplate.EmptyPrompt paddingSize="none" hasBorder={hasBorder} hasShadow={hasShadow}>

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,