[Security Solution] Adds tour for new upgrade flyout diff features #176767

dplumlee · 2024-02-12T21:52:45Z

Summary

Adds a tour and tooltips highlighting and describing the new diff features of the prebuilt rule update flyout.

To test:

Enable the jsonPrebuiltRulesDiffingEnabled and/or perFieldPrebuiltRulesDiffingEnabled feature flags and clear your browser of the local storage securitySolution.rulesManagementPage.newFeaturesTour.v8.13 token. This should allow you to see the tour and both new tabs highlighted by tooltips as shown in the screenshots below.

Screenshots

Upgrade tour

Diff tab tooltips

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

For maintainers

This was checked for breaking API changes and was labeled appropriately

dplumlee · 2024-02-12T22:02:19Z

buildkite test this

elasticmachine · 2024-02-12T22:02:42Z

Pinging @elastic/security-detections-response (Team:Detections and Resp)

elasticmachine · 2024-02-12T22:02:43Z

Pinging @elastic/security-solution (Team: SecuritySolution)

elasticmachine · 2024-02-12T22:02:45Z

Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management)

jpdjere · 2024-02-13T12:24:36Z

...ement_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx

+            {tourSteps.length > 1 && (
+              <>
+                <EuiSpacer size="s" />
+                <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      iconType="arrowLeft"
+                      aria-label={'previous'}
+                      display="empty"
+                      disabled={index === 0}
+                      onClick={tourActions.decrementStep}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      iconType="arrowRight"
+                      aria-label={'next'}
+                      display="base"
+                      disabled={index === tourSteps.length - 1}
+                      onClick={tourActions.incrementStep}
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </>
+            )}


Since the tour only has one step, you don't need all of this code. This can be simply:

const enhancedSteps = useMemo( () => tourSteps.map((item) => ({ ...item, content: item.content, })), [tourSteps] );

Since we are switching back to just modifying the existing rules_feature_tour.tsx file in a0a9587, I went ahead and left this multi-step logic in the file for a future use case if we do want to add another new feature tour and there are multiple steps.

...ement_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx

banderror

Tested locally and reviewed the changes. ++ to @jpdjere're comments. Also, found a few more issues.

...ngine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations.ts

...security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx

...ement_ui/components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_tour.tsx

...components/rules_table/upgrade_prebuilt_rules_table/upgrade_prebuilt_rules_table_context.tsx

...gins/security_solution/public/common/components/navigation/tab_navigation/tab_navigation.tsx

semd

tab navigation changes LGTM

joepeeples

Added a couple suggestions, thanks! Feel free to ping again if you need another look.

...blic/detection_engine/rule_management_ui/components/rules_table/feature_tour/translations.ts

...ngine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations.ts

banderror

Re-tested and re-reviewed, the updated version looks great 👍 Thank you @dplumlee!

banderror · 2024-02-13T21:00:20Z

...tection_engine/rule_management_ui/components/rules_table/feature_tour/rules_feature_tour.tsx

-  const [shouldShowSearchCapabilitiesTour, setShouldShowSearchCapabilitiesTour] = useState(false);
-
-  useEffect(() => {
-    /**
-     * Wait until the tour target elements are visible on the page and mount
-     * EuiTourStep components only after that. Otherwise, the tours would never
-     * show up on the page.
-     */
-    const observer = new MutationObserver(() => {
-      if (document.querySelector(`#${SEARCH_CAPABILITIES_TOUR_ANCHOR}`)) {
-        setShouldShowSearchCapabilitiesTour(true);
-        observer.disconnect();
-      }
-    });
-
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => observer.disconnect();
-  }, []);


Replacement of this block with const isTourAnchorMounted = useIsElementMounted(PER_FIELD_UPGRADE_TOUR_ANCHOR); is very nice 👍

kibana-ci · 2024-02-14T01:15:29Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: c14b212

Failed CI Steps

Test Failures

[job] [logs] Investigations - Security Solution Cypress Tests #7 / Basic esql search and filter operations "before each" hook for "should remove the query when the back button is pressed after adding a query" "before each" hook for "should remove the query when the back button is pressed after adding a query"

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	4973	4975	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	11.5MB	11.5MB	+2.3KB

History

💔 Build #193450 failed 555f17e
💔 Build #193427 failed 2531ccf
💔 Build #193387 failed 78c7321
💔 Build #193349 failed be35f69
💛 Build #193154 was flaky 5c3c8af

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @dplumlee

…lastic#176767) ## Summary Issue: elastic#166489 Adds a tour and tooltips highlighting and describing the new diff features of the prebuilt rule update flyout. #### To test: Enable the `jsonPrebuiltRulesDiffingEnabled` and/or `perFieldPrebuiltRulesDiffingEnabled` feature flags and clear your browser of the local storage `securitySolution.rulesManagementPage.newFeaturesTour.v8.13` token. This should allow you to see the tour and both new tabs highlighted by tooltips as shown in the screenshots below. ### Screenshots **Upgrade tour** <img width="1406" alt="Screenshot 2024-02-13 at 2 14 07 PM" src="https://github.com/elastic/kibana/assets/56367316/20d3fd8e-fc39-4ae2-a627-272ae14e9aac"> **Diff tab tooltips** <img width="1176" alt="Screenshot 2024-02-13 at 2 14 22 PM" src="https://github.com/elastic/kibana/assets/56367316/8810c17e-4dfb-4758-b4c7-199a44531a4e"> ### Checklist Delete any items that are not applicable to this PR. - [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/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

