sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Room list: drag and drop rooms into sections (#33366)

Browse Source 
* chore: add dnd kit deps

* chore: patch dnd kit to fix ts error

* feat(sc): add drag-and-drop to room list item and wrapper

* feat(sc): make the room list header a droppable element

* feat(sc): add dnd to room list view

* feat(tags): can tag room as CHAT

* feat(vm): implement `changeRoomSection`

* feat(sc): disable dragging in flat list

* fix: disable keyboard navigation when dragging element

* test(sc): update snapshots

* test(sc): add dnd test

* test(e2e): add e2e tests for room drag and drop

* test(vm): add tests for changeRoomSection

* fix: remove focus visible when dropping with the mouse

* test(playwright): update existing screenshots

* chore(sc): move numbers out of main build

The Ew RecorderWorklet imports shared component bundle. However if the
bundle uses some deps using document/window which, the worklet will not
work.

The solution is to put the used functions into a separate bundle.

* doc(sc): add subpath import into README

* doc: typo barrel/bundle

* test: improve test expect

* refactor: add utils to section tag

* fix: incorrect check in tagRoom

* fix: add doc about dndkit tunning
This commit is contained in:
Florian Duros
2026-05-13 09:06:22 +00:00
committed by GitHub
parent 97da3be67a
commit 85aca65a81
50 changed files with 4845 additions and 3871 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
+1 -1
View File
@@ -12,7 +12,6 @@ import { mocked } from "jest-mock";
import type { MatrixClient } from "matrix-js-sdk/src/matrix";
import type { RoomNotificationState } from "../../../../src/stores/notifications/RoomNotificationState";
import {
CHATS_TAG,
LISTS_UPDATE_EVENT,
SECTION_CREATED_EVENT,
RoomListStoreV3Class,
@@ -37,6 +36,7 @@ import * as utils from "../../../../src/utils/notifications";
import * as utilsRLS from "../../../../src/stores/room-list-v3/utils.ts";
import { Action } from "../../../../src/dispatcher/actions";
import { SettingLevel } from "../../../../src/settings/SettingLevel.ts";
import { CHATS_TAG } from "../../../../src/stores/room-list-v3/section";
describe("RoomListStoreV3", () => {
async function getRoomListStore() {
apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
+33 -1
View File
@@ -7,9 +7,18 @@
import Modal from "../../../../src/Modal";
import SettingsStore from "../../../../src/settings/SettingsStore";
import { createSection, editSection, deleteSection } from "../../../../src/stores/room-list-v3/section";
import {
CHATS_TAG,
CUSTOM_SECTION_TAG_PREFIX,
createSection,
editSection,
deleteSection,
isDefaultSectionTag,
isSectionTag,
} from "../../../../src/stores/room-list-v3/section";
import { CreateSectionDialog } from "../../../../src/components/views/dialogs/CreateSectionDialog";
import { RemoveSectionDialog } from "../../../../src/components/views/dialogs/RemoveSectionDialog";
import { DefaultTagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
describe("section", () => {
afterEach(() => {
@@ -203,4 +212,27 @@ describe("section", () => {
expect(customDataCall![3]).not.toHaveProperty(tag);
});
});
describe("isDefaultSectionTag", () => {
it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, CHATS_TAG])("returns true for %s", (tag) => {
expect(isDefaultSectionTag(tag)).toBe(true);
});
it.each([DefaultTagID.Invite, "some.random.tag"])("returns false for %s", (tag) => {
expect(isDefaultSectionTag(tag)).toBe(false);
});
});
describe("isSectionTag", () => {
it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, CHATS_TAG, `${CUSTOM_SECTION_TAG_PREFIX}some-uuid`])(
"returns true for %s",
(tag) => {
expect(isSectionTag(tag)).toBe(true);
},
);
it.each([DefaultTagID.Invite, "some.random.tag"])("returns false for %s", (tag) => {
expect(isSectionTag(tag)).toBe(false);
});
});
});
apps/web/test/unit-tests/utils/room/getSectionTagForRoom-test.ts
+51
View File
@@ -0,0 +1,51 @@
/*
* Copyright 2026 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 Room } from "matrix-js-sdk/src/matrix";
import { DefaultTagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
import { CUSTOM_SECTION_TAG_PREFIX } from "../../../../src/stores/room-list-v3/section";
import { getSectionTagForRoom } from "../../../../src/utils/room/getSectionTagForRoom";
import { getTagsForRoom } from "../../../../src/utils/room/getTagsForRoom";
jest.mock("../../../../src/utils/room/getTagsForRoom");
const mockGetTagsForRoom = jest.mocked(getTagsForRoom);
describe("getSectionTagForRoom", () => {
const room = {} as Room;
it("should return null when room has no tags", () => {
mockGetTagsForRoom.mockReturnValue([]);
expect(getSectionTagForRoom(room)).toBeNull();
});
it("should return null when room only has a non-section tag", () => {
mockGetTagsForRoom.mockReturnValue([DefaultTagID.Untagged]);
expect(getSectionTagForRoom(room)).toBeNull();
});
it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, `${CUSTOM_SECTION_TAG_PREFIX}abc-123`])(
"should return section tag %s when present",
(tag) => {
mockGetTagsForRoom.mockReturnValue([tag]);
expect(getSectionTagForRoom(room)).toBe(tag);
},
);
it("should return the first section tag when multiple are present", () => {
const customTag = `${CUSTOM_SECTION_TAG_PREFIX}abc-123`;
mockGetTagsForRoom.mockReturnValue([DefaultTagID.Favourite, customTag]);
expect(getSectionTagForRoom(room)).toBe(DefaultTagID.Favourite);
});
it("should ignore non-section tags and return the section tag", () => {
const customTag = `${CUSTOM_SECTION_TAG_PREFIX}abc-123`;
mockGetTagsForRoom.mockReturnValue([DefaultTagID.Untagged, customTag]);
expect(getSectionTagForRoom(room)).toBe(customTag);
});
});
apps/web/test/unit-tests/utils/room/tagRoom-test.ts
+40 -10
View File
@@ -11,23 +11,23 @@ import { Room } from "matrix-js-sdk/src/matrix";
import RoomListActions from "../../../../src/actions/RoomListActions";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import { DefaultTagID, type TagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
import { CUSTOM_SECTION_TAG_PREFIX } from "../../../../src/stores/room-list-v3/section";
import { CHATS_TAG, CUSTOM_SECTION_TAG_PREFIX } from "../../../../src/stores/room-list-v3/section";
import { tagRoom } from "../../../../src/utils/room/tagRoom";
import { getMockClientWithEventEmitter } from "../../../test-utils";
import * as getTagsForRoomUtils from "../../../../src/utils/room/getTagsForRoom";
import * as getSectionTagForRoomUtils from "../../../../src/utils/room/getSectionTagForRoom";
describe("tagRoom()", () => {
const userId = "@alice:server.org";
const roomId = "!room:server.org";
const customTag = `${CUSTOM_SECTION_TAG_PREFIX}my-section`;
const makeRoom = (tags: TagID[] = []): Room => {
const makeRoom = (currentSectionTag: TagID | null = null): Room => {
const client = getMockClientWithEventEmitter({
isGuest: jest.fn(),
});
const room = new Room(roomId, client, userId);
jest.spyOn(getTagsForRoomUtils, "getTagsForRoom").mockReturnValue(tags);
jest.spyOn(getSectionTagForRoomUtils, "getSectionTagForRoom").mockReturnValue(currentSectionTag);
return room;
};
@@ -51,7 +51,7 @@ describe("tagRoom()", () => {
expect(RoomListActions.tagRoom).not.toHaveBeenCalled();
});
describe("when a room has no tags", () => {
describe("when a room has no section tag", () => {
it("should tag a room as favourite", () => {
const room = makeRoom();
@@ -93,11 +93,25 @@ describe("tagRoom()", () => {
customTag, // add
);
});
it("should do nothing meaningful when applying CHATS_TAG", () => {
const room = makeRoom();
tagRoom(room, CHATS_TAG);
expect(defaultDispatcher.dispatch).toHaveBeenCalled();
expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
room.client,
room,
null, // remove
null, // add
);
});
});
describe("when a room is tagged as favourite", () => {
it("should unfavourite a room", () => {
const room = makeRoom([DefaultTagID.Favourite]);
const room = makeRoom(DefaultTagID.Favourite);
tagRoom(room, DefaultTagID.Favourite);
@@ -111,7 +125,7 @@ describe("tagRoom()", () => {
});
it("should tag a room low priority", () => {
const room = makeRoom([DefaultTagID.Favourite]);
const room = makeRoom(DefaultTagID.Favourite);
tagRoom(room, DefaultTagID.LowPriority);
@@ -123,10 +137,25 @@ describe("tagRoom()", () => {
DefaultTagID.LowPriority, // add
);
});
it("should remove the favourite tag when applying CHATS_TAG", () => {
const room = makeRoom(DefaultTagID.Favourite);
tagRoom(room, CHATS_TAG);
expect(defaultDispatcher.dispatch).toHaveBeenCalled();
expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
room.client,
room,
DefaultTagID.Favourite, // remove
null, // add
);
});
});
describe("when a room is tagged as low priority", () => {
it("should favourite a room", () => {
const room = makeRoom([DefaultTagID.LowPriority]);
const room = makeRoom(DefaultTagID.LowPriority);
tagRoom(room, DefaultTagID.Favourite);
@@ -140,7 +169,7 @@ describe("tagRoom()", () => {
});
it("should untag a room low priority", () => {
const room = makeRoom([DefaultTagID.LowPriority]);
const room = makeRoom(DefaultTagID.LowPriority);
tagRoom(room, DefaultTagID.LowPriority);
@@ -161,8 +190,9 @@ describe("tagRoom()", () => {
{ label: "untag the custom section", applyTag: customTag, expectedAdd: null },
{ label: "replace with favourite", applyTag: DefaultTagID.Favourite, expectedAdd: DefaultTagID.Favourite },
{ label: "replace with another custom section", applyTag: otherCustomTag, expectedAdd: otherCustomTag },
{ label: "remove section tag when applying CHATS_TAG", applyTag: CHATS_TAG, expectedAdd: null },
])("should $label", ({ applyTag, expectedAdd }) => {
const room = makeRoom([customTag]);
const room = makeRoom(customTag);
tagRoom(room, applyTag);
apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
+2 -1
View File
@@ -30,8 +30,9 @@ import { Action } from "../../../src/dispatcher/actions";
import { CallStore } from "../../../src/stores/CallStore";
import { CallEvent, type Call } from "../../../src/models/Call";
import { RoomListItemViewModel } from "../../../src/viewmodels/room-list/RoomListItemViewModel";
import RoomListStoreV3, { CHATS_TAG } from "../../../src/stores/room-list-v3/RoomListStoreV3";
import RoomListStoreV3 from "../../../src/stores/room-list-v3/RoomListStoreV3";
import * as tagRoomModule from "../../../src/utils/room/tagRoom";
import { CHATS_TAG } from "../../../src/stores/room-list-v3/section";
jest.mock("../../../src/viewmodels/room-list/utils", () => ({
hasAccessToOptionsMenu: jest.fn().mockReturnValue(true),
apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
+2 -1
View File
@@ -13,8 +13,9 @@ import { RoomNotificationStateStore } from "../../../src/stores/notifications/Ro
import { NotificationStateEvents } from "../../../src/stores/notifications/NotificationState";
import { createTestClient, mkRoom } from "../../test-utils";
import SettingsStore from "../../../src/settings/SettingsStore";
import RoomListStoreV3, { CHATS_TAG } from "../../../src/stores/room-list-v3/RoomListStoreV3";
import RoomListStoreV3 from "../../../src/stores/room-list-v3/RoomListStoreV3";
import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
import { CHATS_TAG } from "../../../src/stores/room-list-v3/section";
describe("RoomListSectionHeaderViewModel", () => {
let onToggleExpanded: jest.Mock;
apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
+45 -1
View File
@@ -10,7 +10,7 @@ import { mocked } from "jest-mock";
import { waitFor } from "jest-matrix-react";
import { createTestClient, flushPromises, flushPromisesWithFakeTimers, mkStubRoom, stubClient } from "../../test-utils";
import RoomListStoreV3, { CHATS_TAG, RoomListStoreV3Event } from "../../../src/stores/room-list-v3/RoomListStoreV3";
import RoomListStoreV3, { RoomListStoreV3Event } from "../../../src/stores/room-list-v3/RoomListStoreV3";
import SpaceStore from "../../../src/stores/spaces/SpaceStore";
import { FilterEnum } from "../../../src/stores/room-list-v3/skip-list/filters";
import dispatcher from "../../../src/dispatcher/dispatcher";
@@ -21,6 +21,17 @@ import { RoomListViewModel } from "../../../src/viewmodels/room-list/RoomListVie
import { hasCreateRoomRights } from "../../../src/viewmodels/room-list/utils";
import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
import SettingsStore from "../../../src/settings/SettingsStore";
import { tagRoom } from "../../../src/utils/room/tagRoom";
import { getSectionTagForRoom } from "../../../src/utils/room/getSectionTagForRoom";
import { CHATS_TAG } from "../../../src/stores/room-list-v3/section";
jest.mock("../../../src/utils/room/tagRoom", () => ({
tagRoom: jest.fn(),
}));
jest.mock("../../../src/utils/room/getSectionTagForRoom", () => ({
getSectionTagForRoom: jest.fn().mockReturnValue(null),
}));
jest.mock("../../../src/viewmodels/room-list/utils", () => ({
hasCreateRoomRights: jest.fn().mockReturnValue(false),
@@ -1108,4 +1119,37 @@ describe("RoomListViewModel", () => {
});
});
});
describe("changeRoomSection", () => {
beforeEach(() => {
viewModel = new RoomListViewModel({ client: matrixClient });
mocked(tagRoom).mockClear();
});
it("should call tagRoom with the room and target tag", () => {
jest.spyOn(matrixClient, "getRoom").mockReturnValue(room1);
mocked(getSectionTagForRoom).mockReturnValue(null);
viewModel.changeRoomSection(room1.roomId, DefaultTagID.Favourite);
expect(tagRoom).toHaveBeenCalledWith(room1, DefaultTagID.Favourite);
});
it("should do nothing when the room is not found", () => {
jest.spyOn(matrixClient, "getRoom").mockReturnValue(null);
viewModel.changeRoomSection("!unknown:server", DefaultTagID.Favourite);
expect(tagRoom).not.toHaveBeenCalled();
});
it("should do nothing when the room is already in the target section", () => {
jest.spyOn(matrixClient, "getRoom").mockReturnValue(room1);
mocked(getSectionTagForRoom).mockReturnValue(DefaultTagID.Favourite);
viewModel.changeRoomSection(room1.roomId, DefaultTagID.Favourite);
expect(tagRoom).not.toHaveBeenCalled();
});
});
});