coder · BrunoQuaresma · May 3, 2023 · May 2, 2023 · May 2, 2023 · May 2, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -55,6 +55,12 @@ const WorkspaceSchedulePage = lazy(
       "./pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage"
     ),
 )
+const WorkspaceParametersPage = lazy(
+  () =>
+    import(
+      "./pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage"
+    ),
+)
 const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const TemplatePermissionsPage = lazy(
   () =>
@@ -291,6 +297,10 @@ export const AppRouter: FC = () => {
                   />
                   <Route path="settings" element={<WorkspaceSettingsLayout />}>
                     <Route index element={<WorkspaceSettingsPage />} />
+                    <Route
+                      path="parameters"
+                      element={<WorkspaceParametersPage />}
+                    />
                     <Route
                       path="schedule"
                       element={<WorkspaceSchedulePage />}

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1021,7 +1021,7 @@ export const getWorkspaceBuildParameters = async (
   return response.data
 }
 type Claims = {
-  license_expires?: jwt.NumericDate
+  license_expires?: number
   account_type?: string
   account_id?: string
   trial: boolean

diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -6,6 +6,7 @@ import { FC, ElementType, PropsWithChildren, ReactNode } from "react"
 import { Link, NavLink } from "react-router-dom"
 import { combineClasses } from "utils/combineClasses"
 import GeneralIcon from "@material-ui/icons/SettingsOutlined"
+import ParameterIcon from "@material-ui/icons/CodeOutlined"
 import { Avatar } from "components/Avatar/Avatar"
 
 const SidebarNavItem: FC<
@@ -65,6 +66,12 @@ export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
       <SidebarNavItem href="" icon={<SidebarNavItemIcon icon={GeneralIcon} />}>
         General
       </SidebarNavItem>
+      <SidebarNavItem
+        href="parameters"
+        icon={<SidebarNavItemIcon icon={ParameterIcon} />}
+      >
+        Parameters
+      </SidebarNavItem>
       <SidebarNavItem
         href="schedule"
         icon={<SidebarNavItemIcon icon={ScheduleIcon} />}

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersForm.tsx
@@ -0,0 +1,147 @@
+import {
+  FormFields,
+  FormFooter,
+  FormSection,
+  HorizontalForm,
+} from "components/Form/Form"
+import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"
+import { useFormik } from "formik"
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  useValidationSchemaForRichParameters,
+  workspaceBuildParameterValue,
+} from "utils/richParameters"
+import * as Yup from "yup"
+import { getFormHelpers } from "utils/formUtils"
+import {
+  TemplateVersionParameter,
+  WorkspaceBuildParameter,
+} from "api/typesGenerated"
+
+export type WorkspaceParametersFormValues = {
+  rich_parameter_values: WorkspaceBuildParameter[]
+}
+
+export const WorkspaceParametersForm: FC<{
+  isSubmitting: boolean
+  templateVersionRichParameters: TemplateVersionParameter[]
+  buildParameters: WorkspaceBuildParameter[]
+  error: unknown
+  onCancel: () => void
+  onSubmit: (values: WorkspaceParametersFormValues) => void
+}> = ({
+  onCancel,
+  onSubmit,
+  templateVersionRichParameters,
+  buildParameters,
+  error,
+  isSubmitting,
+}) => {
+  const { t } = useTranslation("workspaceSettingsPage")
+  const mutableParameters = templateVersionRichParameters.filter(
+    (param) => param.mutable === true,
+  )
+  const immutableParameters = templateVersionRichParameters.filter(
+    (param) => param.mutable === false,
+  )
+  const form = useFormik<WorkspaceParametersFormValues>({
+    onSubmit,
+    initialValues: {
+      rich_parameter_values: mutableParameters.map((parameter) => {
+        const buildParameter = buildParameters.find(
+          (p) => p.name === parameter.name,
+        )
+        if (!buildParameter) {
+          return {
+            name: parameter.name,
+            value: parameter.default_value,
+          }
+        }
+        return buildParameter
+      }),
+    },
+    validationSchema: Yup.object({
+      rich_parameter_values: useValidationSchemaForRichParameters(
+        "createWorkspacePage",
+        templateVersionRichParameters,
+      ),
+    }),
+  })
+  const getFieldHelpers = getFormHelpers<WorkspaceParametersFormValues>(
+    form,
+    error,
+  )
+
+  return (
+    <HorizontalForm onSubmit={form.handleSubmit} data-testid="form">
+      {mutableParameters.length > 0 && (
+        <FormSection
+          title={t("parameters")}
+          description={t("parametersDescription")}
+        >
+          <FormFields>
+            {mutableParameters.map((parameter, index) => (
+              <RichParameterInput
+                {...getFieldHelpers(
+                  "rich_parameter_values[" + index + "].value",
+                )}
+                disabled={isSubmitting}
+                index={index}
+                key={parameter.name}
+                onChange={async (value) => {
+                  await form.setFieldValue("rich_parameter_values." + index, {
+                    name: parameter.name,
+                    value: value,
+                  })
+                }}
+                parameter={parameter}
+                initialValue={workspaceBuildParameterValue(
+                  buildParameters,
+                  parameter,
+                )}
+              />
+            ))}
+          </FormFields>
+        </FormSection>
+      )}
+      {/* They are displayed here only for visibility purposes */}
+      {immutableParameters.length > 0 && (
+        <FormSection
+          title="Immutable parameters"
+          description={
+            <>
+              These parameters are also provided by your Terraform configuration
+              but they{" "}
+              <strong>cannot be changed after creating the workspace.</strong>
+            </>
+          }
+        >
+          <FormFields>
+            {immutableParameters.map((parameter, index) => (
+              <RichParameterInput
+                disabled
+                {...getFieldHelpers(
+                  "rich_parameter_values[" + index + "].value",
+                )}
+                index={index}
+                key={parameter.name}
+                onChange={async () => {
+                  throw new Error(
+                    "Cannot change immutable parameter after creation",
+                  )
+                }}
+                parameter={parameter}
+                initialValue={workspaceBuildParameterValue(
+                  buildParameters,
+                  parameter,
+                )}
+              />
+            ))}
+          </FormFields>
+        </FormSection>
+      )}
+      <FormFooter onCancel={onCancel} isLoading={isSubmitting} />
+    </HorizontalForm>
+  )
+}
diff --git a/...c/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx b/...c/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.stories.tsx
@@ -0,0 +1,46 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import {
+  WorkspaceParametersPageView,
+  WorkspaceParametersPageViewProps,
+} from "./WorkspaceParametersPage"
+import { action } from "@storybook/addon-actions"
+import {
+  MockWorkspaceBuildParameter1,
+  MockWorkspaceBuildParameter2,
+  MockTemplateVersionParameter1,
+  MockTemplateVersionParameter2,
+  MockTemplateVersionParameter3,
+  MockWorkspaceBuildParameter3,
+} from "testHelpers/entities"
+
+export default {
+  title: "pages/WorkspaceParametersPageView",
+  component: WorkspaceParametersPageView,
+  args: {
+    submitError: undefined,
+    isSubmitting: false,
+    onCancel: action("cancel"),
+    data: {
+      buildParameters: [
+        MockWorkspaceBuildParameter1,
+        MockWorkspaceBuildParameter2,
+        MockWorkspaceBuildParameter3,
+      ],
+      templateVersionRichParameters: [
+        MockTemplateVersionParameter1,
+        MockTemplateVersionParameter2,
+        {
+          ...MockTemplateVersionParameter3,
+          mutable: false,
+        },
+      ],
+    },
+  },
+} as ComponentMeta<typeof WorkspaceParametersPageView>
+
+const Template: Story<WorkspaceParametersPageViewProps> = (args) => (
+  <WorkspaceParametersPageView {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/.../src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx b/.../src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.test.tsx
@@ -0,0 +1,73 @@
+import userEvent from "@testing-library/user-event"
+import {
+  renderWithWorkspaceSettingsLayout,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers"
+import WorkspaceParametersPage from "./WorkspaceParametersPage"
+import { screen, waitFor, within } from "@testing-library/react"
+import * as api from "api/api"
+import {
+  MockWorkspace,
+  MockTemplateVersionParameter1,
+  MockTemplateVersionParameter2,
+  MockWorkspaceBuildParameter1,
+  MockWorkspaceBuildParameter2,
+  MockWorkspaceBuild,
+} from "testHelpers/entities"
+
+test("Submit the workspace settings page successfully", async () => {
+  // Mock the API calls that loads data
+  jest
+    .spyOn(api, "getWorkspaceByOwnerAndName")
+    .mockResolvedValueOnce(MockWorkspace)
+  jest
+    .spyOn(api, "getTemplateVersionRichParameters")
+    .mockResolvedValueOnce([
+      MockTemplateVersionParameter1,
+      MockTemplateVersionParameter2,
+    ])
+  jest
+    .spyOn(api, "getWorkspaceBuildParameters")
+    .mockResolvedValueOnce([
+      MockWorkspaceBuildParameter1,
+      MockWorkspaceBuildParameter2,
+    ])
+  // Mock the API calls that submit data
+  const postWorkspaceBuildSpy = jest
+    .spyOn(api, "postWorkspaceBuild")
+    .mockResolvedValue(MockWorkspaceBuild)
+  // Setup event and rendering
+  const user = userEvent.setup()
+  renderWithWorkspaceSettingsLayout(<WorkspaceParametersPage />, {
+    route: "/@test-user/test-workspace/settings",
+    path: "/@:username/:workspace/settings",
+    // Need this because after submit the user is redirected
+    extraRoutes: [{ path: "/@:username/:workspace", element: <div /> }],
+  })
+  await waitForLoaderToBeRemoved()
+  // Fill the form and submit
+  const form = screen.getByTestId("form")
+  const parameter1 = within(form).getByLabelText(
+    MockWorkspaceBuildParameter1.name,
+    { exact: false },
+  )
+  await user.clear(parameter1)
+  await user.type(parameter1, "new-value")
+  const parameter2 = within(form).getByLabelText(
+    MockWorkspaceBuildParameter2.name,
+    { exact: false },
+  )
+  await user.clear(parameter2)
+  await user.type(parameter2, "1")
+  await user.click(within(form).getByRole("button", { name: "Submit" }))
+  // Assert that the API calls were made with the correct data
+  await waitFor(() => {
+    expect(postWorkspaceBuildSpy).toHaveBeenCalledWith(MockWorkspace.id, {
+      transition: "start",
+      rich_parameter_values: [
+        { name: MockTemplateVersionParameter1.name, value: "new-value" },
+        { name: MockTemplateVersionParameter2.name, value: "1" },
+      ],
+    })
+  })
+})