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

[Zacqary]

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]

Pinging @elastic/response-ops (Team:ResponseOps)

[ryankeairns]

SCSS

Congrats on breaking ground with container queries :)

[ryankeairns]

@joana-cps fyi if you'd like to QA the design; I approved only the SCSS change.

[jcger]

I'm seeing the flyout like this after applying this changes, is there anything else?

Diff

diff --git a/src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx b/src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx
index 7b0a6f8fb3d..7d98683e089 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/create_rule_form.tsx
+++ b/src/platform/packages/shared/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;
@@ -198,7 +199,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/src/platform/packages/shared/response-ops/rule_form/src/edit_rule_form.tsx b/src/platform/packages/shared/response-ops/rule_form/src/edit_rule_form.tsx
index d1bdb8afab8..ac7563c56c9 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/edit_rule_form.tsx
+++ b/src/platform/packages/shared/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;
@@ -211,7 +212,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>
   );

[Zacqary]

@jcger Looks like 8d58b28 didn't actually work and broke the containers. Reverted, it should be working correctly now

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f906fd1

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
triggersActionsUi	933	939	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
triggersActionsUi	1.7MB	1.7MB	+3.3KB

History

• 💚 Build #267472 succeeded 8d58b28
• 💚 Build #267200 succeeded 553f892
• 💔 Build #266240 failed 990cb8e

[Zacqary]

@elasticmachine merge upstream

[jcger]

Seems like it's not being used anywhere

[Zacqary]

Was trying something here and I forgot to remove it

[jcger]

I'm unsure what "screen" is referring to. I would think "element" might be fitting too, but not sure. Could you please elaborate a little bit on the reasoning behind "screen"?

[Zacqary]

Idk naming things is hard. I don't think it's an "element" because it could either be a modal or a full replacement of the content of the flyout, and there isn't a specific DOM element that corresponds to in both cases. "View" maybe? Remember when it was 2015 and we had model-view-controllers?

[Zacqary]

I was trying to think of a good word that conveys "replace the entire contents of this thing, or show this thing in a modal, depending on how we do things" and I guess "screen" came to mind. Open to whatever.

[kibanamachine]

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12915083592

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation