diff --git a/playwright/e2e/right-panel/file-panel.spec.ts b/playwright/e2e/right-panel/file-panel.spec.ts index 84e7614e8e..52dd113314 100644 --- a/playwright/e2e/right-panel/file-panel.spec.ts +++ b/playwright/e2e/right-panel/file-panel.spec.ts @@ -50,7 +50,7 @@ test.describe("FilePanel", () => { test.describe("render", () => { test("should render empty state", async ({ page }) => { // Wait until the information about the empty state is rendered - await expect(page.locator(".mx_FilePanel_empty")).toBeVisible(); + await expect(page.locator(".mx_EmptyState")).toBeVisible(); // Take a snapshot of RightPanel - fix https://github.com/vector-im/element-web/issues/25332 await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png"); diff --git a/playwright/e2e/right-panel/notification-panel.spec.ts b/playwright/e2e/right-panel/notification-panel.spec.ts index 6223c1c13f..aa7dedf73a 100644 --- a/playwright/e2e/right-panel/notification-panel.spec.ts +++ b/playwright/e2e/right-panel/notification-panel.spec.ts @@ -35,7 +35,7 @@ test.describe("NotificationPanel", () => { await page.getByRole("button", { name: "Notifications" }).click(); // Wait until the information about the empty state is rendered - await expect(page.locator(".mx_NotificationPanel_empty")).toBeVisible(); + await expect(page.locator(".mx_EmptyState")).toBeVisible(); // Take a snapshot of RightPanel await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("empty.png"); diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index 51ebb3df92..632f709245 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -104,7 +104,7 @@ test.describe("RightPanel", () => { await page.getByRole("menuitem", { name: "Files" }).click(); await expect(page.locator(".mx_FilePanel")).toBeVisible(); - await expect(page.locator(".mx_FilePanel_empty")).toBeVisible(); + await expect(page.locator(".mx_EmptyState")).toBeVisible(); await page.getByTestId("base-card-back-button").click(); await checkRoomSummaryCard(page, ROOM_NAME); diff --git a/playwright/plugins/homeserver/synapse/index.ts b/playwright/plugins/homeserver/synapse/index.ts index 8d474d9fe9..b62c737645 100644 --- a/playwright/plugins/homeserver/synapse/index.ts +++ b/playwright/plugins/homeserver/synapse/index.ts @@ -28,7 +28,7 @@ import { randB64Bytes } from "../../utils/rand"; // Docker tag to use for `matrixdotorg/synapse` image. // We target a specific digest as every now and then a Synapse update will break our CI. // This digest is updated by the playwright-image-updates.yaml workflow periodically. -const DOCKER_TAG = "develop@sha256:ee66fc1ebbf15f9dde375cdb2afd544491b88b81ac3c82e6c4282bc3b7f332bc"; +const DOCKER_TAG = "develop@sha256:14ca769c834220a478a1e97df041361c6fb0a541ccb2f0666d3ce911224f5f7e"; async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise> { const templateDir = path.join(__dirname, "templates", opts.template); diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png index fb6d85ae52..fdbec37b70 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/empty-linux.png differ diff --git a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png index 5547e7621b..d18266534d 100644 Binary files a/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png and b/playwright/snapshots/right-panel/notification-panel.spec.ts/empty-linux.png differ diff --git a/res/css/_components.pcss b/res/css/_components.pcss index fc929f3d97..20a6d2fe54 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -73,7 +73,6 @@ @import "./structures/_MatrixChat.pcss"; @import "./structures/_MessagePanel.pcss"; @import "./structures/_NonUrgentToastContainer.pcss"; -@import "./structures/_NotificationPanel.pcss"; @import "./structures/_QuickSettingsButton.pcss"; @import "./structures/_RightPanel.pcss"; @import "./structures/_RoomSearch.pcss"; @@ -259,6 +258,7 @@ @import "./views/polls/pollHistory/_PollHistory.pcss"; @import "./views/polls/pollHistory/_PollHistoryList.pcss"; @import "./views/right_panel/_BaseCard.pcss"; +@import "./views/right_panel/_EmptyState.pcss"; @import "./views/right_panel/_EncryptionInfo.pcss"; @import "./views/right_panel/_PinnedMessagesCard.pcss"; @import "./views/right_panel/_RightPanelTabs.pcss"; diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index 1c80cde901..186893b24b 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -102,7 +102,3 @@ limitations under the License. padding-inline-start: 0; } } - -.mx_FilePanel_empty::before { - --maskImage: url("$(res)/img/element-icons/room/files.svg"); /* See: _RightPanel.pcss */ -} diff --git a/res/css/structures/_NotificationPanel.pcss b/res/css/structures/_NotificationPanel.pcss deleted file mode 100644 index 7a3ede9e50..0000000000 --- a/res/css/structures/_NotificationPanel.pcss +++ /dev/null @@ -1,19 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.mx_NotificationPanel_empty::before { - --maskImage: url("$(res)/img/element-icons/notifications.svg"); /* See: _RightPanel.pcss */ -} diff --git a/res/css/structures/_RightPanel.pcss b/res/css/structures/_RightPanel.pcss index 1cabe5b707..0ebd1e1509 100644 --- a/res/css/structures/_RightPanel.pcss +++ b/res/css/structures/_RightPanel.pcss @@ -72,30 +72,3 @@ limitations under the License. order: 2; margin: auto; } - -.mx_RightPanel_empty { - margin-right: -28px; - - h2 { - font-weight: 700; - margin: 16px 0; - } - - h2, - p { - font: var(--cpd-font-body-md-regular); - } - - &::before { - content: ""; - display: block; - margin: 11px auto 29px auto; - height: 42px; - width: 42px; - background-color: $header-panel-text-primary-color; - mask-image: var(--maskImage); - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - } -} diff --git a/res/css/views/right_panel/_EmptyState.pcss b/res/css/views/right_panel/_EmptyState.pcss new file mode 100644 index 0000000000..4bf620bae3 --- /dev/null +++ b/res/css/views/right_panel/_EmptyState.pcss @@ -0,0 +1,45 @@ +/* +Copyright 2024 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_EmptyState { + height: 100%; + box-sizing: border-box; + padding: var(--cpd-space-4x); + text-align: center; + + svg { + width: 56px; + height: 56px; + box-sizing: border-box; + border-radius: 8px; + padding: var(--cpd-space-3x); + background-color: $panel-actions; + } + + &::before { + /* Bloom using magic numbers directly out of Figma */ + content: ""; + position: absolute; + z-index: -1; + width: 642px; + height: 775px; + right: -253.77px; + top: 0; + background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%); + transform: rotate(-89.69deg); + overflow: hidden; + } +} diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index e084e277f0..c66c7f5afb 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -106,10 +106,17 @@ limitations under the License. } .mx_RoomView_messagePanel { - /* To avoid the rule from being applied to .mx_ThreadPanel_empty */ + &.mx_RoomView_messageListWrapper { + position: initial; + } + .mx_RoomView_messageListWrapper { width: calc(100% + 6px); /* 8px - 2px */ } + + .mx_RoomView_empty { + display: contents; + } } .mx_RoomView_MessageList { @@ -168,72 +175,6 @@ limitations under the License. mask-image: url("@vector-im/compound-design-tokens/icons/link.svg"); } -.mx_ThreadPanel_empty { - border-radius: 8px; - background: $background; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - bottom: 0; - left: 0; - padding: 20px; - box-sizing: border-box; /* Include padding and border */ - width: 100%; - - h2 { - color: $primary-content; - font-weight: var(--cpd-font-weight-semibold); - font-size: $font-18px; - margin-top: 24px; - margin-bottom: 10px; - } - - p { - font-size: $font-15px; - color: $secondary-content; - margin: 10px 0; - } - - button { - border: none; - background: none; - color: $accent; - font-size: $font-15px; - - &:hover, - &:active { - text-decoration: underline; - cursor: pointer; - } - } - - .mx_ThreadPanel_empty_tip { - font-size: $font-12px; - line-height: $font-15px; - - > b { - font-weight: var(--cpd-font-weight-semibold); - } - } -} - -.mx_ThreadPanel_largeIcon { - width: 28px; - height: 28px; - padding: 18px; - background: $system; - border-radius: 50%; - - &::after { - @mixin ThreadSummaryIcon; - width: inherit; - height: inherit; - } -} - .mx_ContextualMenu_wrapper { .mx_ThreadPanel_Header_FilterOptionItem { display: flex; diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index 3836863431..c4bf2c3ff7 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -28,6 +28,7 @@ import { TimelineWindow, } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg"; import { MatrixClientPeg } from "../../MatrixClientPeg"; import EventIndexPeg from "../../indexing/EventIndexPeg"; @@ -40,6 +41,7 @@ import Spinner from "../views/elements/Spinner"; import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import Measured from "../views/elements/Measured"; +import EmptyState from "../views/right_panel/EmptyState"; interface IProps { roomId: string; @@ -255,10 +257,11 @@ class FilePanel extends React.Component { // wrap a TimelinePanel with the jump-to-event bits turned off. const emptyState = ( -
-

{_t("file_panel|empty_heading")}

-

{_t("file_panel|empty_description")}

-
+ ); const isRoomEncrypted = this.noRoom ? false : MatrixClientPeg.safeGet().isRoomEncrypted(this.props.roomId); diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index 0da27a19b1..9c56da9609 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -16,6 +16,7 @@ limitations under the License. import React from "react"; import { logger } from "matrix-js-sdk/src/logger"; +import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications.svg"; import { _t } from "../../languageHandler"; import { MatrixClientPeg } from "../../MatrixClientPeg"; @@ -26,6 +27,7 @@ import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import Measured from "../views/elements/Measured"; import Heading from "../views/typography/Heading"; +import EmptyState from "../views/right_panel/EmptyState"; interface IProps { onClose(): void; @@ -57,10 +59,11 @@ export default class NotificationPanel extends React.PureComponent -

{_t("notif_panel|empty_heading")}

-

{_t("notif_panel|empty_description")}

- + ); let content: JSX.Element; diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index d9e1cf2aa8..7c7761368d 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -19,6 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react"; import { EventTimelineSet, Room, Thread } from "matrix-js-sdk/src/matrix"; import { IconButton, Tooltip } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; +import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads.svg"; import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg"; import BaseCard from "../views/right_panel/BaseCard"; @@ -37,6 +38,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton"; import Spinner from "../views/elements/Spinner"; import Heading from "../views/typography/Heading"; import { clearRoomNotification } from "../../utils/notifications"; +import EmptyState from "../views/right_panel/EmptyState"; interface IProps { roomId: string; @@ -73,8 +75,7 @@ export const ThreadPanelHeaderFilterOptionItem: React.FC< export const ThreadPanelHeader: React.FC<{ filterOption: ThreadFilterType; setFilterOption: (filterOption: ThreadFilterType) => void; - empty: boolean; -}> = ({ filterOption, setFilterOption, empty }) => { +}> = ({ filterOption, setFilterOption }) => { const mxClient = useMatrixClientContext(); const roomContext = useRoomContext(); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); @@ -140,86 +141,24 @@ export const ThreadPanelHeader: React.FC<{ {_t("common|threads")} - {!empty && ( - <> - - - - - -
- { - openMenu(); - PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev); - }} - > - {`${_t("threads|show_thread_filter")} ${value?.label}`} - - {contextMenu} - - )} -
- ); -}; - -interface EmptyThreadIProps { - hasThreads: boolean; - filterOption: ThreadFilterType; - showAllThreadsCallback: () => void; -} - -const EmptyThread: React.FC = ({ hasThreads, filterOption, showAllThreadsCallback }) => { - let body: JSX.Element; - if (hasThreads) { - body = ( - <> -

- {_t("threads|empty_has_threads_tip", { - replyInThread: _t("action|reply_in_thread"), - })} -

-

- {/* Always display that paragraph to prevent layout shift when hiding the button */} - {filterOption === ThreadFilterType.My ? ( - - ) : ( - <>  - )} -

- - ); - } else { - body = ( - <> -

{_t("threads|empty_explainer")}

-

- {_t( - "threads|empty_tip", - { - replyInThread: _t("action|reply_in_thread"), - }, - { - b: (sub) => {sub}, - }, - )} -

- - ); - } - - return ( -
-
-

{_t("threads|empty_heading")}

- {body} + + + + + +
+ { + openMenu(); + PosthogTrackers.trackInteraction("WebRightPanelThreadPanelFilterDropdown", ev); + }} + > + {`${_t("threads|show_thread_filter")} ${value?.label}`} + + {contextMenu}
); }; @@ -268,11 +207,7 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => + hasThreads && } id="thread-panel" className="mx_ThreadPanel" @@ -295,10 +230,12 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => timelineSet={timelineSet} showUrlPreview={false} // No URL previews at the threads list level empty={ - setFilterOption(ThreadFilterType.All)} + } alwaysShowTimestamps={true} diff --git a/src/components/views/right_panel/EmptyState.tsx b/src/components/views/right_panel/EmptyState.tsx new file mode 100644 index 0000000000..7189cb8b3a --- /dev/null +++ b/src/components/views/right_panel/EmptyState.tsx @@ -0,0 +1,42 @@ +/* +Copyright 2024 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { ComponentType } from "react"; +import { Text } from "@vector-im/compound-web"; + +import { Flex } from "../../utils/Flex"; + +interface Props { + Icon: ComponentType>; + title: string; + description: string; +} + +const EmptyState: React.FC = ({ Icon, title, description }) => { + return ( + + + + {title} + + + {description} + + + ); +}; + +export default EmptyState; diff --git a/src/i18n/strings/cs.json b/src/i18n/strings/cs.json index b98bcc01ed..25353f30df 100644 --- a/src/i18n/strings/cs.json +++ b/src/i18n/strings/cs.json @@ -3097,15 +3097,10 @@ "one": "%(count)s odpověď", "other": "%(count)s odpovědí" }, - "empty_explainer": "Vlákna pomáhají udržovat konverzace k tématu a snadno je sledovat.", - "empty_has_threads_tip": "Odpovědět na probíhající vlákno nebo použít \"%(replyInThread)s\", když najedete na zprávu a začnete novou.", - "empty_heading": "Udržujte diskuse organizované pomocí vláken", - "empty_tip": "Tip: Použijte \"%(replyInThread)s\" při najetí na zprávu.", "error_start_thread_existing_relation": "Nelze založit vlákno ve vlákně", "my_threads": "Moje vlákna", "my_threads_description": "Zobrazit všechna vlákna, kterých jste se zúčastnili", "open_thread": "Otevřít vlákno", - "show_all_threads": "Zobrazit všechna vlákna", "show_thread_filter": "Zobrazit:" }, "threads_activity_centre": { diff --git a/src/i18n/strings/de_DE.json b/src/i18n/strings/de_DE.json index 4ac9291038..5097bb2440 100644 --- a/src/i18n/strings/de_DE.json +++ b/src/i18n/strings/de_DE.json @@ -3073,15 +3073,10 @@ "one": "%(count)s Antwort", "other": "%(count)s Antworten" }, - "empty_explainer": "Threads helfen dabei, dass deine Konversationen beim Thema und leicht nachverfolgbar bleiben.", - "empty_has_threads_tip": "Antworte auf einen Thread oder klicke bei einer Nachricht auf „%(replyInThread)s“, um einen Thread zu starten.", - "empty_heading": "Organisiere Diskussionen mit Threads", - "empty_tip": "Tipp: Nutze “%(replyInThread)s” beim Schweben über eine Nachricht.", "error_start_thread_existing_relation": "Du kannst keinen Thread in einem Thread starten", "my_threads": "Meine Threads", "my_threads_description": "Zeigt alle Threads, an denen du teilgenommen hast", "open_thread": "Thread anzeigen", - "show_all_threads": "Alle Threads anzeigen", "show_thread_filter": "Zeige:" }, "time": { diff --git a/src/i18n/strings/el.json b/src/i18n/strings/el.json index d7ea9063ac..2e75cc9689 100644 --- a/src/i18n/strings/el.json +++ b/src/i18n/strings/el.json @@ -2441,14 +2441,10 @@ "one": "%(count)s απάντηση", "other": "%(count)s απαντήσεις" }, - "empty_explainer": "Τα νήματα σας βοηθούν να οργανώνετε και να παρακολουθείτε καλύτερα τις συνομιλίες σας.", - "empty_has_threads_tip": "Απαντήστε σε ένα νήμα εκτέλεσης που βρίσκεται σε εξέλιξη ή χρησιμοποιήστε το \"%(replyInThread)s\" όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα μήνυμα για να ξεκινήσετε ένα νέο.", - "empty_heading": "Διατηρήστε τις συζητήσεις οργανωμένες με νήματα", "error_start_thread_existing_relation": "Δεν είναι δυνατή η δημιουργία νήματος από ένα συμβάν με μια υπάρχουσα σχέση", "my_threads": "Τα νήματα μου", "my_threads_description": "Εμφανίζει όλα τα νήματα στα οποία έχετε συμμετάσχει", "open_thread": "Άνοιγμα νήματος", - "show_all_threads": "Εμφάνιση όλων των νημάτων", "show_thread_filter": "Εμφάνισε:" }, "time": { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 03da4e7811..12ad79607d 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3193,16 +3193,13 @@ "one": "%(count)s reply", "other": "%(count)s replies" }, - "empty_explainer": "Threads help keep your conversations on-topic and easy to track.", - "empty_has_threads_tip": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.", - "empty_heading": "Keep discussions organised with threads", - "empty_tip": "Tip: Use “%(replyInThread)s” when hovering over a message.", + "empty_description": "Use “%(replyInThread)s” when hovering over a message.", + "empty_title": "Threads help keep your conversations on-topic and easy to track.", "error_start_thread_existing_relation": "Can't create a thread from an event with an existing relation", "mark_all_read": "Mark all as read", "my_threads": "My threads", "my_threads_description": "Shows all threads you've participated in", "open_thread": "Open thread", - "show_all_threads": "Show all threads", "show_thread_filter": "Show:" }, "threads_activity_centre": { diff --git a/src/i18n/strings/es.json b/src/i18n/strings/es.json index 794ac603ba..bec39f8174 100644 --- a/src/i18n/strings/es.json +++ b/src/i18n/strings/es.json @@ -2822,15 +2822,10 @@ "one": "%(count)s respuesta", "other": "%(count)s respuestas" }, - "empty_explainer": "Los hilos ayudan a mantener tus conversaciones centradas y a que sean fáciles de seguir.", - "empty_has_threads_tip": "Responde a un hilo en curso o usa «%(replyInThread)s» al pasar el ratón por encima de un mensaje para iniciar uno nuevo.", - "empty_heading": "Organiza los temas de conversación en hilos", - "empty_tip": "Consejo: Usa «%(replyInThread)s» mientras pasas el ratón sobre un mensaje.", "error_start_thread_existing_relation": "No ha sido posible crear un hilo a partir de un evento con una relación existente", "my_threads": "Mis hilos", "my_threads_description": "Ver todos los hilos en los que has participado", "open_thread": "Abrir hilo", - "show_all_threads": "Ver todos los hilos", "show_thread_filter": "Mostrar:" }, "time": { diff --git a/src/i18n/strings/et.json b/src/i18n/strings/et.json index 4c714a9949..96e163f0ae 100644 --- a/src/i18n/strings/et.json +++ b/src/i18n/strings/et.json @@ -3044,15 +3044,10 @@ "one": "%(count)s vastus", "other": "%(count)s vastust" }, - "empty_explainer": "Jutulõngad aitavad hoida vestlused teemakohastena ning mugavalt loetavatena.", - "empty_has_threads_tip": "Vasta jätkuvas jutulõngas või uue jutulõnga loomiseks kasuta „%(replyInThread)s“ valikut, mida kuvatakse hiire liigutamisel sõnumi kohal.", - "empty_heading": "Halda vestlusi jutulõngadena", - "empty_tip": "Soovitus: Sõnumi kohal avanevast valikust kasuta „%(replyInThread)s“ võimalust.", "error_start_thread_existing_relation": "Jutulõnga ei saa luua sõnumist, mis juba on jutulõnga osa", "my_threads": "Minu jutulõngad", "my_threads_description": "Näitab kõiki jutulõngasid, kus sa oled osalenud", "open_thread": "Ava jutulõng", - "show_all_threads": "Näita kõiki jutulõngasid", "show_thread_filter": "Näita:" }, "time": { diff --git a/src/i18n/strings/fi.json b/src/i18n/strings/fi.json index 177029d11b..f44567a25d 100644 --- a/src/i18n/strings/fi.json +++ b/src/i18n/strings/fi.json @@ -2695,12 +2695,9 @@ "one": "%(count)s vastaus", "other": "%(count)s vastausta" }, - "empty_explainer": "Ketjut auttavat pitämään keskustelut asiayhteyteen sopivina ja helposti seurattavina.", - "empty_heading": "Pidä keskustelut järjestyksessä ketjuissa", "my_threads": "Omat ketjut", "my_threads_description": "Näyttää kaikki ketjut, joissa olet ollut osallinen", "open_thread": "Avaa ketju", - "show_all_threads": "Näytä kaikki ketjut", "show_thread_filter": "Näytä:" }, "time": { diff --git a/src/i18n/strings/fr.json b/src/i18n/strings/fr.json index a8df8fc902..55fc6ad1d5 100644 --- a/src/i18n/strings/fr.json +++ b/src/i18n/strings/fr.json @@ -3125,16 +3125,11 @@ "one": "%(count)s réponse", "other": "%(count)s réponses" }, - "empty_explainer": "Les fils de discussion vous permettent de recentrer vos conversations et de les rendre facile à suivre.", - "empty_has_threads_tip": "Répondez à un fil de discussion en cours ou utilisez \"%(replyInThread)s\" lorsque vous passez la souris sur un message pour en commencer un nouveau.", - "empty_heading": "Garde les discussions organisées à l’aide de fils de discussion", - "empty_tip": "Conseil : Utilisez « %(replyInThread)s » en survolant un message.", "error_start_thread_existing_relation": "Impossible de créer un fil de discussion à partir d’un événement avec une relation existante", "mark_all_read": "Tout marquer comme lu", "my_threads": "Mes fils de discussion", "my_threads_description": "Affiche tous les fils de discussion auxquels vous avez participé", "open_thread": "Ouvrir le fil de discussion", - "show_all_threads": "Afficher tous les fils de discussion", "show_thread_filter": "Affiche :" }, "threads_activity_centre": { diff --git a/src/i18n/strings/gl.json b/src/i18n/strings/gl.json index 99b4388671..7f8fa3cb2d 100644 --- a/src/i18n/strings/gl.json +++ b/src/i18n/strings/gl.json @@ -2598,15 +2598,10 @@ "one": "%(count)s resposta", "other": "%(count)s respostas" }, - "empty_explainer": "Os fíos axúdanche a manter as conversas no tema e facilitan o seguimento.", - "empty_has_threads_tip": "Responde a unha conversa en curso ou usa \"%(replyInThread)s\" cando pasas por enriba dunha mensaxe co rato para iniciar unha nova.", - "empty_heading": "Manter as conversas organizadas con fíos", - "empty_tip": "Truco: Usa \"%(replyInThread)s\" ao poñerte enriba dunha mensaxe.", "error_start_thread_existing_relation": "Non se pode crear un tema con unha relación existente desde un evento", "my_threads": "As miñas conversas", "my_threads_description": "Mostra tódalas conversas nas que participaches", "open_thread": "Abrir fío", - "show_all_threads": "Mostra tódolos temas", "show_thread_filter": "Mostrar:" }, "time": { diff --git a/src/i18n/strings/he.json b/src/i18n/strings/he.json index 4f8991ff6e..8c67ee5dac 100644 --- a/src/i18n/strings/he.json +++ b/src/i18n/strings/he.json @@ -2076,15 +2076,10 @@ "threads": { "all_threads": "כל הקישורים", "all_threads_description": "הצג את כל הקישורים מחדר זה", - "empty_explainer": "שרשורים עוזרים לשמור על השיחות שלכם בנושא וקל למעקב.", - "empty_has_threads_tip": "השיבו לשרשור מתמשך או השתמשו ב-\"%(replyInThread)s\" כשאתם מרחפים מעל הודעה כדי להתחיל הודעה חדשה.", - "empty_heading": "שימרו על דיונים מאורגנים בשרשורים", - "empty_tip": "טיפ: השתמש ב-\"%(replyInThread)s\" כשאתם מרחפים מעל הודעה.", "error_start_thread_existing_relation": "לא ניתן ליצור שרשור מאירוע עם קשר קיים", "my_threads": "הקישורים שלי", "my_threads_description": "הצג את כל השרשורים שאתם משתתפים בהם", "open_thread": "פתיחת שרשור", - "show_all_threads": "הצג את כל השרשורים", "show_thread_filter": "הצג:" }, "time": { diff --git a/src/i18n/strings/hu.json b/src/i18n/strings/hu.json index 526bd81639..6b90b22d1e 100644 --- a/src/i18n/strings/hu.json +++ b/src/i18n/strings/hu.json @@ -3012,15 +3012,10 @@ "one": "%(count)s válasz", "other": "%(count)s válasz" }, - "empty_explainer": "Az üzenetszálak segítenek a különböző témájú beszélgetések figyelemmel kísérésében.", - "empty_has_threads_tip": "Válaszoljon egy meglévő üzenetszálban, vagy új üzenetszál indításához használja a „%(replyInThread)s” lehetőséget az üzenet sarkában megjelenő menüben.", - "empty_heading": "Beszélgetések üzenetszálakba rendezése", - "empty_tip": "Tipp: Használja a „%(replyInThread)s” lehetőséget a szöveg fölé navigálva.", "error_start_thread_existing_relation": "Nem lehet üzenetszálat indítani olyan eseményről ami már rendelkezik kapcsolattal", "my_threads": "Saját üzenetszálak", "my_threads_description": "Minden üzenetszál megjelenítése, amelyben részt vesz", "open_thread": "Üzenetszál megnyitása", - "show_all_threads": "Minden üzenetszál megjelenítése", "show_thread_filter": "Megjelenítés:" }, "time": { diff --git a/src/i18n/strings/id.json b/src/i18n/strings/id.json index 79697d7dad..c3b8c462e2 100644 --- a/src/i18n/strings/id.json +++ b/src/i18n/strings/id.json @@ -3046,15 +3046,10 @@ "one": "%(count)s balasan", "other": "%(count)s balasan" }, - "empty_explainer": "Utasan membantu membuat obrolan sesuai topik dan mudah untuk dilacak.", - "empty_has_threads_tip": "Balas ke utasan yang sedang terjadi atau gunakan “%(replyInThread)s” ketika kursor diletakkan pada pesan untuk memulai yang baru.", - "empty_heading": "Buat diskusi tetap teratur dengan utasan", - "empty_tip": "Tip: Gunakan “%(replyInThread)s” ketika kursor di atas pesan.", "error_start_thread_existing_relation": "Tidak dapat membuat utasan dari sebuah peristiwa dengan relasi yang sudah ada", "my_threads": "Utasan saya", "my_threads_description": "Menampilkan semua utasan yang Anda berpartisipasi", "open_thread": "Buka utasan", - "show_all_threads": "Tampilkan semua utasan", "show_thread_filter": "Tampilkan:" }, "time": { diff --git a/src/i18n/strings/is.json b/src/i18n/strings/is.json index 10c477173a..3688882ada 100644 --- a/src/i18n/strings/is.json +++ b/src/i18n/strings/is.json @@ -2505,12 +2505,9 @@ "one": "%(count)s svar", "other": "%(count)s svör" }, - "empty_explainer": "Spjallþræðir hjálpa til við að halda samræðum við efnið og gerir auðveldara að rekja þær.", - "empty_heading": "Haltu umræðum skipulögðum með spjallþráðum", "my_threads": "Spjallþræðirnir mínir", "my_threads_description": "Birtir alla spjallþræði sem þú hefur tekið þátt í", "open_thread": "Opna spjallþráð", - "show_all_threads": "Birta alla spjallþræði", "show_thread_filter": "Sýna:" }, "time": { diff --git a/src/i18n/strings/it.json b/src/i18n/strings/it.json index c8a700b6e6..59d807a957 100644 --- a/src/i18n/strings/it.json +++ b/src/i18n/strings/it.json @@ -3090,15 +3090,10 @@ "one": "%(count)s risposta", "other": "%(count)s risposte" }, - "empty_explainer": "Le conversazioni ti aiutano a tenere le tue discussioni in tema e rintracciabili.", - "empty_has_threads_tip": "Rispondi ad una conversazione in corso o usa \"%(replyInThread)s\" passando sopra ad un messaggio per iniziarne una nuova.", - "empty_heading": "Tieni le discussioni organizzate in conversazioni", - "empty_tip": "Consiglio: usa \"%(replyInThread)s\" passando sopra un messaggio.", "error_start_thread_existing_relation": "Impossibile creare una conversazione da un evento con una relazione esistente", "my_threads": "Le mie conversazioni", "my_threads_description": "Mostra tutte le conversazioni a cui hai partecipato", "open_thread": "Apri conversazione", - "show_all_threads": "Mostra tutte le conversazioni", "show_thread_filter": "Mostra:" }, "threads_activity_centre": { diff --git a/src/i18n/strings/ja.json b/src/i18n/strings/ja.json index e07756ffd1..69aec14f82 100644 --- a/src/i18n/strings/ja.json +++ b/src/i18n/strings/ja.json @@ -2827,15 +2827,10 @@ "other": "%(count)s件の返信", "one": "%(count)s件の返信" }, - "empty_explainer": "スレッド機能を使うと、会話のテーマを維持したり、会話を簡単に追跡したりすることができます。", - "empty_has_threads_tip": "既存のスレッドに返信するか、メッセージの「%(replyInThread)s」機能を使用すると新しいスレッドを開始できます。", - "empty_heading": "スレッド機能を使って、会話をまとめましょう", - "empty_tip": "ヒント:メッセージの「%(replyInThread)s」機能を使用すると新しいスレッドを開始できます。", "error_start_thread_existing_relation": "既存の関係のあるイベントからスレッドを作成することはできません", "my_threads": "自分のスレッド", "my_threads_description": "参加している全スレッドを表示", "open_thread": "スレッドを開く", - "show_all_threads": "全てのスレッドを表示", "show_thread_filter": "表示:" }, "time": { diff --git a/src/i18n/strings/lo.json b/src/i18n/strings/lo.json index 8cfe241876..a7f36be946 100644 --- a/src/i18n/strings/lo.json +++ b/src/i18n/strings/lo.json @@ -2457,15 +2457,10 @@ "one": "%(count)s ຕອບກັບ", "other": "%(count)s ຕອບກັບ" }, - "empty_explainer": "ກະທູ້ຊ່ວຍໃຫ້ການສົນທະນາຂອງທ່ານຢູ່ໃນຫົວຂໍ້ ແລະ ງ່າຍຕໍ່ການຕິດຕາມ.", - "empty_has_threads_tip": "ຕອບກັບຫາກະທູ້ທີ່ກຳລັງດຳເນີນ ຫຼືໃຊ້ ຢູ່“%(replyInThread)s” ເມື່ອເລື່ອນໃສ່ຂໍ້ຄວາມເພື່ອເລີ່ມຕົ້ນອັນໃໝ່.", - "empty_heading": "ຮັກສາການສົນທະນາທີ່ມີການຈັດລະບຽບ", - "empty_tip": "ເຄັດລັບ: ໃຊ້ “%(replyInThread)s” ເມື່ອເລື່ອນໃສ່ຂໍ້ຄວາມ.", "error_start_thread_existing_relation": "ບໍ່ສາມາດສ້າງກະທູ້ຈາກເຫດການທີ່ມີຄວາມສໍາພັນທີ່ມີຢູ່ແລ້ວ", "my_threads": "ກະທູ້ຂອງຂ້ອຍ", "my_threads_description": "ສະແດງຫົວຂໍ້ທັງໝົດທີ່ທ່ານໄດ້ເຂົ້າຮ່ວມ", "open_thread": "ເປີດກະທູ້", - "show_all_threads": "ສະແດງຫົວຂໍ້ທັງໝົດ", "show_thread_filter": "ສະແດງ:" }, "time": { diff --git a/src/i18n/strings/nl.json b/src/i18n/strings/nl.json index dbd0b4ddd3..1927341c57 100644 --- a/src/i18n/strings/nl.json +++ b/src/i18n/strings/nl.json @@ -2620,15 +2620,10 @@ "one": "%(count)s reactie", "other": "%(count)s reacties" }, - "empty_explainer": "Threads helpen jou gesprekken on-topic te houden en gemakkelijk bij te houden.", - "empty_has_threads_tip": "Reageer op een lopende thread of gebruik \"%(replyInThread)s\" wanneer je de muisaanwijzer op een bericht plaatst om een nieuwe te starten.", - "empty_heading": "Houd threads georganiseerd", - "empty_tip": "Tip: Gebruik “%(replyInThread)s” met de muiscursor boven een bericht.", "error_start_thread_existing_relation": "Kan geen discussie maken van een gebeurtenis met een bestaande relatie", "my_threads": "Mijn discussies", "my_threads_description": "Toon alle threads waarin je hebt bijgedragen", "open_thread": "Open discussie", - "show_all_threads": "Threads weergeven", "show_thread_filter": "Toon:" }, "time": { diff --git a/src/i18n/strings/pl.json b/src/i18n/strings/pl.json index 671ec8c738..90ea7ea988 100644 --- a/src/i18n/strings/pl.json +++ b/src/i18n/strings/pl.json @@ -3197,16 +3197,11 @@ "one": "%(count)s odpowiedź", "other": "%(count)s odpowiedzi" }, - "empty_explainer": "Dzięki wątkom Twoje rozmowy są zorganizowane i łatwe do śledzenia.", - "empty_has_threads_tip": "Odpowiedz do trwającego już wątku lub użyj “%(replyInThread)s” najeżdżając na wiadomość, aby rozpocząć nową.", - "empty_heading": "Organizuj dyskusje za pomocą wątków", - "empty_tip": "Tip: Użyj “%(replyInThread)s” najeżdżając na wiadomość.", "error_start_thread_existing_relation": "Nie można utworzyć wątku z wydarzenia z istniejącą relacją", "mark_all_read": "Oznacz wszystkie jako przeczytane", "my_threads": "Moje wątki", "my_threads_description": "Pokazuje wszystkie wątki, w których brałeś udział", "open_thread": "Otwórz wątek", - "show_all_threads": "Pokaż wszystkie wątki", "show_thread_filter": "Pokaż:" }, "threads_activity_centre": { diff --git a/src/i18n/strings/ru.json b/src/i18n/strings/ru.json index 79afe8b52a..45d229ca61 100644 --- a/src/i18n/strings/ru.json +++ b/src/i18n/strings/ru.json @@ -3074,15 +3074,10 @@ "one": "%(count)s ответ", "other": "%(count)s ответов" }, - "empty_explainer": "Обсуждения помогают поддерживать и легко отслеживать тематику бесед.", - "empty_has_threads_tip": "Ответьте в текущее обсуждение или создайте новое, наведя курсор на сообщение и нажав «%(replyInThread)s».", - "empty_heading": "Организуйте обсуждения с помощью обсуждений", - "empty_tip": "Совет: Используйте “%(replyInThread)s” при наведении курсора на сообщение.", "error_start_thread_existing_relation": "Невозможно создать обсуждение из события с существующей связью", "my_threads": "Мои обсуждения", "my_threads_description": "Показывает все обсуждения, в которых вы принимали участие", "open_thread": "Открыть ветку", - "show_all_threads": "Показать все обсуждения", "show_thread_filter": "Показать:" }, "time": { diff --git a/src/i18n/strings/sk.json b/src/i18n/strings/sk.json index e4bec50287..47a00bb12e 100644 --- a/src/i18n/strings/sk.json +++ b/src/i18n/strings/sk.json @@ -3077,15 +3077,10 @@ "one": "%(count)s odpoveď", "other": "%(count)s odpovedí" }, - "empty_explainer": "Vlákna pomáhajú udržiavať konverzácie v téme a uľahčujú ich sledovanie.", - "empty_has_threads_tip": "Odpovedzte na prebiehajúce vlákno alebo použite \"%(replyInThread)s\", keď prejdete nad správu a začnete novú.", - "empty_heading": "Udržujte diskusie organizované pomocou vlákien", - "empty_tip": "Tip: Použite položku “%(replyInThread)s”, keď prejdete ponad správu.", "error_start_thread_existing_relation": "Nie je možné vytvoriť vlákno z udalosti s existujúcim vzťahom", "my_threads": "Moje vlákna", "my_threads_description": "Zobrazí všetky vlákna, v ktorých ste sa zúčastnili", "open_thread": "Otvoriť vlákno", - "show_all_threads": "Zobraziť všetky vlákna", "show_thread_filter": "Zobraziť:" }, "time": { diff --git a/src/i18n/strings/sq.json b/src/i18n/strings/sq.json index 6563ee0fd1..5c67bb8d5b 100644 --- a/src/i18n/strings/sq.json +++ b/src/i18n/strings/sq.json @@ -2894,15 +2894,10 @@ "one": "%(count)s përgjigje", "other": "%(count)s përgjigje" }, - "empty_explainer": "Rrjedhat ndihmojnë që të mbahen bisedat tuaja brenda temës dhe të ndiqen kollaj.", - "empty_has_threads_tip": "Përgjigjuni te një rrjedhë në zhvillim e sipër, ose përdorni “%(replyInThread)s”, kur kalohet kursori sipër një mesazhi për të filluar një të re.", - "empty_heading": "Mbajini diskutimet të sistemuara në rrjedha", - "empty_tip": "Ndihmëz: Përdorni “%(replyInThread)s”, teksa kaloni kursorin sipër një mesazhi.", "error_start_thread_existing_relation": "S’mund të krijohet një rrjedhë prej një akti me një marrëdhënie ekzistuese", "my_threads": "Rrjedhat e mia", "my_threads_description": "Shfaq krejt rrjedhat ku keni marrë pjesë", "open_thread": "Hape rrjedhën", - "show_all_threads": "Shfaqi krejt rrjedhat", "show_thread_filter": "Shfaq:" }, "time": { diff --git a/src/i18n/strings/sv.json b/src/i18n/strings/sv.json index 8e10fa33ac..6774e882ef 100644 --- a/src/i18n/strings/sv.json +++ b/src/i18n/strings/sv.json @@ -3089,15 +3089,10 @@ "one": "%(count)s svar", "other": "%(count)s svar" }, - "empty_explainer": "Trådar underlättar för att hålla konversationer till ämnet och gör dem lättare att följa.", - "empty_has_threads_tip": "Svara i en pågående tråd eller använd \"%(replyInThread)s\" när du håller över ett meddelande för att starta en ny tråd.", - "empty_heading": "Håll diskussioner organiserade med trådar", - "empty_tip": "Tips: Välj \"%(replyInThread)s\" när du håller över ett meddelande.", "error_start_thread_existing_relation": "Kan inte skapa tråd från en händelse med en existerande relation", "my_threads": "Mina trådar", "my_threads_description": "Visar alla trådar du har medverkat i", "open_thread": "Öppna tråd", - "show_all_threads": "Visa alla trådar", "show_thread_filter": "Visa:" }, "threads_activity_centre": { diff --git a/src/i18n/strings/uk.json b/src/i18n/strings/uk.json index 53300cf08c..932b7e8689 100644 --- a/src/i18n/strings/uk.json +++ b/src/i18n/strings/uk.json @@ -3009,15 +3009,10 @@ "one": "%(count)s відповідь", "other": "%(count)s відповідей" }, - "empty_explainer": "Гілки допомагають підтримувати розмови за темою та за ними легко стежити.", - "empty_has_threads_tip": "Дайте відповідь у наявну гілку, або створіть нову, навівши курсор на повідомлення й натиснувши «%(replyInThread)s».", - "empty_heading": "Упорядкуйте обговорення за допомогою гілок", - "empty_tip": "Порада: Використовуйте «%(replyInThread)s» навівши вказівник на повідомлення.", "error_start_thread_existing_relation": "Неможливо створити гілку з події з наявним відношенням", "my_threads": "Мої гілки", "my_threads_description": "Показує всі гілки, де ви брали участь", "open_thread": "Відкрити гілку", - "show_all_threads": "Показати всі гілки", "show_thread_filter": "Показати:" }, "time": { diff --git a/src/i18n/strings/vi.json b/src/i18n/strings/vi.json index 7abc70dedc..359c0e3182 100644 --- a/src/i18n/strings/vi.json +++ b/src/i18n/strings/vi.json @@ -2768,10 +2768,8 @@ "one": "%(count)s trả lời", "other": "%(count)s trả lời" }, - "empty_heading": "Giữ các cuộc thảo luận được tổ chức với các chủ đề này", "my_threads": "Các chủ đề của tôi", "my_threads_description": "Hiển thị tất cả các chủ đề bạn đã tham gia", - "show_all_threads": "Hiển thị tất cả chủ đề", "show_thread_filter": "Hiển thị:" }, "time": { diff --git a/src/i18n/strings/zh_Hans.json b/src/i18n/strings/zh_Hans.json index 8457984941..3b2269e9a5 100644 --- a/src/i18n/strings/zh_Hans.json +++ b/src/i18n/strings/zh_Hans.json @@ -2752,15 +2752,10 @@ "one": "%(count)s 条回复", "other": "%(count)s 条回复" }, - "empty_explainer": "消息列帮助保持你的对话切题并易于追踪。", - "empty_has_threads_tip": "回复进行中的消息列或当悬停在消息上时使用%(replyInThread)s来发起新的消息列。", - "empty_heading": "用消息列使讨论井然有序", - "empty_tip": "实用提示:悬停在消息上时使用“%(replyInThread)s”。", "error_start_thread_existing_relation": "无法从既有关系的事件创建消息列", "my_threads": "我的消息列", "my_threads_description": "显示您参与的所有消息列", "open_thread": "打开消息列", - "show_all_threads": "显示所有消息列", "show_thread_filter": "显示:" }, "time": { diff --git a/src/i18n/strings/zh_Hant.json b/src/i18n/strings/zh_Hant.json index 57b31e1769..8715591fcb 100644 --- a/src/i18n/strings/zh_Hant.json +++ b/src/i18n/strings/zh_Hant.json @@ -3004,15 +3004,10 @@ "one": "%(count)s 回覆", "other": "%(count)s 回覆" }, - "empty_explainer": "「討論串」功能可以協助您的對話不離題且易於追蹤。", - "empty_has_threads_tip": "將滑鼠游標停留在訊息上來開始新的討論串時,回覆正在進行的討論串或使用「%(replyInThread)s」。", - "empty_heading": "使用「討論串」功能,讓討論保持有條不紊", - "empty_tip": "秘訣:在滑鼠游標停於訊息上時使用「%(replyInThread)s」。", "error_start_thread_existing_relation": "無法從討論串既有的關係建立活動", "my_threads": "我的討論串", "my_threads_description": "顯示您參與的所有討論串", "open_thread": "開啟討論串", - "show_all_threads": "顯示所有討論串", "show_thread_filter": "顯示:" }, "time": { diff --git a/test/components/structures/FilePanel-test.tsx b/test/components/structures/FilePanel-test.tsx new file mode 100644 index 0000000000..2b53c9c86c --- /dev/null +++ b/test/components/structures/FilePanel-test.tsx @@ -0,0 +1,58 @@ +/* +Copyright 2024 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { EventTimelineSet, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix"; +import { screen, render, waitFor } from "@testing-library/react"; +import { mocked } from "jest-mock"; + +import FilePanel from "../../../src/components/structures/FilePanel"; +import ResizeNotifier from "../../../src/utils/ResizeNotifier"; +import { stubClient } from "../../test-utils"; +import { MatrixClientPeg } from "../../../src/MatrixClientPeg"; + +jest.mock("matrix-js-sdk/src/matrix", () => ({ + ...jest.requireActual("matrix-js-sdk/src/matrix"), + TimelineWindow: jest.fn().mockReturnValue({ + load: jest.fn().mockResolvedValue(null), + getEvents: jest.fn().mockReturnValue([]), + canPaginate: jest.fn().mockReturnValue(false), + }), +})); + +describe("FilePanel", () => { + beforeEach(() => { + stubClient(); + }); + + it("renders empty state", async () => { + const cli = MatrixClientPeg.safeGet(); + const room = new Room("!room:server", cli, cli.getSafeUserId(), { + pendingEventOrdering: PendingEventOrdering.Detached, + }); + const timelineSet = new EventTimelineSet(room); + room.getOrCreateFilteredTimelineSet = jest.fn().mockReturnValue(timelineSet); + mocked(cli.getRoom).mockReturnValue(room); + + const { asFragment } = render( + , + ); + await waitFor(() => { + expect(screen.getByText("No files visible in this room")).toBeInTheDocument(); + }); + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/test/components/structures/ThreadPanel-test.tsx b/test/components/structures/ThreadPanel-test.tsx index 19122e4cce..f66f58ed84 100644 --- a/test/components/structures/ThreadPanel-test.tsx +++ b/test/components/structures/ThreadPanel-test.tsx @@ -43,44 +43,21 @@ describe("ThreadPanel", () => { describe("Header", () => { it("expect that All filter for ThreadPanelHeader properly renders Show: All threads", () => { const { asFragment } = render( - undefined} - />, + undefined} />, ); expect(asFragment()).toMatchSnapshot(); }); it("expect that My filter for ThreadPanelHeader properly renders Show: My threads", () => { const { asFragment } = render( - undefined} - />, - ); - expect(asFragment()).toMatchSnapshot(); - }); - - it("matches snapshot when no threads", () => { - const { asFragment } = render( - undefined} - />, + undefined} />, ); expect(asFragment()).toMatchSnapshot(); }); it("expect that ThreadPanelHeader properly opens a context menu when clicked on the button", () => { const { container } = render( - undefined} - />, + undefined} />, ); const found = container.querySelector(".mx_ThreadPanel_dropdown"); expect(found).toBeTruthy(); @@ -91,11 +68,7 @@ describe("ThreadPanel", () => { it("expect that ThreadPanelHeader has the correct option selected in the context menu", () => { const { container } = render( - undefined} - />, + undefined} />, ); fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!); const found = screen.queryAllByRole("menuitemradio"); @@ -118,11 +91,7 @@ describe("ThreadPanel", () => { const { container } = render( - undefined} - /> + undefined} /> , ); @@ -136,11 +105,7 @@ describe("ThreadPanel", () => { const mockClient = createTestClient(); const { container } = render( - undefined} - /> + undefined} /> , ); fireEvent.click(getByRole(container, "button", { name: "Mark all as read" })); diff --git a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap new file mode 100644 index 0000000000..87ffc5da2e --- /dev/null +++ b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FilePanel renders empty state 1`] = ` + +
+
+
+ +
+
+
+
+
+

+ No files visible in this room +

+

+ Attach files from chat or just drag and drop them anywhere in a room. +

+
+
+
+
+ +`; diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap index 09bf4ae39b..0a219b8403 100644 --- a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap @@ -95,17 +95,3 @@ exports[`ThreadPanel Header expect that ThreadPanelHeader has the correct option
`; - -exports[`ThreadPanel Header matches snapshot when no threads 1`] = ` - -
-

- Threads -

-
-
-`; diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts index 5370f72b18..856d9b17b7 100644 --- a/test/test-utils/test-utils.ts +++ b/test/test-utils/test-utils.ts @@ -274,6 +274,7 @@ export function createTestClient(): MatrixClient { matrixRTC: createStubMatrixRTC(), isFallbackICEServerAllowed: jest.fn().mockReturnValue(false), getAuthIssuer: jest.fn(), + getOrCreateFilter: jest.fn(), } as unknown as MatrixClient; client.reEmitter = new ReEmitter(client);