[dashboard] start with options by default

Author: svenefftinge

components/dashboard/src/app/AppRoutes.tsx

@@ -10,7 +10,7 @@ import SelectIDEModal from "../user-settings/SelectIDEModal";
 import { StartPage, StartPhase } from "../start/StartPage";
 import { getURLHash, isGitpodIo, isLocalPreview } from "../utils";
 import { shouldSeeWhatsNew, WhatsNew } from "../whatsnew/WhatsNew";
-import { Redirect, Route, Switch } from "react-router";
+import { Redirect, Route, Switch, useLocation } from "react-router";
 import Menu from "../menu/Menu";
 import { parseProps } from "../start/StartWorkspace";
 import { AppNotifications } from "../AppNotifications";
@@ -41,9 +41,9 @@ import { Blocked } from "./Blocked";
 import { BlockedRepositories } from "../admin/BlockedRepositories";
 import PersonalAccessTokenCreateView from "../user-settings/PersonalAccessTokensCreateView";
 import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
-import { StartWorkspaceOptions } from "../start/start-workspace-options";
 import { WebsocketClients } from "./WebsocketClients";
 import { OrgRequiredRoute } from "./OrgRequiredRoute";
+import { CreateWorkspacePage, useNewCreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/Workspaces"));
@@ -61,7 +61,6 @@ const Preferences = React.lazy(() => import(/* webpackPrefetch: true */ "../user
 const PersonalAccessTokens = React.lazy(
     () => import(/* webpackPrefetch: true */ "../user-settings/PersonalAccessTokens"),
 );
-const Open = React.lazy(() => import(/* webpackPrefetch: true */ "../start/Open"));
 const StartWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ "../start/StartWorkspace"));
 const CreateWorkspace = React.lazy(() => import(/* webpackPrefetch: true */ "../start/CreateWorkspace"));
 const NewTeam = React.lazy(() => import(/* webpackPrefetch: true */ "../teams/NewTeam"));
@@ -97,6 +96,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     const hash = getURLHash();
     const { startWorkspaceModalProps, setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
     const [isWhatsNewShown, setWhatsNewShown] = useState(shouldSeeWhatsNew(user));
+    const newCreateWsPage = useNewCreateWorkspacePage();
+    const location = useLocation();
 
     // Prefix with `/#referrer` will specify an IDE for workspace
     // We don't need to show IDE preference in this case
@@ -105,12 +106,12 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     );
 
     // TODO: Add a Route for this instead of inspecting location manually
-    if (window.location.pathname.startsWith("/blocked")) {
+    if (location.pathname.startsWith("/blocked")) {
         return <Blocked />;
     }
 
     // TODO: Add a Route for this instead of inspecting location manually
-    if (window.location.pathname.startsWith("/oauth-approval")) {
+    if (location.pathname.startsWith("/oauth-approval")) {
         return <OAuthClientApproval />;
     }
 
@@ -119,27 +120,16 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     }
 
     // TODO: Try and encapsulate this in a route for "/" (check for hash in route component, render or redirect accordingly)
-    const isCreation = window.location.pathname === "/" && hash !== "";
+    const isCreation = location.pathname === "/" && hash !== "";
     if (isCreation) {
         if (showUserIdePreference) {
             return (
                 <StartPage phase={StartPhase.Checking}>
                     <SelectIDEModal location="workspace_start" onClose={() => setShowUserIdePreference(false)} />
                 </StartPage>
             );
-        } else if (new URLSearchParams(window.location.search).has("showOptions")) {
-            const props = StartWorkspaceOptions.parseSearchParams(window.location.search);
-            return (
-                <StartWorkspaceModal
-                    {...{
-                        contextUrl: hash,
-                        ide: props?.ideSettings?.defaultIde,
-                        uselatestIde: props?.ideSettings?.useLatestVersion,
-                        workspaceClass: props.workspaceClass,
-                        onClose: undefined,
-                    }}
-                />
-            );
+        } else if (new URLSearchParams(location.search).has("showOptions") || newCreateWsPage) {
+            return <Redirect to={"/new" + location.pathname + location.search + location.hash} />;
         } else {
             return <CreateWorkspace contextUrl={hash} />;
         }
@@ -167,8 +157,11 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
                 {isLocalPreview() && <LocalPreviewAlert />}
                 <AppNotifications />
                 <Switch>
+                    <Route path="/new" exact component={CreateWorkspacePage} />
                     <Route path={projectsPathNew} exact component={NewProject} />
-                    <Route path="/open" exact component={Open} />
+                    <Route path="/open">
+                        <Redirect to="/new" />
+                    </Route>
                     <Route path="/setup" exact component={Setup} />
                     <Route path={workspacesPathMain} exact component={Workspaces} />
                     <Route path={settingsPathAccount} exact component={Account} />

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -15,6 +15,7 @@ interface FeatureFlagConfig {
 }
 
 const FeatureFlagContext = createContext<{
+    startWithOptions: boolean;
     showUsageView: boolean;
     isUsageBasedBillingEnabled: boolean;
     showUseLastSuccessfulPrebuild: boolean;
@@ -23,6 +24,7 @@ const FeatureFlagContext = createContext<{
     oidcServiceEnabled: boolean;
     orgGitAuthProviders: boolean;
 }>({
+    startWithOptions: false,
     showUsageView: false,
     isUsageBasedBillingEnabled: false,
     showUseLastSuccessfulPrebuild: false,
@@ -37,6 +39,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     const teams = useTeams();
     const { project } = useContext(ProjectContext);
     const team = useCurrentTeam();
+    const [startWithOptions, setStartWithOptions] = useState<boolean>(false);
     const [showUsageView, setShowUsageView] = useState<boolean>(false);
     const [isUsageBasedBillingEnabled, setIsUsageBasedBillingEnabled] = useState<boolean>(false);
     const [showUseLastSuccessfulPrebuild, setShowUseLastSuccessfulPrebuild] = useState<boolean>(false);
@@ -49,6 +52,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
         if (!user) return;
         (async () => {
             const featureFlags: FeatureFlagConfig = {
+                start_with_options: { defaultValue: false, setter: setStartWithOptions },
                 usage_view: { defaultValue: false, setter: setShowUsageView },
                 isUsageBasedBillingEnabled: { defaultValue: false, setter: setIsUsageBasedBillingEnabled },
                 showUseLastSuccessfulPrebuild: { defaultValue: false, setter: setShowUseLastSuccessfulPrebuild },
@@ -98,6 +102,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {
     return (
         <FeatureFlagContext.Provider
             value={{
+                startWithOptions,
                 showUsageView,
                 isUsageBasedBillingEnabled,
                 showUseLastSuccessfulPrebuild,

components/dashboard/src/projects/NewProject.tsx

@@ -21,6 +21,7 @@ import exclamation from "../images/exclamation.svg";
 import ErrorMessage from "../components/ErrorMessage";
 import Spinner from "../icons/Spinner.svg";
 import { useRefreshProjects } from "../data/projects/list-projects-query";
+import { projectsPathNew } from "./projects.routes";
 
 export default function NewProject() {
     const currentTeam = useCurrentTeam();
@@ -625,7 +626,7 @@ function GitProviders(props: {
 
 async function openReconfigureWindow(params: { account?: string; onSuccess: (p: any) => void }) {
     const { account, onSuccess } = params;
-    const state = btoa(JSON.stringify({ from: "/reconfigure", next: "/new" }));
+    const state = btoa(JSON.stringify({ from: "/reconfigure", next: projectsPathNew }));
     const url = gitpodHostUrl
         .withApi({
             pathname: "/apps/github/reconfigure",

components/dashboard/src/projects/Project.tsx

@@ -16,6 +16,7 @@ import NoAccess from "../icons/NoAccess.svg";
 import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 import { openAuthorizeWindow } from "../provider-utils";
 import { getGitpodService, gitpodHostUrl } from "../service/service";
+import { useNewCreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
 import { prebuildStatusIcon, prebuildStatusLabel } from "./Prebuilds";
 import { useCurrentProject } from "./project-context";
@@ -39,6 +40,8 @@ export default function ProjectsPage() {
 
     const [showAuthBanner, setShowAuthBanner] = useState<{ host: string } | undefined>(undefined);
 
+    const isNewCreateWsPage = useNewCreateWorkspacePage();
+
     useEffect(() => {
         // project changed, reset state
         setBranches([]);
@@ -375,15 +378,19 @@ export default function ProjectsPage() {
                                                     <ItemFieldContextMenu
                                                         className="py-0.5"
                                                         menuEntries={[
-                                                            {
-                                                                title: "New Workspace ...",
-                                                                onClick: () =>
-                                                                    setStartWorkspaceModalProps({
-                                                                        contextUrl: branch.url,
-                                                                        allowContextUrlChange: true,
-                                                                    }),
-                                                                separator: true,
-                                                            },
+                                                            ...(isNewCreateWsPage
+                                                                ? []
+                                                                : [
+                                                                      {
+                                                                          title: "New Workspace ...",
+                                                                          onClick: () =>
+                                                                              setStartWorkspaceModalProps({
+                                                                                  contextUrl: branch.url,
+                                                                                  allowContextUrlChange: true,
+                                                                              }),
+                                                                          separator: true,
+                                                                      },
+                                                                  ]),
                                                             prebuild?.status === "queued" ||
                                                             prebuild?.status === "building"
                                                                 ? {

components/dashboard/src/projects/ProjectListItem.tsx

@@ -15,6 +15,7 @@ import { prebuildStatusIcon } from "./Prebuilds";
 import { gitpodHostUrl } from "../service/service";
 import { useLatestProjectPrebuildQuery } from "../data/prebuilds/latest-project-prebuild-query";
 import { StartWorkspaceModalContext } from "../workspaces/start-workspace-modal-context";
+import { useNewCreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 
 type ProjectListItemProps = {
     project: Project;
@@ -25,6 +26,7 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
     const [showRemoveModal, setShowRemoveModal] = useState(false);
     const { data: prebuild, isLoading } = useLatestProjectPrebuildQuery({ projectId: project.id });
     const { setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
+    const isNewCreateWsPage = useNewCreateWorkspacePage();
 
     return (
         <div key={`project-${project.id}`} className="h-52">
@@ -41,15 +43,19 @@ export const ProjectListItem: FunctionComponent<ProjectListItemProps> = ({ proje
                                         href: gitpodHostUrl.withContext(`${project.cloneUrl}`).toString(),
                                         separator: true,
                                     },
-                                    {
-                                        title: "New Workspace ...",
-                                        onClick: () =>
-                                            setStartWorkspaceModalProps({
-                                                contextUrl: project.cloneUrl,
-                                                allowContextUrlChange: true,
-                                            }),
-                                        separator: true,
-                                    },
+                                    ...(isNewCreateWsPage
+                                        ? []
+                                        : [
+                                              {
+                                                  title: "New Workspace ...",
+                                                  onClick: () =>
+                                                      setStartWorkspaceModalProps({
+                                                          contextUrl: project.cloneUrl,
+                                                          allowContextUrlChange: true,
+                                                      }),
+                                                  separator: true,
+                                              },
+                                          ]),
                                     {
                                         title: "Remove Project",
                                         customFontStyle:

components/dashboard/src/projects/Projects.tsx

@@ -17,18 +17,18 @@ import Alert from "../components/Alert";
 import { ProjectListItem } from "./ProjectListItem";
 import { SpinnerLoader } from "../components/Loader";
 import { useListProjectsQuery } from "../data/projects/list-projects-query";
+import { projectsPathNew } from "./projects.routes";
 
 export default function ProjectsPage() {
     const history = useHistory();
     const team = useCurrentTeam();
     const { data, isLoading, isError, refetch } = useListProjectsQuery();
     const { isDark } = useContext(ThemeContext);
     const [searchFilter, setSearchFilter] = useState<string | undefined>();
-    const newProjectUrl = `/new`;
 
     const onNewProject = useCallback(() => {
-        history.push(newProjectUrl);
-    }, [history, newProjectUrl]);
+        history.push(projectsPathNew);
+    }, [history]);
 
     const filteredProjects = useMemo(() => {
         const filter = (project: Project) => {
@@ -80,7 +80,7 @@ export default function ProjectsPage() {
                         </a>
                     </p>
                     <div className="flex space-x-2 justify-center mt-7">
-                        <Link to={newProjectUrl}>
+                        <Link to={projectsPathNew}>
                             <button>New Project</button>
                         </Link>
                         {team && (
@@ -135,7 +135,7 @@ export default function ProjectsPage() {
                                 key="new-project"
                                 className="h-52 border-dashed border-2 border-gray-100 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl focus:bg-gitpod-kumquat-light transition ease-in-out group"
                             >
-                                <Link to={newProjectUrl} data-analytics='{"button_type":"card"}'>
+                                <Link to={projectsPathNew} data-analytics='{"button_type":"card"}'>
                                     <div className="flex h-full">
                                         <div className="m-auto text-gray-400 dark:text-gray-600">New Project</div>
                                     </div>

components/dashboard/src/projects/projects.routes.ts

@@ -11,7 +11,7 @@ export const projectsPathMain = "/projects";
 export const projectsPathMainWithParams = [projectsPathMain, ":projectName", ":resourceOrPrebuild?"].join("/");
 
 export const projectsPathInstallGitHubApp = "/install-github-app";
-export const projectsPathNew = "/new";
+export const projectsPathNew = "/projects/new";
 
 export function getProjectTabs(project: Project | undefined): TabEntry[] {
     if (!project) {

components/dashboard/src/start/CreateWorkspace.tsx

@@ -325,7 +325,7 @@ export function CreateWorkspace({ contextUrl }: CreateWorkspaceProps) {
     );
 }
 
-function SelectCostCenterModal(props: { onSelected?: () => void }) {
+export function SelectCostCenterModal(props: { onSelected?: () => void }) {
     return (
         <Modal visible={true} closeable={false} onClose={() => {}}>
             <h3>Choose Billing Organization</h3>
@@ -334,7 +334,7 @@ function SelectCostCenterModal(props: { onSelected?: () => void }) {
     );
 }
 
-function LimitReachedModal(p: { children: React.ReactNode }) {
+export function LimitReachedModal(p: { children: React.ReactNode }) {
     const { user } = useContext(UserContext);
     return (
         // TODO: Use title and buttons props
@@ -358,7 +358,7 @@ function LimitReachedModal(p: { children: React.ReactNode }) {
     );
 }
 
-function LimitReachedParallelWorkspacesModal() {
+export function LimitReachedParallelWorkspacesModal() {
     return (
         <LimitReachedModal>
             <p className="mt-1 mb-2 text-base dark:text-gray-400">
@@ -369,7 +369,7 @@ function LimitReachedParallelWorkspacesModal() {
     );
 }
 
-function LimitReachedOutOfHours() {
+export function LimitReachedOutOfHours() {
     return (
         <LimitReachedModal>
             <p className="mt-1 mb-2 text-base dark:text-gray-400">
@@ -380,7 +380,7 @@ function LimitReachedOutOfHours() {
     );
 }
 
-function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
+export function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
     const [statusMessage, setStatusMessage] = useState<React.ReactNode>();
     const { host, owner, repoName, userIsOwner, userScopes, lastUpdate } = p.error.data;
     const repoFullName = owner && repoName ? `${owner}/${repoName}` : "";