New User Onboarding Task List (#9083)

* Improve type of AccessibleButton to accurately represent available props
* Update analytics events

src/components/structures/LoggedInView.tsx

@@ -34,7 +34,6 @@ import { SettingLevel } from "../../settings/SettingLevel";
 import ResizeHandle from '../views/elements/ResizeHandle';
 import { CollapseDistributor, Resizer } from '../../resizer';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import HomePage from "./HomePage";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { DefaultTagID } from "../../stores/room-list/models";
@@ -71,6 +70,7 @@ import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload
 import LegacyGroupView from "./LegacyGroupView";
 import { IConfigOptions } from "../../IConfigOptions";
 import LeftPanelLiveShareWarning from '../views/beacon/LeftPanelLiveShareWarning';
+import { UserOnboardingPage } from '../views/user-onboarding/UserOnboardingPage';
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -635,7 +635,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
 
             case PageTypes.HomePage:
-                pageElement = <HomePage justRegistered={this.props.justRegistered} />;
+                pageElement = <UserOnboardingPage justRegistered={this.props.justRegistered} />;
                 break;
 
             case PageTypes.UserView:

src/components/structures/UserView.tsx

@@ -22,13 +22,13 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
-import HomePage from "./HomePage";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import MainSplit from "./MainSplit";
 import RightPanel from "./RightPanel";
 import Spinner from "../views/elements/Spinner";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
+import { UserOnboardingPage } from "../views/user-onboarding/UserOnboardingPage";
 
 interface IProps {
     userId?: string;
@@ -92,7 +92,7 @@ export default class UserView extends React.Component<IProps, IState> {
                 resizeNotifier={this.props.resizeNotifier}
             />;
             return (<MainSplit panel={panel} resizeNotifier={this.props.resizeNotifier}>
-                <HomePage />
+                <UserOnboardingPage />
             </MainSplit>);
         } else {
             return (<div />);

src/components/views/elements/AccessibleButton.tsx

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { ReactHTML } from 'react';
+import React, { HTMLAttributes, InputHTMLAttributes, ReactHTML, ReactNode } from 'react';
 import classnames from 'classnames';
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -35,15 +35,30 @@ type AccessibleButtonKind = | 'primary'
     | 'confirm_sm'
     | 'cancel_sm';
 
+/**
+ * This type construct allows us to specifically pass those props down to the element we’re creating that the element
+ * actually supports.
+ *
+ * e.g., if element is set to "a", we’ll support href and target, if it’s set to "input", we support type.
+ *
+ * To remain compatible with existing code, we’ll continue to support InputHTMLAttributes<Element>
+ */
+type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
+    JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
+type DynamicElementProps<T extends keyof JSX.IntrinsicElements> =
+    Partial<Omit<JSX.IntrinsicElements[T], 'ref' | 'onClick' | 'onMouseDown' | 'onKeyUp' | 'onKeyDown'>>
+    & Omit<InputHTMLAttributes<Element>, 'onClick'>;
+
 /**
  * children: React's magic prop. Represents all children given to the element.
  * element:  (optional) The base element type. "div" by default.
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-interface IProps extends React.InputHTMLAttributes<Element> {
+type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
     inputRef?: React.Ref<Element>;
-    element?: keyof ReactHTML;
+    element?: T;
+    children?: ReactNode | undefined;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
     kind?: AccessibleButtonKind | string;
@@ -55,7 +70,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     className?: string;
     triggerOnMouseDown?: boolean;
     onClick(e?: ButtonEvent): void | Promise<void>;
-}
+};
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>;
@@ -69,7 +84,7 @@ interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton({
+export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>({
     element,
     onClick,
     children,
@@ -81,7 +96,7 @@ export default function AccessibleButton({
     onKeyUp,
     triggerOnMouseDown,
     ...restProps
-}: IProps) {
+}: IProps<T>) {
     const newProps: IAccessibleButtonProps = restProps;
     if (disabled) {
         newProps["aria-disabled"] = true;

src/components/views/elements/ProgressBar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020,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.
@@ -16,13 +16,20 @@ limitations under the License.
 
 import React from "react";
 
+import { useSmoothAnimation } from "../../../hooks/useSmoothAnimation";
+
 interface IProps {
     value: number;
     max: number;
+    animated?: boolean;
 }
 
-const ProgressBar: React.FC<IProps> = ({ value, max }) => {
-    return <progress className="mx_ProgressBar" max={max} value={value} />;
+const PROGRESS_BAR_ANIMATION_DURATION = 300;
+const ProgressBar: React.FC<IProps> = ({ value, max, animated }) => {
+    // Animating progress bars via CSS transition isn’t possible in all of our supported browsers yet.
+    // As workaround, we’re using animations through JS requestAnimationFrame
+    const currentValue = useSmoothAnimation(0, value, PROGRESS_BAR_ANIMATION_DURATION, animated);
+    return <progress className="mx_ProgressBar" max={max} value={currentValue} />;
 };
 
 export default ProgressBar;

src/components/views/settings/ProfileSettings.tsx

@@ -30,6 +30,7 @@ import AvatarSetting from './AvatarSetting';
 import ExternalLink from '../elements/ExternalLink';
 import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import PosthogTrackers from '../../../PosthogTrackers';
 
 interface IState {
     userId?: string;
@@ -189,7 +190,10 @@ export default class ProfileSettings extends React.Component<{}, IState> {
                     type="file"
                     ref={this.avatarUpload}
                     className="mx_ProfileSettings_avatarUpload"
-                    onClick={chromeFileInputFix}
+                    onClick={(ev) => {
+                        chromeFileInputFix(ev);
+                        PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton", ev);
+                    }}
                     onChange={this.onAvatarChanged}
                     accept="image/*"
                 />

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

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 
 import { _t } from "../../../../../languageHandler";
+import { UseCase } from "../../../../../settings/enums/UseCase";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import Field from "../../../elements/Field";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
@@ -28,6 +29,7 @@ import { UserTab } from "../../../dialogs/UserTab";
 import { OpenToTabPayload } from "../../../../../dispatcher/payloads/OpenToTabPayload";
 import { Action } from "../../../../../dispatcher/actions";
 import SdkConfig from "../../../../../SdkConfig";
+import { showUserOnboardingPage } from "../../../user-onboarding/UserOnboardingPage";
 
 interface IProps {
     closeSettingsFn(success: boolean): void;
@@ -143,14 +145,21 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
     };
 
     render() {
+        const useCase = SettingsStore.getValue<UseCase | null>("FTUE.useCaseSelection");
+        const roomListSettings = PreferencesUserSettingsTab.ROOM_LIST_SETTINGS
+            // Only show the breadcrumbs setting if breadcrumbs v2 is disabled
+            .filter(it => it !== "breadcrumbs" || !SettingsStore.getValue("feature_breadcrumbs_v2"))
+            // Only show the user onboarding setting if the user should see the user onboarding page
+            .filter(it => it !== "FTUE.userOnboardingButton" || showUserOnboardingPage(useCase));
+
         return (
             <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{ _t("Preferences") }</div>
 
-                { !SettingsStore.getValue("feature_breadcrumbs_v2") &&
+                { roomListSettings.length > 0 &&
                     <div className="mx_SettingsTab_section">
                         <span className="mx_SettingsTab_subheading">{ _t("Room list") }</span>
-                        { this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS) }
+                        { this.renderGroup(roomListSettings) }
                     </div>
                 }
 

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

@@ -0,0 +1,98 @@
+/*
+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 * as React from "react";
+
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { _t } from "../../../languageHandler";
+import PosthogTrackers from "../../../PosthogTrackers";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+const onClickSendDm = (ev: ButtonEvent) => {
+    PosthogTrackers.trackInteraction("WebUserOnboardingHeaderSendDm", ev);
+    defaultDispatcher.dispatch({ action: 'view_create_chat' });
+};
+
+interface Props {
+    useCase: UseCase;
+}
+
+export function UserOnboardingHeader({ useCase }: Props) {
+    let title: string;
+    let description: string;
+    let image;
+    let actionLabel: string;
+
+    switch (useCase) {
+        case UseCase.PersonalMessaging:
+            title = _t("Secure messaging for friends and family");
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls, " +
+                "%(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+            actionLabel = _t("Start your first chat");
+            break;
+        case UseCase.WorkMessaging:
+            title = _t("Secure messaging for work");
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                " %(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/WorkMessaging.png");
+            actionLabel = _t("Find your co-workers");
+            break;
+        case UseCase.CommunityMessaging:
+            title = _t("Community ownership");
+            description = _t("Keep ownership and control of community discussion.\n" +
+                "Scale to support millions, with powerful moderation and interoperability.");
+            image = require("../../../../res/img/user-onboarding/CommunityMessaging.png");
+            actionLabel = _t("Find your people");
+            break;
+        default:
+            title = _t("Welcome to %(brand)s", {
+                brand: SdkConfig.get("brand"),
+            });
+            description = _t("With free end-to-end encrypted messaging, and unlimited voice and video calls," +
+                " %(brand)s is a great way to stay in touch.", {
+                brand: SdkConfig.get("brand"),
+            });
+            image = require("../../../../res/img/user-onboarding/PersonalMessaging.png");
+            actionLabel = _t("Start your first chat");
+            break;
+    }
+
+    return (
+        <div className="mx_UserOnboardingHeader">
+            <div className="mx_UserOnboardingHeader_content">
+                <Heading size="h1">
+                    { title }
+                    <span className="mx_UserOnboardingHeader_dot">.</span>
+                </Heading>
+                <p>
+                    { description }
+                </p>
+                <AccessibleButton onClick={onClickSendDm} kind="primary">
+                    { actionLabel }
+                </AccessibleButton>
+            </div>
+            <img className="mx_UserOnboardingHeader_image" src={image} alt="" />
+        </div>
+    );
+}

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

@@ -0,0 +1,66 @@
+/*
+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 * as React from "react";
+import { useMemo } from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import { _t } from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import ProgressBar from "../../views/elements/ProgressBar";
+import Heading from "../../views/typography/Heading";
+import { UserOnboardingTask } from "./UserOnboardingTask";
+
+interface Props {
+    completedTasks: Task[];
+    waitingTasks: Task[];
+}
+
+export function UserOnboardingList({ completedTasks, waitingTasks }: Props) {
+    const completed = completedTasks.length;
+    const waiting = waitingTasks.length;
+    const total = completed + waiting;
+
+    const tasks = useMemo(() => [
+        ...completedTasks.map((it): [Task, boolean] => [it, true]),
+        ...waitingTasks.map((it): [Task, boolean] => [it, false]),
+    ], [completedTasks, waitingTasks]);
+
+    return (
+        <div className="mx_UserOnboardingList">
+            <div className="mx_UserOnboardingList_header">
+                <Heading size="h3" className="mx_UserOnboardingList_title">
+                    { waiting > 0 ? _t("Only %(count)s steps to go", {
+                        count: waiting,
+                    }) : _t("You did it!") }
+                </Heading>
+                <div className="mx_UserOnboardingList_hint">
+                    { _t("Complete these to get the most out of %(brand)s", {
+                        brand: SdkConfig.get("brand"),
+                    }) }
+                </div>
+            </div>
+            <div className="mx_UserOnboardingList_progress">
+                <ProgressBar value={completed} max={total} animated />
+            </div>
+            <ol className="mx_UserOnboardingList_list">
+                { tasks.map(([task, completed]) => (
+                    <UserOnboardingTask key={task.title} completed={completed} task={task} />
+                )) }
+            </ol>
+        </div>
+    );
+}

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

@@ -0,0 +1,84 @@
+/*
+Copyright 2020-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 { useEffect, useState } from "react";
+import * as React from "react";
+
+import { useInitialSyncComplete } from "../../../hooks/useIsInitialSyncComplete";
+import { useSettingValue } from "../../../hooks/useSettings";
+import { useUserOnboardingTasks } from "../../../hooks/useUserOnboardingTasks";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import SdkConfig from "../../../SdkConfig";
+import { UseCase } from "../../../settings/enums/UseCase";
+import { getHomePageUrl } from "../../../utils/pages";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
+import EmbeddedPage from "../../structures/EmbeddedPage";
+import HomePage from "../../structures/HomePage";
+import { UserOnboardingHeader } from "./UserOnboardingHeader";
+import { UserOnboardingList } from "./UserOnboardingList";
+
+interface Props {
+    justRegistered?: boolean;
+}
+
+// We decided to only show the new user onboarding page to new users
+// For now, that means we set the cutoff at 2022-07-01 00:00 UTC
+const USER_ONBOARDING_CUTOFF_DATE = new Date(1_656_633_600);
+export function showUserOnboardingPage(useCase: UseCase): boolean {
+    return useCase !== null || MatrixClientPeg.userRegisteredAfter(USER_ONBOARDING_CUTOFF_DATE);
+}
+
+const ANIMATION_DURATION = 2800;
+export function UserOnboardingPage({ justRegistered = false }: Props) {
+    const config = SdkConfig.get();
+    const pageUrl = getHomePageUrl(config);
+
+    const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");
+    const [completedTasks, waitingTasks] = useUserOnboardingTasks();
+
+    const initialSyncComplete = useInitialSyncComplete();
+    const [showList, setShowList] = useState<boolean>(false);
+    useEffect(() => {
+        if (initialSyncComplete) {
+            let handler: number | null = setTimeout(() => {
+                handler = null;
+                setShowList(true);
+            }, ANIMATION_DURATION);
+            return () => {
+                clearTimeout(handler);
+                handler = null;
+            };
+        } else {
+            setShowList(false);
+        }
+    }, [initialSyncComplete, setShowList]);
+
+    // Only show new onboarding list to users who registered after a given date or have chosen a use case
+    if (!showUserOnboardingPage(useCase)) {
+        return <HomePage justRegistered={justRegistered} />;
+    }
+
+    if (pageUrl) {
+        return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
+    }
+
+    return <AutoHideScrollbar className="mx_UserOnboardingPage">
+        <UserOnboardingHeader useCase={useCase} />
+        { showList && (
+            <UserOnboardingList completedTasks={completedTasks} waitingTasks={waitingTasks} />
+        ) }
+    </AutoHideScrollbar>;
+}

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

@@ -0,0 +1,64 @@
+/*
+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 * as React from "react";
+
+import { UserOnboardingTask as Task } from "../../../hooks/useUserOnboardingTasks";
+import AccessibleButton from "../../views/elements/AccessibleButton";
+import Heading from "../../views/typography/Heading";
+
+interface Props {
+    task: Task;
+    completed?: boolean;
+}
+
+export function UserOnboardingTask({ task, completed = false }: Props) {
+    return (
+        <li className={classNames("mx_UserOnboardingTask", {
+            "mx_UserOnboardingTask_completed": completed,
+        })}>
+            <div
+                className="mx_UserOnboardingTask_number"
+                role="checkbox"
+                aria-disabled="true"
+                aria-checked={completed}
+                aria-labelledby={`mx_UserOnboardingTask_${task.id}`}
+            />
+            <div
+                id={`mx_UserOnboardingTask_${task.id}`}
+                className="mx_UserOnboardingTask_content">
+                <Heading size="h4" className="mx_UserOnboardingTask_title">
+                    { task.title }
+                </Heading>
+                <div className="mx_UserOnboardingTask_description">
+                    { task.description }
+                </div>
+            </div>
+            { task.action && (!task.action.hideOnComplete || !completed) && (
+                <AccessibleButton
+                    element="a"
+                    className="mx_UserOnboardingTask_action"
+                    kind="primary_outline"
+                    href={task.action.href}
+                    target="_blank"
+                    onClick={task.action.onClick}>
+                    { task.action.label }
+                </AccessibleButton>
+            ) }
+        </li>
+    );
+}