…rkflow (#196731) ## Summary Removes the tour for rule features implemented in #176767 as they are no longer new. Keeps the component and logic to use for future tours, just removes reference to the specific rules management tour. ### Steps to test 1. Make sure the `securitySolution.rulesManagementPage.newFeaturesTour.v8.13` local storage key is cleared from your kibana page (this will make the tour show up normally) 2. Notice that navigating to the rule management page does not display the rule tour Co-authored-by: Elastic Machine <[email protected]>

…rkflow (elastic#196731) ## Summary Removes the tour for rule features implemented in elastic#176767 as they are no longer new. Keeps the component and logic to use for future tours, just removes reference to the specific rules management tour. ### Steps to test 1. Make sure the `securitySolution.rulesManagementPage.newFeaturesTour.v8.13` local storage key is cleared from your kibana page (this will make the tour show up normally) 2. Notice that navigating to the rule management page does not display the rule tour Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 3547e15) # Conflicts: # x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx

…ment workflow (#196731) (#197080) # Backport This will backport the following commits from `main` to `8.16`: - [[Security Solution] Removes outdated rule tour for rule management workflow (#196731)](#196731)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)

…ent workflow (#196731) (#197086) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Removes outdated rule tour for rule management workflow (#196731)](#196731)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)

adds tour and tooltips

5c3c8af

dplumlee self-assigned this Feb 12, 2024

dplumlee mentioned this pull request Feb 12, 2024

[Security Solution] Implement per-field text-based diffs for the prebuilt rule upgrade flyout #166489

Closed

17 tasks

dplumlee marked this pull request as ready for review February 12, 2024 22:02

dplumlee requested review from a team as code owners February 12, 2024 22:02

dplumlee requested a review from banderror February 12, 2024 22:02

dplumlee requested a review from joepeeples February 12, 2024 22:21

jpdjere requested changes Feb 13, 2024

View reviewed changes

dplumlee added 2 commits February 13, 2024 10:46

Merge remote-tracking branch 'upstream/main' into per-fields-diffs-tour

b401e9e

addresses comments

be35f69

dplumlee requested a review from jpdjere February 13, 2024 16:02

banderror requested changes Feb 13, 2024

View reviewed changes

dplumlee added 2 commits February 13, 2024 12:02

addresses comments

a0a9587

Merge remote-tracking branch 'upstream/main' into per-fields-diffs-tour

78c7321

dplumlee requested a review from banderror February 13, 2024 17:03

dplumlee added 2 commits February 13, 2024 12:21

fixes translations

d13180e

moves anchor export

a1e4b4f

semd approved these changes Feb 13, 2024

View reviewed changes

joepeeples reviewed Feb 13, 2024

View reviewed changes

...blic/detection_engine/rule_management_ui/components/rules_table/feature_tour/translations.ts Outdated Show resolved Hide resolved

...ngine/rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations.ts Outdated Show resolved Hide resolved

dplumlee added 2 commits February 13, 2024 14:07

updates language

2531ccf

Merge remote-tracking branch 'upstream/main' into per-fields-diffs-tour

555f17e

banderror approved these changes Feb 13, 2024

View reviewed changes

jpdjere approved these changes Feb 13, 2024

View reviewed changes

Merge remote-tracking branch 'upstream/main' into per-fields-diffs-tour

c14b212

dplumlee enabled auto-merge (squash) February 13, 2024 23:55

dplumlee merged commit db513b7 into elastic:main Feb 14, 2024
36 checks passed

kibanamachine added the backport:skip This commit does not require backporting label Feb 14, 2024

dplumlee deleted the per-fields-diffs-tour branch February 14, 2024 01:18

dplumlee mentioned this pull request Oct 17, 2024

[Security Solution] Removes outdated rule tour for rule management workflow #196731

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Adds tour for new upgrade flyout diff features #176767

[Security Solution] Adds tour for new upgrade flyout diff features #176767

dplumlee commented Feb 12, 2024 •

edited

Loading

dplumlee commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

jpdjere Feb 13, 2024

dplumlee Feb 13, 2024 •

edited

Loading

banderror left a comment

semd left a comment

joepeeples left a comment

banderror left a comment

banderror Feb 13, 2024

kibana-ci commented Feb 14, 2024

[Security Solution] Adds tour for new upgrade flyout diff features #176767

[Security Solution] Adds tour for new upgrade flyout diff features #176767

Conversation

dplumlee commented Feb 12, 2024 • edited Loading

Summary

To test:

Screenshots

Checklist

For maintainers

dplumlee commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

elasticmachine commented Feb 12, 2024

jpdjere Feb 13, 2024

Choose a reason for hiding this comment

dplumlee Feb 13, 2024 • edited Loading

Choose a reason for hiding this comment

banderror left a comment

Choose a reason for hiding this comment

semd left a comment

Choose a reason for hiding this comment

joepeeples left a comment

Choose a reason for hiding this comment

banderror left a comment

Choose a reason for hiding this comment

banderror Feb 13, 2024

Choose a reason for hiding this comment

kibana-ci commented Feb 14, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

History

dplumlee commented Feb 12, 2024 •

edited

Loading

dplumlee Feb 13, 2024 •

edited

Loading