Show the Welcome modal on the dashboard.

[techanvil]

Feature Description

Determine data availability on the Key Metrics setup screen and show the Welcome modal on the dashboard.

For reference, see the Welcome modal in the Design Doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Welcome modal is shown on the dashboard, presenting the dashboard tour or gathering data variant of its content as described in the AC for #11808.
• When the user clicks the Maybe later button, the close icon, or outside the modal:
  • The modal is dismissed.
    • Note that dismissing the dashboard tour variant should also dismiss the gathering data variant, ensuring it won't be shown if Analytics is subsequently connected and in the gathering data state.
  • For the dashboard tour variant, a tooltip is shown pointing to the help menu with the following copy (see Figma):
    • Content: You can always take the dashboard tour from the help menu
    • Button label: Got it
• The modal is only shown if the setupFlowRefresh feature flag is enabled.

Implementation Brief

See the implementation guide in the Design Doc for guidelines on how to implement this issue.

• [ ] Update assets/js/components/DashboardMainApp.js
  • [ ] Check if setupFlowRefresh is enabled
  • [ ] If it is, render the WelcomeModal component at the very end (right before </Fragment>)
• [ ] Update assets/js/components/WelcomeModal.tsx
  • [ ] Add a new state [isOpen, setIsOpen] that defaults to true and use it in the Dialog's open prop
  • [ ] Add a new variable dismissedItemSlug
    • If we're showing the gathering data variant (showGatheringDataModal is true), it should be "welcome-modal-gathering-data"
    • Otherwise "welcome-modal-with-tour"
  • [ ] Check if the current variant has already been dismissed using the isItemDismissed selector from CORE_USER. If it is dismissed, return an early null
  • [ ] Create a callback dismissModal that
    • Sets the isOpen state to false
    • Calls dismissItem with dismissedItemSlug
    • If we dismiss the tour version, also dismiss the gathering version ("welcome-modal-with-tour")
  • [ ] Use dismissModal as the onClick callback for
    • Dialog's onClose
    • The close button's onClick
    • The "Get started" and "Maybe later" buttons' onClick
• [ ] Update assets/js/components/key-metrics-setup/KeyMetricsSetupApp.js
  • [ ] In the useEffect where synchronization happens, call isGatheringData() from both MODULES_ANALYTICS_4 and MODULES_SEARCH_CONSOLE stores to make sure the gathering state is resolved before landing on the dashboard

Test Coverage

• Update the WelcomeModal tests to cover the dismissal behavior
• Update the KeyMetricsSetupApp tests to cover the isGatheringData calls

QA Brief

Changelog entry

[techanvil]

Thanks @abdelmalekkkkk, this IB is looking good. A couple of small points, I think we should:

• Put the feature flag condition for rendering the modal in DashboardMainApp rather than returning null from WelcomeModal, circumventing the render of WelcomeModal entirely and avoiding unnecessary calls to the datastore and so forth.
• Use isOpen rather than open for the boolean state value, to be consistent.

[abdelmalekkkkk]

Thanks @techanvil. I made the two changes to the IB. Please take another look.

[techanvil]

Thanks @abdelmalekkkkk, LGTM!

IB ✅

[techanvil]

Hey @abdelmalekkkkk, I've just noticed that the IB doesn't cover this part of the AC. Please can you update it accordingly?

• For the dashboard tour variant, a tooltip is shown pointing to the help menu with the following copy (see Figma):
  • Content: You can always take the dashboard tour from the help menu
  • Button label: Got it