From 4da149e56f5a593daf05ed9a84eea7da11d800e9 Mon Sep 17 00:00:00 2001 From: Skye Elliot Date: Wed, 17 Dec 2025 16:04:53 +0000 Subject: [PATCH] Update prop type & documentation for HistoryVisibleBanner and VM. (#31545) * docs: Update documentation for HistoryVisibleBanner and VM. * docs: Improve documentation for `HistoryVisibleBanner`, second pass. * docs: Move documentation to prop types over FC. Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * fix: Simplify type for `HistoryVisibleBannerViewModel` `threadId`. * docs: Apply suggestions from code review Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- .../views/composer/HistoryVisibleBanner.tsx | 12 ++++- .../views/rooms/MessageComposer.tsx | 2 +- .../HistoryVisibleBannerViewModel.tsx | 49 ++++++++++++++++++- .../HistoryVisibleBannerViewModel-test.tsx | 8 +-- 4 files changed, 64 insertions(+), 7 deletions(-) diff --git a/src/components/views/composer/HistoryVisibleBanner.tsx b/src/components/views/composer/HistoryVisibleBanner.tsx index 1d27696e9d..09286ae8e1 100644 --- a/src/components/views/composer/HistoryVisibleBanner.tsx +++ b/src/components/views/composer/HistoryVisibleBanner.tsx @@ -11,7 +11,17 @@ import { type Room } from "matrix-js-sdk/src/matrix"; import { HistoryVisibleBannerViewModel } from "../../../viewmodels/composer/HistoryVisibleBannerViewModel"; -export const HistoryVisibleBanner: React.FC<{ room: Room; threadId?: string | null }> = (props) => { +/** Wrapper around {@link HistoryVisibleBannerViewModel} for the creation of an auto-disposed view model. */ +export const HistoryVisibleBanner: React.FC<{ + /** The room instance associated with this banner view model. */ + room: Room; + + /** + * If not null, specifies the ID of the thread currently being viewed in the thread timeline side view, + * where the banner view is displayed as a child of the message composer. + */ + threadId: string | null; +}> = (props) => { const vm = useCreateAutoDisposedViewModel(() => new HistoryVisibleBannerViewModel(props)); return ; }; diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index b347656ce4..b2546b02a3 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -675,7 +675,7 @@ export class MessageComposer extends React.Component { return (
- +
implements HistoryVisibleBannerViewModelInterface @@ -34,6 +64,12 @@ export class HistoryVisibleBannerViewModel */ private readonly acknowledgedWatcher: string; + /** + * Computes the latest banner snapshot given the VM's props. + * @param room - The room the banner will be shown in. + * @param threadId - The thread ID passed in from the parent {@link MessageComposer}. + * @returns The latest snapshot. See {@link HistoryVisibleBannerViewSnapshot}. + */ private static readonly computeSnapshot = ( room: Room, threadId?: string | null, @@ -51,6 +87,10 @@ export class HistoryVisibleBannerViewModel }; }; + /** + * Creates a new view model instance. + * @param props - Properties for this view model. See {@link Props}. + */ public constructor(props: Props) { super(props, HistoryVisibleBannerViewModel.computeSnapshot(props.room, props.threadId)); @@ -69,6 +109,10 @@ export class HistoryVisibleBannerViewModel ); } + /** + * Recompute and update this VM instance's snapshot. This will update the `acknowledgedHistoryVisibility` + * store entry if necessary. + */ private setSnapshot(): void { const acknowledged = SettingsStore.getValue("acknowledgedHistoryVisibility", this.props.room.roomId); @@ -109,6 +153,9 @@ export class HistoryVisibleBannerViewModel ); } + /** + * Dispose of the viewmodel and its settings listeners. + */ public dispose(): void { super.dispose(); SettingsStore.unwatchSetting(this.featureWatcher); diff --git a/test/unit-tests/components/viewmodels/composer/HistoryVisibleBannerViewModel-test.tsx b/test/unit-tests/components/viewmodels/composer/HistoryVisibleBannerViewModel-test.tsx index 0c2670636a..764376aba3 100644 --- a/test/unit-tests/components/viewmodels/composer/HistoryVisibleBannerViewModel-test.tsx +++ b/test/unit-tests/components/viewmodels/composer/HistoryVisibleBannerViewModel-test.tsx @@ -54,7 +54,7 @@ describe("HistoryVisibleBannerViewModel", () => { }); it("should not show the banner in unencrypted rooms", () => { - const vm = new HistoryVisibleBannerViewModel({ room }); + const vm = new HistoryVisibleBannerViewModel({ room, threadId: null }); expect(vm.getSnapshot().visible).toBe(false); }); @@ -76,7 +76,7 @@ describe("HistoryVisibleBannerViewModel", () => { }), ]); - const vm = new HistoryVisibleBannerViewModel({ room }); + const vm = new HistoryVisibleBannerViewModel({ room, threadId: null }); expect(vm.getSnapshot().visible).toBe(false); }); @@ -99,7 +99,7 @@ describe("HistoryVisibleBannerViewModel", () => { }), ]); - const vm = new HistoryVisibleBannerViewModel({ room }); + const vm = new HistoryVisibleBannerViewModel({ room, threadId: null }); expect(vm.getSnapshot().visible).toBe(false); vm.dispose(); }); @@ -145,7 +145,7 @@ describe("HistoryVisibleBannerViewModel", () => { }), ]); - const vm = new HistoryVisibleBannerViewModel({ room }); + const vm = new HistoryVisibleBannerViewModel({ room, threadId: null }); expect(vm.getSnapshot().visible).toBe(true); await vm.onClose(); expect(vm.getSnapshot().visible).toBe(false);