[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,72 @@
+/*
+ * 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 RuleFormFlyoutRenderer = <MetaData extends RuleTypeMetaData>(
+  props: RuleFormProps<MetaData>
+) => {
+  const { onClickClose, hideCloseButton } = useRuleFlyoutUIContext();
+  const onClose = useCallback(() => {
+    // If onClickClose has been initialized, call it instead of onCancel. onClickClose should be used to
+    // determine if the close confirmation modal should be shown. props.onCancel is passed down the component hierarchy
+    // and will be called 1) by onClickClose, if the confirmation modal doesn't need to be shown, or 2) by the confirm
+    // button on the confirmation modal
+    if (onClickClose) {
+      onClickClose();
+    } else {
+      // ONLY call props.onCancel directly from this level of the component hierarcht if onClickClose has not yet been initialized.
+      // This will only occur if the user tries to close the flyout while the Suspense fallback is still visible
+      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>
+      <RuleFormFlyoutRenderer {...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,47 @@
+/*
+ * 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',
+  'fieldsMetadata',
+];
+
+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

@@ -21,6 +21,7 @@ export const RuleFormErrorPromptWrapper: React.FC<
   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.test.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { waitFor, renderHook } from '@testing-library/react';
 import { httpServiceMock } from '@kbn/core/public/mocks';
+import { EcsFlat } from '@elastic/ecs';
 
 import { useLoadRuleTypeAadTemplateField } from './use_load_rule_type_aad_template_fields';
 
@@ -21,6 +22,14 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 const http = httpServiceMock.createStartContract();
+const fieldsMetadataMock = {
+  useFieldsMetadata: jest.fn(),
+  getClient: jest.fn(() =>
+    Promise.resolve({
+      find: () => Promise.resolve({ fields: EcsFlat }),
+    })
+  ),
+};
 
 describe('useLoadRuleTypeAadTemplateFields', () => {
   beforeEach(() => {
@@ -43,6 +52,7 @@ describe('useLoadRuleTypeAadTemplateFields', () => {
       () =>
         useLoadRuleTypeAadTemplateField({
           http,
+          fieldsMetadata: fieldsMetadataMock,
           ruleTypeId: 'ruleTypeId',
           enabled: true,
         }),

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

@@ -7,29 +7,42 @@
  * 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';
 import {
   fetchRuleTypeAadTemplateFields,
   getDescription,
 } from '@kbn/alerts-ui-shared/src/common/apis';
+import { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/public';
 
 export interface UseLoadRuleTypeAadTemplateFieldProps {
   http: HttpStart;
   ruleTypeId?: string;
   enabled: boolean;
   cacheTime?: number;
+  fieldsMetadata?: FieldsMetadataPublicStart;
 }
 
 export const useLoadRuleTypeAadTemplateField = (props: UseLoadRuleTypeAadTemplateFieldProps) => {
-  const { http, ruleTypeId, enabled, cacheTime } = props;
+  const ecsFlat = useRef<Record<string, any>>({});
+  const { http, ruleTypeId, enabled, cacheTime, fieldsMetadata } = props;
 
   const queryFn = async () => {
     if (!ruleTypeId) {
       return;
     }
+
+    if (isEmpty(ecsFlat.current)) {
+      const fmClient = await fieldsMetadata?.getClient();
+      if (fmClient) {
+        const { fields } = await fmClient.find({});
+        ecsFlat.current = fields;
+      }
+    }
+
     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>
+  );
+};