Move danger zone

coder · BrunoQuaresma · Feb 17, 2023 · Feb 16, 2023 · Feb 16, 2023 · Feb 16, 2023
commit 0312c16f5d7475a61abd0b725ead10641c3fb2e2
diff --git a/site/src/components/TemplateLayout/TemplateLayout.tsx b/site/src/components/TemplateLayout/TemplateLayout.tsx
@@ -110,7 +110,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
   const permissions = usePermissions()
   const hasIcon = template && template.icon && template.icon !== ""
 
-  if (!template) {
+  if (!template || !templatePermissions) {
     return <Loader />
   }
 

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -0,0 +1,109 @@
+import Button from "@material-ui/core/Button/Button"
+import Link from "@material-ui/core/Link/Link"
+import RemoveOutlined from "@material-ui/icons/RemoveOutlined"
+import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
+import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
+import { AuthorizationResponse, Template } from "api/typesGenerated"
+import { Avatar } from "components/Avatar/Avatar"
+import { Maybe } from "components/Conditionals/Maybe"
+import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderSubtitle,
+} from "components/PageHeader/PageHeader"
+import { Stack } from "components/Stack/Stack"
+import { FC } from "react"
+import { Link as RouterLink } from "react-router-dom"
+import { useDeleteTemplate } from "./delete"
+
+const TemplateSettingsButton: FC<{ templateName: string }> = ({
+  templateName,
+}) => (
+  <Link
+    underline="none"
+    component={RouterLink}
+    to={`/templates/${templateName}/settings`}
+  >
+    <Button variant="outlined" startIcon={<SettingsOutlined />}>
+      Settings
+    </Button>
+  </Link>
+)
+
+const CreateWorkspaceButton: FC<{
+  templateName: string
+  className?: string
+}> = ({ templateName, className }) => (
+  <Link
+    underline="none"
+    component={RouterLink}
+    to={`/templates/${templateName}/workspace`}
+  >
+    <Button className={className ?? ""} startIcon={<AddCircleOutline />}>
+      Create workspace
+    </Button>
+  </Link>
+)
+
+const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
+  <Button startIcon={<RemoveOutlined />} onClick={onClick}>
+    Delete
+  </Button>
+)
+
+export const TemplatePageHeader: FC<{
+  template: Template
+  permissions: AuthorizationResponse
+}> = ({ template, permissions }) => {
+  const hasIcon = template.icon && template.icon !== ""
+  const deleteTemplate = useDeleteTemplate(template)
+
+  return (
+    <>
+      <PageHeader
+        actions={
+          <>
+            <Maybe condition={permissions.canUpdateTemplate}>
+              <DeleteTemplateButton
+                onClick={deleteTemplate.openDeleteConfirmation}
+              />
+              <TemplateSettingsButton templateName={template.name} />
+            </Maybe>
+            <CreateWorkspaceButton templateName={template.name} />
+          </>
+        }
+      >
+        <Stack direction="row" spacing={3} alignItems="center">
+          {hasIcon ? (
+            <Avatar size="xl" src={template.icon} variant="square" fitImage />
+          ) : (
+            <Avatar size="xl">{template.name}</Avatar>
+          )}
+
+          <div>
+            <PageHeaderTitle>
+              {template.display_name.length > 0
+                ? template.display_name
+                : template.name}
+            </PageHeaderTitle>
+            <PageHeaderSubtitle condensed>
+              {template.description === ""
+                ? "No description"
+                : template.description}
+            </PageHeaderSubtitle>
+          </div>
+        </Stack>
+      </PageHeader>
+
+      <DeleteDialog
+        isOpen={deleteTemplate.isDeleteDialogOpen}
+        confirmLoading={deleteTemplate.state.status === "deleting"}
+        onConfirm={deleteTemplate.confirmDelete}
+        onCancel={deleteTemplate.cancelDeleteConfirmation}
+        entity="template"
+        name={template.name}
+      />
+    </>
+  )
+}
diff --git a/site/src/components/TemplateLayout/delete.ts b/site/src/components/TemplateLayout/delete.ts
@@ -0,0 +1,38 @@
+import { deleteTemplate } from "api/api"
+import { Template } from "api/typesGenerated"
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+
+type DeleteTemplateState =
+  | { status: "idle" }
+  | { status: "confirming" }
+  | { status: "deleting" }
+
+export const useDeleteTemplate = (template: Template) => {
+  const navigate = useNavigate()
+  const [state, setState] = useState<DeleteTemplateState>({ status: "idle" })
+  const isDeleteDialogOpen =
+    state.status === "confirming" || state.status === "deleting"
+
+  const openDeleteConfirmation = () => {
+    setState({ status: "confirming" })
+  }
+
+  const cancelDeleteConfirmation = () => {
+    setState({ status: "idle" })
+  }
+
+  const confirmDelete = async () => {
+    setState({ status: "deleting" })
+    await deleteTemplate(template.id)
+    navigate("/templates")
+  }
+
+  return {
+    state,
+    isDeleteDialogOpen,
+    openDeleteConfirmation,
+    cancelDeleteConfirmation,
+    confirmDelete,
+  }
+}
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPage.tsx
@@ -26,7 +26,6 @@ export const TemplateSettingsPage: FC = () => {
     templateSettings: template,
     saveTemplateSettingsError,
     getTemplateError,
-    deleteTemplateError,
   } = state.context
 
   return (
@@ -40,22 +39,13 @@ export const TemplateSettingsPage: FC = () => {
         errors={{
           getTemplateError,
           saveTemplateSettingsError,
-          deleteTemplateError,
         }}
         onCancel={() => {
           navigate(`/templates/${templateName}`)
         }}
         onSubmit={(templateSettings) => {
           send({ type: "SAVE", templateSettings })
         }}
-        onDelete={() => {
-          send("DELETE")
-        }}
-        onConfirmDelete={() => send("CONFIRM_DELETE")}
-        onCancelDelete={() => send("CANCEL_DELETE")}
-        isConfirmingDelete={state.matches("confirmingDelete")}
-        isDeleting={state.matches("deleting")}
-        isDeleted={state.matches("deleted")}
       />
     </>
   )

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsPageView.tsx
@@ -1,32 +1,21 @@
 import { Template, UpdateTemplateMeta } from "api/typesGenerated"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
-import { FullPageForm } from "components/FullPageForm/FullPageForm"
 import { Loader } from "components/Loader/Loader"
 import { ComponentProps, FC } from "react"
 import { TemplateSettingsForm } from "./TemplateSettingsForm"
 import { Stack } from "components/Stack/Stack"
-import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
 import { makeStyles } from "@material-ui/core/styles"
-import { colors } from "theme/colors"
-import Button from "@material-ui/core/Button"
 import { useTranslation } from "react-i18next"
-import { Navigate } from "react-router-dom"
+import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm"
 
 export interface TemplateSettingsPageViewProps {
   template?: Template
   onSubmit: (data: UpdateTemplateMeta) => void
   onCancel: () => void
-  onDelete: () => void
-  onConfirmDelete: () => void
-  onCancelDelete: () => void
-  isConfirmingDelete: boolean
-  isDeleting: boolean
-  isDeleted: boolean
   isSubmitting: boolean
   errors?: {
     getTemplateError?: unknown
     saveTemplateSettingsError?: unknown
-    deleteTemplateError?: unknown
   }
   initialTouched?: ComponentProps<typeof TemplateSettingsForm>["initialTouched"]
 }
@@ -35,12 +24,6 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
   template,
   onCancel,
   onSubmit,
-  onDelete,
-  onConfirmDelete,
-  onCancelDelete,
-  isConfirmingDelete,
-  isDeleting,
-  isDeleted,
   isSubmitting,
   errors = {},
   initialTouched,
@@ -49,22 +32,13 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
   const isLoading = !template && !errors.getTemplateError
   const { t } = useTranslation("templateSettingsPage")
 
-  if (isDeleted) {
-    return <Navigate to="/templates" />
-  }
-
   return (
-    <FullPageForm title={t("title")}>
+    <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
       {Boolean(errors.getTemplateError) && (
         <Stack className={classes.errorContainer}>
           <AlertBanner severity="error" error={errors.getTemplateError} />
         </Stack>
       )}
-      {Boolean(errors.deleteTemplateError) && (
-        <Stack className={classes.errorContainer}>
-          <AlertBanner severity="error" error={errors.deleteTemplateError} />
-        </Stack>
-      )}
       {isLoading && <Loader />}
       {template && (
         <>
@@ -76,67 +50,14 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
             onCancel={onCancel}
             error={errors.saveTemplateSettingsError}
           />
-          <Stack className={classes.dangerContainer}>
-            <div className={classes.dangerHeader}>
-              {t("dangerZone.dangerZoneHeader")}
-            </div>
-
-            <Stack className={classes.dangerBorder}>
-              <Stack spacing={0}>
-                <p className={classes.deleteTemplateHeader}>
-                  {t("dangerZone.deleteTemplateHeader")}
-                </p>
-                <span>{t("dangerZone.deleteTemplateCaption")}</span>
-              </Stack>
-              <Button
-                className={classes.deleteButton}
-                onClick={onDelete}
-                aria-label={t("dangerZone.deleteCta")}
-              >
-                {t("dangerZone.deleteCta")}
-              </Button>
-            </Stack>
-          </Stack>
-
-          <DeleteDialog
-            isOpen={isConfirmingDelete}
-            confirmLoading={isDeleting}
-            onConfirm={onConfirmDelete}
-            onCancel={onCancelDelete}
-            entity="template"
-            name={template.name}
-          />
         </>
       )}
-    </FullPageForm>
+    </FullPageHorizontalForm>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
   errorContainer: {
     marginBottom: theme.spacing(2),
   },
-  dangerContainer: {
-    marginTop: theme.spacing(4),
-  },
-  dangerHeader: {
-    fontSize: theme.typography.h5.fontSize,
-    color: theme.palette.text.secondary,
-  },
-  dangerBorder: {
-    border: `1px solid ${colors.red[13]}`,
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(2),
-
-    "& p": {
-      marginTop: "0px",
-    },
-  },
-  deleteTemplateHeader: {
-    fontSize: theme.typography.h6.fontSize,
-    fontWeight: "bold",
-  },
-  deleteButton: {
-    color: colors.red[8],
-  },
 }))