feat(site): add auto mode on the create workspace form

coder · BrunoQuaresma · Jul 27, 2023 · Jul 20, 2023 · Jul 21, 2023 · Jul 21, 2023
commit 3a38c032561a75734c7728a517da0b39eb1699cb
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -1,5 +1,7 @@
 import { useMachine } from "@xstate/react"
 import {
+  Template,
+  TemplateVersionGitAuth,
   TemplateVersionParameter,
   WorkspaceBuildParameter,
 } from "api/typesGenerated"
@@ -10,28 +12,26 @@ import { Helmet } from "react-helmet-async"
 import { useNavigate, useParams, useSearchParams } from "react-router-dom"
 import { pageTitle } from "utils/page"
 import {
+  CreateWSPermissions,
   CreateWorkspaceMode,
   createWorkspaceMachine,
 } from "xServices/createWorkspace/createWorkspaceXService"
-import {
-  CreateWorkspaceErrors,
-  CreateWorkspacePageView,
-} from "./CreateWorkspacePageView"
-import Box from "@mui/material/Box"
+import { CreateWorkspacePageView } from "./CreateWorkspacePageView"
+import { Loader } from "components/Loader/Loader"
+import { ErrorAlert } from "components/Alert/ErrorAlert"
 
 const CreateWorkspacePage: FC = () => {
   const organizationId = useOrganizationId()
   const { template: templateName } = useParams() as { template: string }
-  const navigate = useNavigate()
   const me = useMe()
+  const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const defaultBuildParameters = getDefaultBuildParameters(searchParams)
-  const name = searchParams.get("name") ?? ""
+  const defaultName = searchParams.get("name") ?? ""
   const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, {
     context: {
       organizationId,
       templateName,
-      owner: me,
       mode: (searchParams.get("mode") ?? "form") as CreateWorkspaceMode,
       defaultBuildParameters,
     },
@@ -41,71 +41,47 @@ const CreateWorkspacePage: FC = () => {
       },
     },
   })
-  const {
-    templates,
-    templateParameters,
-    templateGitAuth,
-    selectedTemplate,
-    getTemplateGitAuthError,
-    getTemplatesError,
-    createWorkspaceError,
-    permissions,
-    owner,
-  } = createWorkspaceState.context
-
-  if (createWorkspaceState.matches("autoCreating")) {
-    return (
-      <>
-        <Helmet>
-          <title>{pageTitle("Creating workspace...")}</title>
-        </Helmet>
-        <Box>We&lsquo;re creating a new workspace for you</Box>
-      </>
-    )
-  }
+  const { template, error, parameters, permissions, gitAuth } =
+    createWorkspaceState.context
+  const title = createWorkspaceState.matches("autoCreating")
+    ? "Creating workspace..."
+    : "Create Workspace"
 
   return (
     <>
       <Helmet>
-        <title>{pageTitle("Create Workspace")}</title>
+        <title>{pageTitle(title)}</title>
       </Helmet>
-      <CreateWorkspacePageView
-        name={name}
-        defaultBuildParameters={defaultBuildParameters}
-        loadingTemplates={createWorkspaceState.matches("gettingTemplates")}
-        creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
-        hasTemplateErrors={createWorkspaceState.matches("error")}
-        templateName={templateName}
-        templates={templates}
-        selectedTemplate={selectedTemplate}
-        templateParameters={orderedTemplateParameters(templateParameters)}
-        templateGitAuth={templateGitAuth}
-        createWorkspaceErrors={{
-          [CreateWorkspaceErrors.GET_TEMPLATES_ERROR]: getTemplatesError,
-          [CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR]: createWorkspaceError,
-          [CreateWorkspaceErrors.GET_TEMPLATE_GITAUTH_ERROR]:
-            getTemplateGitAuthError,
-        }}
-        canCreateForUser={permissions?.createWorkspaceForUser}
-        owner={owner}
-        setOwner={(user) => {
-          send({
-            type: "SELECT_OWNER",
-            owner: user,
-          })
-        }}
-        onCancel={() => {
-          // Go back
-          navigate(-1)
-        }}
-        onSubmit={(request) => {
-          send({
-            type: "CREATE_WORKSPACE",
-            request,
-            owner,
-          })
-        }}
-      />
+      {Boolean(
+        createWorkspaceState.matches("loadingFormData") ||
+          createWorkspaceState.matches("autoCreating"),
+      ) && <Loader />}
+      {createWorkspaceState.matches("loadError") && (
+        <ErrorAlert error={error} />
+      )}
+      {createWorkspaceState.matches("idle") && (
+        <CreateWorkspacePageView
+          defaultName={defaultName}
+          defaultOwner={me}
+          defaultBuildParameters={defaultBuildParameters}
+          error={error}
+          template={template as Template}
+          gitAuth={gitAuth as TemplateVersionGitAuth[]}
+          permissions={permissions as CreateWSPermissions}
+          parameters={parameters as TemplateVersionParameter[]}
+          creatingWorkspace={createWorkspaceState.matches("creatingWorkspace")}
+          onCancel={() => {
+            navigate(-1)
+          }}
+          onSubmit={(request, owner) => {
+            send({
+              type: "CREATE_WORKSPACE",
+              request,
+              owner,
+            })
+          }}
+        />
+      )}
     </>
   )
 }

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx
@@ -1,64 +1,38 @@
-import { ComponentMeta, Story } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import {
   mockApiError,
   MockTemplate,
   MockTemplateVersionParameter1,
   MockTemplateVersionParameter2,
   MockTemplateVersionParameter3,
+  MockUser,
 } from "../../testHelpers/entities"
