Merge branch 'main' of https://github.com/coder/coder into bq/verify-…

…external-auth-first
coder · BrunoQuaresma · Jan 24, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 24, 2024
commit fe70708ddcef3c3dea14c441210fbc9012364eef
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -35,6 +35,15 @@ import { useSearchParams } from "react-router-dom";
 import { CreateWSPermissions } from "./permissions";
 import { Alert } from "components/Alert/Alert";
 import { ExternalAuthBanner } from "./ExternalAuthBanner/ExternalAuthBanner";
+import { Margins } from "components/Margins/Margins";
+import Button from "@mui/material/Button";
+import { Avatar } from "components/Avatar/Avatar";
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderSubtitle,
+} from "components/PageHeader/PageHeader";
+import { Pill } from "components/Pill/Pill";
 
 export const Language = {
   duplicationWarning:
@@ -123,15 +132,40 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
   );
 
   return (
-    <FullPageHorizontalForm title="New workspace" onCancel={onCancel}>
+    <Margins size="medium">
+      <PageHeader actions={<Button onClick={onCancel}>Cancel</Button>}>
+        <Stack direction="row" spacing={3} alignItems="center">
+          {template.icon !== "" ? (
+            <Avatar size="xl" src={template.icon} variant="square" fitImage />
+          ) : (
+            <Avatar size="xl">{template.name}</Avatar>
+          )}
+
+          <div>
+            <PageHeaderTitle>
+              {template.display_name.length > 0
+                ? template.display_name
+                : template.name}
+            </PageHeaderTitle>
+
+            <PageHeaderSubtitle condensed>New workspace</PageHeaderSubtitle>
+          </div>
+
+          {template.deprecated && <Pill type="warning">Deprecated</Pill>}
+        </Stack>
+      </PageHeader>
+
       {requiresExternalAuth ? (
         <ExternalAuthBanner
           providers={externalAuth}
           pollingState={externalAuthPollingState}
           onStartPolling={startPollingExternalAuth}
         />
       ) : (
-        <HorizontalForm onSubmit={form.handleSubmit}>
+        <HorizontalForm
+          onSubmit={form.handleSubmit}
+          css={{ padding: "16px 0" }}
+        >
           {Boolean(error) && <ErrorAlert error={error} />}
 
           {mode === "duplicate" && (
@@ -140,12 +174,16 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
             </Alert>
           )}
 
+          {/* General info */}
           <FormSection
             title="General"
-            description="The template and name of your new workspace."
+            description={
+              permissions.createWorkspaceForUser
+                ? "The name of the workspace and its owner. Only admins can create workspace for other users."
+                : "The name of your new workspace."
+            }
           >
             <FormFields>
-              <SelectedTemplate template={template} />
               {versionId && versionId !== template.active_version_id && (
                 <Stack spacing={1} css={styles.hasDescription}>
                   <TextField
@@ -159,6 +197,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                   </span>
                 </Stack>
               )}
+
               <TextField
                 {...getFieldHelpers("name")}
                 disabled={creatingWorkspace}
@@ -168,15 +207,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                 fullWidth
                 label="Workspace Name"
               />
-            </FormFields>
-          </FormSection>
 
-          {permissions.createWorkspaceForUser && (
-            <FormSection
-              title="Workspace Owner"
-              description="Only admins can create workspace for other users."
-            >
-              <FormFields>
+              {permissions.createWorkspaceForUser && (
                 <UserAutocomplete
                   value={owner}
                   onChange={(user) => {
@@ -185,9 +217,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                   label="Owner"
                   size="medium"
                 />
-              </FormFields>
-            </FormSection>
-          )}
+              )}
+            </FormFields>
+          </FormSection>
 
           {parameters && (
             <>
@@ -257,7 +289,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
           />
         </HorizontalForm>
       )}
-    </FullPageHorizontalForm>
+    </Margins>
   );
 };