Dynamic content (Part 3)

[nwmac]

Summary

Fixes #15342

Occurred changes and/or fixed issues

This is the last part of the code changes for Dynamic Content for 2.13.

This PR adds support for showing announcements on the Home Page, in addition to in the Notification Centre.

Technical notes summary

The notification store is tweaked slightly, to support a new Hidden level, which indicates that the notification should not be shown in the notification centre.

We add two new getters hidden and visible to easily get the notifications of these, while leaving the all getter in place.

We also add data to a notification and ensure this is persisted into the encrypted notification in local storage. This can be used to hold arbitrary data and is used by announcements to hold additional data it needs.

The bulk of the logic changes are in announcement.ts.

In addition to notification centre, we support a target of homepage/*. The * indicates a location in the UI - currently supported are banner and rhs (right-hand side).

For homepage announcements, we also support:

• An icon/image that will be displayed
• A style string that will be interpreted and used to modify the style of the announcement in the UI

The home page is updated to use two new components:

DynamicContentBanner and DynamicContentPanel.

These both use the composable content.ts to provide access to dynamic content and common code.

Both of these panels use common components for the icon/image and the close button.

Note that images use a specific format, which can be:

~IMAGE.svg
https://PATH/IMAGE.svg

i.e. we use ~ to reference a built-in image. Several images are built-in and added in this PR. We will most likely add additional ones.

We also support !ICON to use a named icon, rather than an image.

Additionally, the icon string can include extra info, for example

~IMAGE.svg@64x32#ff0000>12<24

this allows the image size, color, padding and margin to be set via the single icon reference.

Areas or cases that should be tested

Notification centre
Home page

Use the dynamic content test UI extension to test

Screenshot/Video

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base

[richard-cox]

Didn't manage to get through this all (specifically components, and testing different values and edge cases). Had some questions on announcements vs notifications vs others again (sorry)

[richard-cox]

Probably at the point where we need types for props application to where the announcement is made?

• common
• notification
• home page

[richard-cox]

AnnouncementNotificationData (and its AnnouncementNotificationIconData) aren't used anywhere

[richard-cox]

we've switched to 1:1 announcements to notifications, and notifications are either shown in the header or not with hidden and shown in the home page given a subset of target (location). rather than announcements --> notifications handled by notification process and announcements --> others handled by components + read preference.

it's a bit messier, but it's needed to persist non-notification announcements over refresh?

if so do we still need the announcements read pref, couldn't it just use the notification read state?