The Welcome Home Screen: Return Button

cypress/e2e/user-onboarding/user-onboarding-new.ts

@@ -47,8 +47,11 @@ describe("User Onboarding (new user)", () => {
         cy.stopSynapse(synapse);
     });
 
-    it("page is shown", () => {
+    it("page is shown and preference exists", () => {
         cy.get('.mx_UserOnboardingPage').should('exist');
+        cy.get('.mx_UserOnboardingButton').should('exist');
+        cy.openUserSettings("Preferences");
+        cy.contains("Show shortcut to welcome page above the room list").should("exist");
         cy.percySnapshot("User onboarding page");
     });
 

cypress/e2e/user-onboarding/user-onboarding-old.ts

@@ -40,7 +40,10 @@ describe("User Onboarding (old user)", () => {
         cy.stopSynapse(synapse);
     });
 
-    it("page is hidden", () => {
+    it("page and preference are hidden", () => {
         cy.get('.mx_UserOnboardingPage').should('not.exist');
+        cy.get('.mx_UserOnboardingButton').should('not.exist');
+        cy.openUserSettings("Preferences");
+        cy.contains("Show shortcut to welcome page above the room list").should("not.exist");
     });
 });

res/css/_components.pcss

@@ -329,6 +329,7 @@
 @import "./views/user-onboarding/_UserOnboardingList.pcss";
 @import "./views/user-onboarding/_UserOnboardingPage.pcss";
 @import "./views/user-onboarding/_UserOnboardingTask.pcss";
+@import "./views/user-onboarding/_UserOnboardingButton.pcss";
 @import "./views/verification/_VerificationShowSas.pcss";
 @import "./views/voip/CallView/_CallViewButtons.pcss";
 @import "./views/voip/_CallPreview.pcss";

res/css/views/user-onboarding/_UserOnboardingButton.pcss

@@ -0,0 +1,84 @@
+/*
+Copyright 2022 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_UserOnboardingButton {
+    display: flex;
+    flex-direction: column;
+    align-content: stretch;
+    align-items: stretch;
+    border-radius: 8px;
+    margin: $spacing-8 $spacing-8 0;
+    padding: $spacing-12;
+
+    &.mx_UserOnboardingButton_selected,
+    &:hover,
+    &:focus-within {
+        background-color: $panel-actions;
+    }
+
+    .mx_UserOnboardingButton_content {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: center;
+
+        .mx_Heading_h4 {
+            margin-right: auto;
+            font-size: $font-14px;
+            color: $primary-content;
+        }
+
+        .mx_UserOnboardingButton_percentage {
+            font-size: $font-12px;
+            color: $secondary-content;
+        }
+
+        .mx_UserOnboardingButton_close {
+            position: relative;
+            box-sizing: border-box;
+            width: 14px;
+            height: 14px;
+            border-radius: 7px;
+            border: 1px solid $secondary-content;
+            flex-shrink: 0;
+
+            &::before {
+                background-color: $secondary-content;
+                content: "";
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 7px;
+                height: 7px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
+            }
+        }
+    }
+
+    .mx_ProgressBar {
+        width: auto;
+        margin-top: $spacing-8;
+        background: $background;
+    }
+
+    &.mx_UserOnboardingButton_completed .mx_ProgressBar {
+        display: none;
+    }
+}

src/components/structures/LeftPanel.tsx

@@ -45,9 +45,12 @@ import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../settings/UIFeature";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
+import PageType from "../../PageTypes";
+import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
 
 interface IProps {
     isMinimized: boolean;
+    pageType: PageType;
     resizeNotifier: ResizeNotifier;
 }
 
@@ -390,6 +393,10 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                             onVisibilityChange={this.refreshStickyHeaders}
                         />
                     ) }
+                    <UserOnboardingButton
+                        selected={this.props.pageType === PageType.HomePage}
+                        minimized={this.props.isMinimized}
+                    />
                     <div className="mx_LeftPanel_roomListWrapper">
                         <div
                             className={roomListClasses}

src/components/structures/LoggedInView.tsx

@@ -689,6 +689,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                                     data-collapsed={this.props.collapseLhs ? true : undefined}
                                 >
                                     <LeftPanel
+                                        pageType={this.props.page_type as PageTypes}
                                         isMinimized={this.props.collapseLhs || false}
                                         resizeNotifier={this.props.resizeNotifier}
                                     />

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -44,6 +44,7 @@ interface IState {
 export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
     static ROOM_LIST_SETTINGS = [
         'breadcrumbs',
+        "FTUE.userOnboardingButton",
     ];
 
     static SPACES_SETTINGS = [

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

@@ -0,0 +1,97 @@
+/*
+Copyright 2022 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.
+*/
+
+import classNames from "classnames";
+import React, { useCallback } from "react";
+
+import { Action } from "../../../dispatcher/actions";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
+import { _t } from "../../../languageHandler";
+import PosthogTrackers from "../../../PosthogTrackers";
+import { UseCase } from "../../../settings/enums/UseCase";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
+import ProgressBar from "../../views/elements/ProgressBar";
+import Heading from "../../views/typography/Heading";
+import { showUserOnboardingPage } from "./UserOnboardingPage";
+
+function toPercentage(progress: number): string {
+    return (progress * 100).toFixed(0);
+}
+
+interface Props {
+    selected: boolean;
+    minimized: boolean;
+}
+
+export function UserOnboardingButton({ selected, minimized }: Props) {
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks();
+
+    const completed = completedTasks.length;
+    const waiting = waitingTasks.length;
+    const total = completed + waiting;
+
+    const progress = waiting ? completed / total : 1;
+
+    const onDismiss = useCallback((ev: ButtonEvent) => {
+        PosthogTrackers.trackInteraction("WebRoomListUserOnboardingIgnoreButton", ev);
+        SettingsStore.setValue("FTUE.userOnboardingButton", null, SettingLevel.ACCOUNT, false);
+    }, []);
+
+    const onClick = useCallback((ev: ButtonEvent) => {
+        PosthogTrackers.trackInteraction("WebRoomListUserOnboardingButton", ev);
+        defaultDispatcher.fire(Action.ViewHomePage);
+    }, []);
+
+    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
+    const visible = useSettingValue<boolean>("FTUE.userOnboardingButton");
+    if (!visible || minimized || !showUserOnboardingPage(useCase)) {
+        return null;
+    }
+
+    return (
+        <AccessibleButton
+            className={classNames("mx_UserOnboardingButton", {
+                "mx_UserOnboardingButton_selected": selected,
+                "mx_UserOnboardingButton_minimized": minimized,
+                "mx_UserOnboardingButton_completed": !waiting,
+            })}
+            onClick={onClick}>
+            { !minimized && (
+                <>
+                    <div className="mx_UserOnboardingButton_content">
+                        <Heading size="h4" className="mx_Heading_h4">
+                            { _t("Welcome") }
+                        </Heading>
+                        { !completed && (
+                            <div className="mx_UserOnboardingButton_percentage">
+                                { toPercentage(progress) }%
+                            </div>
+                        ) }
+                        <AccessibleButton
+                            className="mx_UserOnboardingButton_close"
+                            onClick={onDismiss}
+                        />
+                    </div>
+                    <ProgressBar value={completed} max={total} animated />
+                </>
+            ) }
+        </AccessibleButton>
+    );
+}

src/i18n/strings/en_EN.json

@@ -951,6 +951,7 @@
     "Order rooms by name": "Order rooms by name",
     "Show rooms with unread notifications first": "Show rooms with unread notifications first",
     "Show shortcuts to recently viewed rooms above the room list": "Show shortcuts to recently viewed rooms above the room list",
+    "Show shortcut to welcome page above the room list": "Show shortcut to welcome page above the room list",
     "Show hidden events in timeline": "Show hidden events in timeline",
     "Low bandwidth mode (requires compatible homeserver)": "Low bandwidth mode (requires compatible homeserver)",
     "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)": "Allow fallback call assist server turn.matrix.org when your homeserver does not offer one (your IP address would be shared during a call)",
@@ -1147,6 +1148,7 @@
     "Anchor": "Anchor",
     "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.",
     "Feedback": "Feedback",

src/settings/Settings.tsx

@@ -804,6 +804,11 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: true,
         controller: new IncompatibleController("feature_breadcrumbs_v2", true),
     },
+    "FTUE.userOnboardingButton": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Show shortcut to welcome page above the room list"),
+        default: true,
+    },
     "showHiddenEventsInTimeline": {
         displayName: _td("Show hidden events in timeline"),
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,