New User Onboarding Flow UI (#16501)

* disable rule for better dx - linter will catch

* add styles for other input types

* adding more options to input components

* Building out onboarding form

* adjusting form

* breaking onboarding flow into pieces

* adding personalize step

* removing old code

* removing un-needed code

* Plug in ThemeSelector component

* cleanup

* update onboarding logic

* disable or members query if no current org present

* adjusting where we save onboarding data

* make label optional

* change signup goals to an array

* change to company

* adjust spacing/layout

* Add additional comments for context

* rename isLoading to isSaving for clarity

* fix typo

* set type on button, don't submit if invalid

* adding required on required fields

* fix typos

* Adjusting titles, styles and adding avatar

* account for new profile fields for tracking

* remove check for signupGoals

* updating options

* Adding exploration reasons question

Author: selfcontained

components/dashboard/src/app/AppRoutes.tsx

@@ -6,7 +6,7 @@
 
 import { ContextURL, Team, User } from "@gitpod/gitpod-protocol";
 import React, { FunctionComponent, useContext, useState } from "react";
-import { Redirect, Route, Switch, useLocation } from "react-router";
+import { Redirect, Route, Switch, useLocation, useParams } from "react-router";
 import { AppNotifications } from "../AppNotifications";
 import Menu from "../menu/Menu";
 import OAuthClientApproval from "../OauthClientApproval";
@@ -46,6 +46,7 @@ import { OrgRequiredRoute } from "./OrgRequiredRoute";
 import { WebsocketClients } from "./WebsocketClients";
 import { StartWorkspaceOptions } from "../start/start-workspace-options";
 import { useFeatureFlags } from "../contexts/FeatureFlagContext";
+import { FORCE_ONBOARDING_PARAM, FORCE_ONBOARDING_PARAM_VALUE } from "../onboarding/UserOnboarding";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -102,12 +103,7 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     const newCreateWsPage = useNewCreateWorkspacePage();
     const location = useLocation();
     const { newSignupFlow } = useFeatureFlags();
-
-    // Prefix with `/#referrer` will specify an IDE for workspace
-    // We don't need to show IDE preference in this case
-    const [showUserIdePreference, setShowUserIdePreference] = useState(
-        User.isOnboardingUser(user) && !hash.startsWith(ContextURL.REFERRER_PREFIX),
-    );
+    const search = new URLSearchParams(location.search);
 
     // TODO: Add a Route for this instead of inspecting location manually
     if (location.pathname.startsWith("/blocked")) {
@@ -123,19 +119,26 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
         return <WhatsNew onClose={() => setWhatsNewShown(false)} />;
     }
 
-    // Placeholder for new signup flow
-    if (newSignupFlow && User.isOnboardingUser(user)) {
+    // Show new signup flow if:
+    // * feature flag enabled
+    // * User is onboarding (no ide selected yet) OR query param `onboarding=force` is set
+    const showNewSignupFlow =
+        newSignupFlow &&
+        (User.isOnboardingUser(user) || search.get(FORCE_ONBOARDING_PARAM) === FORCE_ONBOARDING_PARAM_VALUE);
+    if (showNewSignupFlow) {
         return <UserOnboarding user={user} />;
     }
 
     // TODO: Try and encapsulate this in a route for "/" (check for hash in route component, render or redirect accordingly)
     const isCreation = location.pathname === "/" && hash !== "";
     if (isCreation) {
-        if (showUserIdePreference) {
+        // Prefix with `/#referrer` will specify an IDE for workspace
+        // After selection is saved, user will be updated, and this condition will be false
+        const showIDESelection = User.isOnboardingUser(user) && !hash.startsWith(ContextURL.REFERRER_PREFIX);
+        if (showIDESelection) {
             return (
                 <StartPage phase={StartPhase.Checking}>
-                    {/* TODO: ensure we don't show this after new onboarding flow */}
-                    <SelectIDEModal location="workspace_start" onClose={() => setShowUserIdePreference(false)} />
+                    <SelectIDEModal location="workspace_start" />
                 </StartPage>
             );
         } else if (new URLSearchParams(location.search).has("showOptions") || newCreateWsPage) {

components/dashboard/src/components/ThemeSelector.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { FC, useCallback, useContext, useState } from "react";
+import { ThemeContext } from "../theme-context";
+import SelectableCardSolid from "./SelectableCardSolid";
+
+type Theme = "light" | "dark" | "system";
+
+type Props = {
+    className?: string;
+};
+// Theme Selection is purely clientside, so this component handles all state and writes to localStorage
+export const ThemeSelector: FC<Props> = ({ className }) => {
+    const { setIsDark } = useContext(ThemeContext);
+    const [theme, setTheme] = useState<Theme>(localStorage.theme || "system");
+
+    const actuallySetTheme = useCallback(
+        (theme: Theme) => {
+            if (theme === "dark" || theme === "light") {
+                localStorage.theme = theme;
+            } else {
+                localStorage.removeItem("theme");
+            }
+            const isDark =
+                localStorage.theme === "dark" ||
+                (localStorage.theme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+            setIsDark(isDark);
+            setTheme(theme);
+        },
+        [setIsDark],
+    );
+
+    return (
+        <div className={classNames(className)}>
+            <h3>Theme</h3>
+            <p className="text-base text-gray-500 dark:text-gray-400">Early bird or night owl? Choose your side.</p>
+            <div className="mt-4 flex items-center flex-wrap">
+                <SelectableCardSolid
+                    className="w-36 h-32 m-1"
+                    title="Light"
+                    selected={theme === "light"}
+                    onClick={() => actuallySetTheme("light")}
+                >
+                    <div className="flex-grow flex items-end p-1">
+                        <svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
+                                fill="#D6D3D1"
+                            />
+                        </svg>
+                    </div>
+                </SelectableCardSolid>
+                <SelectableCardSolid
+                    className="w-36 h-32 m-1"
+                    title="Dark"
+                    selected={theme === "dark"}
+                    onClick={() => actuallySetTheme("dark")}
+                >
+                    <div className="flex-grow flex items-end p-1">
+                        <svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
+                                fill="#78716C"
+                            />
+                        </svg>
+                    </div>
+                </SelectableCardSolid>
+                <SelectableCardSolid
+                    className="w-36 h-32 m-1"
+                    title="System"
+                    selected={theme === "system"}
+                    onClick={() => actuallySetTheme("system")}
+                >
+                    <div className="flex-grow flex items-end p-1">
+                        <svg width="112" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M0 8a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8ZM40 6a6 6 0 0 1 6-6h60a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H46a6 6 0 0 1-6-6V6Z"
+                                fill="#D9D9D9"
+                            />
+                            <path
+                                d="M84 0h22a6 6 0 0 1 6 6v28a6 6 0 0 1-6 6H68L84 0ZM0 32a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z"
+                                fill="#78716C"
+                            />
+                            <path d="M0 56a8 8 0 0 1 8-8h16a8 8 0 1 1 0 16H8a8 8 0 0 1-8-8Z" fill="#D9D9D9" />
+                        </svg>
+                    </div>
+                </SelectableCardSolid>
+            </div>
+        </div>
+    );
+};

components/dashboard/src/components/forms/InputField.tsx

@@ -8,24 +8,27 @@ import classNames from "classnames";
 import { FunctionComponent, memo, ReactNode } from "react";
 
 type Props = {
-    label: ReactNode;
+    label?: ReactNode;
     id?: string;
     hint?: ReactNode;
     error?: ReactNode;
+    className?: string;
 };
 
-export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, error, children }) => {
+export const InputField: FunctionComponent<Props> = memo(({ label, id, hint, error, className, children }) => {
     return (
-        <div className="mt-4 flex flex-col space-y-2">
-            <label
-                className={classNames(
-                    "text-sm font-semibold dark:text-gray-400",
-                    error ? "text-red-600" : "text-gray-600",
-                )}
-                htmlFor={id}
-            >
-                {label}
-            </label>
+        <div className={classNames("mt-4 flex flex-col space-y-2", className)}>
+            {label && (
+                <label
+                    className={classNames(
+                        "text-sm font-semibold dark:text-gray-400",
+                        error ? "text-red-600" : "text-gray-600",
+                    )}
+                    htmlFor={id}
+                >
+                    {label}
+                </label>
+            )}
             {children}
             {error && <span className="text-red-500 text-sm">{error}</span>}
             {hint && <span className="text-gray-500 text-sm">{hint}</span>}

components/dashboard/src/components/forms/SelectInputField.tsx

@@ -10,7 +10,7 @@ import { useId } from "../../hooks/useId";
 import { InputField } from "./InputField";
 
 type Props = {
-    label: ReactNode;
+    label?: ReactNode;
     value: string;
     id?: string;
     hint?: ReactNode;
@@ -31,6 +31,7 @@ export const SelectInputField: FunctionComponent<Props> = memo(
                 <SelectInput
                     id={elementId}
                     value={value}
+                    className={error ? "error" : ""}
                     onChange={onChange}
                     disabled={disabled}
                     required={required}

components/dashboard/src/components/forms/TextInputField.tsx

@@ -9,16 +9,19 @@ import { FunctionComponent, memo, ReactNode, useCallback } from "react";
 import { useId } from "../../hooks/useId";
 import { InputField } from "./InputField";
 
+type TextInputFieldTypes = "text" | "password" | "email" | "url";
+
 type Props = {
-    type?: "text" | "password";
-    label: ReactNode;
+    type?: TextInputFieldTypes;
+    label?: ReactNode;
     value: string;
     id?: string;
     hint?: ReactNode;
     error?: ReactNode;
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
+    containerClassName?: string;
     onChange: (newValue: string) => void;
     onBlur?: () => void;
 };
@@ -34,22 +37,23 @@ export const TextInputField: FunctionComponent<Props> = memo(
         error,
         disabled = false,
         required = false,
+        containerClassName,
         onChange,
         onBlur,
     }) => {
         const maybeId = useId();
         const elementId = id || maybeId;
 
         return (
-            <InputField id={elementId} label={label} hint={hint} error={error}>
+            <InputField id={elementId} label={label} hint={hint} error={error} className={containerClassName}>
                 <TextInput
                     id={elementId}
                     value={value}
                     type={type}
                     placeholder={placeholder}
                     disabled={disabled}
                     required={required}
-                    className={error ? "border-red-500" : ""}
+                    className={error ? "error" : ""}
                     onChange={onChange}
                     onBlur={onBlur}
                 />
@@ -59,7 +63,7 @@ export const TextInputField: FunctionComponent<Props> = memo(
 );
 
 type TextInputProps = {
-    type?: "text" | "password";
+    type?: TextInputFieldTypes;
     value: string;
     className?: string;
     id?: string;

components/dashboard/src/data/current-user/update-mutation.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { User } from "@gitpod/gitpod-protocol";
+import { useMutation } from "@tanstack/react-query";
+import { getGitpodService } from "../../service/service";
+
+type UpdateCurrentUserArgs = Partial<User>;
+
+export const useUpdateCurrentUserMutation = () => {
+    return useMutation({
+        mutationFn: async (partialUser: UpdateCurrentUserArgs) => {
+            return await getGitpodService().server.updateLoggedInUser(partialUser);
+        },
+    });
+};

components/dashboard/src/data/organizations/org-members-query.ts

@@ -26,6 +26,12 @@ export const useOrgMembers = () => {
 
             return publicApiTeamMembersToProtocol(resp.team?.members || []);
         },
+        /**
+         * If no current org is set, disable query
+         * This is to prevent making a request to the API when there is no organization selected.
+         * This happens if the user has their personal account selected, or when first loggin in
+         */
+        enabled: !!organization,
     });
 };
 

components/dashboard/src/index.css

@@ -85,6 +85,8 @@
     input[type="tel"],
     input[type="number"],
     input[type="password"],
+    input[type="email"],
+    input[type="url"],
     select {
         @apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
     }
@@ -93,14 +95,18 @@
     input[type="tel"]::placeholder,
     input[type="number"]::placeholder,
     input[type="search"]::placeholder,
-    input[type="password"]::placeholder {
+    input[type="password"]::placeholder,
+    input[type="email"]::placeholder,
+    input[type="url"]::placeholder {
         @apply text-gray-400 dark:text-gray-500;
     }
     input[type="text"].error,
     input[type="tel"].error,
     input[type="number"].error,
     input[type="search"].error,
     input[type="password"].error,
+    input[type="email"].error,
+    input[type="url"].error,
     select.error {
         @apply border-gitpod-red dark:border-gitpod-red focus:border-gitpod-red dark:focus:border-gitpod-red;
     }

components/dashboard/src/onboarding/OnboardingStep.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC, FormEvent, useCallback } from "react";
+import Alert from "../components/Alert";
+
+type Props = {
+    title: string;
+    subtitle: string;
+    isValid: boolean;
+    isSaving?: boolean;
+    error?: string;
+    onSubmit(): void;
+};
+export const OnboardingStep: FC<Props> = ({
+    title,
+    subtitle,
+    isValid,
+    isSaving = false,
+    error,
+    children,
+    onSubmit,
+}) => {
+    const handleSubmit = useCallback(
+        async (e: FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+            if (isSaving || !isValid) {
+                return;
+            }
+
+            onSubmit();
+        },
+        [isSaving, isValid, onSubmit],
+    );
+
+    return (
+        <div className="flex flex-col items-center justify-center max-w-full">
+            {/* TODO: Fix our base heading styles so we don't have to override */}
+            <h2 className="text-3xl text-gray-900 dark:text-gray-100 font-bold">{title}</h2>
+            <p className="text-base text-gray-500 dark:text-gray-400">{subtitle}</p>
+
+            <form className="mt-8 mb-14 max-w-lg" onSubmit={handleSubmit}>
+                {/* Form contents provided as children */}
+                {children}
+
+                {error && <Alert type="error">{error}</Alert>}
+
+                <div>
+                    <button type="submit" disabled={!isValid || isSaving} className="w-full mt-8">
+                        Continue
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};