[Security Solution] ThreeWayDiff UI: Add remaining field components for FieldReadOnly
#193261
+2,079
−88
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
nikitaindik
added
release_note:skip
69 tasks
nikitaindik
force-pushed
the
3wd-field-readonly-more-field-components
branch
from
7f44356 to
7ba4500
Compare
nikitaindik
force-pushed
the
3wd-field-readonly-more-field-components
branch
from
7ba4500 to
c2e495a
Compare
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
|
Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management) |
elastic-vault-github-plugin-prod
bot
requested a review
from a team
as a code owner
💚 Build Succeeded
Metrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: cc @nikitaindik |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Sep 24, 2024
…or `FieldReadOnly` (elastic#193261) **Partially addresses: elastic#171520 **Is a follow-up PR to: elastic#192342 This is the 3rd of the 3 PRs for `FieldReadOnly`. - The 1st [PR](elastic#191499) added the `FieldReadOnly` and a bunch of field components. - The 2nd [PR](elastic#192342) moved away from using `DiffableAllFields` type in favour of `DiffableRule` and split the large `FieldReadOnly` component into smaller ones for readability. - This (3rd) PR adds the remaining field components. ## Summary This PR adds field components for `FieldReadOnly`. Field components display a read-only view of a particular `DiffableRule` field, similar to how fields are shown on the Rule Details page. `FieldReadOnly` and field components will be displayed in the right side of the new Diff tab of the Upgrade flyout (see it on the [Miro board](https://miro.com/app/board/uXjVK0gqjjQ=/?moveToWidget=3458764594148126123&cot=14)). They will let the user see how an upgraded version of a rule will look like in a user-friendly way. ### Running `FinalReadOnly` and its field components are not yet integrated into the flyout, but you can view components in Storybook. 1. Run Storybook: `yarn storybook security_solution` 2. Go to `http://localhost:9001` in browser. <img width="1062" alt="Schermafbeelding 2024-09-03 om 13 05 11" src="https://github.com/user-attachments/assets/13b227d4-1321-47d9-a0a7-93868c9f4a15"> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co> (cherry picked from commit b78b633)
💚 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
Sep 24, 2024
…ents for `FieldReadOnly` (#193261) (#193825) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] ThreeWayDiff UI: Add remaining field components for `FieldReadOnly` (#193261)](#193261) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Nikita Indik","email":"nikita.indik@elastic.co"},"sourceCommit":{"committedDate":"2024-09-24T08:04:38Z","message":"[Security Solution] ThreeWayDiff UI: Add remaining field components for `FieldReadOnly` (#193261)\n\n**Partially addresses: https://github.com/elastic/kibana/issues/171520**\r\n**Is a follow-up PR to: https://github.com/elastic/kibana/pull/192342**\r\n\r\nThis is the 3rd of the 3 PRs for `FieldReadOnly`.\r\n- The 1st [PR](#191499) added the\r\n`FieldReadOnly` and a bunch of field components.\r\n- The 2nd [PR](#192342) moved away\r\nfrom using `DiffableAllFields` type in favour of `DiffableRule` and\r\nsplit the large `FieldReadOnly` component into smaller ones for\r\nreadability.\r\n - This (3rd) PR adds the remaining field components.\r\n\r\n## Summary\r\n\r\nThis PR adds field components for `FieldReadOnly`. Field components\r\ndisplay a read-only view of a particular `DiffableRule` field, similar\r\nto how fields are shown on the Rule Details page.\r\n\r\n`FieldReadOnly` and field components will be displayed in the right side\r\nof the new Diff tab of the Upgrade flyout (see it on the [Miro\r\nboard](https://miro.com/app/board/uXjVK0gqjjQ=/?moveToWidget=3458764594148126123&cot=14)).\r\nThey will let the user see how an upgraded version of a rule will look\r\nlike in a user-friendly way.\r\n\r\n\r\n### Running\r\n`FinalReadOnly` and its field components are not yet integrated into the\r\nflyout, but you can view components in Storybook.\r\n1. Run Storybook: `yarn storybook security_solution`\r\n2. Go to `http://localhost:9001` in browser.\r\n\r\n<img width=\"1062\" alt=\"Schermafbeelding 2024-09-03 om 13 05 11\"\r\nsrc=\"https://github.com/user-attachments/assets/13b227d4-1321-47d9-a0a7-93868c9f4a15\">\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Maxim Palenov <maxim.palenov@elastic.co>","sha":"b78b6337970b2e7332266cd0e181e14d26c3ed45","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Prebuilt Detection Rules","backport:prev-minor"],"title":"[Security Solution] ThreeWayDiff UI: Add remaining field components for `FieldReadOnly`","number":193261,"url":"https://github.com/elastic/kibana/pull/193261","mergeCommit":{"message":"[Security Solution] ThreeWayDiff UI: Add remaining field components for `FieldReadOnly` (#193261)\n\n**Partially addresses: https://github.com/elastic/kibana/issues/171520**\r\n**Is a follow-up PR to: https://github.com/elastic/kibana/pull/192342**\r\n\r\nThis is the 3rd of the 3 PRs for `FieldReadOnly`.\r\n- The 1st [PR](#191499) added the\r\n`FieldReadOnly` and a bunch of field components.\r\n- The 2nd [PR](#192342) moved away\r\nfrom using `DiffableAllFields` type in favour of `DiffableRule` and\r\nsplit the large `FieldReadOnly` component into smaller ones for\r\nreadability.\r\n - This (3rd) PR adds the remaining field components.\r\n\r\n## Summary\r\n\r\nThis PR adds field components for `FieldReadOnly`. Field components\r\ndisplay a read-only view of a particular `DiffableRule` field, similar\r\nto how fields are shown on the Rule Details page.\r\n\r\n`FieldReadOnly` and field components will be displayed in the right side\r\nof the new Diff tab of the Upgrade flyout (see it on the [Miro\r\nboard](https://miro.com/app/board/uXjVK0gqjjQ=/?moveToWidget=3458764594148126123&cot=14)).\r\nThey will let the user see how an upgraded version of a rule will look\r\nlike in a user-friendly way.\r\n\r\n\r\n### Running\r\n`FinalReadOnly` and its field components are not yet integrated into the\r\nflyout, but you can view components in Storybook.\r\n1. Run Storybook: `yarn storybook security_solution`\r\n2. Go to `http://localhost:9001` in browser.\r\n\r\n<img width=\"1062\" alt=\"Schermafbeelding 2024-09-03 om 13 05 11\"\r\nsrc=\"https://github.com/user-attachments/assets/13b227d4-1321-47d9-a0a7-93868c9f4a15\">\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Maxim Palenov <maxim.palenov@elastic.co>","sha":"b78b6337970b2e7332266cd0e181e14d26c3ed45"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193261","number":193261,"mergeCommit":{"message":"[Security Solution] ThreeWayDiff UI: Add remaining field components for `FieldReadOnly` (#193261)\n\n**Partially addresses: https://github.com/elastic/kibana/issues/171520**\r\n**Is a follow-up PR to: https://github.com/elastic/kibana/pull/192342**\r\n\r\nThis is the 3rd of the 3 PRs for `FieldReadOnly`.\r\n- The 1st [PR](#191499) added the\r\n`FieldReadOnly` and a bunch of field components.\r\n- The 2nd [PR](#192342) moved away\r\nfrom using `DiffableAllFields` type in favour of `DiffableRule` and\r\nsplit the large `FieldReadOnly` component into smaller ones for\r\nreadability.\r\n - This (3rd) PR adds the remaining field components.\r\n\r\n## Summary\r\n\r\nThis PR adds field components for `FieldReadOnly`. Field components\r\ndisplay a read-only view of a particular `DiffableRule` field, similar\r\nto how fields are shown on the Rule Details page.\r\n\r\n`FieldReadOnly` and field components will be displayed in the right side\r\nof the new Diff tab of the Upgrade flyout (see it on the [Miro\r\nboard](https://miro.com/app/board/uXjVK0gqjjQ=/?moveToWidget=3458764594148126123&cot=14)).\r\nThey will let the user see how an upgraded version of a rule will look\r\nlike in a user-friendly way.\r\n\r\n\r\n### Running\r\n`FinalReadOnly` and its field components are not yet integrated into the\r\nflyout, but you can view components in Storybook.\r\n1. Run Storybook: `yarn storybook security_solution`\r\n2. Go to `http://localhost:9001` in browser.\r\n\r\n<img width=\"1062\" alt=\"Schermafbeelding 2024-09-03 om 13 05 11\"\r\nsrc=\"https://github.com/user-attachments/assets/13b227d4-1321-47d9-a0a7-93868c9f4a15\">\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Maxim Palenov <maxim.palenov@elastic.co>","sha":"b78b6337970b2e7332266cd0e181e14d26c3ed45"}}]}] BACKPORT--> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>
maximpn
added a commit
that referenced
this pull request
Sep 27, 2024
…Update Workflow (#193531) **Epic:** #174168 **Addresses:** #171520 ## Summary This PR introduces a new `Update` tab allowing users to resolve rule upgrade conflicts. It's a result of combination of read-only components implemented in #193261 and rule upgrade state implemented in #191721. ## Details The goal of this PR is to provide intermediate integration between rule upgrade state ([PR](#191721)) and components displaying the diff and read-only state ([PR](#193261)). It will facilitate further development of rule field editable components and streamline rule upgrade functionality developing. ## How to test? The functionality is hidden under `prebuiltRulesCustomizationEnabled` feature flag. Add the following to your Kibana config ```yaml xpack.securitySolution.enableExperimental: - prebuiltRulesCustomizationEnabled ``` When the above feature flag enabled the new `Update` tab is displayed instead of the old one. ## Screenshots Suggested components design  New `Update` tab <img width="1718" alt="image" src="https://github.com/user-attachments/assets/28aa6bb3-f805-4109-a808-d67e58c7c5b8">
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Sep 27, 2024
…Update Workflow (elastic#193531) **Epic:** elastic#174168 **Addresses:** elastic#171520 ## Summary This PR introduces a new `Update` tab allowing users to resolve rule upgrade conflicts. It's a result of combination of read-only components implemented in elastic#193261 and rule upgrade state implemented in elastic#191721. ## Details The goal of this PR is to provide intermediate integration between rule upgrade state ([PR](elastic#191721)) and components displaying the diff and read-only state ([PR](elastic#193261)). It will facilitate further development of rule field editable components and streamline rule upgrade functionality developing. ## How to test? The functionality is hidden under `prebuiltRulesCustomizationEnabled` feature flag. Add the following to your Kibana config ```yaml xpack.securitySolution.enableExperimental: - prebuiltRulesCustomizationEnabled ``` When the above feature flag enabled the new `Update` tab is displayed instead of the old one. ## Screenshots Suggested components design  New `Update` tab <img width="1718" alt="image" src="https://github.com/user-attachments/assets/28aa6bb3-f805-4109-a808-d67e58c7c5b8"> (cherry picked from commit 878ba13)
kibanamachine
added a commit
that referenced
this pull request
Sep 27, 2024
… Rule Update Workflow (#193531) (#194348) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Integrate state and components for Prebuilt Rule Update Workflow (#193531)](#193531) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maxim Palenov","email":"maxim.palenov@elastic.co"},"sourceCommit":{"committedDate":"2024-09-27T21:07:12Z","message":"[Security Solution] Integrate state and components for Prebuilt Rule Update Workflow (#193531)\n\n**Epic:** https://github.com/elastic/kibana/issues/174168\r\n**Addresses:** https://github.com/elastic/kibana/issues/171520\r\n\r\n## Summary\r\n\r\nThis PR introduces a new `Update` tab allowing users to resolve rule upgrade conflicts. It's a result of combination of read-only components implemented in #193261 and rule upgrade state implemented in https://github.com/elastic/kibana/pull/191721.\r\n\r\n## Details\r\n\r\nThe goal of this PR is to provide intermediate integration between rule upgrade state ([PR](#191721)) and components displaying the diff and read-only state ([PR](#193261)). It will facilitate further development of rule field editable components and streamline rule upgrade functionality developing.\r\n\r\n## How to test?\r\n\r\nThe functionality is hidden under `prebuiltRulesCustomizationEnabled` feature flag. Add the following to your Kibana config\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:\r\n - prebuiltRulesCustomizationEnabled\r\n```\r\n\r\nWhen the above feature flag enabled the new `Update` tab is displayed instead of the old one.\r\n\r\n## Screenshots\r\n\r\nSuggested components design \r\n\r\n\r\nNew `Update` tab\r\n<img width=\"1718\" alt=\"image\" src=\"https://github.com/user-attachments/assets/28aa6bb3-f805-4109-a808-d67e58c7c5b8\">","sha":"878ba134e96245b038a9765148ad48a36bb2aa4b","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","backport:prev-minor"],"title":"[Security Solution] Integrate state and components for Prebuilt Rule Update Workflow","number":193531,"url":"https://github.com/elastic/kibana/pull/193531","mergeCommit":{"message":"[Security Solution] Integrate state and components for Prebuilt Rule Update Workflow (#193531)\n\n**Epic:** https://github.com/elastic/kibana/issues/174168\r\n**Addresses:** https://github.com/elastic/kibana/issues/171520\r\n\r\n## Summary\r\n\r\nThis PR introduces a new `Update` tab allowing users to resolve rule upgrade conflicts. It's a result of combination of read-only components implemented in #193261 and rule upgrade state implemented in https://github.com/elastic/kibana/pull/191721.\r\n\r\n## Details\r\n\r\nThe goal of this PR is to provide intermediate integration between rule upgrade state ([PR](#191721)) and components displaying the diff and read-only state ([PR](#193261)). It will facilitate further development of rule field editable components and streamline rule upgrade functionality developing.\r\n\r\n## How to test?\r\n\r\nThe functionality is hidden under `prebuiltRulesCustomizationEnabled` feature flag. Add the following to your Kibana config\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:\r\n - prebuiltRulesCustomizationEnabled\r\n```\r\n\r\nWhen the above feature flag enabled the new `Update` tab is displayed instead of the old one.\r\n\r\n## Screenshots\r\n\r\nSuggested components design \r\n\r\n\r\nNew `Update` tab\r\n<img width=\"1718\" alt=\"image\" src=\"https://github.com/user-attachments/assets/28aa6bb3-f805-4109-a808-d67e58c7c5b8\">","sha":"878ba134e96245b038a9765148ad48a36bb2aa4b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193531","number":193531,"mergeCommit":{"message":"[Security Solution] Integrate state and components for Prebuilt Rule Update Workflow (#193531)\n\n**Epic:** https://github.com/elastic/kibana/issues/174168\r\n**Addresses:** https://github.com/elastic/kibana/issues/171520\r\n\r\n## Summary\r\n\r\nThis PR introduces a new `Update` tab allowing users to resolve rule upgrade conflicts. It's a result of combination of read-only components implemented in #193261 and rule upgrade state implemented in https://github.com/elastic/kibana/pull/191721.\r\n\r\n## Details\r\n\r\nThe goal of this PR is to provide intermediate integration between rule upgrade state ([PR](#191721)) and components displaying the diff and read-only state ([PR](#193261)). It will facilitate further development of rule field editable components and streamline rule upgrade functionality developing.\r\n\r\n## How to test?\r\n\r\nThe functionality is hidden under `prebuiltRulesCustomizationEnabled` feature flag. Add the following to your Kibana config\r\n\r\n```yaml\r\nxpack.securitySolution.enableExperimental:\r\n - prebuiltRulesCustomizationEnabled\r\n```\r\n\r\nWhen the above feature flag enabled the new `Update` tab is displayed instead of the old one.\r\n\r\n## Screenshots\r\n\r\nSuggested components design \r\n\r\n\r\nNew `Update` tab\r\n<img width=\"1718\" alt=\"image\" src=\"https://github.com/user-attachments/assets/28aa6bb3-f805-4109-a808-d67e58c7c5b8\">","sha":"878ba134e96245b038a9765148ad48a36bb2aa4b"}}]}] BACKPORT--> Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co>
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.
Partially addresses: #171520
Is a follow-up PR to: #192342
This is the 3rd of the 3 PRs for
FieldReadOnly.FieldReadOnlyand a bunch of field components.DiffableAllFieldstype in favour ofDiffableRuleand split the largeFieldReadOnlycomponent into smaller ones for readability.Summary
This PR adds field components for
FieldReadOnly. Field components display a read-only view of a particularDiffableRulefield, similar to how fields are shown on the Rule Details page.FieldReadOnlyand field components will be displayed in the right side of the new Diff tab of the Upgrade flyout (see it on the Miro board). They will let the user see how an upgraded version of a rule will look like in a user-friendly way.Running
FinalReadOnlyand its field components are not yet integrated into the flyout, but you can view components in Storybook.yarn storybook security_solutionhttp://localhost:9001in browser.