Update a few things

BrunoQuaresma · BrunoQuaresma · commit 60bf64fb59b5 · 2023-03-13T17:52:47.000Z
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -31,12 +31,12 @@ import { LazyIconField } from "components/IconField/LazyIconField"
 import { Maybe } from "components/Conditionals/Maybe"
 import i18next from "i18next"
 import Link from "@material-ui/core/Link"
-import { FormFooter } from "components/FormFooter/FormFooter"
 import {
   HorizontalForm,
   FormSection,
   FormFields,
-} from "components/HorizontalForm/HorizontalForm"
+  FormFooter,
+} from "components/Form/Form"
 import camelCase from "lodash/camelCase"
 import capitalize from "lodash/capitalize"
 import { VariableInput } from "./VariableInput"
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -19,7 +19,7 @@ import {
   FormSection,
   FormFooter,
   HorizontalForm,
-} from "components/HorizontalForm/HorizontalForm"
+} from "components/Form/Form"
 import { makeStyles } from "@material-ui/core/styles"
 import {
   selectInitialRichParametersValues,
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsForm.tsx
@@ -18,7 +18,7 @@ import {
   FormSection,
   HorizontalForm,
   FormFooter,
-} from "components/HorizontalForm/HorizontalForm"
+} from "components/Form/Form"
 import { Stack } from "components/Stack/Stack"
 import Checkbox from "@material-ui/core/Checkbox"
 import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
diff --git a/site/src/pages/TemplateVariablesPage/TemplateVariablesForm.tsx b/site/src/pages/TemplateVariablesPage/TemplateVariablesForm.tsx
@@ -14,7 +14,7 @@ import {
   FormSection,
   HorizontalForm,
   FormFooter,
-} from "components/HorizontalForm/HorizontalForm"
+} from "components/Form/Form"
 import {
   SensitiveVariableHelperText,
   TemplateVariableField,
diff --git a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx
@@ -6,10 +6,7 @@ import DialogTitle from "@material-ui/core/DialogTitle"
 import { DialogProps } from "components/Dialogs/Dialog"
 import { FC } from "react"
 import { getFormHelpers } from "util/formUtils"
-import {
-  FormFields,
-  VerticalForm,
-} from "components/HorizontalForm/HorizontalForm"
+import { FormFields, VerticalForm } from "components/Form/Form"
 import {
   TemplateVersionParameter,
   WorkspaceBuildParameter,
@@ -56,6 +53,7 @@ export const UpdateBuildParametersDialog: FC<
       scroll="body"
       aria-labelledby="update-build-parameters-title"
       maxWidth="xs"
+      data-testid="dialog"
     >
       <DialogTitle
         id="update-build-parameters-title"
@@ -137,19 +135,11 @@ const useStyles = makeStyles((theme) => ({
   },
 
   info: {
-    fontSize: theme.spacing(1.75),
-    lineHeight: "160%",
-    backgroundColor: theme.palette.info.dark,
-    color: theme.palette.text.primary,
-    border: `1px solid ${theme.palette.info.light}`,
-    borderRight: 0,
-    borderLeft: 0,
-    padding: theme.spacing(3, 5),
-    margin: theme.spacing(0, -5),
+    margin: 0,
   },
 
   form: {
-    paddingTop: theme.spacing(5),
+    paddingTop: theme.spacing(4),
   },
 
   infoTitle: {
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -17,6 +17,8 @@ import {
   MockStoppedWorkspace,
   MockStoppingWorkspace,
   MockTemplate,
+  MockTemplateVersionParameter1,
+  MockTemplateVersionParameter2,
   MockWorkspace,
   MockWorkspaceBuild,
   renderWithAuth,
@@ -287,4 +289,64 @@ describe("WorkspacePage", () => {
       })
     })
   })
+
+  it("Workspace update when having new parameters on the template version", async () => {
+    // Setup mocks
+    const user = userEvent.setup()
+    jest
+      .spyOn(api, "getWorkspaceByOwnerAndName")
+      .mockResolvedValueOnce(MockOutdatedWorkspace)
+    const updateWorkspaceSpy = jest
+      .spyOn(api, "updateWorkspace")
+      .mockRejectedValueOnce(
+        new api.MissingBuildParameters([
+          MockTemplateVersionParameter1,
+          MockTemplateVersionParameter2,
+        ]),
+      )
+    // Render page and wait for it to be loaded
+    renderWithAuth(<WorkspacePage />, {
+      route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}`,
+      path: "/@:username/:workspace",
+    })
+    await waitForLoaderToBeRemoved()
+    // Click on the update button
+    const workspaceActions = screen.getByTestId("workspace-actions")
+    await user.click(
+      within(workspaceActions).getByRole("button", { name: "Update" }),
+    )
+    await waitFor(() => {
+      expect(api.updateWorkspace).toBeCalled()
+      // We want to clear this mock to use it later
+      updateWorkspaceSpy.mockClear()
+    })
+    // Fill the parameters and send the form
+    const dialog = await screen.findByTestId("dialog")
+    const firstParameterInput = within(dialog).getByLabelText(
+      MockTemplateVersionParameter1.name,
+      { exact: false },
+    )
+    await user.clear(firstParameterInput)
+    await user.type(firstParameterInput, "some-value")
+    const secondParameterInput = within(dialog).getByLabelText(
+      MockTemplateVersionParameter2.name,
+      { exact: false },
+    )
+    await user.clear(secondParameterInput)
+    await user.type(secondParameterInput, "2")
+    await user.click(within(dialog).getByRole("button", { name: "Update" }))
+    // Check if the update was called using the values from the form
+    await waitFor(() => {
+      expect(api.updateWorkspace).toBeCalledWith(MockOutdatedWorkspace, [
+        {
+          name: MockTemplateVersionParameter1.name,
+          value: "some-value",
+        },
+        {
+          name: MockTemplateVersionParameter2.name,
+          value: "2",
+        },
+      ])
+    })
+  })
 })
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -311,4 +311,11 @@ export const handlers = [
   rest.get("/api/v2/deployment/stats", (_, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockDeploymentStats))
   }),
+
+  rest.get(
+    "/api/v2/workspacebuilds/:workspaceBuildId/parameters",
+    (_, res, ctx) => {
+      return res(ctx.status(200), ctx.json([M.MockTemplateVersionParameter1]))
+    },
+  ),
 ]
