The Welcome Home Screen: Return Button (#9089)

* Implement button to return to user onboarding screen
* Add analytics events
* Increase stability of lazy loading test

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

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

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

@@ -0,0 +1,102 @@
+/*
+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 { useUserOnboardingContext } from "../../../hooks/useUserOnboardingContext";
+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 context = useUserOnboardingContext();
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks(context);
+
+    const completed = completedTasks.length;
+    const waiting = waitingTasks.length;
+    const total = completed + waiting;
+
+    let progress = 1;
+    if (context && waiting) {
+        progress = completed / total;
+    }
+
+    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 || !context,
+            })}
+            onClick={onClick}>
+            { !minimized && (
+                <>
+                    <div className="mx_UserOnboardingButton_content">
+                        <Heading size="h4" className="mx_Heading_h4">
+                            { _t("Welcome") }
+                        </Heading>
+                        { context && !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/components/views/user-onboarding/UserOnboardingPage.tsx

@@ -19,6 +19,7 @@ import * as React from "react";
 
 import { useInitialSyncComplete } from "../../../hooks/useIsInitialSyncComplete";
 import { useSettingValue } from "../../../hooks/useSettings";
+import { useUserOnboardingContext } from "../../../hooks/useUserOnboardingContext";
 import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import SdkConfig from "../../../SdkConfig";
@@ -47,7 +48,8 @@ export function UserOnboardingPage({ justRegistered = false }: Props) {
     const pageUrl = getHomePageUrl(config);
 
     const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
-    const [completedTasks, waitingTasks] = useUserOnboardingTasks();
+    const context = useUserOnboardingContext();
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks(context);
 
     const initialSyncComplete = useInitialSyncComplete();
     const [showList, setShowList] = useState<boolean>(false);