diff --git a/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png b/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png index f764311250..771157a11a 100644 Binary files a/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png and b/apps/web/playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png differ diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png index d651340ace..77345fe6fe 100644 Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index 98de99bf98..15da4c7c02 100644 Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index 48625def3a..e5b81c1973 100644 Binary files a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png index 8487b5a381..79a9efe5cf 100644 Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png index 21198098a4..efec129b55 100644 Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index ee058b786a..2519cee3ef 100644 Binary files a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png index 5248968436..c12d1a8808 100644 Binary files a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png and b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png index a1d376d62f..1551195fd5 100644 Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss index 4cadbe71c6..f3a9fdcb94 100644 --- a/apps/web/res/css/_common.pcss +++ b/apps/web/res/css/_common.pcss @@ -834,18 +834,6 @@ legend { } } -@define-mixin ButtonResetDefault { - appearance: none; - background: none; - border: none; - padding: 0; - margin: 0; - font-size: inherit; - font-family: inherit; - line-height: inherit; - cursor: pointer; -} - @define-mixin LegacyCallButton { box-sizing: border-box; font-weight: var(--cpd-font-weight-semibold); diff --git a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss index d0c419accb..1c1d379f89 100644 --- a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss +++ b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss @@ -13,8 +13,7 @@ Please see LICENSE files in the repository root for full details. top: 0; } -.mx_ShareDialogButtons_button { - @mixin ButtonResetDefault; +button.mx_ShareDialogButtons_button { height: 24px; width: 24px; border-radius: 50%; diff --git a/apps/web/res/css/views/elements/_AccessibleButton.pcss b/apps/web/res/css/views/elements/_AccessibleButton.pcss index fafe75c642..e79a858d49 100644 --- a/apps/web/res/css/views/elements/_AccessibleButton.pcss +++ b/apps/web/res/css/views/elements/_AccessibleButton.pcss @@ -9,6 +9,19 @@ Please see LICENSE files in the repository root for full details. .mx_AccessibleButton { cursor: pointer; + &:where(button) { + /* Clear default button styling */ + appearance: none; + background: none; + border: none; + padding: 0; + margin: 0; + font-size: inherit; + font-family: inherit; + line-height: inherit; + box-sizing: content-box; + } + &.mx_AccessibleButton_disabled { cursor: not-allowed; diff --git a/apps/web/res/css/views/elements/_CopyableText.pcss b/apps/web/res/css/views/elements/_CopyableText.pcss index 6219055085..e5cf1c51da 100644 --- a/apps/web/res/css/views/elements/_CopyableText.pcss +++ b/apps/web/res/css/views/elements/_CopyableText.pcss @@ -28,7 +28,6 @@ Please see LICENSE files in the repository root for full details. /* using em here to adapt to the local font size */ width: 1em; height: 1em; - cursor: pointer; padding-left: 12px; padding-right: 10px; display: block; diff --git a/apps/web/res/css/views/settings/_NotificationSettings2.pcss b/apps/web/res/css/views/settings/_NotificationSettings2.pcss index db439f0706..8a41322615 100644 --- a/apps/web/res/css/views/settings/_NotificationSettings2.pcss +++ b/apps/web/res/css/views/settings/_NotificationSettings2.pcss @@ -12,12 +12,6 @@ Please see LICENSE files in the repository root for full details. gap: 32px; display: flex; flex-direction: column; - - > form { - gap: 32px; - display: flex; - flex-direction: column; - } } .mx_SettingsSubsection_description { diff --git a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss index 92a392950f..c92e454e05 100644 --- a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss @@ -14,12 +14,13 @@ Please see LICENSE files in the repository root for full details. color: $links; } - form:not(.mx_EncryptionUserSettingsTab form) { + form { display: flex; flex-direction: column; - gap: $spacing-8; + gap: var(--cpd-space-3x); flex-grow: 1; } + // never want full width buttons // event when other content is 100% width .mx_AccessibleButton { diff --git a/apps/web/src/components/structures/SpaceHierarchy.tsx b/apps/web/src/components/structures/SpaceHierarchy.tsx index 779ac9f5c2..c1d5976869 100644 --- a/apps/web/src/components/structures/SpaceHierarchy.tsx +++ b/apps/web/src/components/structures/SpaceHierarchy.tsx @@ -184,6 +184,10 @@ const Tile: React.FC = ({ aria-labelledby={checkboxLabelId} checked={!!selected} tabIndex={-1} + onChange={(e) => { + e.stopPropagation(); + onToggleClick(); + }} /> ); } else { @@ -311,9 +315,9 @@ const Tile: React.FC = ({ }; childSection = ( -
+
    {children} -
+ ); } diff --git a/apps/web/src/components/structures/auth/ForgotPassword.tsx b/apps/web/src/components/structures/auth/ForgotPassword.tsx index c9d5466801..8f246e17cb 100644 --- a/apps/web/src/components/structures/auth/ForgotPassword.tsx +++ b/apps/web/src/components/structures/auth/ForgotPassword.tsx @@ -12,7 +12,7 @@ import React, { type JSX, type ReactNode } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { sleep } from "matrix-js-sdk/src/utils"; import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; -import { Button } from "@vector-im/compound-web"; +import { Button, Form } from "@vector-im/compound-web"; import { _t, _td } from "../../../languageHandler"; import Modal from "../../../Modal"; @@ -380,7 +380,7 @@ export default class ForgotPassword extends React.Component { <>

{_t("auth|reset_password_title")}

-
+
{ this.setState({ logoutDevices: !this.state.logoutDevices })} checked={this.state.logoutDevices} + formWrap={false} > {_t("auth|reset_password|sign_out_other_devices")} @@ -422,7 +423,7 @@ export default class ForgotPassword extends React.Component { {submitButtonChild}
- +
); } diff --git a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 49443bdd2e..edd44019ba 100644 --- a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -459,8 +459,8 @@ export class EmailIdentityAuthEntry extends React.Component< { a: (text: string) => ( - - {text} + + {text} ), @@ -475,6 +475,7 @@ export class EmailIdentityAuthEntry extends React.Component< { a: (text: string) => ( - this.onToggle(cap)} description={text.byline}> + this.onToggle(cap)} + description={text.byline} + formWrap={false} + > {text.primary} diff --git a/apps/web/src/components/views/dialogs/devtools/Crypto.tsx b/apps/web/src/components/views/dialogs/devtools/Crypto.tsx index 1c02f062c3..3e4cda666e 100644 --- a/apps/web/src/components/views/dialogs/devtools/Crypto.tsx +++ b/apps/web/src/components/views/dialogs/devtools/Crypto.tsx @@ -110,7 +110,11 @@ function KeyStorage(): JSX.Element { return ( - {_t("devtools|crypto|key_storage")} + + + + + @@ -212,7 +216,11 @@ function CrossSigning(): JSX.Element { return (
{_t("devtools|crypto|key_storage")}
{_t("devtools|crypto|key_backup_latest_version")}
- {_t("devtools|crypto|cross_signing")} + + + + + @@ -303,7 +311,11 @@ function Session(): JSX.Element { return (
{_t("devtools|crypto|cross_signing")}
{_t("devtools|crypto|cross_signing_status")}
- {_t("devtools|crypto|session")} + + + + + diff --git a/apps/web/src/components/views/elements/AccessibleButton.tsx b/apps/web/src/components/views/elements/AccessibleButton.tsx index a2018b2211..3032312b32 100644 --- a/apps/web/src/components/views/elements/AccessibleButton.tsx +++ b/apps/web/src/components/views/elements/AccessibleButton.tsx @@ -152,46 +152,49 @@ const AccessibleButton = function AccessibleButton) => { - const action = getKeyBindingsManager().getAccessibilityAction(e); - switch (action) { - case KeyBindingAction.Enter: - e.stopPropagation(); - e.preventDefault(); - return onClick?.(e); - case KeyBindingAction.Space: - e.stopPropagation(); - e.preventDefault(); - break; - default: - onKeyDown?.(e); - } - }; - newProps.onKeyUp = (e: KeyboardEvent) => { - const action = getKeyBindingsManager().getAccessibilityAction(e); + if (element !== "button") { + // We need to consume enter onKeyDown and space onKeyUp + // otherwise we are risking also activating other keyboard focusable elements + // that might receive focus as a result of the AccessibleButtonClick action + // It's because we are using html buttons at a few places e.g. inside dialogs + // And divs which we report as role button to assistive technologies. + // Browsers handle space and enter key presses differently and we are only adjusting to the + // inconsistencies here + newProps.onKeyDown = (e: KeyboardEvent) => { + const action = getKeyBindingsManager().getAccessibilityAction(e); - switch (action) { - case KeyBindingAction.Enter: - e.stopPropagation(); - e.preventDefault(); - break; - case KeyBindingAction.Space: - e.stopPropagation(); - e.preventDefault(); - return onClick?.(e); - default: - onKeyUp?.(e); - break; - } - }; + switch (action) { + case KeyBindingAction.Enter: + e.stopPropagation(); + e.preventDefault(); + return onClick?.(e); + case KeyBindingAction.Space: + e.stopPropagation(); + e.preventDefault(); + break; + default: + onKeyDown?.(e); + } + }; + newProps.onKeyUp = (e: KeyboardEvent) => { + const action = getKeyBindingsManager().getAccessibilityAction(e); + + switch (action) { + case KeyBindingAction.Enter: + e.stopPropagation(); + e.preventDefault(); + break; + case KeyBindingAction.Space: + e.stopPropagation(); + e.preventDefault(); + return onClick?.(e); + default: + onKeyUp?.(e); + break; + } + }; + } } // Pass through the ref - used for keyboard shortcut access to some buttons diff --git a/apps/web/src/components/views/elements/CopyableText.tsx b/apps/web/src/components/views/elements/CopyableText.tsx index 8deaad1d4f..834386e450 100644 --- a/apps/web/src/components/views/elements/CopyableText.tsx +++ b/apps/web/src/components/views/elements/CopyableText.tsx @@ -44,6 +44,7 @@ export const CopyTextButton: React.FC = ({ children, getTextToCopy, border = true }); return ( -
+ {children} -
+ ); }; diff --git a/apps/web/src/components/views/elements/LearnMore.tsx b/apps/web/src/components/views/elements/LearnMore.tsx index 7e61bcc789..71ae561ed4 100644 --- a/apps/web/src/components/views/elements/LearnMore.tsx +++ b/apps/web/src/components/views/elements/LearnMore.tsx @@ -13,7 +13,7 @@ import Modal from "../../../Modal"; import InfoDialog from "../dialogs/InfoDialog"; import AccessibleButton, { type ButtonProps } from "./AccessibleButton"; -type Props = Omit, "element" | "kind" | "onClick" | "className"> & { +type Props = Omit, "element" | "kind" | "onClick" | "className"> & { title: string; description: string | React.ReactNode; }; @@ -29,7 +29,13 @@ const LearnMore: React.FC = ({ title, description, ...rest }) => { }; return ( - + {_t("action|learn_more")} ); diff --git a/apps/web/src/components/views/elements/Spinner.tsx b/apps/web/src/components/views/elements/Spinner.tsx index a3ba625e89..4df3177976 100644 --- a/apps/web/src/components/views/elements/Spinner.tsx +++ b/apps/web/src/components/views/elements/Spinner.tsx @@ -15,6 +15,11 @@ interface IProps { size?: number; message?: string; onFinished: any; // XXX: Spinner pretends to be a dialog so it must accept an onFinished, but it never calls it + /** + * Whether to render the content in a div or span. + * @default "div" + */ + as?: "span" | "div"; } export default class Spinner extends React.PureComponent { @@ -23,16 +28,16 @@ export default class Spinner extends React.PureComponent { }; public render(): React.ReactNode { - const { size, message } = this.props; + const { size, message, as: Component = "div" } = this.props; return ( -
+ {message && (
{message}
  )} -
+ ); } } diff --git a/apps/web/src/components/views/elements/StyledCheckbox.tsx b/apps/web/src/components/views/elements/StyledCheckbox.tsx index e4cde65d16..97f2166cc1 100644 --- a/apps/web/src/components/views/elements/StyledCheckbox.tsx +++ b/apps/web/src/components/views/elements/StyledCheckbox.tsx @@ -14,6 +14,7 @@ interface IProps extends React.InputHTMLAttributes { inputRef?: Ref; id?: string; description?: ReactNode; + formWrap?: boolean; } const StyledCheckbox: React.FC = ({ @@ -22,30 +23,36 @@ const StyledCheckbox: React.FC = ({ className, inputRef, description, + formWrap = true, ...otherProps }) => { const id = initialId || "checkbox_" + secureRandomString(10); const name = useId(); const descriptionId = useId(); - return ( - - - } - > - {label && } - {description && {description}} - - + + const field = ( + + } + > + {label && } + {description && {description}} + ); + + if (formWrap) { + return {field}; + } + + return field; }; export default StyledCheckbox; diff --git a/apps/web/src/components/views/right_panel/VerificationPanel.tsx b/apps/web/src/components/views/right_panel/VerificationPanel.tsx index fa3a4dc4db..d369f98d3a 100644 --- a/apps/web/src/components/views/right_panel/VerificationPanel.tsx +++ b/apps/web/src/components/views/right_panel/VerificationPanel.tsx @@ -255,7 +255,7 @@ export default class VerificationPanel extends React.PureComponent - +

); } diff --git a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx index cac8a55e24..b23ecfc49c 100644 --- a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx +++ b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ChangeEventHandler } from "react"; import { JoinRule, Visibility } from "matrix-js-sdk/src/matrix"; -import { SettingsToggleInput } from "@vector-im/compound-web"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; @@ -16,6 +16,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg"; import DirectoryCustomisations from "../../../customisations/Directory"; import Modal from "../../../Modal"; import ErrorDialog from "../dialogs/ErrorDialog"; +import { onSubmitPreventDefault } from "../../../utils/form.ts"; interface IProps { roomId: string; @@ -90,16 +91,18 @@ export default class RoomPublishSetting extends React.PureComponent + + + ); } } diff --git a/apps/web/src/components/views/settings/EventIndexPanel.tsx b/apps/web/src/components/views/settings/EventIndexPanel.tsx index 24acd0f8a6..4cd7a7d015 100644 --- a/apps/web/src/components/views/settings/EventIndexPanel.tsx +++ b/apps/web/src/components/views/settings/EventIndexPanel.tsx @@ -220,7 +220,12 @@ export default class EventIndexPanel extends React.Component

- + {_t("action|reset")}

diff --git a/apps/web/src/components/views/settings/Notifications.tsx b/apps/web/src/components/views/settings/Notifications.tsx index 15e530c57b..c52753907d 100644 --- a/apps/web/src/components/views/settings/Notifications.tsx +++ b/apps/web/src/components/views/settings/Notifications.tsx @@ -52,6 +52,7 @@ import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading"; import { SettingsSubsection } from "./shared/SettingsSubsection"; import { doesRoomHaveUnreadMessages } from "../../../Unread"; import SettingsFlag from "../elements/SettingsFlag"; +import { onSubmitPreventDefault } from "../../../utils/form.ts"; // TODO: this "view" component still has far too much application logic in it, // which should be factored out to other files. @@ -651,7 +652,7 @@ export default class Notifications extends React.PureComponent{masterSwitch}; } const emailSwitches = (this.state.threepids || []) @@ -669,19 +670,21 @@ export default class Notifications extends React.PureComponent - {masterSwitch} + + {masterSwitch} - + - {this.state.deviceNotificationsEnabled && ( - <> - - - - - )} + {this.state.deviceNotificationsEnabled && ( + <> + + + + + )} - {emailSwitches} + {emailSwitches} + ); } diff --git a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx index c316d46129..7619e5acea 100644 --- a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx +++ b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React, { type JSX, useState } from "react"; -import { SettingsToggleInput } from "@vector-im/compound-web"; +import { Form, SettingsToggleInput } from "@vector-im/compound-web"; import NewAndImprovedIcon from "../../../../../res/img/element-icons/new-and-improved.svg"; import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; @@ -33,6 +33,7 @@ import { SettingsSubsection } from "../shared/SettingsSubsection"; import { NotificationPusherSettings } from "./NotificationPusherSettings"; import SettingsFlag from "../../elements/SettingsFlag"; import { SettingsSubsectionHeading } from "../shared/SettingsSubsectionHeading"; +import { onSubmitPreventDefault } from "../../../../utils/form.ts"; enum NotificationDefaultLevels { AllMessages = "all_messages", @@ -111,7 +112,7 @@ export default function NotificationSettings2(): JSX.Element { )} -
+ -
+ - - + + + + diff --git a/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx index 15f3a3cefa..224a70e62d 100644 --- a/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx +++ b/apps/web/src/components/views/settings/tabs/room/GeneralRoomSettingsTab.tsx @@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details. import React, { type ContextType } from "react"; import { type Room } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import { Form } from "@vector-im/compound-web"; import { _t } from "../../../../../languageHandler"; import RoomProfileSettings from "../../../room_settings/RoomProfileSettings"; @@ -72,32 +71,25 @@ export default class GeneralRoomSettingsTab extends React.Component - { - evt.preventDefault(); - evt.stopPropagation(); - }} - > - - - + + + - - - + + + - - - - - {leaveSection} - - + + + + + {leaveSection} + ); } diff --git a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx index 15ca6e9788..5bb8780b3c 100644 --- a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx +++ b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx @@ -137,6 +137,7 @@ export default class SecurityRoomSettingsTab extends React.Component ( { dialog.close(); @@ -334,6 +335,7 @@ export default class SecurityRoomSettingsTab extends React.Component ( { dialog.close(); diff --git a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx index 6d6c25e122..b63e790736 100644 --- a/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx +++ b/apps/web/src/components/views/settings/tabs/user/NotificationUserSettingsTab.tsx @@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import { Form } from "@vector-im/compound-web"; import { Features } from "../../../../../settings/Settings"; import SettingsStore from "../../../../../settings/SettingsStore"; @@ -22,20 +21,13 @@ export default class NotificationUserSettingsTab extends React.Component { return ( - { - evt.preventDefault(); - evt.stopPropagation(); - }} - > - {newNotificationSettingsEnabled ? ( - - ) : ( - - - - )} - + {newNotificationSettingsEnabled ? ( + + ) : ( + + + + )} ); } diff --git a/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx b/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx index 8aeae9234a..caa379ba2e 100644 --- a/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx +++ b/apps/web/src/components/views/spaces/SpaceSettingsVisibilityTab.tsx @@ -184,14 +184,7 @@ const SpaceSettingsVisibilityTab: React.FC = ({ matrixClient: cli, space - { - evt.preventDefault(); - evt.stopPropagation(); - }} - > - {addressesSection} - + {addressesSection} ); diff --git a/apps/web/src/utils/form.ts b/apps/web/src/utils/form.ts new file mode 100644 index 0000000000..21017c393e --- /dev/null +++ b/apps/web/src/utils/form.ts @@ -0,0 +1,17 @@ +/* +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 React from "react"; + +/** + * onSubmit handler which calls preventDefault and stopPropagation on the event + * @param e submit event + */ +export function onSubmitPreventDefault(e: SubmitEvent | React.SubmitEvent): void { + e.preventDefault(); + e.stopPropagation(); +} diff --git a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts index 8a5547e6e9..fa7697d084 100644 --- a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts @@ -199,8 +199,11 @@ export class RoomListHeaderViewModel SettingsStore.setValue("RoomList.showMessagePreview", null, SettingLevel.DEVICE, isMessagePreviewEnabled); this.snapshot.merge({ isMessagePreviewEnabled }); }; -} + public createSection = (): void => { + // To be implemented when custom section creation is added in vms + }; +} /** * Get the initial snapshot for the RoomListHeaderViewModel. * @param spaceStore - The space store instance. @@ -280,5 +283,8 @@ function computeHeaderSpaceState( displaySpaceMenu, canInviteInSpace, canAccessSpaceSettings, + // To be implemented when custom section creation is added in vms + canCreateSection: false, + useComposeIcon: true, }; } diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts index b2f24da66d..ac3f32ad61 100644 --- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts @@ -303,6 +303,8 @@ export class RoomListItemViewModel canMarkAsRead, canMarkAsUnread, roomNotifState, + // To be implemented when custom section creation is added in vms + canMoveToSection: false, }; } @@ -381,4 +383,8 @@ export class RoomListItemViewModel const echoChamber = EchoChamber.forRoom(this.props.room); echoChamber.notificationVolume = elementNotifState; }; + + public onCreateSection = (): void => { + // To be implemented when custom section creation is added in vms + }; } diff --git a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts index d2ff465db9..a3e516ea2d 100644 --- a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts +++ b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts @@ -572,6 +572,12 @@ export class RoomListViewModel }); } }; + + public closeToast: () => void = () => { + this.snapshot.merge({ + toast: undefined, + }); + }; } /** diff --git a/apps/web/test/setupTests.ts b/apps/web/test/setupTests.ts index 7e68edf19d..f514c10482 100644 --- a/apps/web/test/setupTests.ts +++ b/apps/web/test/setupTests.ts @@ -66,3 +66,28 @@ if (env["GITHUB_ACTIONS"] !== undefined) { require("./setup/setupManualMocks"); // must be first require("./setup/setupLanguage"); require("./setup/setupConfig"); + +// Utility to check for React errors during the tests +// Fails tests on errors like the following: +// In HTML,
cannot be a descendant of

. +// In HTML,
cannot be a descendant of . +// In HTML, text nodes cannot be a child of

. +// This will cause a hydration error. +// You provided a `checked` prop to a form field without an `onChange` handler. +let errors: any[] = []; +beforeEach(() => { + errors = []; + const originalError = console.error; + jest.spyOn(console, "error").mockImplementation((...args) => { + if (/validateDOMNesting|Hydration failed|hydration error|prop to a form field without an/i.test(args[0])) { + errors.push(args[0]); + } + originalError.call(console, ...args); + }); +}); +afterEach(() => { + mocked(console.error).mockRestore?.(); + if (errors.length > 0) { + throw new Error("Test failed due to React hydration errors in the console."); + } +}); diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap index 12a7551687..9f8a89e59d 100644 --- a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap +++ b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap @@ -378,114 +378,115 @@ exports[`SpaceHierarchy renders 1`] = ` -
- -
  • -
    -
    - - N - -
    -
    - - Nested room - -
    -
    - 3 members -
    -
    -
    -
    - Join -
    - -
    - +
    + + Nested room + +
    +
    + 3 members +
    +
    +
    +
    + Join +
    + +
    -
    - +
    + +
    +
    +
    -
    -
    -
    - -     -
    -
    + + +
    • + + +
  • should not render cycles 1`] = ` -
    diff --git a/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap b/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap index e144597f9c..4ceeac06b9 100644 --- a/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap @@ -19,14 +19,14 @@ exports[` should render 1`] = ` > Did not receive it? -
    Resend it -
    +

    diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap index 1cc41fd9f3..0ea520e24f 100644 --- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap @@ -54,10 +54,10 @@ exports[` when a beacon is live and has locations renders beac /> -
    -
    when a beacon is live and has locations renders beac d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
    -
    + + renders sidebar correctly with beacons 1`] = ` /> -
    -
    renders sidebar correctly with beacons 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
    -
    + +     renders share buttons when there is a location /> -
    -
    renders share buttons when there is a location d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
    -
    + +     `; diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index b165dc24b6..721a650ed3 100644 --- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -29,11 +29,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = ` > Toolbox -
    Room ID: !id -
    -
    -
    + +
    diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap index 4dfa8ecffc..5808e26460 100644 --- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap @@ -5,7 +5,13 @@ exports[` should display when the cross-signing data aria-label="Cross-signing" >
    • - Cross-signing + + + @@ -77,7 +83,13 @@ exports[` should display when the cross-signing data aria-label="Cross-signing" > - Cross-signing + + + @@ -149,7 +161,13 @@ exports[` should display when the key storage data are aria-label="Key Storage" > - Key Storage + + + @@ -221,7 +239,13 @@ exports[` should display when the key storage data are aria-label="Key Storage" > - Key Storage + + + diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap index 10915b5222..65510b96e5 100644 --- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap @@ -7,11 +7,11 @@ exports[` should render a single device - signed by owner 1`] = ` >
    • -
      User ID: @alice:example.com -
      should render a single device - signed by owner 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
      -
      + +
    • -
      Device ID: SIGNED -
      should render a single device - signed by owner 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
      -
      + +
    • Displayname: @@ -95,11 +95,11 @@ exports[` should render a single device - signed by owner 1`] = ` Device keys
      • -
        ed25519: an_ed25519_public_key -
        should render a single device - signed by owner 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
        -
        + +
      • -
        curve25519: a_curve25519_public_key -
        should render a single device - signed by owner 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
        -
        + +
      • @@ -171,11 +171,11 @@ exports[` should render a single device - unsigned 1`] = ` >
      • -
        User ID: @alice:example.com -
        should render a single device - unsigned 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
        -
        + +
      • -
        Device ID: UNSIGNED -
        should render a single device - unsigned 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
        -
        + +
      • Displayname: @@ -259,11 +259,11 @@ exports[` should render a single device - unsigned 1`] = ` Device keys
        • -
          ed25519: an_ed25519_public_key -
          should render a single device - unsigned 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
          -
          + +
        • -
          curve25519: a_curve25519_public_key -
          should render a single device - unsigned 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
          -
          + +
        • @@ -335,11 +335,11 @@ exports[` should render a single device - verified by cross-signing 1`] >
        • -
          User ID: @alice:example.com -
          should render a single device - verified by cross-signing 1`] d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
          -
          + +
        • -
          Device ID: VERIFIED -
          should render a single device - verified by cross-signing 1`] d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
          -
          + +
        • Displayname: @@ -425,11 +425,11 @@ exports[` should render a single device - verified by cross-signing 1`] Device keys
          • -
            ed25519: an_ed25519_public_key -
            should render a single device - verified by cross-signing 1`] d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +
          • -
            curve25519: a_curve25519_public_key -
            should render a single device - verified by cross-signing 1`] d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +
          • @@ -501,11 +501,11 @@ exports[` should render a single user 1`] = ` >
          • -
            User ID: @alice:example.com -
            should render a single user 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +
          • Membership: join diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap index 4191518f03..01fb8177b2 100644 --- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LearnMore-test.tsx.snap @@ -2,13 +2,13 @@ exports[` renders button 1`] = `
            -
            Learn more -
            +
            `; diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 2cd8c984e3..4742e588e2 100644 --- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -59,7 +59,7 @@ exports[` renders formatted m.text correctly linkification is not -
            renders formatted m.text correctly linkification is not d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            + @@ -278,7 +278,7 @@ exports[` renders formatted m.text correctly pills do not appear -
            renders formatted m.text correctly pills do not appear d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            + @@ -482,7 +482,7 @@ num_sqrt = num ** /> -
            -
            + diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index e03696b45c..c997e478e5 100644 --- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -99,11 +99,11 @@ exports[` with crypto enabled renders 1`] = `

            -

            customUserIdentifier -
            with crypto enabled renders 1`] = ` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +

            with crypto enabled should render a deactivate button for

            -

            customUserIdentifier -
            with crypto enabled should render a deactivate button for d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +

            renders custom user identifiers in the header 1`

            -

            customUserIdentifier -
            renders custom user identifiers in the header 1` d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z" /> -
            -
            + +

            await new Promise((resolve) => window.setTimeout(resolve)); describe("", () => { - const getComponent = () => - render( - - - , - ); + const getComponent = () => render(); // get component, wait for async data and force a render const getComponentAndWait = async () => { diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap index d971d9001b..357f441198 100644 --- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap @@ -42,74 +42,74 @@ exports[` main notification switches renders only enable notifi
            -
            + +
            +
            - -
            -
            -
            -
            - + class="_ui_udcm8_34" + />
            + +
            +
            +
            +
            +
            - -
            -
            -
            -
            - + class="_ui_udcm8_34" + />
            - +
            + +
            +
            `; diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index fdd0dbe0b0..fde728da77 100644 --- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -57,13 +57,13 @@ HTMLCollection [ class="mx_DeviceSecurityCard_description" > Verify your current session for enhanced secure messaging. -
            Learn more -
            +

            renders device and correct security card when class="mx_DeviceSecurityCard_description" > Verify your current session for enhanced secure messaging. -
            Learn more -
            +

            renders device and correct security card when class="mx_DeviceSecurityCard_description" > Verify your current session for enhanced secure messaging. -
            Learn more -
            +

            displays name edit form on rename button click id="device-rename-description-123" > Please be aware that session names are also visible to people you communicate with. -
            Learn more -
            +
            renders a verified device 1`] = ` class="mx_DeviceSecurityCard_description" > This session is ready for secure messaging. -
            Learn more -
            +

            @@ -175,13 +175,13 @@ exports[` renders device with metadata 1`] = ` class="mx_DeviceSecurityCard_description" > Verify or remove this session for best security and reliability. -
            Learn more -
            +

            @@ -391,13 +391,13 @@ exports[` renders device without metadata 1`] = ` class="mx_DeviceSecurityCard_description" > Verify or remove this session for best security and reliability. -
            Learn more -
            +

            diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap index 0f7b56b998..953bf16969 100644 --- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceVerificationStatusCard-test.tsx.snap @@ -34,13 +34,13 @@ exports[` renders a verified device 1`] = ` class="mx_DeviceSecurityCard_description" > This session is ready for secure messaging. -
            Learn more -
            +

            @@ -79,13 +79,13 @@ exports[` renders an unverifiable device 1`] = ` class="mx_DeviceSecurityCard_description" > This session doesn't support encryption and thus can't be verified. -
            Learn more -
            +

            @@ -124,13 +124,13 @@ exports[` renders an unverified device 1`] = ` class="mx_DeviceSecurityCard_description" > Verify or remove this session for best security and reliability. -
            Learn more -
            +

            Consider removing old sessions (90 days or older) you don't use anymore. -
            Learn more -
            +

            @@ -90,13 +90,13 @@ HTMLCollection [ > Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore. -
            Learn more -
            +

            @@ -143,13 +143,13 @@ HTMLCollection [ > For best security, remove any session that you don't recognize or use anymore. -
            Learn more -
            +

            diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap index c0a36f643f..92f8280f73 100644 --- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SecurityRecommendations-test.tsx.snap @@ -57,13 +57,13 @@ exports[` renders both cards when user has both unver class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore. -
            Learn more -
            +

            renders both cards when user has both unver class="mx_DeviceSecurityCard_description" > Consider removing old sessions (90 days or older) you don't use anymore. -
            Learn more -
            +

            renders inactive devices section when user class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore. -
            Learn more -
            +

            renders inactive devices section when user class="mx_DeviceSecurityCard_description" > Consider removing old sessions (90 days or older) you don't use anymore. -
            Learn more -
            +

            renders unverified devices section when use class="mx_DeviceSecurityCard_description" > Verify your sessions for enhanced secure messaging or remove from those you don't recognize or use anymore. -
            Learn more -
            +

            renders unverified devices section when use class="mx_DeviceSecurityCard_description" > Consider removing old sessions (90 days or older) you don't use anymore. -
            Learn more -
            +

            ", () => { const screen = render( - - - + , ); await act(waitForUpdate); @@ -109,9 +106,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(async () => { @@ -172,9 +167,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -190,9 +183,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -230,9 +221,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -267,9 +256,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -298,9 +285,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -325,9 +310,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -349,9 +332,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -379,9 +360,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -405,9 +384,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -429,9 +406,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -459,9 +434,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -485,9 +458,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -514,9 +485,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -535,9 +504,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -648,9 +615,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -709,9 +674,7 @@ describe("", () => { const user = userEvent.setup(); const screen = render( - - - + , ); await act(waitForUpdate); @@ -731,9 +694,7 @@ describe("", () => { const { container } = render( - - - + , ); await waitForUpdate(); @@ -760,9 +721,7 @@ describe("", () => { const user = userEvent.setup(); const { container } = render( - - - + , ); await waitForUpdate(); diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap index dc9f33ced2..ff7f965b4a 100644 --- a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap @@ -2,880 +2,880 @@ exports[` correctly handles the loading/disabled state 1`] = `
            -
            -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            -
            - -
            -
            -
            -
            - -
            -
            -
            -
            -
            -

            - I want to be notified for (Default Setting) -

            -
            -
            -
            - This setting will be applied by default to all your rooms. -
            -
            -
            -
            +
            +
            +
            -
            -
            -
            - People, Mentions and Keywords -
            -
            - +
            +
            +
            +
            +
            +
            +
            +
            -
            -
            -
            - Mentions and Keywords only -
            -
            +
            +
            +
            +
            -

            - Play a sound for -

            -
            -
            - Applied by default to all rooms on all devices. + +
            -
            - -
            -
            -
            - -
            - -
            -
            -
            -
            - -
            -
            - -
            -
            -
            -
            -
            -
            - -
            - -
            -
            -
            -
            - -
            -
            - -
            -
            -
            -
            -
            -
            - -
            - -
            -
            -
            -
            - -
            -
            - -
            + Enable audible notifications for this session + +
            +
            + +
            +
            +

            + I want to be notified for (Default Setting) +

            +
            +
            +
            + This setting will be applied by default to all your rooms.
            +
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - RA -
            -
            +
            - Random +
            + Random +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - EN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - DE -
            -
            +
            - Design +
            + Design +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - MA -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - SA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - SU -
            -
            +
            - Support +
            + Support +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - AN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - OF -
            -
            +
            - Off-topic +
            + Off-topic +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - TE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - TE -
            -
            +
            - Team Beta +
            + Team Beta +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            +
            - Project Y +
            + Project Y +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - WA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - ID -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - BU -
            -
            +
            - Bugs +
            + Bugs +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - RE -
            -
            +
            - Releases +
            + Releases +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - + +
            @@ -2728,66 +2734,71 @@ exports[` > renders Empty story 1`] = `
            - - No chats yet - - - Get started by messaging someone or by creating a room -
            - - + + Start chat + + +
            @@ -2834,20 +2845,25 @@ exports[` > renders EmptyFavouriteFilter story 1`] = `
            - - You don't have favourite chats yet - - - You can add a chat to your favourites in the chat settings - + + You don't have favourite chats yet + + + You can add a chat to your favourites in the chat settings + +
            @@ -2893,24 +2909,29 @@ exports[` > renders EmptyInvitesFilter story 1`] = `
            - - You don't have any unread invites - - + + You don't have any unread invites + + +
            @@ -2956,24 +2977,29 @@ exports[` > renders EmptyLowPriorityFilter story 1`] = `
            - - You don't have any low priority rooms - - + + You don't have any low priority rooms + + +
            @@ -3019,24 +3045,29 @@ exports[` > renders EmptyMentionsFilter story 1`] = `
            - - You don't have any unread mentions - - + + You don't have any unread mentions + + +
            @@ -3082,20 +3113,25 @@ exports[` > renders EmptyPeopleFilter story 1`] = `
            - - You don’t have direct chats with anyone yet - - - You can deselect filters in order to see your other chats - + + You don’t have direct chats with anyone yet + + + You can deselect filters in order to see your other chats + +
            @@ -3141,20 +3177,25 @@ exports[` > renders EmptyRoomsFilter story 1`] = `
            - - You’re not in any room yet - - - You can deselect filters in order to see your other chats - + + You’re not in any room yet + + + You can deselect filters in order to see your other chats + +
            @@ -3200,24 +3241,29 @@ exports[` > renders EmptyUnreadFilter story 1`] = `
            - - Congrats! You don’t have any unread messages - - + + Congrats! You don’t have any unread messages + + +
            @@ -3281,45 +3327,50 @@ exports[` > renders EmptyWithoutCreatePermission story 1`] = `
            - - No chats yet - - - Get started by messaging someone -
            - + + Start chat + +
            @@ -3384,4830 +3435,4836 @@ exports[` > renders LargeFlatList story 1`] = `
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - RA -
            -
            +
            - Random +
            + Random +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - - -
            -
            +
            -
            - EN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - DE -
            -
            +
            - Design +
            + Design +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - MA -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - SA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - SU -
            -
            +
            - Support +
            + Support +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - AN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - OF -
            -
            +
            - Off-topic +
            + Off-topic +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - TE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - TE -
            -
            +
            - Team Beta +
            + Team Beta +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            +
            - Project Y +
            + Project Y +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - WA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - ID -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - BU -
            -
            +
            - Bugs +
            + Bugs +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - RE -
            -
            +
            - Releases +
            + Releases +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - GE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - RA -
            -
            +
            - Random +
            + Random +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - EN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - DE -
            -
            +
            - Design +
            + Design +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - MA -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - SA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - SU -
            -
            +
            - Support +
            + Support +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - AN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - OF -
            -
            +
            - Off-topic +
            + Off-topic +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - TE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - TE -
            -
            +
            - Team Beta +
            + Team Beta +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            +
            - Project Y +
            + Project Y +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - WA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - ID -
            -
            - - +
            +
            + + +
            + - -
            - + +
            @@ -8274,4824 +8331,4830 @@ exports[` > renders LargeSectionList story 1`] = `
            - -
            -
            -
            -
            - +
            +
            +
            +
            +
            +
            + + +
            + -
            -
            - + +
            - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - + + + + + Chats + +
            + +
            - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            -
            +
            + + +
            + -
            - - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + - -
            - - +
            - + + + +
            + + + - - - + + - -
            - - +
            +
            + + +
            + - -
            - + + @@ -13159,8 +13222,13 @@ exports[` > renders Loading story 1`] = `
            + class="Flex-module_flex RoomListView-module_list" + style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" + > +
            +
            `; @@ -13223,291 +13291,297 @@ exports[` > renders SmallFlatList story 1`] = `
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - RA -
            -
            +
            - Random +
            + Random +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - + + @@ -13574,87 +13648,501 @@ exports[` > renders SmallSectionList story 1`] = `
            - +
            +
            +
            +
            + +
            + GE +
            +
            +
            +
            + General +
            +
            + Last message in General +
            +
            +
            + + +
            + +
            + +
            +
            +
            +
            + + +
            + +
            + +
            +
            +
            +
            + +
            + + + + + +`; + +exports[` > renders Toast story 1`] = ` +
            +
            +
            +
            +
            + + + + +
            +
            +
            +
            +
            +
            -
            -
            +
            + +
            + +
            +
            + + +
            + +
            + +
            +
            + + +
            + +
            + + +
            + + +
            + + + + +
            + + +
            + + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + + +
            + + + + +
            + +
            -
            -
            - -
            -
            +
            +
            + + Section created +
            + +
            @@ -14028,2610 +16831,2616 @@ exports[` > renders WithActiveFilter story 1`] = `
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - RA -
            -
            +
            - Random +
            + Random +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - - -
            -
            +
            -
            - EN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - DE -
            -
            +
            - Design +
            + Design +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - MA -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - SA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - SU -
            -
            +
            - Support +
            + Support +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - AN -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - OF -
            -
            +
            - Off-topic +
            + Off-topic +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - TE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - TE -
            -
            +
            - Team Beta +
            + Team Beta +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - PR -
            -
            +
            - Project Y +
            + Project Y +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - WA -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            -
            +
            + + +
            + -
            -
            - -
            -
            -
            +
            -
            - ID -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - BU -
            -
            +
            - Bugs +
            + Bugs +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - -
            -
            -
            +
            -
            - FE -
            -
            - - +
            +
            + + +
            + - -
            - -
            -
            -
            +
            -
            - RE -
            -
            +
            - Releases +
            + Releases +
            -
            -
            - - +
            - + + + +
            + +
            + - -
            - + +
            diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx index ac13f7874e..bbf0fcc63a 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx @@ -10,7 +10,7 @@ import { render, screen } from "@test-utils"; import userEvent from "@testing-library/user-event"; import { describe, it, expect, vi } from "vitest"; -import { RoomListItemMoreOptionsMenu } from "./RoomListItemMoreOptionsMenu"; +import { RoomListItemMoreOptionsMenu, MoreOptionContent } from "./RoomListItemMoreOptionsMenu"; import { useMockedViewModel } from "../../../../core/viewmodel"; import type { RoomListItemViewSnapshot } from "./RoomListItemView"; import { defaultSnapshot } from "./default-snapshot"; @@ -26,6 +26,7 @@ describe("", () => { onCopyRoomLink: vi.fn(), onLeaveRoom: vi.fn(), onSetRoomNotifState: vi.fn(), + onCreateSection: vi.fn(), }; const renderMenu = (overrides: Partial = {}): ReturnType => { @@ -224,4 +225,19 @@ describe("", () => { expect(mockCallbacks.onLeaveRoom).toHaveBeenCalled(); }); + + it("should call onCreateSection when new section is clicked", async () => { + const user = userEvent.setup(); + // We need to render the MoreOptionContent directly here as radix is kind of messing in the test env + const TestComponent = (): JSX.Element => { + const vm = useMockedViewModel(defaultSnapshot, mockCallbacks); + return ; + }; + render(); + + const newSection = screen.getByRole("menuitem", { name: "New section" }); + await user.click(newSection); + + expect(mockCallbacks.onCreateSection).toHaveBeenCalled(); + }); }); diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx index 8a6286e01c..e03504ad01 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx @@ -6,7 +6,7 @@ */ import React, { useState, type JSX } from "react"; -import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem } from "@vector-im/compound-web"; +import { IconButton, Menu, MenuItem, Separator, SubMenu, ToggleMenuItem } from "@vector-im/compound-web"; import { MarkAsReadIcon, MarkAsUnreadIcon, @@ -16,6 +16,7 @@ import { LinkIcon, LeaveIcon, OverflowHorizontalIcon, + ArrowRightIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../../core/i18n/i18n"; @@ -106,6 +107,7 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element { onSelect={vm.onToggleLowPriority} onClick={(evt) => evt.stopPropagation()} /> + {snapshot.canInvite && ( )} + {snapshot.canMoveToSection && ( + + } + > + + + )} ", () => { onCopyRoomLink: vi.fn(), onLeaveRoom: vi.fn(), onSetRoomNotifState: vi.fn(), + onCreateSection: vi.fn(), }; const renderMenu = (roomNotifState: RoomNotifState = RoomNotifState.AllMessages): ReturnType => { diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx index c6c7986ffb..165d38d267 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx @@ -38,6 +38,7 @@ const RoomListItemWrapperImpl = ({ onCopyRoomLink, onLeaveRoom, onSetRoomNotifState, + onCreateSection, isSelected, isFocused, onFocus, @@ -56,6 +57,7 @@ const RoomListItemWrapperImpl = ({ onCopyRoomLink, onLeaveRoom, onSetRoomNotifState, + onCreateSection, }); return ( void; /** Called when setting the room notification state */ onSetRoomNotifState: (state: RoomNotifState) => void; + /** Called when creating a new section */ + onCreateSection: () => void; } /** diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts index 2ec961ff98..f01243eb09 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts @@ -36,4 +36,5 @@ export const defaultSnapshot: RoomListItemViewSnapshot = { canMarkAsRead: false, canMarkAsUnread: true, roomNotifState: RoomNotifState.AllMessages, + canMoveToSection: true, }; diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts index bda12ac114..806e2e76ff 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts @@ -19,4 +19,5 @@ export const mockedActions: RoomListItemViewActions = { onCopyRoomLink: fn(), onLeaveRoom: fn(), onSetRoomNotifState: fn(), + onCreateSection: fn(), }; diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css index c444c8c1cd..e42f1fbaca 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.module.css @@ -9,6 +9,5 @@ * Room list container styles */ .roomList { - height: 100%; width: 100%; } diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx index a5048b5c73..b1c312cee0 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx @@ -34,6 +34,7 @@ const RoomListWrapperImpl = ({ getRoomItemViewModel, getSectionHeaderViewModel, updateVisibleRooms, + closeToast, renderAvatar: renderAvatarProp, ...rest }: RoomListStoryProps): JSX.Element => { @@ -44,6 +45,7 @@ const RoomListWrapperImpl = ({ getRoomItemViewModel, getSectionHeaderViewModel, updateVisibleRooms, + closeToast, }); return ( @@ -82,6 +84,7 @@ const meta = { updateVisibleRooms: fn(), renderAvatar, isFlatList: true, + closeToast: fn(), }, parameters: { design: { diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx index ad6b105e05..180723ba44 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx @@ -21,6 +21,7 @@ import type { RoomListViewSnapshot, RoomListViewModel } from "../RoomListView"; import { GroupedVirtualizedList } from "../../core/VirtualizedList"; import { RoomListSectionHeaderView } from "./RoomListSectionHeaderView"; import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper"; +import styles from "./VirtualizedRoomListView.module.css"; /** * Filter key type - opaque string type for filter identifiers @@ -350,6 +351,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual rangeChanged, onKeyDown, increaseViewportBy, + className: styles.roomList, }; if (isFlatList) { diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap index 6b64e96ad3..03e092feff 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap @@ -10,6 +10,7 @@ exports[` > renders Default story 1`] = ` >
    {_t("devtools|crypto|session")}
    {_t("devtools|crypto|device_id")}
    + Cross-signing +
    + Cross-signing +
    + Key Storage +
    + Key Storage +