diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts index d9e1922934..b0b32a765a 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts @@ -333,10 +333,11 @@ test.describe("Room list", () => { }); test("should render a message preview", { tag: "@screenshot" }, async ({ page, app, user, bot }) => { - const roomListView = getRoomList(page); + await app.settings.openUserSettings("Preferences"); + await page.getByRole("switch", { name: "Show message previews" }).click(); + await app.closeDialog(); - await page.getByRole("button", { name: "Room Options" }).click(); - await page.getByRole("menuitemcheckbox", { name: "Show message previews" }).click(); + const roomListView = getRoomList(page); const roomId = await app.client.createRoom({ name: "activity" }); diff --git a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts index 33392d8848..e295eceb44 100644 --- a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts @@ -21,10 +21,12 @@ test.describe("Preferences user settings tab", () => { const locator = await app.settings.openUserSettings("Preferences"); await use(locator); }, + // display message preview settings + labsFlags: ["feature_new_room_list"], }); test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => { - await page.setViewportSize({ width: 1024, height: 3300 }); + await page.setViewportSize({ width: 1024, height: 4000 }); const tab = await app.settings.openUserSettings("Preferences"); // Assert that the top heading is rendered await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible(); diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index 5f92c00fc3..f10ac53fe4 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx b/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx index d6f54fcae7..451a4898b7 100644 --- a/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx +++ b/src/components/viewmodels/roomlist/RoomListHeaderViewModel.tsx @@ -32,7 +32,6 @@ import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { createRoom, hasCreateRoomRights } from "./utils"; import { type SortOption, useSorter } from "./useSorter"; -import { useMessagePreviewToggle } from "./useMessagePreviewToggle"; /** * Hook to get the active space and its title. @@ -127,14 +126,6 @@ export interface RoomListHeaderViewState { * The currently active sort option. */ activeSortOption: SortOption; - /** - * Whether message previews must be shown or not. - */ - shouldShowMessagePreview: boolean; - /** - * A function to turn on/off message previews. - */ - toggleMessagePreview: () => void; } /** @@ -157,7 +148,6 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState { /* Actions */ const { activeSortOption, sort } = useSorter(); - const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle(); const createChatRoom = useCallback((e: Event) => { defaultDispatcher.fire(Action.CreateChat); @@ -230,7 +220,5 @@ export function useRoomListHeaderViewModel(): RoomListHeaderViewState { openSpaceSettings, activeSortOption, sort, - shouldShowMessagePreview, - toggleMessagePreview, }; } diff --git a/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx b/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx index ad100a265c..d851ca34b5 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListOptionsMenu.tsx @@ -5,7 +5,7 @@ * Please see LICENSE files in the repository root for full details. */ -import { IconButton, Menu, MenuTitle, CheckboxMenuItem, Tooltip, RadioMenuItem } from "@vector-im/compound-web"; +import { IconButton, Menu, MenuTitle, Tooltip, RadioMenuItem } from "@vector-im/compound-web"; import React, { type Ref, type JSX, useState, useCallback } from "react"; import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal"; @@ -63,12 +63,6 @@ export function RoomListOptionsMenu({ vm }: Props): JSX.Element { checked={vm.activeSortOption === SortOption.AToZ} onSelect={onAtoZSelected} /> - - ); } diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index fa72cfe28e..913feafba3 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -242,12 +242,12 @@ export default class PreferencesUserSettingsTab extends React.Component { return
{tz}
; @@ -263,11 +263,13 @@ export default class PreferencesUserSettingsTab extends React.Component - {roomListSettings.length > 0 && ( - - {this.renderGroup(roomListSettings)} - - )} + + {this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)} + {/* The settings is on device level where the other room list settings are on account level */} + {newRoomListEnabled && ( + + )} + {this.renderGroup(PreferencesUserSettingsTab.SPACES_SETTINGS, SettingLevel.ACCOUNT)} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ee5378b11a..459b4fb188 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2095,7 +2095,6 @@ "room_list": { "add_room_label": "Add room", "add_space_label": "Add space", - "appearance": "Appearance", "breadcrumbs_empty": "No recently visited rooms", "breadcrumbs_label": "Recently visited rooms", "empty": { @@ -2154,7 +2153,6 @@ }, "room_options": "Room Options", "show_less": "Show less", - "show_message_previews": "Show message previews", "show_n_more": { "one": "Show %(count)s more", "other": "Show %(count)s more" @@ -2984,6 +2982,7 @@ "show_chat_effects": "Show chat effects (animations when receiving e.g. confetti)", "show_displayname_changes": "Show display name changes", "show_join_leave": "Show join/leave messages (invites/removes/bans unaffected)", + "show_message_previews": "Show message previews", "show_nsfw_content": "Show NSFW content", "show_read_receipts": "Show read receipts sent by other users", "show_redaction_placeholder": "Show a placeholder for removed messages", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 36030713ec..befc13478f 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1136,6 +1136,7 @@ export const SETTINGS: Settings = { "RoomList.showMessagePreview": { supportedLevels: [SettingLevel.DEVICE], default: false, + displayName: _td("settings|show_message_previews"), }, "RightPanel.phasesGlobal": { supportedLevels: [SettingLevel.DEVICE], diff --git a/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx b/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx index 09109366cf..f9fe45202a 100644 --- a/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx +++ b/test/unit-tests/components/viewmodels/roomlist/RoomListHeaderViewModel-test.tsx @@ -13,7 +13,7 @@ import { range } from "lodash"; import { useRoomListHeaderViewModel } from "../../../../../src/components/viewmodels/roomlist/RoomListHeaderViewModel"; import SpaceStore from "../../../../../src/stores/spaces/SpaceStore"; import { mkStubRoom, stubClient, withClientContextRenderOptions } from "../../../../test-utils"; -import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore"; +import SettingsStore from "../../../../../src/settings/SettingsStore"; import defaultDispatcher from "../../../../../src/dispatcher/dispatcher"; import { Action } from "../../../../../src/dispatcher/actions"; import { @@ -24,7 +24,6 @@ import { showSpaceSettings, } from "../../../../../src/utils/space"; import { createRoom, hasCreateRoomRights } from "../../../../../src/components/viewmodels/roomlist/utils"; -import { SettingLevel } from "../../../../../src/settings/SettingLevel"; import RoomListStoreV3 from "../../../../../src/stores/room-list-v3/RoomListStoreV3"; import { SortOption } from "../../../../../src/components/viewmodels/roomlist/useSorter"; import { SortingAlgorithm } from "../../../../../src/stores/room-list-v3/skip-list/sorters"; @@ -238,38 +237,4 @@ describe("useRoomListHeaderViewModel", () => { expect(vm.current.activeSortOption).toEqual(SortOption.AToZ); }); }); - - describe("message preview toggle", () => { - it("should return shouldShowMessagePreview based on setting", () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - const { result: vm } = render(); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - }); - - it("should update when setting changes", async () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - - let watchFn: CallbackFn; - jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, fn) => { - if (settingName === "RoomList.showMessagePreview") watchFn = fn; - return ""; - }); - const { result: vm } = render(); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => false); - act(() => watchFn("RoomList.showMessagePreview", "", SettingLevel.DEVICE, false, false)); - expect(vm.current.shouldShowMessagePreview).toEqual(false); - }); - - it("should change setting on toggle", () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation(() => true); - const fn = jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {}); - - const { result: vm } = render(); - expect(vm.current.shouldShowMessagePreview).toEqual(true); - act(() => vm.current.toggleMessagePreview()); - expect(fn).toHaveBeenCalledWith("RoomList.showMessagePreview", null, "device", false); - }); - }); }); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx index 4840808fe4..41ef9b0cf1 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx @@ -32,8 +32,6 @@ describe("", () => { canAccessSpaceSettings: true, sort: jest.fn(), activeSortOption: SortOption.Activity, - shouldShowMessagePreview: false, - toggleMessagePreview: jest.fn(), createRoom: jest.fn(), createVideoRoom: jest.fn(), createChatRoom: jest.fn(), diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx index c476bda0d1..02ba7eb54d 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListOptionsMenu-test.tsx @@ -91,48 +91,4 @@ describe("", () => { expect(vm.sort).toHaveBeenCalledWith("Recency"); }); - - it("should show message previews disabled", async () => { - const user = userEvent.setup(); - - const vm = { - shouldShowMessagePreview: false, - } as unknown as RoomListHeaderViewState; - - render(); - - await user.click(screen.getByRole("button", { name: "Room Options" })); - - expect(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })).not.toBeChecked(); - }); - - it("should show message previews enabled", async () => { - const user = userEvent.setup(); - - const vm = { - shouldShowMessagePreview: true, - } as unknown as RoomListHeaderViewState; - - render(); - - await user.click(screen.getByRole("button", { name: "Room Options" })); - - expect(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })).toBeChecked(); - }); - - it("should toggle message previews", async () => { - const user = userEvent.setup(); - - const vm = { - toggleMessagePreview: jest.fn(), - } as unknown as RoomListHeaderViewState; - - render(); - - await user.click(screen.getByRole("button", { name: "Room Options" })); - - await user.click(screen.getByRole("menuitemcheckbox", { name: "Show message previews" })); - - expect(vm.toggleMessagePreview).toHaveBeenCalled(); - }); });