Validation works

coder · mtojek · Feb 1, 2023 · Jan 24, 2023 · Jan 24, 2023 · Jan 25, 2023
commit 4036caacfb67391add7a19b58b834e9e350903b3
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,7 +1,6 @@
 import axios, { AxiosRequestHeaders } from "axios"
 import dayjs from "dayjs"
 import * as Types from "./types"
-import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
 
 export const hardCodedCSRFCookie = (): string => {

diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.test.tsx
@@ -19,6 +19,7 @@ const renderComponent = async (props: Partial<WorkspaceActionsProps> = {}) => {
       handleUpdate={jest.fn()}
       handleCancel={jest.fn()}
       handleChangeVersion={jest.fn()}
+      handleBuildParameters={jest.fn()}
       isUpdating={false}
     />,
   )
@@ -37,6 +38,7 @@ const renderAndClick = async (props: Partial<WorkspaceActionsProps> = {}) => {
       handleUpdate={jest.fn()}
       handleCancel={jest.fn()}
       handleChangeVersion={jest.fn()}
+      handleBuildParameters={jest.fn()}
       isUpdating={false}
     />,
   )

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -66,10 +66,13 @@ export const CreateWorkspacePageView: FC<
         template_id: props.selectedTemplate ? props.selectedTemplate.id : "",
         rich_parameter_values: initialRichParameterValues,
       },
