[Response-Ops] Rule create/edit form design updates#220704
Merged
justinkambic merged 10 commits intoelastic:mainfrom May 20, 2025
Merged
[Response-Ops] Rule create/edit form design updates#220704justinkambic merged 10 commits intoelastic:mainfrom
justinkambic merged 10 commits intoelastic:mainfrom
Conversation
justinkambic
added
release_note:skip
Contributor
|
Pinging @elastic/obs-ux-management-team (Team:obs-ux-management) |
github-actions
bot
added
the
author:obs-ux-management
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements design updates for the Rule create/edit form needed to support downstream changes. Key updates include removing redundant translation constants and updating the layout in the rule details component to be responsive based on container width using a newly added ResizeObserver hook.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/platform/packages/shared/response-ops/rule_form/src/translations.ts | Removed unused translation constants to simplify localization resources. |
| src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx | Refactored the layout from EuiDescribedFormGroup to a responsive EuiFlexGroup; added a custom ResizeObserver hook for adaptive layout. |
Comments suppressed due to low confidence (1)
src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx:81
- Ensure that EuiFlexGroup correctly forwards the ref to a DOM element, as the current approach with ResizeObserver depends on accessing the actual container element. If EuiFlexGroup does not support ref forwarding, consider wrapping it in a native element (e.g., a div) and attaching the ref to that wrapper.
<EuiFlexGroup ref={ref} direction={width > RULE_DETAIL_MIN_ROW_WIDTH ? 'row' : 'column'}>
Contributor
|
@justinkambic I tested your changes locally and after I created a new custom threshold rule, here's the error I got. Not sure if it is related to your changes though. I'll check main as well and report back. 
|
Contributor
|
Have a look at this scenario as well, where the rule details page breaks after I resize the page (it breaks when I am at the 
Steps to reproduce:
|
Contributor
|
@justinkambic I just tested on main, and the issue does not happen there. |
justinkambic
force-pushed
the
response-ops_rule-create-form-design-updates
branch
from
ceca146 to
f2780d2
Compare
Contributor
Author
|
After rebasing with latest It is suspicious though, as we have a reference to Which browser are you using for testing? I am wondering if we have some cross-browser compatibility potential issue here, and are not able to rely on this API. |
justinkambic
force-pushed
the
response-ops_rule-create-form-design-updates
branch
from
b1223d3 to
9a8c834
Compare
Contributor
|
I tested the issues that @mgiota reported and could not reproduce them. Maybe the rebase fixed them? I also see a bunch of commits since then. |
adcoelho
approved these changes
May 20, 2025
Contributor
Author
Yeah I fixed the issue she reported. I am still seeing one strange FTR failure that seems unrelated-but-adjacent so I'm wondering if another rebase will fix that one 🤞 Thank you for the feedback, I will get this one mergeable tomorrow. |
justinkambic
force-pushed
the
response-ops_rule-create-form-design-updates
branch
from
9a8c834 to
574f00b
Compare
mgiota
approved these changes
May 20, 2025
Contributor
mgiota
left a comment
mgiota
left a comment
There was a problem hiding this comment.
LGTM! After your fix, I can not reproduce the error I was seeing before. The other errors seem unrelated to your changes. Try to rebase with main and see if that fixes the failing tests
justinkambic
force-pushed
the
response-ops_rule-create-form-design-updates
branch
from
79d5e57 to
31fcc7f
Compare
justinkambic
force-pushed
the
response-ops_rule-create-form-design-updates
branch
from
31fcc7f to
4681951
Compare
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
Contributor
|
Starting backport for target branches: 8.19 https://github.com/elastic/kibana/actions/runs/15148780816 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
May 20, 2025
## Summary This implements some design changes for the Rule create/edit form that are needed downstream in elastic#217106 and elastic#219019. Once we are agreed on the implementation and ok to merge, we can go ahead. In the meantime, we can pull these changes into the existing PRs mentioned above so we can work on finalizing the layout as it will look, without needing to duplicate these commits in both places. ### Updated create rule form <img width="1236" alt="image" src="https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60" /> ### Updated details tab in edit flyout <img width="776" alt="image" src="https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c" /> (cherry picked from commit 6ad900d)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
May 20, 2025
…221058) # Backport This will backport the following commits from `main` to `8.19`: - [[Response-Ops] Rule create/edit form design updates (#220704)](#220704) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Justin Kambic","email":"jk@elastic.co"},"sourceCommit":{"committedDate":"2025-05-20T22:04:40Z","message":"[Response-Ops] Rule create/edit form design updates (#220704)\n\n## Summary\n\nThis implements some design changes for the Rule create/edit form that\nare needed downstream in https://github.com/elastic/kibana/pull/217106\nand https://github.com/elastic/kibana/pull/219019.\n\nOnce we are agreed on the implementation and ok to merge, we can go\nahead. In the meantime, we can pull these changes into the existing PRs\nmentioned above so we can work on finalizing the layout as it will look,\nwithout needing to duplicate these commits in both places.\n\n\n### Updated create rule form\n\n<img width=\"1236\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60\"\n/>\n\n### Updated details tab in edit flyout\n\n<img width=\"776\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c\"\n/>","sha":"6ad900d8b4686f58e5070e0aa0c067f68579ad46","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0","author:obs-ux-management"],"title":"[Response-Ops] Rule create/edit form design updates","number":220704,"url":"https://github.com/elastic/kibana/pull/220704","mergeCommit":{"message":"[Response-Ops] Rule create/edit form design updates (#220704)\n\n## Summary\n\nThis implements some design changes for the Rule create/edit form that\nare needed downstream in https://github.com/elastic/kibana/pull/217106\nand https://github.com/elastic/kibana/pull/219019.\n\nOnce we are agreed on the implementation and ok to merge, we can go\nahead. In the meantime, we can pull these changes into the existing PRs\nmentioned above so we can work on finalizing the layout as it will look,\nwithout needing to duplicate these commits in both places.\n\n\n### Updated create rule form\n\n<img width=\"1236\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60\"\n/>\n\n### Updated details tab in edit flyout\n\n<img width=\"776\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c\"\n/>","sha":"6ad900d8b4686f58e5070e0aa0c067f68579ad46"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/220704","number":220704,"mergeCommit":{"message":"[Response-Ops] Rule create/edit form design updates (#220704)\n\n## Summary\n\nThis implements some design changes for the Rule create/edit form that\nare needed downstream in https://github.com/elastic/kibana/pull/217106\nand https://github.com/elastic/kibana/pull/219019.\n\nOnce we are agreed on the implementation and ok to merge, we can go\nahead. In the meantime, we can pull these changes into the existing PRs\nmentioned above so we can work on finalizing the layout as it will look,\nwithout needing to duplicate these commits in both places.\n\n\n### Updated create rule form\n\n<img width=\"1236\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60\"\n/>\n\n### Updated details tab in edit flyout\n\n<img width=\"776\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c\"\n/>","sha":"6ad900d8b4686f58e5070e0aa0c067f68579ad46"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Justin Kambic <jk@elastic.co>
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
## Summary This implements some design changes for the Rule create/edit form that are needed downstream in elastic#217106 and elastic#219019. Once we are agreed on the implementation and ok to merge, we can go ahead. In the meantime, we can pull these changes into the existing PRs mentioned above so we can work on finalizing the layout as it will look, without needing to duplicate these commits in both places. ### Updated create rule form <img width="1236" alt="image" src="https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60" /> ### Updated details tab in edit flyout <img width="776" alt="image" src="https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c" />
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Jun 3, 2025
## Summary This implements some design changes for the Rule create/edit form that are needed downstream in elastic#217106 and elastic#219019. Once we are agreed on the implementation and ok to merge, we can go ahead. In the meantime, we can pull these changes into the existing PRs mentioned above so we can work on finalizing the layout as it will look, without needing to duplicate these commits in both places. ### Updated create rule form <img width="1236" alt="image" src="https://github.com/user-attachments/assets/06925dfe-bd61-4f99-bdca-2cdf7bbb5f60" /> ### Updated details tab in edit flyout <img width="776" alt="image" src="https://github.com/user-attachments/assets/b250a4c9-fb2d-41cd-910a-aa42b61b5a5c" />
This file contains hidden or 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
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.
Summary
This implements some design changes for the Rule create/edit form that are needed downstream in #217106 and #219019.
Once we are agreed on the implementation and ok to merge, we can go ahead. In the meantime, we can pull these changes into the existing PRs mentioned above so we can work on finalizing the layout as it will look, without needing to duplicate these commits in both places.
Updated create rule form
Updated details tab in edit flyout