From e8eefeb937a7519ad5591d3b68c3bb5ecc59ec4d Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Mon, 22 Aug 2022 12:11:24 +0200 Subject: [PATCH] Avoid hardcoding branding in user onboarding (#9206) * Avoid hardcoding branding in user onboarding * Make spotlight test more reliable --- cypress/e2e/spotlight/spotlight.spec.ts | 50 ++++++++++--------- .../UserOnboardingFeedback.tsx | 8 ++- .../user-onboarding/UserOnboardingList.tsx | 2 +- .../user-onboarding/UserOnboardingTask.tsx | 7 ++- src/hooks/useUserOnboardingTasks.ts | 13 +++-- src/i18n/strings/en_EN.json | 9 ++-- 6 files changed, 52 insertions(+), 37 deletions(-) diff --git a/cypress/e2e/spotlight/spotlight.spec.ts b/cypress/e2e/spotlight/spotlight.spec.ts index 63b3d00e1b..d4b2d2cf9b 100644 --- a/cypress/e2e/spotlight/spotlight.spec.ts +++ b/cypress/e2e/spotlight/spotlight.spec.ts @@ -349,30 +349,34 @@ describe("Spotlight", () => { cy.get(".mx_RoomSublist[aria-label=People]").should("contain", bot2Name); // Invite BotBob into existing DM with ByteBot - cy.getDmRooms(bot2.getUserId()).then(dmRooms => dmRooms[0]) - .then(groupDmId => cy.inviteUser(groupDmId, bot1.getUserId())) - .then(() => { - cy.roomHeaderName().should("contain", `${bot1Name} and ${bot2Name}`); - cy.get(".mx_RoomSublist[aria-label=People]").should("contain", `${bot1Name} and ${bot2Name}`); + cy.getDmRooms(bot2.getUserId()) + .should("have.length", 1) + .then(dmRooms => cy.getClient().then(client => client.getRoom(dmRooms[0]))) + .then(groupDm => { + cy.inviteUser(groupDm.roomId, bot1.getUserId()); + cy.roomHeaderName().should(($element) => + expect($element.get(0).innerText).contains(groupDm.name)); + cy.get(".mx_RoomSublist[aria-label=People]").should(($element) => + expect($element.get(0).innerText).contains(groupDm.name)); + + // Search for BotBob by id, should return group DM and user + cy.openSpotlightDialog().within(() => { + cy.spotlightFilter(Filter.People); + cy.spotlightSearch().clear().type(bot1.getUserId()); + cy.wait(1000); // wait for the dialog code to settle + cy.spotlightResults().should("have.length", 2); + cy.spotlightResults().eq(0).should("contain", groupDm.name); + }); + + // Search for ByteBot by id, should return group DM and user + cy.openSpotlightDialog().within(() => { + cy.spotlightFilter(Filter.People); + cy.spotlightSearch().clear().type(bot2.getUserId()); + cy.wait(1000); // wait for the dialog code to settle + cy.spotlightResults().should("have.length", 2); + cy.spotlightResults().eq(0).should("contain", groupDm.name); + }); }); - - // Search for BotBob by id, should return group DM and user - cy.openSpotlightDialog().within(() => { - cy.spotlightFilter(Filter.People); - cy.spotlightSearch().clear().type(bot1.getUserId()); - cy.wait(1000); // wait for the dialog code to settle - cy.spotlightResults().should("have.length", 2); - cy.spotlightResults().eq(0).should("contain", `${bot1Name} and ${bot2Name}`); - }); - - // Search for ByteBot by id, should return group DM and user - cy.openSpotlightDialog().within(() => { - cy.spotlightFilter(Filter.People); - cy.spotlightSearch().clear().type(bot2.getUserId()); - cy.wait(1000); // wait for the dialog code to settle - cy.spotlightResults().should("have.length", 2); - cy.spotlightResults().eq(0).should("contain", `${bot1Name} and ${bot2Name}`); - }); }); // Test against https://github.com/vector-im/element-web/issues/22851 diff --git a/src/components/views/user-onboarding/UserOnboardingFeedback.tsx b/src/components/views/user-onboarding/UserOnboardingFeedback.tsx index 6aabb50f2a..b6bd03dfe8 100644 --- a/src/components/views/user-onboarding/UserOnboardingFeedback.tsx +++ b/src/components/views/user-onboarding/UserOnboardingFeedback.tsx @@ -32,10 +32,14 @@ export function UserOnboardingFeedback() {
- { _t("How are you finding Element so far?") } + { _t("How are you finding %(brand)s so far?", { + brand: SdkConfig.get("brand"), + }) }
- { _t("We’d appreciate any feedback on how you’re finding Element.") } + { _t("We’d appreciate any feedback on how you’re finding %(brand)s.", { + brand: SdkConfig.get("brand"), + }) }
    { tasks.map(([task, completed]) => ( - + )) }
diff --git a/src/components/views/user-onboarding/UserOnboardingTask.tsx b/src/components/views/user-onboarding/UserOnboardingTask.tsx index 48accab8d3..72c6617ff1 100644 --- a/src/components/views/user-onboarding/UserOnboardingTask.tsx +++ b/src/components/views/user-onboarding/UserOnboardingTask.tsx @@ -27,6 +27,9 @@ interface Props { } export function UserOnboardingTask({ task, completed = false }: Props) { + const title = typeof task.title === "function" ? task.title() : task.title; + const description = typeof task.description === "function" ? task.description() : task.description; + return (
  • - { task.title } + { title }
    - { task.description } + { description }
    { task.action && (!task.action.hideOnComplete || !completed) && ( diff --git a/src/hooks/useUserOnboardingTasks.ts b/src/hooks/useUserOnboardingTasks.ts index 9ac0b5d98b..e4499cdb32 100644 --- a/src/hooks/useUserOnboardingTasks.ts +++ b/src/hooks/useUserOnboardingTasks.ts @@ -25,14 +25,15 @@ import { _t } from "../languageHandler"; import Modal from "../Modal"; import { Notifier } from "../Notifier"; import PosthogTrackers from "../PosthogTrackers"; +import SdkConfig from "../SdkConfig"; import { UseCase } from "../settings/enums/UseCase"; import { useSettingValue } from "./useSettings"; import { UserOnboardingContext } from "./useUserOnboardingContext"; export interface UserOnboardingTask { id: string; - title: string; - description: string; + title: string | (() => string); + description: string | (() => string); relevant?: UseCase[]; action?: { label: string; @@ -95,8 +96,12 @@ const tasks: InternalUserOnboardingTask[] = [ }, { id: "download-apps", - title: _t("Download Element"), - description: _t("Don’t miss a thing by taking Element with you"), + title: () => _t("Download %(brand)s", { + brand: SdkConfig.get("brand"), + }), + description: () => _t("Don’t miss a thing by taking %(brand)s with you", { + brand: SdkConfig.get("brand"), + }), completed: (ctx: UserOnboardingContext) => { return Boolean(ctx.devices.filter(it => it.device_id !== ctx.myDevice).length); }, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d344f164ad..4a00a99540 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1002,8 +1002,8 @@ "Get stuff done by finding your teammates": "Get stuff done by finding your teammates", "Find people": "Find people", "Find and invite your community members": "Find and invite your community members", - "Download Element": "Download Element", - "Don’t miss a thing by taking Element with you": "Don’t miss a thing by taking Element with you", + "Download %(brand)s": "Download %(brand)s", + "Don’t miss a thing by taking %(brand)s with you": "Don’t miss a thing by taking %(brand)s with you", "Download apps": "Download apps", "Set up your profile": "Set up your profile", "Make sure people know it’s really you": "Make sure people know it’s really you", @@ -1148,8 +1148,8 @@ "Headphones": "Headphones", "Folder": "Folder", "Welcome": "Welcome", - "How are you finding Element so far?": "How are you finding Element so far?", - "We’d appreciate any feedback on how you’re finding Element.": "We’d appreciate any feedback on how you’re finding Element.", + "How are you finding %(brand)s so far?": "How are you finding %(brand)s so far?", + "We’d appreciate any feedback on how you’re finding %(brand)s.": "We’d appreciate any feedback on how you’re finding %(brand)s.", "Feedback": "Feedback", "Secure messaging for friends and family": "Secure messaging for friends and family", "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.": "With free end-to-end encrypted messaging, and unlimited voice and video calls, %(brand)s is a great way to stay in touch.", @@ -2493,7 +2493,6 @@ "We don't record or profile any account data": "We don't record or profile any account data", "We don't share information with third parties": "We don't share information with third parties", "You can turn this off anytime in settings": "You can turn this off anytime in settings", - "Download %(brand)s": "Download %(brand)s", "Download %(brand)s Desktop": "Download %(brand)s Desktop", "iOS": "iOS", "Download on the App Store": "Download on the App Store",