From 77062ac721e2dc04f8945b12f1c91ecf0e07852f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 1 Aug 2024 16:45:56 +0100 Subject: [PATCH 1/7] 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 f1509c58e6d..f81ad2bd409 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 a59f64b3911..c991ab93155 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 00000000000..f1021a15084 --- /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 ef98707c1bf..b18f3de61da 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 b037643bc03..33c00c49b91 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 58f1eaac7fa..3f0568f544e 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 a4622733143..e7a3326be28 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/7] 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 08cd795deff..469d9ea503c 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/7] 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 536c72e8ebd..37c6a20dd55 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 948ee105b06..9e0d15c2ac4 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/7] 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 f1021a15084..0cc2b3d5af3 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 439cc2122fc..0e213de9695 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/7] 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 a67909b47be..5fb2980e908 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 7c535aae446..18ab66cadfd 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/7] 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 5fb2980e908..368935e91c7 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/7] 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 c991ab93155..76dfc2d73b1 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. */