Add ability to hide images after clicking "show image" (#29467)

* start hide * Move useSettingsValueWithSetter to useSettings * Add new setting showMediaEventIds * Add a migration path * Add an action button to hide settings. * Tweaks to MImageBody to support new setting. * Fixup and add tests * add description for migration * docs fixes * add type * i18n * appese prettier * Add tests for HideActionButton * lint * lint * Use a hook for media visibility. * Drop setting hook usage. * Fixup MImageBody test * Fixup tests * Support functional components for message body rendering. * Add a comment * Move props into IProps
2026-11-03 16:10:05 +00:00 · 2025-03-18 14:23:24 +00:00
parent 839329b52a
commit e662c1959b
17 changed files with 376 additions and 50 deletions
@@ -0,0 +1,76 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+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 { fireEvent, render, screen } from "jest-matrix-react";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { HideActionButton } from "../../../../../src/components/views/messages/HideActionButton";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../../src/settings/SettingLevel";
+import type { Settings } from "../../../../../src/settings/Settings";
+
+function mockSetting(
+    showImages: Settings["showImages"]["default"],
+    showMediaEventIds: Settings["showMediaEventIds"]["default"],
+) {
+    jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
+        if (settingName === "showImages") {
+            return showImages;
+        } else if (settingName === "showMediaEventIds") {
+            return showMediaEventIds;
+        }
+        throw Error(`Unexpected setting ${settingName}`);
+    });
+}
+
+const event = new MatrixEvent({
+    event_id: "$foo:bar",
+    room_id: "!room:id",
+    sender: "@user:id",
+    type: "m.room.message",
+    content: {
+        body: "test",
+        msgtype: "m.image",
+        url: "mxc://matrix.org/1234",
+    },
+});
+
+describe("HideActionButton", () => {
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it("should show button when event is visible by showMediaEventIds setting", async () => {
+        mockSetting(false, { "$foo:bar": true });
+        render(<HideActionButton mxEvent={event} />);
+        expect(screen.getByRole("button")).toBeVisible();
+    });
+    it("should show button when event is visible by showImages setting", async () => {
+        mockSetting(true, {});
+        render(<HideActionButton mxEvent={event} />);
+        expect(screen.getByRole("button")).toBeVisible();
+    });
+    it("should hide button when event is hidden by showMediaEventIds setting", async () => {
+        jest.spyOn(SettingsStore, "getValue").mockReturnValue({ "$foo:bar": false });
+        render(<HideActionButton mxEvent={event} />);
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("should hide button when event is hidden by showImages setting", async () => {
+        mockSetting(false, {});
+        render(<HideActionButton mxEvent={event} />);
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("should store event as hidden when clicked", async () => {
+        const spy = jest.spyOn(SettingsStore, "setValue");
+        render(<HideActionButton mxEvent={event} />);
+        fireEvent.click(screen.getByRole("button"));
+        expect(spy).toHaveBeenCalledWith("showMediaEventIds", null, SettingLevel.DEVICE, { "$foo:bar": false });
+        // Button should be hidden after the setting is set.
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+});