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

[Zacqary]

This PR is DEPENDENT on #205944

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 #205944 merges

Summary

Part of #195211

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)

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[Zacqary]

Bad rebase, closing

[elasticmachine]

⏳ Build in-progress, with failures

• Buildkite Build
• Commit: f434d48

Failed CI Steps

• Check Types

History

• 💔 Build #265743 failed 2e5db10
• 💔 Build #265425 failed 18462f5