Add persistent contextual notices about the Optimize sunset

[aaemnnosttv]

Feature Description

In addition to the banner notification in #6467, we will also add a number of contextual notices to inform users about the Optimize sunset.

---

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

Acceptance criteria

• An inline warning should be added to the Optimize module's tile on the Connect More Services tab, similar to the warning shown when Analytics is not active (reference)

  Optimize will no longer work after September 30, 2023 Learn more

• An inline warning should be added to the top of the Optimize module's setup, settings view, and settings edit components (example)

  Optimize will no longer work after September 30, 2023 and will be removed from subsequent versions of Site Kit after that date. Learn more

• Learn more URL (all instances): https://support.google.com/optimize/answer/12979939

• These warnings are to be static, and non-dismissible

Implementation Brief

• Using assets/js/components/settings/SetupModule.js,
  • Just after the ModuleSettingsWarning component, render the text from the first bullet point from the AC if slug is optimize.
    • The rendered markup should be similar to assets/js/components/notifications/ModuleSettingsWarning.js including the icon.
• Create assets/js/modules/optimize/components/common/OptimizeSunsetNotice.js which exports the OptimizeSunsetNotice functional component.
  • It should render the text from the second bullet point from the AC using the SettingsNotice component with the type set to TYPE_WARNING.
• Using assets/js/modules/optimize/components/setup/SetupMain.js, assets/js/modules/optimize/components/settings/SettingsView.js and assets/js/modules/optimize/components/settings/SettingsEdit.js, render OptimizeSunsetNotice in first position before any other text.
• To generate the learn more URL, query the core/site datastore via the getGoogleSupportURL selector.

Test Coverage

• No new tests to be added.

QA Brief

• Create a new site, connect the plugin with the Analytics module.
• Go to the settings page and open the tab to connect modules.
• Find the Optimize module in the list and ensure that you see the warning from AC.
• Connect the Optimize module and ensure that you see the new warning from AC on the setup form.
• Once the module is connected go to the settings page and open the Optimize module settings view.
• Ensure that you see the same warning as in AC.
• Edit the Optimize module settings to see the edit for and ensure that there is the same warning on the form.

Changelog entry

• Add notice about Optimize sunset to settings and setup screens.

[marrrmarrr]

Updated the copy here.

[eugene-manuilov]

Using assets/js/components/setup/ModuleSetup.js,

• Render OptimizeSunsetNotice if moduleSlug is optimize.

@asvinb, we should render it in assets/js/modules/optimize/components/setup/SetupMain.js, shouldn't we?

[asvinb]

You're right @eugene-manuilov . IB updated 😁

[eugene-manuilov]

IB ✔️

[mxbclang]

Planning to schedule for Sprint 99, ending April 21.

[wpdarren]

QA Update: ✅

Verified:

• An inline warning appears in the Optimize module's tile on the Connect More Services tab.
• An inline warning is added to the top of the Optimize module's setup screen.
• An inline warning is added to the settings view, and settings edit components.
• The copy is as per the AC, with the correct US date format consistent on all warnings.
• The URLs on all warnings point to the one in the AC.
• The warnings are to be static, and non-dismissible.

Completed testing on desktop and mobile viewports.

Note: I did observe the warnings were full-width where they were previously limited. #7140 will fix this.

Screenshots

     

[aaemnnosttv]

LGTM 👍