[Response Ops] [Rule Form] Add Show Request and Add Action screens to flyout

[Zacqary]

This PR is DEPENDENT on #206141

Because we use a fork-and-pull contribution structure at Elastic, Github is not able to base this PR off the correct branch without opening the PR outside the main Kibana repo. Please use manual diffing tools to review this code until #206401 merges

Summary

Part of #195211

• Adds Show Request screen to the new rule form flyout

Screenshot

• Renders the action connectors UI within the flyout instead of opening a modal

Screenshot

• Duplicates the dropdown filter design from the flyout UI within the action connectors modal when displayed on a smaller screen

Screenshot

Implementation notes

In order to get the action connectors UI to render the same way in both a modal and the flyout, without duplicating a large amount of code, I had to introduce a little bit of complexity. Within the Rule Page, it's as simple as opening the UI inside a modal, but the flyout cannot open a second flyout; it has to know when and how to completely replace its own contents.

• The bulk of the action connectors UI is now moved to <RuleActionsConnectorsBody>. <RuleActionsConnectorsModal> and <RuleFlyoutSelectConnector> act as wrappers for this component.
• The <RuleActions> step no longer handles rendering the connector UI, because it's not at a high enough level to know if it's in the <RulePage> or the <RuleFlyout>. Instead, it simply sends a signal up the context hierarchy to setIsConnectorsScreenVisible.
• A new context called RuleFormScreenContext keeps track of isConnectorsScreenVisible, a state for whether or not the action connectors "screen" is open, regardless of whether that screen is displayed in a modal or a flyout.
• The Rule Page uses isConnectorsScreenVisible to determine whether to render the modal. This works the same way as it used to, but handled by the <RulePage> instead of the <RuleActions> component.
• The Rule Flyout uses isConnectorsScreenVisible to determine whether to continue to render <RuleFlyoutBody> or to completely replace its contents with <RuleFlyoutSelectConnector>

For consistency, this PR also moves the Show Request modal/flyout screen into the same system.

Testing

To test the new flyout, edit packages/response-ops/rule_form/src/create_rule_form.tsx and packages/response-ops/rule_form/src/edit_rule_form.tsx so that they render <RuleFlyout> instead of <RulePage>.

Use this diff block

diff --git a/packages/response-ops/rule_form/src/create_rule_form.tsx b/packages/response-ops/rule_form/src/create_rule_form.tsx
index 2f5e0472dcd..564744b96ec 100644
--- a/packages/response-ops/rule_form/src/create_rule_form.tsx
+++ b/packages/response-ops/rule_form/src/create_rule_form.tsx
@@ -31,6 +31,7 @@ import {
   parseRuleCircuitBreakerErrorMessage,
 } from './utils';
 import { RULE_CREATE_SUCCESS_TEXT, RULE_CREATE_ERROR_TEXT } from './translations';
+import { RuleFlyout } from './rule_flyout';
 
 export interface CreateRuleFormProps {
   ruleTypeId: string;
@@ -199,7 +200,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {
           }),
         }}
       >
-        <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />
+        <RuleFlyout isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />
       </RuleFormStateProvider>
     </div>
   );
diff --git a/packages/response-ops/rule_form/src/edit_rule_form.tsx b/packages/response-ops/rule_form/src/edit_rule_form.tsx
index 392447114ed..41aecd7245a 100644
--- a/packages/response-ops/rule_form/src/edit_rule_form.tsx
+++ b/packages/response-ops/rule_form/src/edit_rule_form.tsx
@@ -26,6 +26,7 @@ import {
 import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';
 import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';
 import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';
+import { RuleFlyout } from './rule_flyout';
 
 export interface EditRuleFormProps {
   id: string;
@@ -193,7 +194,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {
           showMustacheAutocompleteSwitch,
         }}
       >
-        <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />
+        <RuleFlyout isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />
       </RuleFormStateProvider>
     </div>
   );

Still Todo

1. Replace all instances of the v1 rule flyout with this new one (it's used heavily in solutions, not in Stack Management)

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios

[elasticmachine]

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

• Click to trigger kibana-pull-request for this PR!
• Click to trigger kibana-deploy-project-from-pr for this PR!

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 990cb8e

Failed CI Steps

• Linting
• Check Types

History