Add helpers for @container queries #8265
Assignees
Labels
Comments
|
Hi @Zacqary! Thanks for reaching out and proposing solutions! I'll make sure to plan the work needed and will keep you updated to make sure our solutions match your needs. |
|
In the work I've been doing I noticed there isn't currently an easy way in Javascript to determine which container an element is in, which could add some difficulty in adding equivalent w3c/csswg-drafts#6205 for an A workaround until then could be:
|
Zacqary
added a commit
to elastic/kibana
that referenced
this issue
Jan 15, 2025
…nsive design and illustration to rule form page (#206141) ## 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.*** <details> <summary><h4>Screenshots</h4></summary> <img width="508" alt="Screenshot 2025-01-08 at 4 29 55 PM" src="https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770" /> <img width="502" alt="Screenshot 2025-01-08 at 4 29 59 PM" src="https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 03 PM" src="https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 32 PM" src="https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc" /> </details> ### 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 <details> <summary>Screenshot</summary> <img width="783" alt="Screenshot 2025-01-08 at 4 31 50 PM" src="https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c" /> </details> - Adds the new illustrated "Add an action" empty prompt from the flyout designs to the existing rule form page <details> <summary>Screenshot</summary> <img width="1299" alt="Screenshot 2025-01-08 at 5 00 55 PM" src="https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c" /> </details> ### 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 the action connector modal with an in-flyout UI as called for in the [design spec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout) 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 - [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
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Jan 15, 2025
…nsive design and illustration to rule form page (elastic#206141) ## Summary Part of elastic#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.*** <details> <summary><h4>Screenshots</h4></summary> <img width="508" alt="Screenshot 2025-01-08 at 4 29 55 PM" src="https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770" /> <img width="502" alt="Screenshot 2025-01-08 at 4 29 59 PM" src="https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 03 PM" src="https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 32 PM" src="https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc" /> </details> ### 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 <details> <summary>Screenshot</summary> <img width="783" alt="Screenshot 2025-01-08 at 4 31 50 PM" src="https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c" /> </details> - Adds the new illustrated "Add an action" empty prompt from the flyout designs to the existing rule form page <details> <summary>Screenshot</summary> <img width="1299" alt="Screenshot 2025-01-08 at 5 00 55 PM" src="https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c" /> </details> ### 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 the action connector modal with an in-flyout UI as called for in the [design spec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout) 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 - [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 (cherry picked from commit 471f948)
kibanamachine
added a commit
to elastic/kibana
that referenced
this issue
Jan 15, 2025
… responsive design and illustration to rule form page (#206141) (#206816) # Backport This will backport the following commits from `main` to `8.x`: - [[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page (#206141)](#206141) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Zacqary Adam Xeper","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-15T15:37:39Z","message":"[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page (#206141)\n\n## Summary\r\n\r\nPart of #195211\r\n\r\nAdds components for the new rule form flyout, and duplicates some of its\r\ndesign elements as responsive design on the Rule Page. This PR makes use\r\nof CSS `@container` queries, which EUI doesn't yet support natively.\r\nI've opened elastic/eui#8265 to get native EUI\r\nsupport for this functionality, but for now we can apply it through\r\nclass names and SCSS.\r\n\r\nThe reason we're using `@container` is so the Rule Form can be\r\nresponsive regardless of whether it's bound by the window size (in the\r\ncase of the Rule Page) or a container element on a larger screen (in the\r\nRule Flyout). When responsive design just relies on `@media screen`\r\nqueries, we can have a situation where we're trying to render the rule\r\nform in a 500px wide flyout, but because the window is 1920px wide, it\r\nstill tries to apply wide screen styling. `@container` instead responds\r\nto the width of an enclosing element, which can either be the body of\r\nthe Rule Page, or the width of the Rule Flyout.\r\n\r\n### Non-User Facing Changes\r\n- Adds the new rule flyout to `@kbn/response-ops-rule-form`. ***It is\r\nnot yet actually user-facing anywhere in the application, this will be\r\ndone in a second PR.***\r\n<details>\r\n<summary><h4>Screenshots</h4></summary>\r\n<img width=\"508\" alt=\"Screenshot 2025-01-08 at 4 29 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770\"\r\n/>\r\n<img width=\"502\" alt=\"Screenshot 2025-01-08 at 4 29 59 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 03 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc\"\r\n/>\r\n\r\n</details>\r\n\r\n\r\n### User-Facing Changes\r\nThese changes were added to the existing full page rule form to minimize\r\nthe amount of code differences between the flyout and the full page\r\n\r\n- Adds some responsive styling to the rule form page to make it look\r\nmore similar to the flyout when the browser window is narrow\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"783\" alt=\"Screenshot 2025-01-08 at 4 31 50 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c\"\r\n/>\r\n\r\n</details>\r\n\r\n- Adds the new illustrated \"Add an action\" empty prompt from the flyout\r\ndesigns to the existing rule form page\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"1299\" alt=\"Screenshot 2025-01-08 at 5 00 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c\"\r\n/>\r\n\r\n</details>\r\n\r\n### Testing\r\n\r\nTo test the new flyout, edit\r\n`packages/response-ops/rule_form/src/create_rule_form.tsx` and\r\n`packages/response-ops/rule_form/src/edit_rule_form.tsx` so that they\r\nrender `<RuleFlyout>` instead of `<RulePage>`.\r\n\r\n<details>\r\n<summary><strong>Use this diff block</strong></summary>\r\n\r\n```diff\r\ndiff --git a/packages/response-ops/rule_form/src/create_rule_form.tsx b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\nindex 2f5e0472dcd..564744b96ec 100644\r\n--- a/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n@@ -31,6 +31,7 @@ import {\r\n parseRuleCircuitBreakerErrorMessage,\r\n } from './utils';\r\n import { RULE_CREATE_SUCCESS_TEXT, RULE_CREATE_ERROR_TEXT } from './translations';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface CreateRuleFormProps {\r\n ruleTypeId: string;\r\n@@ -199,7 +200,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {\r\n }),\r\n }}\r\n >\r\n- <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n+ <RuleFlyout isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\ndiff --git a/packages/response-ops/rule_form/src/edit_rule_form.tsx b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\nindex 392447114ed..41aecd7245a 100644\r\n--- a/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n@@ -26,6 +26,7 @@ import {\r\n import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';\r\n import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';\r\n import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface EditRuleFormProps {\r\n id: string;\r\n@@ -193,7 +194,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {\r\n showMustacheAutocompleteSwitch,\r\n }}\r\n >\r\n- <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n+ <RuleFlyout isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\n```\r\n\r\n</details>\r\n\r\n### Still Todo\r\n\r\n1. Replace the action connector modal with an in-flyout UI as called for\r\nin the [design\r\nspec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout)\r\n2. Add the Show Request UI\r\n3. Replace all instances of the v1 rule flyout with this new one (it's\r\nused heavily in solutions, not in Stack Management)\r\n\r\n### Checklist\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"471f9482070803fe4b884e7f95bc6502551f891e","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Team:ResponseOps","v9.0.0","Feature:Alerting/RulesManagement","backport:version","v8.18.0"],"title":"[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page ","number":206141,"url":"https://github.com/elastic/kibana/pull/206141","mergeCommit":{"message":"[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page (#206141)\n\n## Summary\r\n\r\nPart of #195211\r\n\r\nAdds components for the new rule form flyout, and duplicates some of its\r\ndesign elements as responsive design on the Rule Page. This PR makes use\r\nof CSS `@container` queries, which EUI doesn't yet support natively.\r\nI've opened elastic/eui#8265 to get native EUI\r\nsupport for this functionality, but for now we can apply it through\r\nclass names and SCSS.\r\n\r\nThe reason we're using `@container` is so the Rule Form can be\r\nresponsive regardless of whether it's bound by the window size (in the\r\ncase of the Rule Page) or a container element on a larger screen (in the\r\nRule Flyout). When responsive design just relies on `@media screen`\r\nqueries, we can have a situation where we're trying to render the rule\r\nform in a 500px wide flyout, but because the window is 1920px wide, it\r\nstill tries to apply wide screen styling. `@container` instead responds\r\nto the width of an enclosing element, which can either be the body of\r\nthe Rule Page, or the width of the Rule Flyout.\r\n\r\n### Non-User Facing Changes\r\n- Adds the new rule flyout to `@kbn/response-ops-rule-form`. ***It is\r\nnot yet actually user-facing anywhere in the application, this will be\r\ndone in a second PR.***\r\n<details>\r\n<summary><h4>Screenshots</h4></summary>\r\n<img width=\"508\" alt=\"Screenshot 2025-01-08 at 4 29 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770\"\r\n/>\r\n<img width=\"502\" alt=\"Screenshot 2025-01-08 at 4 29 59 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 03 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc\"\r\n/>\r\n\r\n</details>\r\n\r\n\r\n### User-Facing Changes\r\nThese changes were added to the existing full page rule form to minimize\r\nthe amount of code differences between the flyout and the full page\r\n\r\n- Adds some responsive styling to the rule form page to make it look\r\nmore similar to the flyout when the browser window is narrow\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"783\" alt=\"Screenshot 2025-01-08 at 4 31 50 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c\"\r\n/>\r\n\r\n</details>\r\n\r\n- Adds the new illustrated \"Add an action\" empty prompt from the flyout\r\ndesigns to the existing rule form page\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"1299\" alt=\"Screenshot 2025-01-08 at 5 00 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c\"\r\n/>\r\n\r\n</details>\r\n\r\n### Testing\r\n\r\nTo test the new flyout, edit\r\n`packages/response-ops/rule_form/src/create_rule_form.tsx` and\r\n`packages/response-ops/rule_form/src/edit_rule_form.tsx` so that they\r\nrender `<RuleFlyout>` instead of `<RulePage>`.\r\n\r\n<details>\r\n<summary><strong>Use this diff block</strong></summary>\r\n\r\n```diff\r\ndiff --git a/packages/response-ops/rule_form/src/create_rule_form.tsx b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\nindex 2f5e0472dcd..564744b96ec 100644\r\n--- a/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n@@ -31,6 +31,7 @@ import {\r\n parseRuleCircuitBreakerErrorMessage,\r\n } from './utils';\r\n import { RULE_CREATE_SUCCESS_TEXT, RULE_CREATE_ERROR_TEXT } from './translations';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface CreateRuleFormProps {\r\n ruleTypeId: string;\r\n@@ -199,7 +200,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {\r\n }),\r\n }}\r\n >\r\n- <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n+ <RuleFlyout isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\ndiff --git a/packages/response-ops/rule_form/src/edit_rule_form.tsx b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\nindex 392447114ed..41aecd7245a 100644\r\n--- a/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n@@ -26,6 +26,7 @@ import {\r\n import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';\r\n import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';\r\n import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface EditRuleFormProps {\r\n id: string;\r\n@@ -193,7 +194,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {\r\n showMustacheAutocompleteSwitch,\r\n }}\r\n >\r\n- <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n+ <RuleFlyout isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\n```\r\n\r\n</details>\r\n\r\n### Still Todo\r\n\r\n1. Replace the action connector modal with an in-flyout UI as called for\r\nin the [design\r\nspec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout)\r\n2. Add the Show Request UI\r\n3. Replace all instances of the v1 rule flyout with this new one (it's\r\nused heavily in solutions, not in Stack Management)\r\n\r\n### Checklist\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"471f9482070803fe4b884e7f95bc6502551f891e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206141","number":206141,"mergeCommit":{"message":"[Response Ops] [Rule Form] Add new flyout to rule form library, responsive design and illustration to rule form page (#206141)\n\n## Summary\r\n\r\nPart of #195211\r\n\r\nAdds components for the new rule form flyout, and duplicates some of its\r\ndesign elements as responsive design on the Rule Page. This PR makes use\r\nof CSS `@container` queries, which EUI doesn't yet support natively.\r\nI've opened elastic/eui#8265 to get native EUI\r\nsupport for this functionality, but for now we can apply it through\r\nclass names and SCSS.\r\n\r\nThe reason we're using `@container` is so the Rule Form can be\r\nresponsive regardless of whether it's bound by the window size (in the\r\ncase of the Rule Page) or a container element on a larger screen (in the\r\nRule Flyout). When responsive design just relies on `@media screen`\r\nqueries, we can have a situation where we're trying to render the rule\r\nform in a 500px wide flyout, but because the window is 1920px wide, it\r\nstill tries to apply wide screen styling. `@container` instead responds\r\nto the width of an enclosing element, which can either be the body of\r\nthe Rule Page, or the width of the Rule Flyout.\r\n\r\n### Non-User Facing Changes\r\n- Adds the new rule flyout to `@kbn/response-ops-rule-form`. ***It is\r\nnot yet actually user-facing anywhere in the application, this will be\r\ndone in a second PR.***\r\n<details>\r\n<summary><h4>Screenshots</h4></summary>\r\n<img width=\"508\" alt=\"Screenshot 2025-01-08 at 4 29 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770\"\r\n/>\r\n<img width=\"502\" alt=\"Screenshot 2025-01-08 at 4 29 59 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 03 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866\"\r\n/>\r\n<img width=\"507\" alt=\"Screenshot 2025-01-08 at 4 30 32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc\"\r\n/>\r\n\r\n</details>\r\n\r\n\r\n### User-Facing Changes\r\nThese changes were added to the existing full page rule form to minimize\r\nthe amount of code differences between the flyout and the full page\r\n\r\n- Adds some responsive styling to the rule form page to make it look\r\nmore similar to the flyout when the browser window is narrow\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"783\" alt=\"Screenshot 2025-01-08 at 4 31 50 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c\"\r\n/>\r\n\r\n</details>\r\n\r\n- Adds the new illustrated \"Add an action\" empty prompt from the flyout\r\ndesigns to the existing rule form page\r\n<details>\r\n<summary>Screenshot</summary>\r\n<img width=\"1299\" alt=\"Screenshot 2025-01-08 at 5 00 55 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c\"\r\n/>\r\n\r\n</details>\r\n\r\n### Testing\r\n\r\nTo test the new flyout, edit\r\n`packages/response-ops/rule_form/src/create_rule_form.tsx` and\r\n`packages/response-ops/rule_form/src/edit_rule_form.tsx` so that they\r\nrender `<RuleFlyout>` instead of `<RulePage>`.\r\n\r\n<details>\r\n<summary><strong>Use this diff block</strong></summary>\r\n\r\n```diff\r\ndiff --git a/packages/response-ops/rule_form/src/create_rule_form.tsx b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\nindex 2f5e0472dcd..564744b96ec 100644\r\n--- a/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/create_rule_form.tsx\r\n@@ -31,6 +31,7 @@ import {\r\n parseRuleCircuitBreakerErrorMessage,\r\n } from './utils';\r\n import { RULE_CREATE_SUCCESS_TEXT, RULE_CREATE_ERROR_TEXT } from './translations';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface CreateRuleFormProps {\r\n ruleTypeId: string;\r\n@@ -199,7 +200,7 @@ export const CreateRuleForm = (props: CreateRuleFormProps) => {\r\n }),\r\n }}\r\n >\r\n- <RulePage isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n+ <RuleFlyout isEdit={false} isSaving={isSaving} onCancel={onCancel} onSave={onSave} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\ndiff --git a/packages/response-ops/rule_form/src/edit_rule_form.tsx b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\nindex 392447114ed..41aecd7245a 100644\r\n--- a/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n+++ b/packages/response-ops/rule_form/src/edit_rule_form.tsx\r\n@@ -26,6 +26,7 @@ import {\r\n import { RULE_EDIT_ERROR_TEXT, RULE_EDIT_SUCCESS_TEXT } from './translations';\r\n import { getAvailableRuleTypes, parseRuleCircuitBreakerErrorMessage } from './utils';\r\n import { DEFAULT_VALID_CONSUMERS, getDefaultFormData } from './constants';\r\n+import { RuleFlyout } from './rule_flyout';\r\n \r\n export interface EditRuleFormProps {\r\n id: string;\r\n@@ -193,7 +194,7 @@ export const EditRuleForm = (props: EditRuleFormProps) => {\r\n showMustacheAutocompleteSwitch,\r\n }}\r\n >\r\n- <RulePage isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n+ <RuleFlyout isEdit={true} isSaving={isSaving} onSave={onSave} onCancel={onCancel} />\r\n </RuleFormStateProvider>\r\n </div>\r\n );\r\n```\r\n\r\n</details>\r\n\r\n### Still Todo\r\n\r\n1. Replace the action connector modal with an in-flyout UI as called for\r\nin the [design\r\nspec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout)\r\n2. Add the Show Request UI\r\n3. Replace all instances of the v1 rule flyout with this new one (it's\r\nused heavily in solutions, not in Stack Management)\r\n\r\n### Checklist\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"471f9482070803fe4b884e7f95bc6502551f891e"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Zacqary Adam Xeper <[email protected]>
viduni94
pushed a commit
to viduni94/kibana
that referenced
this issue
Jan 23, 2025
…nsive design and illustration to rule form page (elastic#206141) ## Summary Part of elastic#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.*** <details> <summary><h4>Screenshots</h4></summary> <img width="508" alt="Screenshot 2025-01-08 at 4 29 55 PM" src="https://github.com/user-attachments/assets/7f03cd3a-5f37-4ac2-9992-ca4951664770" /> <img width="502" alt="Screenshot 2025-01-08 at 4 29 59 PM" src="https://github.com/user-attachments/assets/c0620fc2-83db-4603-90b7-1282e5b0e6ab" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 03 PM" src="https://github.com/user-attachments/assets/8440d551-46af-49e0-9c92-22d6b3ba1866" /> <img width="507" alt="Screenshot 2025-01-08 at 4 30 32 PM" src="https://github.com/user-attachments/assets/cf7493a7-6e4a-4e55-8027-89e9b36012fc" /> </details> ### 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 <details> <summary>Screenshot</summary> <img width="783" alt="Screenshot 2025-01-08 at 4 31 50 PM" src="https://github.com/user-attachments/assets/a3532b92-9f22-4e88-bcc3-e408fc53e64c" /> </details> - Adds the new illustrated "Add an action" empty prompt from the flyout designs to the existing rule form page <details> <summary>Screenshot</summary> <img width="1299" alt="Screenshot 2025-01-08 at 5 00 55 PM" src="https://github.com/user-attachments/assets/c4acd50d-9268-4874-b650-ecba532f3e9c" /> </details> ### 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 the action connector modal with an in-flyout UI as called for in the [design spec](https://www.figma.com/design/zetHXnUP0YnDG4YmvPwRb8/Adapt-new-Rule-form-to-work-in-flyout) 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 - [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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is your feature request related to a problem? Please describe.
In Kibana, we're trying to implement designs for a form that can appear in the context of both a full page and inside a flyout. We want to design responsively for these two contexts, and make the flyout UI look almost identical to a breakpoint
sfull page UI.EUI currently supports responsive design only for full-screen breakpoints. Applying the same design for both a small screen and a UI embedded within a flyout on a large screen requires the use of CSS
@containerqueries in external SCSS files.We can do this for now, but I'd prefer to have EUI dictate standard practices for doing this.
Describe the solution you'd like
<EuiShowFor>and<EuiHideFor>which target containers instead of screen sizescontainer-type: inline-sizeto outer wrappers for<EuiModal>and<EuiFlyout>to simplify responsive design within these contexts.<EuiPanel>or other EUI page components. This is probably more of an overall design question, to determine which parts of the UI should be containerized and which parts shouldn't.Describe alternatives you've considered
We could continue specifying
@containerqueries within SCSS files in Kibana, but that seems frowned upon and only as a last resortDesired timeline
No rush, really. Workarounds exist for the time being.
The text was updated successfully, but these errors were encountered: