From 786e21f90644ccf2ea03cc11fd7298c19076066b Mon Sep 17 00:00:00 2001
From: Marcin Tojek <marcin@coder.com>
Date: Thu, 2 Feb 2023 14:39:30 +0100
Subject: [PATCH] feat: Group immutable and mutable rich parameters

---
 .../CreateWorkspacePage.tsx                   |  17 ++-
 .../CreateWorkspacePageView.tsx               | 141 +++++++++++++-----
 .../WorkspaceBuildParametersPage.tsx          |   8 +-
 .../WorkspaceBuildParametersPageView.tsx      |  99 +++++++++---
 4 files changed, 198 insertions(+), 67 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
index 30934d629735b..0dc0f65482548 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -1,4 +1,5 @@
 import { useMachine } from "@xstate/react"
+import { TemplateVersionParameter } from "api/typesGenerated"
 import { useMe } from "hooks/useMe"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import { FC } from "react"
@@ -58,7 +59,7 @@ const CreateWorkspacePage: FC = () => {
         templateName={templateName}
         templates={templates}
         selectedTemplate={selectedTemplate}
-        templateParameters={templateParameters}
+        templateParameters={orderedTemplateParameters(templateParameters)}
         templateSchema={templateSchema}
         createWorkspaceErrors={{
           [CreateWorkspaceErrors.GET_TEMPLATES_ERROR]: getTemplatesError,
@@ -104,4 +105,18 @@ const getDefaultParameterValues = (
   return paramValues
 }
 
+export const orderedTemplateParameters = (
+  templateParameters?: TemplateVersionParameter[],
+): TemplateVersionParameter[] => {
+  if (!templateParameters) {
+    return []
+  }
+
+  const immutables = templateParameters.filter(
+    (parameter) => !parameter.mutable,
+  )
+  const mutables = templateParameters.filter((parameter) => parameter.mutable)
+  return [...immutables, ...mutables]
+}
+
 export default CreateWorkspacePage
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index b2518fb3e743f..4bea8b3009753 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -257,48 +257,107 @@ export const CreateWorkspacePageView: FC<
             </div>
           )}
 
-          {/* Rich parameters */}
-          {props.templateParameters && props.templateParameters.length > 0 && (
-            <div className={styles.formSection}>
-              <div className={styles.formSectionInfo}>
-                <h2 className={styles.formSectionInfoTitle}>
-                  Rich template params
-                </h2>
-                <p className={styles.formSectionInfoDescription}>
-                  Those values are provided by your template&lsquo;s Terraform
-                  configuration.
-                </p>
+          {/* Immutable rich parameters */}
+          {props.templateParameters &&
+            props.templateParameters.filter((p) => !p.mutable).length > 0 && (
+              <div className={styles.formSection}>
+                <div className={styles.formSectionInfo}>
+                  <h2 className={styles.formSectionInfoTitle}>
+                    Immutable parameters
+                  </h2>
+                  <p className={styles.formSectionInfoDescription}>
+                    Those values are provided by your template&lsquo;s Terraform
+                    configuration. Values cannot be changed after creating the
+                    workspace.
+                  </p>
+                </div>
+
+                <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) =>
+                      !parameter.mutable && (
+                        <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,
+                          )}
+                        />
+                      ),
+                  )}
+                </Stack>
               </div>
-
-              <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,
-                    )}
-                  />
-                ))}
-              </Stack>
-            </div>
-          )}
+            )}
+
+          {/* Mutable rich parameters */}
+          {props.templateParameters &&
+            props.templateParameters.filter((p) => p.mutable).length > 0 && (
+              <div className={styles.formSection}>
+                <div className={styles.formSectionInfo}>
+                  <h2 className={styles.formSectionInfoTitle}>
+                    Mutable parameters
+                  </h2>
+                  <p className={styles.formSectionInfoDescription}>
+                    Those values are provided by your template&lsquo;s Terraform
+                    configuration. Values can be changed after creating the
+                    workspace.
+                  </p>
+                </div>
+
+                <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) =>
+                      parameter.mutable && (
+                        <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,
+                          )}
+                        />
+                      ),
+                  )}
+                </Stack>
+              </div>
+            )}
           <FormFooter
             styles={formFooterStyles}
             onCancel={props.onCancel}
