[8.x] [Response Ops] [Rule Form] Add Show Request and Add Action screens to flyout (#206154) #207903
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… flyout (elastic#206154) ## Summary Part of elastic#195211 - Adds Show Request screen to the new rule form flyout <details> <summary>Screenshot</summary> <img width="585" alt="Screenshot 2025-01-10 at 1 30 15 PM" src="https://github.com/user-attachments/assets/72500b0d-d959-4d17-944e-a7dc0894fb98" /> </details> - Renders the action connectors UI within the flyout instead of opening a modal <details> <summary>Screenshot</summary> <img width="505" alt="Screenshot 2025-01-10 at 1 28 38 PM" src="https://github.com/user-attachments/assets/b5b464c0-7359-43ab-bea1-93d2981a5794" /> </details> - Duplicates the dropdown filter design from the flyout UI within the action connectors modal when displayed on a smaller screen <details> <summary>Screenshot</summary> <img width="809" alt="Screenshot 2025-01-10 at 1 30 28 PM" src="https://github.com/user-attachments/assets/5ef28458-1b6d-4a29-961d-fbcc1640e706" /> </details> ### 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>`. <details> <summary><strong>Use this diff block</strong></summary> ```diff 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> ); ``` </details> ### 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 - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 8004e3e)
2 tasks
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
💛 Build succeeded, but was flaky
Failed CI StepsTest FailuresMetrics [docs]Module Count
Async chunks
cc @Zacqary |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Backport
This will backport the following commits from
mainto8.x:Questions ?
Please refer to the Backport tool documentation