[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page

[Zacqary]

Summary

Part of #195211

Adds components for the new rule form flyout, and duplicates some of its design elements as responsive design on the Rule Page. This PR makes use of CSS @container queries, which EUI doesn't yet support natively. I've opened elastic/eui#8265 to get native EUI support for this functionality, but for now we can apply it through class names and SCSS.

The reason we're using @container is so the Rule Form can be responsive regardless of whether it's bound by the window size (in the case of the Rule Page) or a container element on a larger screen (in the Rule Flyout). When responsive design just relies on @media screen queries, we can have a situation where we're trying to render the rule form in a 500px wide flyout, but because the window is 1920px wide, it still tries to apply wide screen styling. @container instead responds to the width of an enclosing element, which can either be the body of the Rule Page, or the width of the Rule Flyout.

Non-User Facing Changes

• Adds the new rule flyout to @kbn/response-ops-rule-form. It is not yet actually user-facing anywhere in the application, this will be done in a second PR.

Screenshots

User-Facing Changes

These changes were added to the existing full page rule form to minimize the amount of code differences between the flyout and the full page

• Adds some responsive styling to the rule form page to make it look more similar to the flyout when the browser window is narrow

Screenshot

• Adds the new illustrated "Add an action" empty prompt from the flyout designs to the existing rule form page

Screenshot

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 the action connector modal with an in-flyout UI as called for in the design spec
2. Add the Show Request UI
3. 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)

[Zacqary]

@elastic/kibana-design In addition to the SCSS file that triggered CODEOWNER, please take a look at the SVG file I pulled from the Figma designs for this feature and let me know if it's good to go.

[MichaelMarcialis]

@elastic/kibana-design In addition to the SCSS file that triggered CODEOWNER, please take a look at the SVG file I pulled from the Figma designs for this feature and let me know if it's good to go.

@joana-cps: I think is probably in your wheelhouse. Let me know if this is something you feel comfortable reviewing. Happy to help if need be.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 75126f4

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
triggersActionsUi	922	933	+11

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	+5.6KB

Unknown metric groups

async chunk count

id	before	after	diff
triggersActionsUi	64	65	+1

miscellaneous assets size

id	before	after	diff
triggersActionsUi	126.3KB	505.4KB	⚠️ +379.0KB

History

• 💚 Build #266242 succeeded 1804f7d

[ryankeairns]

For the SCSS piece. Thanks for the changes!

[jcger]

you could use await findBy instead of getBy and remove the waitFor calls. findBy does already the waitFor internally and does better error handling

[Zacqary]

Will update that in the next PR

[kibanamachine]

Starting backport for target branches: 8.x

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

[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