Avoid hardcoding branding in user onboarding (#9206)

* Avoid hardcoding branding in user onboarding
* Make spotlight test more reliable

Author: justjanne

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}`);
-            });
-
-        // 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}`);
-        });
+        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", `${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", groupDm.name);
+                });
+            });
     });
 
     // Test against https://github.com/vector-im/element-web/issues/22851

src/components/views/user-onboarding/UserOnboardingFeedback.tsx

@@ -32,10 +32,14 @@ export function UserOnboardingFeedback() {
         <div className="mx_UserOnboardingFeedback">
             <div className="mx_UserOnboardingFeedback_content">
                 <Heading size="h4" className="mx_UserOnboardingFeedback_title">
-                    { _t("How are you finding Element so far?") }
+                    { _t("How are you finding %(brand)s so far?", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
                 </Heading>
                 <div className="mx_UserOnboardingFeedback_text">
-                    { _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"),
+                    }) }
                 </div>
             </div>
             <AccessibleButton

src/components/views/user-onboarding/UserOnboardingList.tsx

@@ -62,7 +62,7 @@ export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
             </div>
             <ol className="mx_UserOnboardingList_list">
                 { tasks.map(([task, completed]) => (
-                    <UserOnboardingTask key={task.title} completed={completed} task={task} />
+                    <UserOnboardingTask key={task.id} completed={completed} task={task} />
                 )) }
             </ol>
         </div>

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 (
         <li className={classNames("mx_UserOnboardingTask", {
             "mx_UserOnboardingTask_completed": completed,
@@ -42,10 +45,10 @@ export function UserOnboardingTask({ task, completed = false }: Props) {
                 id={`mx_UserOnboardingTask_${task.id}`}
                 className="mx_UserOnboardingTask_content">
                 <Heading size="h4" className="mx_UserOnboardingTask_title">
-                    { task.title }
+                    { title }
                 </Heading>
                 <div className="mx_UserOnboardingTask_description">
-                    { task.description }
+                    { description }
                 </div>
             </div>
             { task.action && (!task.action.hideOnComplete || !completed) && (

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);
         },

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 <Bold>don't</Bold> record or profile any account data": "We <Bold>don't</Bold> record or profile any account data",
     "We <Bold>don't</Bold> share information with third parties": "We <Bold>don't</Bold> 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",