coder · BrunoQuaresma · Nov 24, 2022 · Nov 22, 2022 · Nov 23, 2022 · Nov 23, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -46,6 +46,9 @@ const WorkspaceBuildPage = lazy(
   () => import("./pages/WorkspaceBuildPage/WorkspaceBuildPage"),
 )
 const WorkspacePage = lazy(() => import("./pages/WorkspacePage/WorkspacePage"))
+const WorkspaceChangeVersionPage = lazy(
+  () => import("./pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionPage"),
+)
 const WorkspaceSchedulePage = lazy(
   () => import("./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"),
 )
@@ -360,6 +363,7 @@ export const AppRouter: FC = () => {
                 </AuthAndFrame>
               }
             />
+
             <Route
               path="schedule"
               element={
@@ -386,6 +390,15 @@ export const AppRouter: FC = () => {
                 </AuthAndFrame>
               }
             />
+
+            <Route
+              path="change-version"
+              element={
+                <RequireAuth>
+                  <WorkspaceChangeVersionPage />
+                </RequireAuth>
+              }
+            />
           </Route>
         </Route>
 

diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx
@@ -3,6 +3,7 @@ import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import BlockIcon from "@material-ui/icons/Block"
 import CloudQueueIcon from "@material-ui/icons/CloudQueue"
+import UpdateOutlined from "@material-ui/icons/UpdateOutlined"
 import CropSquareIcon from "@material-ui/icons/CropSquare"
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
 import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
@@ -33,6 +34,23 @@ export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   )
 }
 
