[dashboard] increase IDE awareness for onboarding user when starting workspace

Author: mustard-mh

components/dashboard/src/App.tsx

@@ -20,7 +20,7 @@ import gitpodIcon from "./icons/gitpod.svg";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { useHistory } from "react-router-dom";
 import { trackButtonOrAnchor, trackPathChange, trackLocation } from "./Analytics";
-import { LicenseInfo, User } from "@gitpod/gitpod-protocol";
+import { ContextURL, LicenseInfo, User } from "@gitpod/gitpod-protocol";
 import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
 import { Experiment } from "./experiments";
 import { workspacesPathMain } from "./workspaces/workspaces.routes";
@@ -45,6 +45,8 @@ import {
 import { refreshSearchData } from "./components/RepositoryFinder";
 import { StartWorkspaceModal } from "./workspaces/StartWorkspaceModal";
 import { parseProps } from "./start/StartWorkspace";
+import SelectIDEModal from "./settings/SelectIDEModal";
+import { StartPage, StartPhase } from "./start/StartPage";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "./workspaces/Workspaces"));
@@ -156,6 +158,7 @@ function App() {
 
     const [loading, setLoading] = useState<boolean>(true);
     const [isWhatsNewShown, setWhatsNewShown] = useState(false);
+    const [showUserIdePreference, setShowUserIdePreference] = useState(false);
     const [isSetupRequired, setSetupRequired] = useState(false);
     const history = useHistory();
 
@@ -495,12 +498,26 @@ function App() {
         );
         return <div></div>;
     }
+    // Prefix with `/#referrer` will specify an IDE for workspace
+    // We don't need to show IDE preference in this case
+    const shouldUserIdePreferenceShown = User.isOnboardingUser(user) && !hash.startsWith(ContextURL.REFERRER_PREFIX);
+    if (shouldUserIdePreferenceShown !== showUserIdePreference) {
+        setShowUserIdePreference(shouldUserIdePreferenceShown);
+    }
     const isCreation = window.location.pathname === "/" && hash !== "";
     const isWsStart = /\/start\/?/.test(window.location.pathname) && hash !== "";
     if (isWhatsNewShown) {
         toRender = <WhatsNew onClose={() => setWhatsNewShown(false)} />;
     } else if (isCreation) {
-        toRender = <CreateWorkspace contextUrl={hash} />;
+        if (showUserIdePreference) {
+            toRender = (
+                <StartPage phase={StartPhase.Checking}>
+                    <SelectIDEModal onClose={() => setShowUserIdePreference(false)} />
+                </StartPage>
+            );
+        } else {
+            toRender = <CreateWorkspace contextUrl={hash} />;
+        }
     } else if (isWsStart) {
         toRender = <StartWorkspace {...parseProps(hash, window.location.search)} />;
     } else if (/^(github|gitlab)\.com\/.+?/i.test(window.location.pathname)) {

components/dashboard/src/settings/SelectIDEModal.tsx

@@ -11,7 +11,7 @@ import SelectIDE, { updateUserIDEInfo } from "./SelectIDE";
 import Modal from "../components/Modal";
 import { UserContext } from "../user-context";
 
-export default function () {
+export default function (props: { onClose?: () => void }) {
     const { user, setUser } = useContext(UserContext);
     const [visible, setVisible] = useState(true);
 
@@ -23,11 +23,13 @@ export default function () {
     const handleContinue = async () => {
         setVisible(false);
         if (!user || User.hasPreferredIde(user)) {
+            props.onClose && props.onClose();
             return;
         }
         // TODO: We need to get defaultIde in ideOptions..
         const defaultIde = "code";
         await actualUpdateUserIDEInfo(user, defaultIde, false);
+        props.onClose && props.onClose();
     };
 
     return (