OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Avoid hardcoding branding in user onboarding (#9206) 

* Avoid hardcoding branding in user onboarding
* Make spotlight test more reliable
pull/28217/head
Janne Mareike Koschinski 2022-08-22 12:11:24 +02:00 committed by GitHub
parent ef0ba77f14
commit e8eefeb937
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
cypress/e2e/spotlight/spotlight.spec.ts
View File

@ -349,12 +349,15 @@ 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(() => {
@ -362,7 +365,7 @@ describe("Spotlight", () => {
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.spotlightResults().eq(0).should("contain", groupDm.name);
});
// Search for ByteBot by id, should return group DM and user
@ -371,7 +374,8 @@ describe("Spotlight", () => {
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}`);
cy.spotlightResults().eq(0).should("contain", groupDm.name);
});
});
});

8
src/components/views/user-onboarding/UserOnboardingFeedback.tsx
View File

@ -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

2
src/components/views/user-onboarding/UserOnboardingList.tsx
View File

@ -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>

7
src/components/views/user-onboarding/UserOnboardingTask.tsx
View File

@ -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) && (

13
src/hooks/useUserOnboardingTasks.ts
View File

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

9
src/i18n/strings/en_EN.json
View File

@ -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",