diff --git a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
index 44d60e1217e88..391b0d4b7a206 100644
--- a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
+++ b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPage.tsx
@@ -9,6 +9,7 @@ import {
   UpdateWorkspaceErrors,
   WorkspaceBuildParametersPageView,
 } from "./WorkspaceBuildParametersPageView"
+import { orderedTemplateParameters } from "pages/CreateWorkspacePage/CreateWorkspacePage"
 
 export const WorkspaceBuildParametersPage: FC = () => {
   const { t } = useTranslation("workspaceBuildParametersPage")
@@ -48,8 +49,13 @@ export const WorkspaceBuildParametersPage: FC = () => {
       </Helmet>
       <WorkspaceBuildParametersPageView
         workspace={selectedWorkspace}
-        templateParameters={templateParameters}
+        templateParameters={orderedTemplateParameters(templateParameters)}
         workspaceBuildParameters={workspaceBuildParameters}
+        isLoading={
+          state.matches("gettingWorkspace") ||
+          state.matches("gettingTemplateParameters") ||
+          state.matches("gettingWorkspaceBuildParameters")
+        }
         updatingWorkspace={state.matches("updatingWorkspace")}
         hasErrors={state.matches("error")}
         updateWorkspaceErrors={{
diff --git a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
index b8b603bc09cd2..2d169acf4fbfb 100644
--- a/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
+++ b/site/src/pages/WorkspaceBuildParametersPage/WorkspaceBuildParametersPageView.tsx
@@ -29,6 +29,7 @@ export interface WorkspaceBuildParametersPageViewProps {
   templateParameters?: TypesGen.TemplateVersionParameter[]
   workspaceBuildParameters?: TypesGen.WorkspaceBuildParameter[]
 
+  isLoading: boolean
   initialTouched?: FormikTouched<TypesGen.CreateWorkspaceRequest>
   updatingWorkspace: boolean
   onCancel: () => void
@@ -150,7 +151,9 @@ export const WorkspaceBuildParametersPageView: FC<
 
       <Maybe
         condition={Boolean(
-          props.templateParameters && props.templateParameters.length === 0,
+          !props.isLoading &&
+            props.templateParameters &&
+            props.templateParameters.length === 0,
         )}
       >
         <div className={styles.formSection}>
@@ -161,7 +164,8 @@ export const WorkspaceBuildParametersPageView: FC<
         </div>
       </Maybe>
 
-      {props.templateParameters &&
+      {!props.isLoading &&
+        props.templateParameters &&
         props.templateParameters.length > 0 &&
         props.workspaceBuildParameters && (
           <div className={styles.formSection}>
@@ -171,27 +175,67 @@ export const WorkspaceBuildParametersPageView: FC<
                 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={!parameter.mutable || 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,
-                    )}
-                  />
-                ))}
+                {props.templateParameters.filter((p) => !p.mutable).length >
+                  0 && (
+                  <div className={styles.formSectionParameterTitle}>
+                    Immutable parameters
+                  </div>
+                )}
+                {props.templateParameters.map(
+                  (parameter, index) =>
+                    !parameter.mutable && (
+                      <RichParameterInput
+                        {...getFieldHelpers(
+                          "rich_parameter_values[" + index + "].value",
+                        )}
+                        disabled={!parameter.mutable || 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,
+                        )}
+                      />
+                    ),
+                )}
+
+                {props.templateParameters.filter((p) => p.mutable).length >
+                  0 && (
+                  <div className={styles.formSectionParameterTitle}>
+                    Mutable parameters
+                  </div>
+                )}
+                {props.templateParameters.map(
+                  (parameter, index) =>
+                    parameter.mutable && (
+                      <RichParameterInput
+                        {...getFieldHelpers(
+                          "rich_parameter_values[" + index + "].value",
+                        )}
+                        disabled={!parameter.mutable || 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}
@@ -279,7 +323,7 @@ const stripImmutableParameters = (
   }
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   goBackSection: {
     display: "flex",
     width: "100%",
@@ -292,6 +336,13 @@ const useStyles = makeStyles(() => ({
   formSectionFields: {
     width: "100%",
   },
+  formSectionParameterTitle: {
+    fontSize: 20,
+    color: theme.palette.text.primary,
+    fontWeight: 400,
+    margin: 0,
+    marginBottom: theme.spacing(1),
+  },
 }))
 
 const useFormFooterStyles = makeStyles((theme) => ({