TAC: Release Announcement

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^3.1.1",
+        "@vector-im/compound-web": "^3.3.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/release-announcement/index.ts

@@ -0,0 +1,77 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import { Page } from "@playwright/test";
+
+import { test as base, expect } from "../../element-web-test";
+
+/**
+ * Set up for release announcement tests.
+ */
+export const test = base.extend<{
+    util: Helpers;
+}>({
+    displayName: "Alice",
+    botCreateOpts: { displayName: "Other User" },
+
+    util: async ({ page, app, bot }, use) => {
+        await use(new Helpers(page));
+    },
+});
+
+export class Helpers {
+    constructor(private page: Page) {}
+
+    /**
+     * Get the release announcement with the given name.
+     * @param name
+     * @private
+     */
+    private getReleaseAnnouncement(name: string) {
+        return this.page.getByRole("dialog", { name });
+    }
+
+    /**
+     * Assert that the release announcement with the given name is visible.
+     * @param name
+     */
+    async assertReleaseAnnouncementIsVisible(name: string) {
+        await expect(this.getReleaseAnnouncement(name)).toBeVisible();
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`);
+    }
+
+    /**
+     * Assert that the release announcement with the given name is not visible.
+     * @param name
+     */
+    assertReleaseAnnouncementIsNotVisible(name: string) {
+        return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
+    }
+
+    /**
+     * Mark the release announcement with the given name as read.
+     * If the release announcement is not visible, this will throw an error.
+     * @param name
+     */
+    async markReleaseAnnouncementAsRead(name: string) {
+        const dialog = this.getReleaseAnnouncement(name);
+        await dialog.getByRole("button", { name: "Ok" }).click();
+    }
+}
+
+export { expect };

playwright/e2e/release-announcement/releaseAnnouncement.spec.ts

@@ -0,0 +1,44 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import { test, expect } from "./";
+
+test.describe("Release announcement", () => {
+    test.use({
+        config: {
+            features: {
+                feature_release_announcement: true,
+            },
+        },
+        labsFlags: ["threadsActivityCentre"],
+    });
+
+    test("should display the release announcement process", async ({ page, app, util }) => {
+        // The TAC release announcement should be displayed
+        await util.assertReleaseAnnouncementIsVisible("Threads Activity Centre");
+        // Hide the release announcement
+        await util.markReleaseAnnouncementAsRead("Threads Activity Centre");
+        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
+
+        await page.reload();
+        // Wait for EW to load
+        await expect(page.getByRole("navigation", { name: "Spaces" })).toBeVisible();
+        // Check that once the release announcement has been marked as viewed, it does not appear again
+        await util.assertReleaseAnnouncementIsNotVisible("Threads Activity Centre");
+    });
+});

playwright/element-web-test.ts

@@ -52,6 +52,11 @@ const CONFIG_JSON: Partial<IConfigOptions> = {
 
     // the location tests want a map style url.
     map_style_url: "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
+
+    features: {
+        // We don't want to go through the feature announcement during the e2e test
+        feature_release_announcement: false,
+    },
 };
 
 export type TestOptions = {

src/components/structures/ReleaseAnnouncement.tsx

@@ -0,0 +1,54 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React, { ComponentProps, JSX, PropsWithChildren } from "react";
+import { ReleaseAnnouncement as ReleaseAnnouncementCompound } from "@vector-im/compound-web";
+
+import { ReleaseAnnouncementStore, Features } from "../../stores/ReleaseAnnouncementStore";
+import { useIsReleaseAnnouncementEnabled } from "../../hooks/useReleaseAnnouncement";
+
+interface ReleaseAnnouncementProps
+    extends Omit<ComponentProps<typeof ReleaseAnnouncementCompound>, "open" | "onClick"> {
+    feature: Features;
+}
+
+/**
+ * Display a release announcement component around the children
+ * Wrapper gluing the release announcement compound and the ReleaseAnnouncementStore
+ * @param feature - the feature to announce, should be listed in {@link Features}
+ * @param children
+ * @param props
+ * @constructor
+ */
+export function ReleaseAnnouncement({
+    feature,
+    children,
+    ...props
+}: PropsWithChildren<ReleaseAnnouncementProps>): JSX.Element {
+    const enabled = useIsReleaseAnnouncementEnabled(feature);
+
+    return (
+        <ReleaseAnnouncementCompound
+            open={enabled}
+            onClick={() => ReleaseAnnouncementStore.instance.nextReleaseAnnouncement()}
+            {...props}
+        >
+            {children}
+        </ReleaseAnnouncementCompound>
+    );
+}

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

@@ -34,6 +34,8 @@ import { NotificationLevel } from "../../../../stores/notifications/Notification
 import PosthogTrackers from "../../../../PosthogTrackers";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
+import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
+import { useIsReleaseAnnouncementEnabled } from "../../../../hooks/useReleaseAnnouncement";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -49,6 +51,7 @@ interface ThreadsActivityCentreProps {
 export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCentreProps): JSX.Element {
     const [open, setOpen] = useState(false);
     const roomsAndNotifications = useUnreadThreadRooms(open);
+    const releaseAnnouncementEnabled = useIsReleaseAnnouncementEnabled("threadsActivityCentre");
 
     return (
         <div
@@ -65,41 +68,55 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
                 }
             }}
         >
-            <Menu
-                align="end"
-                open={open}
-                onOpenChange={(newOpen) => {
-                    // Track only when the Threads Activity Centre is opened
-                    if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
-
-                    setOpen(newOpen);
-                }}
-                side="right"
-                title={_t("threads_activity_centre|header")}
-                trigger={
+            {releaseAnnouncementEnabled ? (
+                <ReleaseAnnouncement
+                    feature="threadsActivityCentre"
+                    header={_t("threads_activity_centre|release_announcement_header")}
+                    description={_t("threads_activity_centre|release_announcement_description")}
+                    closeLabel={_t("action|ok")}
+                >
                     <ThreadsActivityCentreButton
                         displayLabel={displayButtonLabel}
                         notificationLevel={roomsAndNotifications.greatestNotificationLevel}
                     />
-                }
-            >
-                {/* Make the content of the pop-up scrollable */}
-                <div className="mx_ThreadsActivityCentre_rows">
-                    {roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
-                        <ThreadsActivityCentreRow
-                            key={room.roomId}
-                            room={room}
-                            notificationLevel={notificationLevel}
-                            onClick={() => setOpen(false)}
+                </ReleaseAnnouncement>
+            ) : (
+                <Menu
+                    align="end"
+                    open={open}
+                    onOpenChange={(newOpen) => {
+                        // Track only when the Threads Activity Centre is opened
+                        if (newOpen) PosthogTrackers.trackInteraction("WebThreadsActivityCentreButton");
+
+                        setOpen(newOpen);
+                    }}
+                    side="right"
+                    title={_t("threads_activity_centre|header")}
+                    trigger={
+                        <ThreadsActivityCentreButton
+                            displayLabel={displayButtonLabel}
+                            notificationLevel={roomsAndNotifications.greatestNotificationLevel}
                         />
-                    ))}
-                    {roomsAndNotifications.rooms.length === 0 && (
-                        <div className="mx_ThreadsActivityCentre_emptyCaption">
-                            {_t("threads_activity_centre|no_rooms_with_unreads_threads")}
-                        </div>
-                    )}
-                </div>
-            </Menu>
+                    }
+                >
+                    {/* Make the content of the pop-up scrollable */}
+                    <div className="mx_ThreadsActivityCentre_rows">
+                        {roomsAndNotifications.rooms.map(({ room, notificationLevel }) => (
+                            <ThreadsActivityCentreRow
+                                key={room.roomId}
+                                room={room}
+                                notificationLevel={notificationLevel}
+                                onClick={() => setOpen(false)}
+                            />
+                        ))}
+                        {roomsAndNotifications.rooms.length === 0 && (
+                            <div className="mx_ThreadsActivityCentre_emptyCaption">
+                                {_t("threads_activity_centre|no_rooms_with_unreads_threads")}
+                            </div>
+                        )}
+                    </div>
+                </Menu>
+            )}
         </div>
     );
 }

src/hooks/useReleaseAnnouncement.ts

@@ -0,0 +1,32 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import { useTypedEventEmitterState } from "./useEventEmitter";
+import { Features, ReleaseAnnouncementStore } from "../stores/ReleaseAnnouncementStore";
+
+/**
+ * Return true if the release announcement of the given feature is enabled
+ * @param feature
+ */
+export function useIsReleaseAnnouncementEnabled(feature: Features): boolean {
+    return useTypedEventEmitterState(
+        ReleaseAnnouncementStore.instance,
+        "releaseAnnouncementChanged",
+        () => ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === feature,
+    );
+}

src/i18n/strings/en_EN.json

@@ -1417,6 +1417,7 @@
         "group_spaces": "Spaces",
         "group_themes": "Themes",
         "group_threads": "Threads",
+        "group_ui": "User interface",
         "group_voip": "Voice & Video",
         "group_widgets": "Widgets",
         "hidebold": "Hide notification dot (only display counters badges)",
@@ -1440,6 +1441,7 @@
         "oidc_native_flow": "OIDC native authentication",
         "oidc_native_flow_description": "⚠ WARNING: Experimental. Use OIDC native authentication when supported by the server.",
         "pinning": "Message Pinning",
+        "release_announcement": "Release announcement",
         "render_reaction_images": "Render custom images in reactions",
         "render_reaction_images_description": "Sometimes referred to as \"custom emojis\".",
         "report_to_moderators": "Report to moderators",
@@ -3161,7 +3163,9 @@
     },
     "threads_activity_centre": {
         "header": "Threads activity",
-        "no_rooms_with_unreads_threads": "You don't have rooms with unread threads yet."
+        "no_rooms_with_unreads_threads": "You don't have rooms with unread threads yet.",
+        "release_announcement_description": "Threads notifications have moved, find them here from now on.",
+        "release_announcement_header": "Threads Activity Centre"
     },
     "time": {
         "about_day_ago": "about a day ago",