Show modal

coder · BrunoQuaresma · Apr 4, 2023 · Apr 3, 2023 · Apr 3, 2023 · Apr 3, 2023
commit 45b02f8a10a02bcfec86e4900d452d1cdd4fe379
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -31,7 +31,7 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
     >
       {avatar}
 
-      <Stack spacing={0}>
+      <Stack spacing={0} className={styles.info}>
         <span className={styles.title}>{title}</span>
         {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
       </Stack>
@@ -42,6 +42,11 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
 const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: theme.spacing(5), // Make it predictable for the skeleton
+    width: "100%",
+  },
+
+  info: {
+    width: "100%",
   },
 
   title: {

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -26,7 +26,6 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("common")
-
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
   const [searchState, sendSearch] = useMachine(searchUserMachine)
   const { searchResults } = searchState.context

diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -0,0 +1,126 @@
+import { DialogProps } from "components/Dialogs/Dialog"
+import { FC, useState } from "react"
+import { FormFields } from "components/Form/Form"
+import TextField from "@material-ui/core/TextField"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
+import { Stack } from "components/Stack/Stack"
+import { Template, TemplateVersion } from "api/typesGenerated"
+import { Loader } from "components/Loader/Loader"
+import Autocomplete from "@material-ui/lab/Autocomplete"
+import { createDayString } from "util/createDayString"
+import { AvatarData } from "components/AvatarData/AvatarData"
+import { Pill } from "components/Pill/Pill"
+import { Avatar } from "components/Avatar/Avatar"
+import CircularProgress from "@material-ui/core/CircularProgress"
+
+export type ChangeVersionDialogProps = DialogProps & {
+  template: Template | undefined
+  templateVersions: TemplateVersion[] | undefined
+  defaultTemplateVersion: TemplateVersion | undefined
+  onClose: () => void
+  onConfirm: (templateVersion: TemplateVersion) => void
+}
+
+export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
+  onConfirm,
+  onClose,
+  template,
+  templateVersions,
+  defaultTemplateVersion,
+  ...dialogProps
+}) => {
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
+  const [selectedTemplateVersion, setSelectedTemplateVersion] = useState<
+    TemplateVersion | undefined
+  >(defaultTemplateVersion)
+
+  return (
+    <ConfirmDialog
+      {...dialogProps}
+      onClose={onClose}
+      onConfirm={() => {
+        if (selectedTemplateVersion) {
+          onConfirm(selectedTemplateVersion)
+        }
+      }}
+      hideCancel={false}
+      type="success"
+      cancelText="Cancel"
+      confirmText="Change"
+      title="Change version"
+      description={
+        <Stack>
+          <p>You are about to change the version of this workspace.</p>
+          {templateVersions ? (
+            <FormFields>
+              <Autocomplete
+                disableClearable
+                options={templateVersions}
+                value={selectedTemplateVersion}
+                id="template-version-autocomplete"
+                open={isAutocompleteOpen}
+                onChange={(_, newTemplateVersion) =>
+                  setSelectedTemplateVersion(newTemplateVersion ?? undefined)
+                }
+                onOpen={() => {
+                  setIsAutocompleteOpen(true)
+                }}
+                onClose={() => {
+                  setIsAutocompleteOpen(false)
+                }}
+                getOptionSelected={(
+                  option: TemplateVersion,
+                  value: TemplateVersion,
+                ) => option.id === value.id}
+                getOptionLabel={(option) => option.name}
+                renderOption={(option: TemplateVersion) => (
+                  <AvatarData
+                    avatar={
+                      <Avatar src={option.created_by.avatar_url}>
+                        {option.name}
+                      </Avatar>
+                    }
+                    title={
+                      <Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        style={{ width: "100%" }}
+                      >
+                        {option.name}
+                        {template?.active_version_id === option.id && (
+                          <Pill text="Active" type="success" />
+                        )}
+                      </Stack>
+                    }
+                    subtitle={createDayString(option.created_at)}
+                  />
+                )}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    variant="outlined"
+                    placeholder="Template version name"
+                    InputProps={{
+                      ...params.InputProps,
+                      endAdornment: (
+                        <>
+                          {!templateVersions ? (
+                            <CircularProgress size={16} />
+                          ) : null}
+                          {params.InputProps.endAdornment}
+                        </>
+                      ),
+                    }}
+                  />
+                )}
+              />
+            </FormFields>
+          ) : (
+            <Loader />
+          )}
+        </Stack>
+      }
+    />
+  )
+}
diff --git a/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx b/site/src/pages/WorkspacePage/WorkspaceReadyPage.tsx
@@ -3,7 +3,7 @@ import { ProvisionerJobLog } from "api/typesGenerated"
 import { useDashboard } from "components/Dashboard/DashboardProvider"
 import dayjs from "dayjs"
 import { useFeatureVisibility } from "hooks/useFeatureVisibility"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -27,6 +27,9 @@ import {
   workspaceMachine,
 } from "../../xServices/workspace/workspaceXService"
 import { UpdateBuildParametersDialog } from "./UpdateBuildParametersDialog"
+import { ChangeVersionDialog } from "./ChangeVersionDialog"
+import { useQuery } from "@tanstack/react-query"
+import { getTemplateVersions } from "api/api"
 
 interface WorkspaceReadyPageProps {
   workspaceState: StateFrom<typeof workspaceMachine>
@@ -67,6 +70,12 @@ export const WorkspaceReadyPage = ({
   const { t } = useTranslation("workspacePage")
   const favicon = getFaviconByStatus(workspace.latest_build)
   const navigate = useNavigate()
+  const [changeVersionDialogOpen, setChangeVersionDialogOpen] = useState(false)
+  const { data: templateVersions } = useQuery({
+    queryKey: ["template", "versions", workspace.template_id],
+    queryFn: () => getTemplateVersions(workspace.template_id),
+    enabled: changeVersionDialogOpen,
+  })
 
   // keep banner machine in sync with workspace
   useEffect(() => {
@@ -120,7 +129,7 @@ export const WorkspaceReadyPage = ({
         handleSettings={() => navigate("settings")}
         handleBuildRetry={() => workspaceSend({ type: "RETRY_BUILD" })}
         handleChangeVersion={() => {
-          console.log("HAHA")
+          setChangeVersionDialogOpen(true)
         }}
         resources={workspace.latest_build.resources}
         builds={builds}
@@ -163,6 +172,21 @@ export const WorkspaceReadyPage = ({
           workspaceSend({ type: "UPDATE", buildParameters })
         }}
       />
+      <ChangeVersionDialog
+        templateVersions={templateVersions?.reverse()}
+        template={template}
+        defaultTemplateVersion={templateVersions?.find(
+          (v) => workspace.latest_build.template_version_id === v.id,
+        )}
+        open={changeVersionDialogOpen}
+        onClose={() => {
+          setChangeVersionDialogOpen(false)
+        }}
+        onConfirm={() => {
+          setChangeVersionDialogOpen(false)
+          workspaceSend({ type: "CHANGE_VERSION" })
+        }}
+      />
     </>
   )
 }