-import {
-  CreateWorkspaceErrors,
-  CreateWorkspacePageView,
-  CreateWorkspacePageViewProps,
-} from "./CreateWorkspacePageView"
+import { CreateWorkspacePageView } from "./CreateWorkspacePageView"
 
-export default {
-  title: "pages/CreateWorkspacePageView",
+const meta: Meta<typeof CreateWorkspacePageView> = {
+  title: "components/Alert",
   component: CreateWorkspacePageView,
-} as ComponentMeta<typeof CreateWorkspacePageView>
-
-const Template: Story<CreateWorkspacePageViewProps> = (args) => (
-  <CreateWorkspacePageView {...args} />
-)
-
-export const NoParameters = Template.bind({})
-NoParameters.args = {
-  templates: [MockTemplate],
-  selectedTemplate: MockTemplate,
-  createWorkspaceErrors: {},
-}
-
-export const Parameters = Template.bind({})
-Parameters.args = {
-  templates: [MockTemplate],
-  selectedTemplate: MockTemplate,
-  createWorkspaceErrors: {},
+  args: {
+    defaultName: "",
+    defaultOwner: MockUser,
+    defaultBuildParameters: [],
+    template: MockTemplate,
+    parameters: [],
+    gitAuth: [],
+    permissions: {
+      createWorkspaceForUser: true,
+    },
+  },
 }
 
-export const RedisplayParameters = Template.bind({})
-RedisplayParameters.args = {
-  templates: [MockTemplate],
-  selectedTemplate: MockTemplate,
-  createWorkspaceErrors: {},
-}
+export default meta
+type Story = StoryObj<typeof CreateWorkspacePageView>
 
-export const GetTemplatesError = Template.bind({})
-GetTemplatesError.args = {
-  ...Parameters.args,
-  createWorkspaceErrors: {
-    [CreateWorkspaceErrors.GET_TEMPLATES_ERROR]: mockApiError({
-      message: "Failed to fetch templates.",
-      detail: "You do not have permission to access this resource.",
-    }),
-  },
-  hasTemplateErrors: true,
-}
+export const NoParameters: Story = {}
 
-export const CreateWorkspaceError = Template.bind({})
-CreateWorkspaceError.args = {
-  ...Parameters.args,
-  createWorkspaceErrors: {
-    [CreateWorkspaceErrors.CREATE_WORKSPACE_ERROR]: mockApiError({
+export const CreateWorkspaceError: Story = {
+  args: {
+    error: mockApiError({
       message:
         'Workspace "test" already exists in the "docker-amd64" template.',
       validations: [
@@ -69,72 +43,64 @@ CreateWorkspaceError.args = {
       ],
     }),
   },
-  initialTouched: {
-    name: true,
-  },
 }
 
-export const RichParameters = Template.bind({})
-RichParameters.args = {
-  templates: [MockTemplate],
-  selectedTemplate: MockTemplate,
-  templateParameters: [
-    MockTemplateVersionParameter1,
-    MockTemplateVersionParameter2,
-    MockTemplateVersionParameter3,
-    {
-      name: "Region",
-      required: false,
-      description: "",
-      description_plaintext: "",
-      type: "string",
-      mutable: false,
-      default_value: "",
-      icon: "/emojis/1f30e.png",
-      options: [
-        {
-          name: "Pittsburgh",
-          description: "",
-          value: "us-pittsburgh",
-          icon: "/emojis/1f1fa-1f1f8.png",
-        },
-        {
-          name: "Helsinki",
-          description: "",
-          value: "eu-helsinki",
-          icon: "/emojis/1f1eb-1f1ee.png",
-        },
-        {
-          name: "Sydney",
-          description: "",
-          value: "ap-sydney",
-          icon: "/emojis/1f1e6-1f1fa.png",
-        },
-      ],
-      ephemeral: false,
-    },
-  ],
-  createWorkspaceErrors: {},
+export const Parameters: Story = {
+  args: {
+    parameters: [
+      MockTemplateVersionParameter1,
+      MockTemplateVersionParameter2,
+      MockTemplateVersionParameter3,
+      {
+        name: "Region",
+        required: false,
+        description: "",
+        description_plaintext: "",
+        type: "string",
+        mutable: false,
+        default_value: "",
+        icon: "/emojis/1f30e.png",
+        options: [
+          {
+            name: "Pittsburgh",
+            description: "",
+            value: "us-pittsburgh",
+            icon: "/emojis/1f1fa-1f1f8.png",
+          },
+          {
+            name: "Helsinki",
+            description: "",
+            value: "eu-helsinki",
+            icon: "/emojis/1f1eb-1f1ee.png",
+          },
+          {
+            name: "Sydney",
+            description: "",
+            value: "ap-sydney",
+            icon: "/emojis/1f1e6-1f1fa.png",
+          },
+        ],
+        ephemeral: false,
+      },
+    ],
+  },
 }
 
-export const GitAuth = Template.bind({})
-GitAuth.args = {
-  templates: [MockTemplate],
-  selectedTemplate: MockTemplate,
-  createWorkspaceErrors: {},
-  templateParameters: [],
-  templateGitAuth: [
-    {
-      id: "github",
-      type: "github",
-      authenticated: false,
-      authenticate_url: "",
-    },
-    {
-      id: "gitlab",
-      type: "gitlab",
-      authenticated: true,
-      authenticate_url: "",
-    },
-  ],
+export const GitAuth: Story = {
+  args: {
+    gitAuth: [
+      {
+        id: "github",
+        type: "github",
+        authenticated: false,
+        authenticate_url: "",
+      },
+      {
+        id: "gitlab",
+        type: "gitlab",
+        authenticated: true,
+        authenticate_url: "",
+      },
+    ],
+  },
 }