Update the Modal Dialog component for error and confirmation actions (Storybook)

[mxbclang]

Feature Description

Add the Error Modal to Storybook. See Error modal in design doc.

---

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

Acceptance criteria

• The existing <ModalDialog> component should be modified to look as per the new Audience Segmentation Modals (Figma Mock).
• When on mobile viewport, the corresponding mobile design should be followed.
• All existing uses of the <ModalDialog> component mentioned below should be updated:
  • The Disconnect and Reset Site Kit Modals with the danger property should be styled exactly as per the new Error Modals.
  • The Additional Permissions Required modal should be updated as per this Figma mock.
    • Note however that the primary CTA text should remain as it is, i.e. Proceed.
  • The Confirm Disconnect module modal which has multiple feature lines should be designed as per this Figma mock.
• All Storybook stories for each of the above components should be updated. Any old v5 format stories should be migrated to Storybook v6 stories.

Implementation Brief

• As defined in AC, update the assets/js/components/ModalDialog.js to match the new design. Some of the points to apply:
  • Text alignment is on the left for title and content
  • Buttons are grouped with the right alignment and new spacing between them
  • Buttons order is reversed - handleConfirm comes after handleDialog
  • Modal title can include SVG icon
• Update the modal in components listed in AC, which can be edited respectively in:
  • assets/js/components/UserMenu/index.js and assets/js/components/ResetButton.js
  • assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js
  • assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js

Test Coverage

• Update the edited components stories as defined in AC
  • Additional Permissions Required doesn't seem to have a story, it can be handy to use this issue to add it
  • stories/reset-button.stories.js uses the old storybook API. Move it to the assets/js/components/ResetButton.stories.js and adapt to the v6 API

QA Brief

• Setup Site Kit
• Verify that modals mentioned in AC are matching the new Figma designs now, on desktop and mobile
• Note: font weight 500 in figma is slightly different how it is rendered in the browser, so slight difference might be noticeable
• To trigger Disconnect modal:
  • Click on the google account menu item in the top right user menu. From the drop down, select Disconnect
• To trigger Reset site kit modal:
  • Go to settings -> admin settings -> reset site kit link
• To trigger Additional Permissions Required modal
  • Setup analytics, go to settings and change property to a - setup a new property option and click apply. It will trigger the modal
• To trigger Confirm Disconnect module modal:
  • Go to settings -> connected services and edit any of the modules. Click on CTA to disconnect the module
• Note, the default width of the modal in figma is 478px, but after discussion with Sigal regarding the icon alignment, it is agreed that it will 590px

Changelog entry

• Implement refreshed UI for the modal dialog component.

[jimmymadon]

@sigal-teller @marrrmarrr A point that was raised in yesterday's Audience Segmentation Engineering Kick-off were the subtle changes between existing and new UI elements. There are a few options:

1. We can raise such similar components as we come across them and check if the old counterpart could be used or
2. if we should introduce the new component now and then create new issues to "standardise and refactor old counterparts" across the app or
3. introduce the new and decide to just leave the old ones as is (if we deem the old ones to still be valid).

The Error Modal is very similar to our existing Modal Dialogue.

How should we proceed here?

[jimmymadon]

@sigal-teller @marrrmarrr As per this Slack conversation, we decided to keep introducing the new Audience Segmentation components and when easy to refactor existing components, we will prefer to update them as part of the same issue that creates the new component. If the refactoring / updating of older components is tedious, then we can create separate issues.

For the Error Modal in this issue, we decided to update the existing ModalDialog component.

@sigal-teller The ACs here might still need your help. Redesigning the danger modals is straightforward. However, how should the Additional Permissions Required and the Confirm Disconnect module modal be redesigned? Could you create mocks for these (even for mobile)? Should we replace the Exclamation icon in the new mock with something else? Thanks!

[techanvil]

AC LGTM. I had initially envisaged that we'd create the presentational versions of the modal in its three variants as part of this issue, but with the existing Modal Dialog styled appropriately via this issue, it should be straightforward to implement the error modal variants as part of #8134.

AC ✅

[techanvil]

IB ✅