feat: implement basic archive ui to make archiving failed versions easy.

Emyrk · Emyrk · commit d74cf8eea65a · 2023-10-10T11:24:39.000-05:00
More work is needed... this is just the MVP
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -387,6 +387,24 @@ export const patchTemplateVersion = async (
   return response.data;
 };
 
+export const archiveTemplateVersion = async (
+  templateVersionId: string,
+) => {
+  const response = await axios.post<TypesGen.TemplateVersion>(
+    `/api/v2/templateversions/${templateVersionId}/archive`,
+  );
+  return response.data;
+};
+
+export const unarchiveTemplateVersion = async (
+  templateVersionId: string,
+) => {
+  const response = await axios.post<TypesGen.TemplateVersion>(
+    `/api/v2/templateversions/${templateVersionId}/unarchive`,
+  );
+  return response.data;
+};
+
 export const updateTemplateMeta = async (
   templateId: string,
   data: TypesGen.UpdateTemplateMeta,
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/TemplateVersionsPage.tsx
@@ -1,5 +1,9 @@
 import { useMutation, useQuery } from "react-query";
-import { getTemplateVersions, updateActiveTemplateVersion } from "api/api";
+import {
+  archiveTemplateVersion,
+  getTemplateVersions,
+  updateActiveTemplateVersion,
+} from "api/api";
 import { getErrorMessage } from "api/errors";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
@@ -34,9 +38,31 @@ const TemplateVersionsPage = () => {
       displayError(getErrorMessage(error, "Failed to promote version"));
     },
   });
+
+  const { mutate: archiveVersion, isLoading: isArchiving } = useMutation({
+    mutationFn: (templateVersionId: string) => {
+      return archiveTemplateVersion(templateVersionId);
+    },
+    onSuccess: async () => {
+      // The reload is unfortunate. When a version is archived, we should hide
+      // the row. I do not know an easy way to do that, so a reload makes the API call
+      // resend and now the version is omitted.
+      // TODO: Improve this to not reload the page.
+      location.reload();
+      setSelectedVersionIdToArchive(undefined);
+      displaySuccess("Version archived successfully");
+    },
+    onError: (error) => {
+      displayError(getErrorMessage(error, "Failed to archive version"));
+    },
+  });
+
   const [selectedVersionIdToPromote, setSelectedVersionIdToPromote] = useState<
     string | undefined
   >();
+  const [selectedVersionIdToArchive, setSelectedVersionIdToArchive] = useState<
+    string | undefined
+  >();
 
   return (
     <>
@@ -50,8 +76,14 @@ const TemplateVersionsPage = () => {
             ? setSelectedVersionIdToPromote
             : undefined
         }
+        onArchiveClick={
+          permissions.canUpdateTemplate
+            ? setSelectedVersionIdToArchive
+            : undefined
+        }
         activeVersionId={latestActiveVersion}
       />
+      {/* Promote confirm */}
       <ConfirmDialog
         type="info"
         hideCancel={false}
@@ -65,6 +97,20 @@ const TemplateVersionsPage = () => {
         confirmText="Promote"
         description="Are you sure you want to promote this version? Workspaces will be prompted to “Update” to this version once promoted."
       />
+      {/* Archive Confirm */}
+      <ConfirmDialog
+        type="info"
+        hideCancel={false}
+        open={selectedVersionIdToArchive !== undefined}
+        onConfirm={() => {
+          archiveVersion(selectedVersionIdToArchive as string);
+        }}
+        onClose={() => setSelectedVersionIdToArchive(undefined)}
+        title="Archive version"
+        confirmLoading={isArchiving}
+        confirmText="Archive"
+        description="Are you sure you want to archive this version? Archived versions cannot be used by workspaces."
+      />
     </>
   );
 };
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx
@@ -17,13 +17,15 @@ export interface VersionRowProps {
   isActive: boolean;
   isLatest: boolean;
   onPromoteClick?: (templateVersionId: string) => void;
+  onArchiveClick?: (templateVersionId: string) => void;
 }
 
 export const VersionRow: React.FC<VersionRowProps> = ({
   version,
   isActive,
   isLatest,
   onPromoteClick,
+  onArchiveClick,
 }) => {
   const styles = useStyles();
   const navigate = useNavigate();
@@ -33,6 +35,14 @@ export const VersionRow: React.FC<VersionRowProps> = ({
   });
 
   const jobStatus = version.job.status;
+  let buttonVerb = "Promote";
+  let buttonAction = onPromoteClick;
+  let buttonDisabled = isActive || jobStatus !== "succeeded";
+  if (jobStatus === "failed") {
+    buttonVerb = "Archive";
+    buttonAction = onArchiveClick;
+    buttonDisabled = false;
+  }
 
   return (
     <TimelineEntry
@@ -90,17 +100,21 @@ export const VersionRow: React.FC<VersionRowProps> = ({
               <Pill text="Canceled" type="neutral" lightBorder />
             )}
             {jobStatus === "failed" && <Pill text="Failed" type="error" />}
-            {onPromoteClick && (
+            {buttonAction && (
               <Button
                 className={styles.promoteButton}
-                disabled={isActive || jobStatus !== "succeeded"}
+                disabled={buttonDisabled}
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
-                  onPromoteClick(version.id);
+                  if (buttonAction) {
+                    // Linter was complaining about this unless I threw it
+                    // in an if statement.
+                    buttonAction(version.id);
+                  }
                 }}
               >
-                Promote&hellip;
+                {buttonVerb}&hellip;
               </Button>
             )}
           </Stack>
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
@@ -21,11 +21,13 @@ export const Language = {
 export interface VersionsTableProps {
   activeVersionId: string;
   onPromoteClick?: (templateVersionId: string) => void;
+  onArchiveClick?: (templateVersionId: string) => void;
+
   versions?: TypesGen.TemplateVersion[];
 }
 
 export const VersionsTable: FC<VersionsTableProps> = (props) => {
-  const { versions, onPromoteClick, activeVersionId } = props;
+  const { versions, onArchiveClick, onPromoteClick, activeVersionId } = props;
 
   const latestVersionId = versions?.reduce(
     (latestSoFar, against) => {
@@ -55,6 +57,7 @@ export const VersionsTable: FC<VersionsTableProps> = (props) => {
               getDate={(version) => new Date(version.created_at)}
               row={(version) => (
                 <VersionRow
+                  onArchiveClick={onArchiveClick}
                   onPromoteClick={onPromoteClick}
                   version={version}
                   key={version.id}
