From 77062ac721e2dc04f8945b12f1c91ecf0e07852f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 16:45:56 +0100 Subject: [PATCH 1/8] Move General user settings styles to more specific places This was w grab bag of styles for the email/phone components and one for something now in preferences. Move them elsewhere so I can rename the tab sensibly. --- res/css/_components.pcss | 3 ++- .../_EmailAddressesPhoneNumbers.pcss} | 26 ++++++++----------- .../user/_PreferencesUserSettingsTab.pcss | 21 +++++++++++++++ .../views/settings/account/EmailAddresses.tsx | 12 ++++----- .../views/settings/account/PhoneNumbers.tsx | 12 ++++----- .../settings/discovery/EmailAddresses.tsx | 10 +++---- .../views/settings/discovery/PhoneNumbers.tsx | 10 +++---- 7 files changed, 56 insertions(+), 38 deletions(-) rename res/css/{views/settings/tabs/user/_GeneralUserSettingsTab.pcss => components/views/settings/_EmailAddressesPhoneNumbers.pcss} (56%) create mode 100644 res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index f1509c58e6..f81ad2bd40 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -37,6 +37,7 @@ @import "./components/views/messages/shared/_MediaProcessingError.pcss"; @import "./components/views/pips/_WidgetPip.pcss"; @import "./components/views/polls/_PollOption.pcss"; +@import "./components/views/settings/_EmailAddressesPhoneNumbers.pcss"; @import "./components/views/settings/devices/_CurrentDeviceSection.pcss"; @import "./components/views/settings/devices/_DeviceDetailHeading.pcss"; @import "./components/views/settings/devices/_DeviceDetails.pcss"; @@ -356,10 +357,10 @@ @import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss"; @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss"; @import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss"; -@import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss"; +@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss"; @import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss"; @import "./views/spaces/_SpaceBasicSettings.pcss"; diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss similarity index 56% rename from res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss rename to res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss index a59f64b391..c991ab9315 100644 --- a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss +++ b/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -14,28 +15,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_GeneralUserSettingsTab_section--discovery_existing { +/* + * These used to live in Generl User Settings. These components are horrily duplicative + * but share the same styles. For now I'm putting them here so I can renamed the general + * tab sensibly and before I can refactor these components. + */ + +.mx_EmailAddressesPhoneNumbers_discovery_existing { display: flex; align-items: center; } -.mx_GeneralUserSettingsTab_section--discovery_existing_address, -.mx_GeneralUserSettingsTab_section--discovery_existing_promptText { +.mx_EmailAddressesPhoneNumbers_discovery_existing_address, +.mx_EmailAddressesPhoneNumbers_discovery_existing_promptText { flex: 1; margin-right: 10px; } -.mx_GeneralUserSettingsTab_section--discovery_existing_button { +.mx_EmailAddressesPhoneNumbers_discovery_existing_button { margin-left: 5px; } - -.mx_GeneralUserSettingsTab_warningIcon { - vertical-align: middle; - margin-right: $spacing-8; - margin-bottom: 2px; -} - -.mx_GeneralUserSettingsTab_section_hint { - font: var(--cpd-font-body-sm-regular); - color: var(--cpd-color-text-secondary); -} diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss new file mode 100644 index 0000000000..f1021a1508 --- /dev/null +++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss @@ -0,0 +1,21 @@ +/* +Copyright 2019 New Vector Ltd +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_EmailAddressesPhoneNumbers_section_hint { + font: var(--cpd-font-body-sm-regular); + color: var(--cpd-color-text-secondary); +} diff --git a/src/components/views/settings/account/EmailAddresses.tsx b/src/components/views/settings/account/EmailAddresses.tsx index ef98707c1b..b18f3de61d 100644 --- a/src/components/views/settings/account/EmailAddresses.tsx +++ b/src/components/views/settings/account/EmailAddresses.tsx @@ -97,21 +97,21 @@ export class ExistingEmailAddress extends React.Component - +
+ {_t("settings|general|remove_email_prompt", { email: this.props.email.address })} {_t("action|remove")} {_t("action|cancel")} @@ -120,8 +120,8 @@ export class ExistingEmailAddress extends React.Component - +
+ {this.props.email.address} diff --git a/src/components/views/settings/account/PhoneNumbers.tsx b/src/components/views/settings/account/PhoneNumbers.tsx index b037643bc0..33c00c49b9 100644 --- a/src/components/views/settings/account/PhoneNumbers.tsx +++ b/src/components/views/settings/account/PhoneNumbers.tsx @@ -93,21 +93,21 @@ export class ExistingPhoneNumber extends React.Component - +
+ {_t("settings|general|remove_msisdn_prompt", { phone: this.props.msisdn.address })} {_t("action|remove")} {_t("action|cancel")} @@ -116,8 +116,8 @@ export class ExistingPhoneNumber extends React.Component - +
+ +{this.props.msisdn.address} diff --git a/src/components/views/settings/discovery/EmailAddresses.tsx b/src/components/views/settings/discovery/EmailAddresses.tsx index 58f1eaac7f..3f0568f544 100644 --- a/src/components/views/settings/discovery/EmailAddresses.tsx +++ b/src/components/views/settings/discovery/EmailAddresses.tsx @@ -178,7 +178,7 @@ export class EmailAddress extends React.Component {_t("settings|general|discovery_email_verification_instructions")} - {address} +
+ {address} {status}
); diff --git a/src/components/views/settings/discovery/PhoneNumbers.tsx b/src/components/views/settings/discovery/PhoneNumbers.tsx index a462273314..e7a3326be2 100644 --- a/src/components/views/settings/discovery/PhoneNumbers.tsx +++ b/src/components/views/settings/discovery/PhoneNumbers.tsx @@ -179,7 +179,7 @@ export class PhoneNumber extends React.Component + {_t("settings|general|msisdn_verification_instructions")}
@@ -200,7 +200,7 @@ export class PhoneNumber extends React.Component - +{address} +
+ +{address} {status}
); From a63454245023061e5affa2fdbdf17a5bce6d9be5 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 17:56:00 +0100 Subject: [PATCH 2/8] Update snapshot --- .../__snapshots__/GeneralUserSettingsTab-test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap index 08cd795def..469d9ea503 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/GeneralUserSettingsTab-test.tsx.snap @@ -18,10 +18,10 @@ exports[` 3pids should display 3pid email addresses an class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch" >
test@test.io @@ -84,10 +84,10 @@ exports[` 3pids should display 3pid email addresses an class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch" >
+ 123456789 From d60d28d7c4b768a60e0469ed981b1a51b547f43b Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 18:06:30 +0100 Subject: [PATCH 3/8] More snapshots --- .../__snapshots__/EmailAddresses-test.tsx.snap | 6 +++--- .../__snapshots__/PhoneNumbers-test.tsx.snap | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap b/test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap index 536c72e8eb..37c6a20dd5 100644 --- a/test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap +++ b/test/components/views/settings/discovery/__snapshots__/EmailAddresses-test.tsx.snap @@ -76,15 +76,15 @@ exports[` should render email addresses 1`] = ` class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch" >
foo@bar.com
diff --git a/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap b/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap index 948ee105b0..9e0d15c2ac 100644 --- a/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap +++ b/test/components/views/settings/discovery/__snapshots__/PhoneNumbers-test.tsx.snap @@ -19,15 +19,15 @@ exports[` should allow binding msisdn 1`] = ` class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch" >
+441111111111 Please enter verification code sent via text. @@ -141,16 +141,16 @@ exports[` should render phone numbers 1`] = ` class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch" >
+ 441111111111
From dd61eb932c2d275a8e05ab04bad4ce2189e6c42d Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 18:38:21 +0100 Subject: [PATCH 4/8] Fix classname --- .../settings/tabs/user/_PreferencesUserSettingsTab.pcss | 2 +- .../settings/tabs/user/PreferencesUserSettingsTab.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss index f1021a1508..0cc2b3d5af 100644 --- a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss +++ b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_EmailAddressesPhoneNumbers_section_hint { +.mx_PreferencesUserSettingsTab_section_hint { font: var(--cpd-font-body-sm-regular); color: var(--cpd-color-text-secondary); } diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx index 439cc2122f..0e213de969 100644 --- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx @@ -70,12 +70,8 @@ const LanguageSection: React.FC = () => { return (
{_t("settings|general|application_language")} - -
+ +
{_t("settings|general|application_language_reload_hint")}
From 69efe91bb5eb4d94bda0f10bb187abdfd7db0f37 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 21:15:05 +0100 Subject: [PATCH 5/8] More reanaming & snapshot --- playwright/e2e/settings/preferences-user-settings-tab.spec.ts | 2 +- .../user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts index a67909b47b..5fb2980e90 100644 --- a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts @@ -36,7 +36,7 @@ test.describe("Preferences user settings tab", () => { test("should be able to change the app language", async ({ uut, user }) => { // Check language and region setting dropdown - const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput"); + const languageInput = uut.locator(".mx_PreferencesUserSettingsTab_section_languageInput"); await languageInput.scrollIntoViewIfNeeded(); // Check the default value await expect(languageInput.getByText("English")).toBeVisible(); diff --git a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap index 7c535aae44..18ab66cadf 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap @@ -46,7 +46,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = ` />
The app will reload after selecting another language
From 8dfe561225befdb63452213ad3ada68dcf4b9364 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 21:36:00 +0100 Subject: [PATCH 6/8] Fix test to not use otherwise unused class name --- .../e2e/settings/preferences-user-settings-tab.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts index 5fb2980e90..368935e91c 100644 --- a/playwright/e2e/settings/preferences-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/preferences-user-settings-tab.spec.ts @@ -36,12 +36,12 @@ test.describe("Preferences user settings tab", () => { test("should be able to change the app language", async ({ uut, user }) => { // Check language and region setting dropdown - const languageInput = uut.locator(".mx_PreferencesUserSettingsTab_section_languageInput"); + const languageInput = uut.getByRole("button", { name: "Language Dropdown" }); await languageInput.scrollIntoViewIfNeeded(); // Check the default value await expect(languageInput.getByText("English")).toBeVisible(); // Click the button to display the dropdown menu - await languageInput.getByRole("button", { name: "Language Dropdown" }).click(); + await languageInput.click(); // Assert that the default option is rendered and highlighted languageInput.getByRole("option", { name: /Albanian/ }); await expect(languageInput.getByRole("option", { name: /Albanian/ })).toHaveClass( @@ -49,7 +49,7 @@ test.describe("Preferences user settings tab", () => { ); await expect(languageInput.getByRole("option", { name: /Deutsch/ })).toBeVisible(); // Click again to close the dropdown - await languageInput.getByRole("button", { name: "Language Dropdown" }).click(); + await languageInput.click(); // Assert that the default value is rendered again await expect(languageInput.getByText("English")).toBeVisible(); }); From 3c490fa105211df52f26d8a1d3d6dbd3ba7b3238 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 2 Aug 2024 13:12:05 +0100 Subject: [PATCH 7/8] Fix comment typos --- .../components/views/settings/_EmailAddressesPhoneNumbers.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss b/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss index c991ab9315..76dfc2d73b 100644 --- a/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss +++ b/res/css/components/views/settings/_EmailAddressesPhoneNumbers.pcss @@ -16,7 +16,7 @@ limitations under the License. */ /* - * These used to live in Generl User Settings. These components are horrily duplicative + * These used to live in General User Settings. These components are horribly duplicative * but share the same styles. For now I'm putting them here so I can renamed the general * tab sensibly and before I can refactor these components. */ From 090586439fe8d8cba6ef26a51d15c1c0c1c25d9b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 5 Aug 2024 08:59:27 +0100 Subject: [PATCH 8/8] Preparations for React 18 (#12860) * Add missing types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Eagerly add `children` to props in prep for React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Avoid assuming that setState immediately sets `this.state` values Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing context declaration Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix UserFriendlyError types to work with React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../structures/GenericDropdownMenu.tsx | 12 ++++++---- src/components/structures/ThreadPanel.tsx | 2 +- .../structures/auth/Registration.tsx | 23 +++++++++++-------- src/components/views/avatars/BaseAvatar.tsx | 4 ++-- .../views/dialogs/spotlight/Option.tsx | 1 + .../views/directory/NetworkDropdown.tsx | 8 +++++-- .../views/elements/PersistentApp.tsx | 3 ++- .../views/messages/RoomPredecessorTile.tsx | 10 ++++---- .../views/messages/TextualEvent.tsx | 1 + .../views/messages/TimelineSeparator.tsx | 3 ++- src/components/views/pips/WidgetPip.tsx | 5 ++-- src/components/views/right_panel/UserInfo.tsx | 3 ++- src/components/views/rooms/RoomHeader.tsx | 5 +++- .../views/settings/UserProfileSettings.tsx | 4 ++-- .../views/spaces/QuickSettingsButton.tsx | 2 +- src/hooks/useAccountData.ts | 4 ++-- src/languageHandler.tsx | 17 +++++++------- 17 files changed, 63 insertions(+), 44 deletions(-) diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx index e0fd3b7f9b..06854768db 100644 --- a/src/components/structures/GenericDropdownMenu.tsx +++ b/src/components/structures/GenericDropdownMenu.tsx @@ -97,6 +97,12 @@ type WithKeyFunction = T extends Key toKey: (key: T) => Key; }; +export interface AdditionalOptionsProps { + menuDisplayed: boolean; + closeMenu: () => void; + openMenu: () => void; +} + type IProps = WithKeyFunction & { value: T; options: readonly GenericDropdownMenuOption[] | readonly GenericDropdownMenuGroup[]; @@ -105,11 +111,7 @@ type IProps = WithKeyFunction & { onOpen?: (ev: ButtonEvent) => void; onClose?: (ev: ButtonEvent) => void; className?: string; - AdditionalOptions?: FunctionComponent<{ - menuDisplayed: boolean; - closeMenu: () => void; - openMenu: () => void; - }>; + AdditionalOptions?: FunctionComponent; }; export function GenericDropdownMenu({ diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 8951cfcb91..792c97bc52 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -117,7 +117,7 @@ export const ThreadPanelHeader: React.FC<{ ) : null; const onMarkAllThreadsReadClick = React.useCallback( - (e) => { + (e: React.MouseEvent) => { PosthogTrackers.trackInteraction("WebThreadsMarkAllReadButton", e); if (!roomContext.room) { logger.error("No room in context to mark all threads read"); diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 5ac49537c5..ede5767745 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -248,15 +248,20 @@ export default class Registration extends React.Component { logger.error("Failed to get login flows to check for SSO support", e); } - this.setState(({ flows }) => ({ - matrixClient: cli, - ssoFlow, - oidcNativeFlow, - // if we are using oidc native we won't continue with flow discovery on HS - // so set an empty array to indicate flows are no longer loading - flows: oidcNativeFlow ? [] : flows, - busy: false, - })); + await new Promise((resolve) => { + this.setState( + ({ flows }) => ({ + matrixClient: cli, + ssoFlow, + oidcNativeFlow, + // if we are using oidc native we won't continue with flow discovery on HS + // so set an empty array to indicate flows are no longer loading + flows: oidcNativeFlow ? [] : flows, + busy: false, + }), + resolve, + ); + }); // don't need to check with homeserver for login flows // since we are going to use OIDC native flow diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index d956c26da2..b35109f5d7 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -19,7 +19,7 @@ limitations under the License. import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react"; import classNames from "classnames"; -import { ClientEvent } from "matrix-js-sdk/src/matrix"; +import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix"; import { Avatar } from "@vector-im/compound-web"; import SettingsStore from "../../../settings/SettingsStore"; @@ -80,7 +80,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [ }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps const cli = useContext(MatrixClientContext); - const onClientSync = useCallback((syncState, prevState) => { + const onClientSync = useCallback((syncState: SyncState, prevState: SyncState | null) => { // Consider the client reconnected if there is no error with syncing. // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP. const reconnected = syncState !== "ERROR" && prevState !== syncState; diff --git a/src/components/views/dialogs/spotlight/Option.tsx b/src/components/views/dialogs/spotlight/Option.tsx index c7d504aa0b..d15b781fcf 100644 --- a/src/components/views/dialogs/spotlight/Option.tsx +++ b/src/components/views/dialogs/spotlight/Option.tsx @@ -26,6 +26,7 @@ interface OptionProps { id?: string; className?: string; onClick: ((ev: ButtonEvent) => void) | null; + children?: ReactNode; } export const Option: React.FC = ({ inputRef, children, endAdornment, className, ...props }) => { diff --git a/src/components/views/directory/NetworkDropdown.tsx b/src/components/views/directory/NetworkDropdown.tsx index 8736e974e8..deb9285853 100644 --- a/src/components/views/directory/NetworkDropdown.tsx +++ b/src/components/views/directory/NetworkDropdown.tsx @@ -26,7 +26,11 @@ import SdkConfig from "../../../SdkConfig"; import { SettingLevel } from "../../../settings/SettingLevel"; import SettingsStore from "../../../settings/SettingsStore"; import { Protocols } from "../../../utils/DirectoryUtils"; -import { GenericDropdownMenu, GenericDropdownMenuItem } from "../../structures/GenericDropdownMenu"; +import { + AdditionalOptionsProps, + GenericDropdownMenu, + GenericDropdownMenuItem, +} from "../../structures/GenericDropdownMenu"; import TextInputDialog from "../dialogs/TextInputDialog"; import AccessibleButton from "../elements/AccessibleButton"; import withValidation from "../elements/Validation"; @@ -181,7 +185,7 @@ export const NetworkDropdown: React.FC = ({ protocols, config, setConfig })); const addNewServer = useCallback( - ({ closeMenu }) => ( + ({ closeMenu }: AdditionalOptionsProps) => ( <> void) | undefined>; + children?: ReactNode; } export default class PersistentApp extends React.Component { diff --git a/src/components/views/messages/RoomPredecessorTile.tsx b/src/components/views/messages/RoomPredecessorTile.tsx index 3166373fe0..36679d906d 100644 --- a/src/components/views/messages/RoomPredecessorTile.tsx +++ b/src/components/views/messages/RoomPredecessorTile.tsx @@ -17,7 +17,7 @@ limitations under the License. import React, { useCallback, useContext } from "react"; import { logger } from "matrix-js-sdk/src/logger"; -import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; +import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix"; import dis from "../../../dispatcher/dispatcher"; import { Action } from "../../../dispatcher/actions"; @@ -52,7 +52,7 @@ export const RoomPredecessorTile: React.FC = ({ mxEvent, timestamp }) => const predecessor = useRoomState( roomContext.room, useCallback( - (state) => state.findPredecessor(msc3946ProcessDynamicPredecessor), + (state: RoomState) => state.findPredecessor(msc3946ProcessDynamicPredecessor), [msc3946ProcessDynamicPredecessor], ), ); @@ -63,9 +63,9 @@ export const RoomPredecessorTile: React.FC = ({ mxEvent, timestamp }) => dis.dispatch({ action: Action.ViewRoom, - event_id: predecessor.eventId, + event_id: predecessor?.eventId, highlighted: true, - room_id: predecessor.roomId, + room_id: predecessor?.roomId, metricsTrigger: "Predecessor", metricsViaKeyboard: e.type !== "click", }); @@ -126,7 +126,7 @@ export const RoomPredecessorTile: React.FC = ({ mxEvent, timestamp }) => const predecessorPermalink = prevRoom ? createLinkWithRoom(prevRoom, predecessor.roomId, predecessor.eventId) - : createLinkWithoutRoom(predecessor.roomId, predecessor.viaServers, predecessor.eventId); + : createLinkWithoutRoom(predecessor.roomId, predecessor?.viaServers ?? [], predecessor.eventId); const link = ( diff --git a/src/components/views/messages/TextualEvent.tsx b/src/components/views/messages/TextualEvent.tsx index ae94fd31f9..35351ce531 100644 --- a/src/components/views/messages/TextualEvent.tsx +++ b/src/components/views/messages/TextualEvent.tsx @@ -27,6 +27,7 @@ interface IProps { export default class TextualEvent extends React.Component { public static contextType = RoomContext; + public declare context: React.ContextType; public render(): React.ReactNode { const text = TextForEvent.textForEvent( diff --git a/src/components/views/messages/TimelineSeparator.tsx b/src/components/views/messages/TimelineSeparator.tsx index 78e0d1fd65..b3a2b9ccfb 100644 --- a/src/components/views/messages/TimelineSeparator.tsx +++ b/src/components/views/messages/TimelineSeparator.tsx @@ -14,10 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { ReactNode } from "react"; interface Props { label: string; + children?: ReactNode; } export const enum SeparatorKind { diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx index 9bba2ccc53..a1710d16cc 100644 --- a/src/components/views/pips/WidgetPip.tsx +++ b/src/components/views/pips/WidgetPip.tsx @@ -34,6 +34,7 @@ import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore"; import WidgetUtils from "../../../utils/WidgetUtils"; import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions"; +import { ButtonEvent } from "../elements/AccessibleButton"; interface Props { widgetId: string; @@ -62,7 +63,7 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin const call = useCallForWidget(widgetId, room.roomId); const onBackClick = useCallback( - (ev) => { + (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -87,7 +88,7 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin ); const onLeaveClick = useCallback( - (ev) => { + (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 6f8fd9790b..159bc9dbf1 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -424,6 +424,7 @@ export const UserOptionsSection: React.FC<{ member: Member; canInvite: boolean; isSpace?: boolean; + children?: ReactNode; }> = ({ member, canInvite, isSpace, children }) => { const cli = useContext(MatrixClientContext); @@ -1036,7 +1037,7 @@ const IgnoreToggleButton: React.FC<{ }, [cli, member.userId]); // Recheck also if we receive new accountData m.ignored_user_list const accountDataHandler = useCallback( - (ev) => { + (ev: MatrixEvent) => { if (ev.getType() === "m.ignored_user_list") { setIsIgnored(cli.isUserIgnored(member.userId)); } diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 9cf63e474d..11873ee129 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -116,7 +116,10 @@ export default function RoomHeader({ const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join"); - const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]); + const videoClick = useCallback( + (ev: React.MouseEvent) => videoCallClick(ev, callOptions[0]), + [callOptions, videoCallClick], + ); const toggleCallButton = ( diff --git a/src/components/views/settings/UserProfileSettings.tsx b/src/components/views/settings/UserProfileSettings.tsx index a104aabb1d..b793f27dd6 100644 --- a/src/components/views/settings/UserProfileSettings.tsx +++ b/src/components/views/settings/UserProfileSettings.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"; +import React, { ChangeEvent, ReactNode, useCallback, useEffect, useMemo, useState } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web"; import { Icon as PopOutIcon } from "@vector-im/compound-design-tokens/icons/pop-out.svg"; @@ -37,7 +37,7 @@ import Modal from "../../../Modal"; import defaultDispatcher from "../../../dispatcher/dispatcher"; import { Flex } from "../../utils/Flex"; -const SpinnerToast: React.FC = ({ children }) => ( +const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => ( <> {children} diff --git a/src/components/views/spaces/QuickSettingsButton.tsx b/src/components/views/spaces/QuickSettingsButton.tsx index cf031e4ff1..a118a13bbc 100644 --- a/src/components/views/spaces/QuickSettingsButton.tsx +++ b/src/components/views/spaces/QuickSettingsButton.tsx @@ -45,7 +45,7 @@ const QuickSettingsButton: React.FC<{ useSettingValue>("Spaces.enabledMetaSpaces"); const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId(); - const developerModeEnabled = useSettingValue("developerMode"); + const developerModeEnabled = useSettingValue("developerMode"); let contextMenu: JSX.Element | undefined; if (menuDisplayed && handle.current) { diff --git a/src/hooks/useAccountData.ts b/src/hooks/useAccountData.ts index d59910d503..ad25f61465 100644 --- a/src/hooks/useAccountData.ts +++ b/src/hooks/useAccountData.ts @@ -26,9 +26,9 @@ export const useAccountData = (cli: MatrixClient, eventType: strin const [value, setValue] = useState(() => tryGetContent(cli.getAccountData(eventType))); const handler = useCallback( - (event) => { + (event: MatrixEvent) => { if (event.getType() !== eventType) return; - setValue(event.getContent()); + setValue(event.getContent()); }, [eventType], ); diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx index 0a80be89f4..27a886ddf9 100644 --- a/src/languageHandler.tsx +++ b/src/languageHandler.tsx @@ -53,7 +53,7 @@ const FALLBACK_LOCALE = "en"; counterpart.setFallbackLocale(FALLBACK_LOCALE); export interface ErrorOptions { - // Because we're mixing the subsitution variables and `cause` into the same object + // Because we're mixing the substitution variables and `cause` into the same object // below, we want them to always explicitly say whether there is an underlying error // or not to avoid typos of "cause" slipping through unnoticed. cause: unknown | undefined; @@ -78,16 +78,15 @@ export interface ErrorOptions { export class UserFriendlyError extends Error { public readonly translatedMessage: string; - public constructor(message: TranslationKey, substitutionVariablesAndCause?: IVariables & ErrorOptions) { - const errorOptions = { - cause: substitutionVariablesAndCause?.cause, - }; + public constructor( + message: TranslationKey, + substitutionVariablesAndCause?: Omit | ErrorOptions, + ) { // Prevent "Could not find /%\(cause\)s/g in x" logs to the console by removing it from the list - const substitutionVariables = { ...substitutionVariablesAndCause }; - delete substitutionVariables["cause"]; + const { cause, ...substitutionVariables } = substitutionVariablesAndCause ?? {}; + const errorOptions = { cause }; - // Create the error with the English version of the message that we want to show - // up in the logs + // Create the error with the English version of the message that we want to show up in the logs const englishTranslatedMessage = _t(message, { ...substitutionVariables, locale: "en" }); super(englishTranslatedMessage, errorOptions);