+export const ChangeVersionButton: FC<
+  React.PropsWithChildren<WorkspaceAction>
+> = ({ handleAction }) => {
+  const styles = useStyles()
+  const { t } = useTranslation("workspacePage")
+
+  return (
+    <Button
+      className={styles.actionButton}
+      startIcon={<UpdateOutlined />}
+      onClick={handleAction}
+    >
+      {t("actionButton.changeVersion")}
+    </Button>
+  )
+}
+
 export const StartButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
   handleAction,
 }) => {

diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
@@ -45,6 +45,7 @@ export interface WorkspaceProps {
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
+  handleChangeVersion: () => void
   isUpdating: boolean
   workspace: TypesGen.Workspace
   resources?: TypesGen.WorkspaceResource[]
@@ -68,6 +69,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
   handleDelete,
   handleUpdate,
   handleCancel,
+  handleChangeVersion,
   workspace,
   isUpdating,
   resources,
@@ -143,6 +145,7 @@ export const Workspace: FC<React.PropsWithChildren<WorkspaceProps>> = ({
               handleDelete={handleDelete}
               handleUpdate={handleUpdate}
               handleCancel={handleCancel}
+              handleChangeVersion={handleChangeVersion}
               isUpdating={isUpdating}
             />
           </Stack>

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

diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 import { WorkspaceStatus } from "../../api/typesGenerated"
 import {
   ActionLoadingButton,
+  ChangeVersionButton,
   DeleteButton,
   DisabledButton,
   StartButton,
@@ -20,6 +21,7 @@ export interface WorkspaceActionsProps {
   handleDelete: () => void
   handleUpdate: () => void
   handleCancel: () => void
+  handleChangeVersion: () => void
   isUpdating: boolean
   children?: ReactNode
 }
@@ -32,6 +34,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   handleDelete,
   handleUpdate,
   handleCancel,
+  handleChangeVersion,
   isUpdating,
 }) => {
   const { t } = useTranslation("workspacePage")
@@ -45,6 +48,9 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
     [ButtonTypesEnum.updating]: (
       <ActionLoadingButton label={t("actionButton.updating")} />
     ),
+    [ButtonTypesEnum.changeVersion]: (
+      <ChangeVersionButton handleAction={handleChangeVersion} />
+    ),
     [ButtonTypesEnum.start]: <StartButton handleAction={handleStart} />,
     [ButtonTypesEnum.starting]: (
       <ActionLoadingButton label={t("actionButton.starting")} />

diff --git a/site/src/components/WorkspaceActions/constants.ts b/site/src/components/WorkspaceActions/constants.ts
@@ -11,6 +11,7 @@ export enum ButtonTypesEnum {
   deleting = "deleting",
   update = "update",
   updating = "updating",
+  changeVersion = "changeVersion",
   // disabled buttons
   canceling = "canceling",
   deleted = "deleted",
@@ -34,7 +35,11 @@ export const statusToAbilities: Record<WorkspaceStatus, WorkspaceAbilities> = {
     canAcceptJobs: false,
   },
   running: {
-    actions: [ButtonTypesEnum.stop, ButtonTypesEnum.delete],
+    actions: [
+      ButtonTypesEnum.stop,
+      ButtonTypesEnum.changeVersion,
+      ButtonTypesEnum.delete,
+    ],
     canCancel: false,
     canAcceptJobs: true,
   },
@@ -44,22 +49,31 @@ export const statusToAbilities: Record<WorkspaceStatus, WorkspaceAbilities> = {
     canAcceptJobs: false,
   },
   stopped: {
-    actions: [ButtonTypesEnum.start, ButtonTypesEnum.delete],
+    actions: [
+      ButtonTypesEnum.start,
+      ButtonTypesEnum.changeVersion,
+      ButtonTypesEnum.delete,
+    ],
     canCancel: false,
     canAcceptJobs: true,
   },
   canceled: {
     actions: [
       ButtonTypesEnum.start,
       ButtonTypesEnum.stop,
+      ButtonTypesEnum.changeVersion,
       ButtonTypesEnum.delete,
     ],
     canCancel: false,
     canAcceptJobs: true,
   },
   // in the case of an error
   failed: {
-    actions: [ButtonTypesEnum.start, ButtonTypesEnum.delete],
+    actions: [
+      ButtonTypesEnum.start,
+      ButtonTypesEnum.changeVersion,
+      ButtonTypesEnum.delete,
+    ],
     canCancel: false,
     canAcceptJobs: true,
   },

diff --git a/site/src/i18n/en/index.ts b/site/src/i18n/en/index.ts
@@ -10,6 +10,7 @@ import workspacesPage from "./workspacesPage.json"
 import usersPage from "./usersPage.json"
 import templateVersionPage from "./templateVersionPage.json"
 import loginPage from "./loginPage.json"
+import workspaceChangeVersionPage from "./workspaceChangeVersionPage.json"
 
 export const en = {
   common,
@@ -24,4 +25,5 @@ export const en = {
   usersPage,
   templateVersionPage,
   loginPage,
+  workspaceChangeVersionPage,
 }
diff --git a/site/src/i18n/en/workspaceChangeVersionPage.json b/site/src/i18n/en/workspaceChangeVersionPage.json
@@ -0,0 +1,9 @@
+{
+  "title": "",
+  "labels": {
+    "workspaceVersion": "Workspace version",
+    "submit": "Update version",
+    "createdBy": "Created by",
+    "active": "Active"
+  }
+}
diff --git a/site/src/i18n/en/workspacePage.json b/site/src/i18n/en/workspacePage.json
@@ -27,7 +27,8 @@
     "updating": "Updating",
     "starting": "Starting...",
     "stopping": "Stopping...",
-    "deleting": "Deleting..."
+    "deleting": "Deleting...",
+    "changeVersion": "Change version"
   },
   "disabledButton": {
     "canceling": "Canceling",

diff --git a/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionForm.tsx b/site/src/pages/WorkspaceChangeVersionPage/WorkspaceChangeVersionForm.tsx
@@ -0,0 +1,155 @@
+import { makeStyles } from "@material-ui/core/styles"
+import TextField from "@material-ui/core/TextField"
+import Autocomplete from "@material-ui/lab/Autocomplete"
+import { Template, TemplateVersion, Workspace } from "api/typesGenerated"
+import { FormFooter } from "components/FormFooter/FormFooter"
+import { Pill } from "components/Pill/Pill"
+import { Stack } from "components/Stack/Stack"
+import { useFormik } from "formik"
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { createDayString } from "util/createDayString"
+import * as Yup from "yup"
+
+const validationSchema = Yup.object({
+  versionId: Yup.string().required(),
+})
+
+export const WorkspaceChangeVersionForm: FC<{
+  isLoading: boolean
+  workspace: Workspace
+  template: Template
+  versions: TemplateVersion[]
+  onSubmit: (versionId: string) => void
+  onCancel: () => void
+}> = ({ isLoading, workspace, template, versions, onSubmit, onCancel }) => {
+  const styles = useStyles()
+  const { t } = useTranslation("workspaceChangeVersionPage")
+  const formik = useFormik({
+    initialValues: {
+      versionId: workspace.latest_build.template_version_id,
+    },
+    validationSchema,
+    onSubmit: ({ versionId }) => onSubmit(versionId),
+  })
+  const autocompleteValue = versions.find(
+    (version) => version.id === formik.values.versionId,
+  )
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <Stack direction="column" spacing={3}>
+        <Stack
+          direction="row"
+          spacing={2}
+          className={styles.workspace}
+          alignItems="center"
+        >
+          <div className={styles.workspaceIcon}>
+            <img src={workspace.template_icon} alt="" />
+          </div>
+          <Stack direction="column" spacing={0.5}>
+            <span className={styles.workspaceName}>{workspace.name}</span>
+
+            <span className={styles.workspaceDescription}>
+              {workspace.template_display_name.length > 0
+                ? workspace.template_display_name
+                : workspace.template_name}
+            </span>
+          </Stack>
+        </Stack>
+
+        <Autocomplete
+          id="workspaceVersion"
+          disableClearable
+          options={versions.slice().reverse()}
+          value={autocompleteValue}
+          onChange={async (_event, value) => {
+            if (value) {
+              await formik.setFieldValue("versionId", value.id)
+            }
+          }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={t("labels.workspaceVersion")}
+              variant="outlined"
+              fullWidth
+            />
+          )}
+          getOptionLabel={(version: TemplateVersion) => version.name}
+          renderOption={(version: TemplateVersion) => (
+            <div className={styles.menuItem}>
+              <div>
+                <div>{version.name}</div>
+                <div className={styles.versionDescription}>
+                  {t("labels.createdBy")} {version.created_by.username}{" "}
+                  {createDayString(version.created_at)}
+                </div>
+              </div>
+
+              {template.active_version_id === version.id && (
+                <Pill
+                  type="success"
+                  text={t("labels.active")}
+                  className={styles.activePill}
+                />
+              )}
+            </div>
+          )}
+        />
+      </Stack>
+
+      <FormFooter
+        onCancel={onCancel}
+        isLoading={isLoading}
+        submitLabel={t("labels.submit")}
+      />
+    </form>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  workspace: {
+    padding: theme.spacing(2.5, 3),
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
+  },
+
+  workspaceName: {
+    fontSize: theme.spacing(2),
+  },
+
+  workspaceDescription: {
+    fontSize: theme.spacing(1.75),
+    color: theme.palette.text.secondary,
+  },
+
+  workspaceIcon: {
+    width: theme.spacing(5),
+    lineHeight: 1,
+
+    "& img": {
+      width: "100%",
+    },
+  },
+
+  menuItem: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    position: "relative",
+    width: "100%",
+  },
+
+  versionDescription: {
+    fontSize: theme.spacing(1.5),
+    color: theme.palette.text.secondary,
+  },
+
+  activePill: {
+    position: "absolute",
+    top: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}))