Implement UI for history visibility acknowledgement. (#31156)

* feat: Implement UI for history visibility acknowledgement. Shows a banner above the message composer whenever a user opens a room with non-join history visibility, which they can dismiss. - Whenever a user opens an encrypted room with non-join history visibility, show them a banner, unless we have already marked it as dismissed. - Whenever a user opens an encrypted room with joined history visibility, we unmark it as dismissed. Issue: https://github.com/element-hq/element-meta/issues/2875 * tests: Add test suite for `RoomStatusBarHistoryVisible`. * docs: Document `RoomStatusBarHistoryVisible` and props interface. * feat: Use newer `@vector-im/compound` components. * test: Update snapshots for `RoomStatusBarHistoryVisible` tests. * chore: Update playwright screenshots. * feat: Move `RoomStatusBarHistoryVisible` to `shared-components`. * fix: Address review comments on `RoomStatusBarHistoryVisible`. * fix: Address review comments on `RoomStatusBar` and tests. * chore: Move `RoomStatusBarHistoryVisible` to `room/RoomStatusBarHistoryVisible` * chore: Fix linting issues. * feat: Gate behind history visibility labs flag. * feat: Add link to history sharing docs. * fix: Resolve build issue with shared-components. * tests: Enable history sharing lab for unit tests. * tests: Set labs flag in SettingsStore mock. * fix: Remove non-existent arg - documentation should be updated! * chore: Remove old CSS rule filter. * fix: Use package name for import over relative path. * fix: Mark styles as important due to improper CSS load order. * docs: Add doc comments to `!important` directives. This change should restore my status as a good person. * docs: Correct license header. * tests: Update `RoomStatusBarHistoryVisible` snapshot. * tests: Update shared history invite screenshot. * tests: Revert spurious screenshot changes. * feat: Update to use `Banner` component. * chore: Remove broken import. * chore: Remove unused translation string. * tests: Add `getHistoryVisibility` to `currentState` of stub room. * tests: Update screenshot. * chore: Remove old snapshots. * tests: Update playwright screenshot. * feat: Separate `HistoryVisibleBanner` hooks into MVVM architecture. * chore: Remove unused imports. * feat: Use info link over action button for `HistoryVisibleBanner` * tests: Update snapshot for `HistoryVisibleBanner`. * chore: Remove unused imports. * feat: Switch to MVVM architecture per style guide. * tests: Update snapshot for `HistoryVisibleBanner`. * tests: Update shared components snapshots. * tests: Add unit tests for `HistoryVisibleBannerView` stories. * fix: Linting errors from SonarCloud. * feat: Finalise conversion to MVVM. * fix: Silent `this` binding issue. * tests: Update playwright snapshot. * feat: Introduce wrapper component for `HistoryVisibleBanner`. * tests: Update playwright screenshots for `HistoryVisibleBanner`. * docs: Add doc comments to fields in `HistoryVisibleBannerViewModel`. * tests: Update playwright snapshot.
2025-12-10 10:37:04 +00:00
parent a13e9c1285
commit cff9119324
15 changed files with 490 additions and 1 deletions
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+import { type Meta, type StoryFn } from "@storybook/react-vite";
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import { useMockedViewModel } from "../../useMockedViewModel";
+import {
+    HistoryVisibleBannerView,
+    type HistoryVisibleBannerViewActions,
+    type HistoryVisibleBannerViewSnapshot,
+} from "./HistoryVisibleBannerView";
+
+type HistoryVisibleBannerProps = HistoryVisibleBannerViewSnapshot & HistoryVisibleBannerViewActions;
+
+const HistoryVisibleBannerViewWrapper = ({ onClose, ...rest }: HistoryVisibleBannerProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onClose,
+    });
+    return <HistoryVisibleBannerView vm={vm} />;
+};
+
+export default {
+    title: "composer/HistoryVisibleBannerView",
+    component: HistoryVisibleBannerViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {
+        visible: true,
+        onClose: fn(),
+    },
+} as Meta<typeof HistoryVisibleBannerViewWrapper>;
+
+const Template: StoryFn<typeof HistoryVisibleBannerViewWrapper> = (args) => (
+    <HistoryVisibleBannerViewWrapper {...args} />
+);
+
+export const Default = Template.bind({});
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.test.tsx
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import { composeStories } from "@storybook/react-vite";
+
+import * as stories from "./HistoryVisibleBannerView.stories.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("HistoryVisibleBannerView", () => {
+    it("renders a history visible banner", () => {
+        const dismissFn = jest.fn();
+
+        const { container } = render(<Default onClose={dismissFn} />);
+        expect(container).toMatchSnapshot();
+
+        const button = container.querySelector("button");
+        expect(button).not.toBeNull();
+        button?.click();
+        expect(dismissFn).toHaveBeenCalled();
+    });
+});
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.tsx
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { Link } from "@vector-im/compound-web";
+import React, { type JSX } from "react";
+
+import { useViewModel } from "../../useViewModel";
+import { _t } from "../../utils/i18n";
+import { type ViewModel } from "../../viewmodel";
+import { Banner } from "../Banner";
+
+export interface HistoryVisibleBannerViewActions {
+    /**
+     * Called when the user dismisses the banner.
+     */
+    onClose: () => void;
+}
+
+export interface HistoryVisibleBannerViewSnapshot {
+    /**
+     * Whether the banner is currently visible.
+     */
+    visible: boolean;
+}
+
+/**
+ * The view model for the banner.
+ */
+export type HistoryVisibleBannerViewModel = ViewModel<HistoryVisibleBannerViewSnapshot> &
+    HistoryVisibleBannerViewActions;
+
+interface HistoryVisibleBannerViewProps {
+    /**
+     * The view model for the banner.
+     */
+    vm: HistoryVisibleBannerViewModel;
+}
+
+/**
+ * A component to alert that history is shared to new members of the room.
+ *
+ * @example
+ * ```tsx
+ * <HistoryVisibleBannerView vm={historyVisibleBannerViewModel} />
+ * ```
+ */
+export function HistoryVisibleBannerView({ vm }: Readonly<HistoryVisibleBannerViewProps>): JSX.Element {
+    const { visible } = useViewModel(vm);
+
+    const contents = _t(
+        "room|status_bar|history_visible",
+        {},
+        {
+            a: substituteATag,
+        },
+    );
+
+    return (
+        <>
+            {visible && (
+                <Banner type="info" onClose={() => vm.onClose()}>
+                    {contents}
+                </Banner>
+            )}
+        </>
+    );
+}
+
+function substituteATag(sub: string): JSX.Element {
+    return (
+        <Link href="https://element.io/en/help#e2ee-history-sharing" target="_blank">
+            {sub}
+        </Link>
+    );
+}
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/snapshots/HistoryVisibleBannerView.test.tsx.snap
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/snapshots/HistoryVisibleBannerView.test.tsx.snap
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
+<div>
+  <div
+    class="banner"
+    data-type="info"
+  >
+    <div
+      class="icon"
+    >
+      <svg
+        fill="currentColor"
+        font-size="24"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.288 7.288A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8t-.287.713A.97.97 0 0 1 12 9a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 8q0-.424.287-.713m.001 4.001A.97.97 0 0 1 12 11q.424 0 .713.287.287.288.287.713v4q0 .424-.287.712A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16v-4q0-.424.287-.713"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+    <span
+      class="content"
+    >
+      <span>
+        Messages you send will be shared with new members invited to this room. 
+        <a
+          class="_link_1v5rz_8"
+          data-kind="primary"
+          data-size="medium"
+          href="https://element.io/en/help#e2ee-history-sharing"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          Learn more
+        </a>
+      </span>
+    </span>
+    <div
+      class="actions"
+    >
+      <button
+        class="_button_187yx_8"
+        data-kind="secondary"
+        data-size="sm"
+        role="button"
+        tabindex="0"
+      >
+        Dismiss
+      </button>
+    </div>
+  </div>
+</div>
+`;
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/index.ts
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2025 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export * from "./HistoryVisibleBannerView";
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -12,6 +12,7 @@ export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
 export * from "./composer/Banner";
+export * from "./composer/HistoryVisibleBannerView";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";
 export * from "./pill-input/Pill";