Stubbing out placeholder for new onboarding flow

Author: selfcontained

components/dashboard/src/app/AppRoutes.tsx

@@ -45,6 +45,7 @@ import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-
 import { OrgRequiredRoute } from "./OrgRequiredRoute";
 import { WebsocketClients } from "./WebsocketClients";
 import { StartWorkspaceOptions } from "../start/start-workspace-options";
+import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -88,6 +89,7 @@ const ProjectsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../a
 const TeamsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/TeamsSearch"));
 const License = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/License"));
 const Usage = React.lazy(() => import(/* webpackPrefetch: true */ "../Usage"));
+const UserOnboarding = React.lazy(() => import(/* webpackPrefetch: true */ "../onboarding/UserOnboarding"));
 
 type AppRoutesProps = {
     user: User;
@@ -99,6 +101,7 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     const [isWhatsNewShown, setWhatsNewShown] = useState(shouldSeeWhatsNew(user));
     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
@@ -120,12 +123,18 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
         return <WhatsNew onClose={() => setWhatsNewShown(false)} />;
     }
 
+    // Placeholder for new signup flow
+    if (newSignupFlow && User.isOnboardingUser(user)) {
+        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) {
             return (
                 <StartPage phase={StartPhase.Checking}>
+                    {/* TODO: ensure we don't show this after new onboarding flow */}
                     <SelectIDEModal location="workspace_start" onClose={() => setShowUserIdePreference(false)} />
                 </StartPage>
             );

components/dashboard/src/onboarding/UserOnboarding.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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 { FunctionComponent } from "react";
+
+type Props = {
+    user: User;
+};
+const UserOnboarding: FunctionComponent<Props> = ({ user }) => {
+    // Placeholder UI to start stubbing out new flow
+    return (
+        <div className="container">
+            <h1>Welcome</h1>
+
+            <p>Help us get to know you a bit better</p>
+        </div>
+    );
+};
+export default UserOnboarding;

components/dashboard/src/workspaces/Workspaces.tsx

@@ -19,6 +19,7 @@ import { EmptyWorkspacesContent } from "./EmptyWorkspacesContent";
 import { WorkspacesSearchBar } from "./WorkspacesSearchBar";
 import { hoursBefore, isDateSmallerOrEqual } from "@gitpod/gitpod-protocol/lib/util/timeutil";
 import { useDeleteInactiveWorkspacesMutation } from "../data/workspaces/delete-inactive-workspaces-mutation";
+import { useFeatureFlags } from "../contexts/FeatureFlagContext";
 
 const WorkspacesPage: FunctionComponent = () => {
     const user = useCurrentUser();
@@ -29,6 +30,7 @@ const WorkspacesPage: FunctionComponent = () => {
     const { data, isLoading } = useListWorkspacesQuery({ limit });
     const isOnboardingUser = useMemo(() => user && User.isOnboardingUser(user), [user]);
     const deleteInactiveWorkspaces = useDeleteInactiveWorkspacesMutation();
+    const { newSignupFlow } = useFeatureFlags();
 
     // Sort workspaces into active/inactive groups
     const { activeWorkspaces, inactiveWorkspaces } = useMemo(() => {
@@ -94,12 +96,9 @@ const WorkspacesPage: FunctionComponent = () => {
                 />
             )}
 
-            {isOnboardingUser ? (
-                <SelectIDEModal location={"workspace_list"} />
-            ) : (
-                // modal hides itself
-                <ProfileState.NudgeForProfileUpdateModal />
-            )}
+            {isOnboardingUser && !newSignupFlow && <SelectIDEModal location={"workspace_list"} />}
+
+            {!isOnboardingUser && !newSignupFlow && <ProfileState.NudgeForProfileUpdateModal />}
 
             {!isLoading &&
                 (activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || searchTerm ? (