-      validationSchema: ValidationSchemaForRichParameters(
-        "createWorkspacePage",
-        props.templateParameters,
-      ),
+      validationSchema: Yup.object({
+        name: nameValidator(t("nameLabel", { ns: "createWorkspacePage" })),
+        rich_parameter_values: ValidationSchemaForRichParameters(
+          "createWorkspacePage",
+          props.templateParameters,
+        ),
+      }),
       enableReinitialize: true,
       initialTouched: props.initialTouched,
       onSubmit: (request) => {
@@ -438,68 +441,63 @@ export const ValidationSchemaForRichParameters = (
     return Yup.object()
   }
 
-  return Yup.object({
-    name: nameValidator(t("nameLabel", { ns })),
-    rich_parameter_values: Yup.array()
-      .of(
-        Yup.object().shape({
-          name: Yup.string().required(),
-          value: Yup.string()
-            .required(t("validationRequiredParameter"))
-            .test("verify with template", (val, ctx) => {
-              const name = ctx.parent.name
-              const templateParameter = templateParameters.find(
-                (parameter) => parameter.name === name,
-              )
-              if (templateParameter) {
-                switch (templateParameter.type) {
-                  case "number":
-                    if (
-                      templateParameter.validation_min === 0 &&
-                      templateParameter.validation_max === 0
-                    ) {
+  return Yup.array()
+    .of(
+      Yup.object().shape({
+        name: Yup.string().required(),
+        value: Yup.string()
+          .required(t("validationRequiredParameter"))
+          .test("verify with template", (val, ctx) => {
+            const name = ctx.parent.name
+            const templateParameter = templateParameters.find(
+              (parameter) => parameter.name === name,
+            )
+            if (templateParameter) {
+              switch (templateParameter.type) {
+                case "number":
+                  if (
+                    templateParameter.validation_min === 0 &&
+                    templateParameter.validation_max === 0
+                  ) {
+                    return true
+                  }
+
+                  if (
+                    Number(val) < templateParameter.validation_min ||
+                    templateParameter.validation_max < Number(val)
+                  ) {
+                    return ctx.createError({
+                      path: ctx.path,
+                      message: t("validationNumberNotInRange", {
+                        min: templateParameter.validation_min,
+                        max: templateParameter.validation_max,
+                      }),
+                    })
+                  }
+                  break
+                case "string":
+                  {
+                    if (templateParameter.validation_regex.length === 0) {
                       return true
                     }
 
-                    if (
-                      Number(val) < templateParameter.validation_min ||
-                      templateParameter.validation_max < Number(val)
-                    ) {
+                    const regex = new RegExp(templateParameter.validation_regex)
+                    if (val && !regex.test(val)) {
                       return ctx.createError({
                         path: ctx.path,
-                        message: t("validationNumberNotInRange", {
-                          min: templateParameter.validation_min,
-                          max: templateParameter.validation_max,
+                        message: t("validationPatternNotMatched", {
+                          error: templateParameter.validation_error,
+                          pattern: templateParameter.validation_regex,
                         }),
                       })
                     }
-                    break
-                  case "string":
-                    {
-                      if (templateParameter.validation_regex.length === 0) {
-                        return true
-                      }
-
-                      const regex = new RegExp(
-                        templateParameter.validation_regex,
-                      )
-                      if (val && !regex.test(val)) {
-                        return ctx.createError({
-                          path: ctx.path,
-                          message: t("validationPatternNotMatched", {
-                            error: templateParameter.validation_error,
-                            pattern: templateParameter.validation_regex,
-                          }),
-                        })
-                      }
-                    }
-                    break
-                }
+                  }
+                  break
               }
-              return true
-            }),
-        }),
-      )
-      .required(),
-  })
+            }
+            return true
+          }),
+      }),
+    )
+    .required()
 }
diff --git a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
@@ -9,7 +9,6 @@ import {
   UpdateWorkspaceErrors,
   WorkspaceBuildParametersPageView,
 } from "./WorkspaceBuildParametersPageView"
-import { getWorkspaceBuildParameters } from "api/api"
 
 export const WorkspaceBuildParametersPage: FC = () => {
   const { t } = useTranslation("workspaceBuildParametersPage")
@@ -51,6 +50,7 @@ export const WorkspaceBuildParametersPage: FC = () => {
         workspace={selectedWorkspace}
         templateParameters={templateParameters}
         workspaceBuildParameters={workspaceBuildParameters}
+        updatingWorkspace={state.matches("updatingWorkspace")}
         hasErrors={state.matches("error")}
         updateWorkspaceErrors={{
           [UpdateWorkspaceErrors.GET_WORKSPACE_ERROR]: getWorkspaceError,
@@ -60,6 +60,17 @@ export const WorkspaceBuildParametersPage: FC = () => {
             getWorkspaceBuildParametersError,
           [UpdateWorkspaceErrors.UPDATE_WORKSPACE_ERROR]: updateWorkspaceError,
         }}
+        onCancel={() => {
+          // Go back
+          navigate(-1)
+        }}
+        onSubmit={(request) => {
+          console.log("onSubmit 1")
+          send({
+            type: "UPDATE_WORKSPACE",
+            request,
+          })
+        }}
       />
     </>
   )

diff --git a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
@@ -12,6 +12,8 @@ import {
   ValidationSchemaForRichParameters,
   workspaceBuildParameterValue,
 } from "pages/CreateWorkspacePage/CreateWorkspacePageView"
+import { FormFooter } from "components/FormFooter/FormFooter"
+import * as Yup from "yup"
 
 export enum UpdateWorkspaceErrors {
   GET_WORKSPACE_ERROR = "getWorkspaceError",
@@ -26,6 +28,9 @@ export interface WorkspaceBuildParametersPageViewProps {
   workspaceBuildParameters?: TypesGen.WorkspaceBuildParameter[]
 
   initialTouched?: FormikTouched<TypesGen.CreateWorkspaceRequest>
+  updatingWorkspace: boolean
+  onCancel: () => void
+  onSubmit: (req: TypesGen.CreateWorkspaceBuildRequest) => void
 
   hasErrors: boolean
   updateWorkspaceErrors: Partial<Record<UpdateWorkspaceErrors, Error | unknown>>
@@ -36,6 +41,7 @@ export const WorkspaceBuildParametersPageView: FC<
 > = (props) => {
   const { t } = useTranslation("workspaceBuildParametersPage")
   const styles = useStyles()
+  const formFooterStyles = useFormFooterStyles()
 
   const initialRichParameterValues = selectInitialRichParametersValues(
     props.templateParameters,
@@ -51,13 +57,17 @@ export const WorkspaceBuildParametersPageView: FC<
         transition: "start",
         rich_parameter_values: initialRichParameterValues,
       },
-      validationSchema: ValidationSchemaForRichParameters(
-        "workspaceBuildParametersPage",
-        props.templateParameters,
-      ),
+      validationSchema: Yup.object({
+        rich_parameter_values: ValidationSchemaForRichParameters(
+          "workspaceBuildParametersPage",
+          props.templateParameters,
+        ),
+      }),
       enableReinitialize: true,
       initialTouched: props.initialTouched,
-      onSubmit: () => {
+      onSubmit: (request) => {
+        console.info("onSubmit 2")
+        props.onSubmit(request)
         form.setSubmitting(false)
       },
     })
@@ -138,33 +148,41 @@ export const WorkspaceBuildParametersPageView: FC<
     >
       {props.templateParameters && props.workspaceBuildParameters && (
         <div className={styles.formSection}>
-          <Stack
-            direction="column"
-            spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
-            className={styles.formSectionFields}
-          >
-            {props.templateParameters.map((parameter, index) => (
-              <RichParameterInput
-                {...getFieldHelpers(
-                  "rich_parameter_values[" + index + "].value",
-                )}
-                disabled={form.isSubmitting}
-                index={index}
-                key={parameter.name}
-                onChange={(value) => {
-                  form.setFieldValue("rich_parameter_values." + index, {
-                    name: parameter.name,
-                    value: value,
-                  })
-                }}
-                parameter={parameter}
-                initialValue={workspaceBuildParameterValue(
-                  initialRichParameterValues,
-                  parameter,
-                )}
+          <form onSubmit={form.handleSubmit}>
+            <Stack
+              direction="column"
+              spacing={4} // Spacing here is diff because the fields here don't have the MUI floating label spacing
+              className={styles.formSectionFields}
+            >
+              {props.templateParameters.map((parameter, index) => (
+                <RichParameterInput
+                  {...getFieldHelpers(
+                    "rich_parameter_values[" + index + "].value",
+                  )}
+                  disabled={form.isSubmitting}
+                  index={index}
+                  key={parameter.name}
+                  onChange={(value) => {
+                    form.setFieldValue("rich_parameter_values." + index, {
+                      name: parameter.name,
+                      value: value,
+                    })
+                  }}
+                  parameter={parameter}
+                  initialValue={workspaceBuildParameterValue(
+                    initialRichParameterValues,
+                    parameter,
+                  )}
+                />
+              ))}
+              <FormFooter
+                styles={formFooterStyles}
+                onCancel={props.onCancel}
+                isLoading={props.updatingWorkspace}
+                submitLabel={t("updateWorkspace")}
               />
-            ))}
-          </Stack>
+            </Stack>
+          </form>
         </div>
       )}
     </FullPageForm>