Display confirmation

BrunoQuaresma · BrunoQuaresma · commit 83cdf19406ca · 2023-03-31T14:51:59.000Z
diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
@@ -15,11 +15,13 @@ import { combineClasses } from "util/combineClasses"
 export interface VersionRowProps {
   version: TemplateVersion
   isActive: boolean
+  onPromoteClick?: () => void
 }
 
 export const VersionRow: React.FC<VersionRowProps> = ({
   version,
   isActive,
+  onPromoteClick,
 }) => {
   const styles = useStyles()
   const { t } = useTranslation("templatePage")
@@ -69,13 +71,20 @@ export const VersionRow: React.FC<VersionRowProps> = ({
           {isActive ? (
             <Pill text="Active version" type="success" />
           ) : (
-            <Button
-              size="small"
-              variant="outlined"
-              className={styles.promoteButton}
-            >
-              Promote version
-            </Button>
+            onPromoteClick && (
+              <Button
+                size="small"
+                variant="outlined"
+                className={styles.promoteButton}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  onPromoteClick()
+                }}
+              >
+                Promote version
+              </Button>
+            )
           )}
         </Stack>
       </TableCell>
diff --git a/site/src/components/VersionsTable/VersionsTable.tsx b/site/src/components/VersionsTable/VersionsTable.tsx
@@ -20,11 +20,13 @@ export const Language = {
 
 export interface VersionsTableProps {
   activeVersionId: string
+  onPromoteClick?: () => void
   versions?: TypesGen.TemplateVersion[]
 }
 
 export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
   versions,
+  onPromoteClick,
   activeVersionId,
 }) => {
   return (
@@ -37,6 +39,7 @@ export const VersionsTable: FC<React.PropsWithChildren<VersionsTableProps>> = ({
               getDate={(version) => new Date(version.created_at)}
               row={(version) => (
                 <VersionRow
+                  onPromoteClick={onPromoteClick}
                   version={version}
                   key={version.id}
                   isActive={activeVersionId === version.id}
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage.tsx
@@ -1,16 +1,21 @@
 import { useQuery } from "@tanstack/react-query"
 import { getTemplateVersions } from "api/api"
+import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { useTemplateLayoutContext } from "components/TemplateLayout/TemplateLayout"
 import { VersionsTable } from "components/VersionsTable/VersionsTable"
+import { useState } from "react"
 import { Helmet } from "react-helmet-async"
 import { getTemplatePageTitle } from "../utils"
 
 const TemplateVersionsPage = () => {
-  const { template } = useTemplateLayoutContext()
+  const { template, permissions } = useTemplateLayoutContext()
   const { data } = useQuery({
     queryKey: ["template", "versions", template.id],
     queryFn: () => getTemplateVersions(template.id),
   })
+  const [promoteState, setPromoteState] = useState<
+    "idle" | "confirming" | "promoting"
+  >("idle")
 
   return (
     <>
@@ -19,8 +24,24 @@ const TemplateVersionsPage = () => {
       </Helmet>
       <VersionsTable
         versions={data}
+        onPromoteClick={
+          permissions.canUpdateTemplate
+            ? () => setPromoteState("confirming")
+            : undefined
+        }
         activeVersionId={template.active_version_id}
       />
+      <ConfirmDialog
+        type="info"
+        hideCancel={false}
+        open={promoteState !== "idle"}
+        onConfirm={() => {}}
+        onClose={() => setPromoteState("idle")}
+        title="Promote version"
+        confirmLoading={promoteState === "promoting"}
+        confirmText="Promote"
+        description="Are you sure you want to promote this version?"
+      />
     </>
   )
 }
