[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,10 @@ 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 { useFeatureFlags } from "../contexts/FeatureFlagContext";
+import { CreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "../Setup"));
 const WorkspacesNew = React.lazy(() => import(/* webpackPrefetch: true */ "../workspaces/WorkspacesNew"));
@@ -97,6 +98,8 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
     const hash = getURLHash();
     const { startWorkspaceModalProps, setStartWorkspaceModalProps } = useContext(StartWorkspaceModalContext);
     const [isWhatsNewShown, setWhatsNewShown] = useState(shouldSeeWhatsNew(user));
+    const { startWithOptions } = useFeatureFlags();
+    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 +108,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,26 +122,24 @@ 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);
+        } else if (
+            new URLSearchParams(location.search).has("showOptions") ||
+            startWithOptions ||
+            user?.additionalData?.isMigratedToTeamOnlyAttribution
+        ) {
             return (
-                <StartWorkspaceModal
-                    {...{
-                        contextUrl: hash,
-                        ide: props?.ideSettings?.defaultIde,
-                        uselatestIde: props?.ideSettings?.useLatestVersion,
-                        workspaceClass: props.workspaceClass,
-                        onClose: undefined,
-                    }}
-                />
+                <div className="container">
+                    <Menu />
+                    <CreateWorkspacePage />
+                </div>
             );
         } else {
             return <CreateWorkspace contextUrl={hash} />;

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/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}` : "";