refactor(site): simplify create workspace form (#11771)

BrunoQuaresma · web-flow · commit e828daba6e2e · 2024-01-23T15:39:23.000-03:00
This is the first PR of a series of PRs trying to simplify and improve the create workspace flow. - Use the existent template header and remove the selected template card - Move the owner field to the general section so we don't have "anemic" sections with single fields Before: <img width="1512" alt="Screenshot 2024-01-23 at 10 22 45" src="https://github.com/coder/coder/assets/3165839/6a2ba6b4-9ffb-4576-9282-7901691f45ee"> Now: <img width="1512" alt="Screenshot 2024-01-23 at 10 22 56" src="https://github.com/coder/coder/assets/3165839/84301548-4af9-4de0-96ff-2a6363fc8cf7">
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -11,8 +11,6 @@ import {
   onChangeTrimmed,
 } from "utils/formUtils";
 import * as Yup from "yup";
-import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
-import { SelectedTemplate } from "./SelectedTemplate";
 import {
   FormFields,
   FormSection,
@@ -37,6 +35,15 @@ import {
 import { useSearchParams } from "react-router-dom";
 import { CreateWSPermissions } from "./permissions";
 import { Alert } from "components/Alert/Alert";
+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:
@@ -125,8 +132,30 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
   );
 
   return (
-    <FullPageHorizontalForm title="New workspace" onCancel={onCancel}>
-      <HorizontalForm onSubmit={form.handleSubmit}>
+    <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>
+
+      <HorizontalForm onSubmit={form.handleSubmit} css={{ padding: "16px 0" }}>
         {Boolean(error) && <ErrorAlert error={error} />}
 
         {mode === "duplicate" && (
@@ -138,10 +167,13 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
         {/* 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
@@ -155,6 +187,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                 </span>
               </Stack>
             )}
+
             <TextField
               {...getFieldHelpers("name")}
               disabled={creatingWorkspace}
@@ -164,15 +197,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) => {
@@ -181,9 +207,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
                 label="Owner"
                 size="medium"
               />
-            </FormFields>
-          </FormSection>
-        )}
+            )}
+          </FormFields>
+        </FormSection>
 
         {externalAuth && externalAuth.length > 0 && (
           <FormSection
@@ -272,7 +298,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
           submitLabel="Create Workspace"
         />
       </HorizontalForm>
-    </FullPageHorizontalForm>
+    </Margins>
   );
 };
 
