chore: refactor dialogs (#3935)

* Move dialogs

* Repurpose WorkspaceDeleteDialog

* Rename to DeleteDialog

Pausing on the typing part for now, leaving this as a refactor

* Rename handlers

site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.stories.tsx

@@ -1,29 +0,0 @@
-import { ComponentMeta, Story } from "@storybook/react"
-import { DeleteWorkspaceDialog, DeleteWorkspaceDialogProps } from "./DeleteWorkspaceDialog"
-
-export default {
-  title: "Components/DeleteWorkspaceDialog",
-  component: DeleteWorkspaceDialog,
-  argTypes: {
-    onClose: {
-      action: "onClose",
-    },
-    onConfirm: {
-      action: "onConfirm",
-    },
-    open: {
-      control: "boolean",
-      defaultValue: true,
-    },
-    title: {
-      defaultValue: "Confirm Dialog",
-    },
-  },
-} as ComponentMeta<typeof DeleteWorkspaceDialog>
-
-const Template: Story<DeleteWorkspaceDialogProps> = (args) => <DeleteWorkspaceDialog {...args} />
-
-export const Example = Template.bind({})
-Example.args = {
-  isOpen: true,
-}

site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx

@@ -1,27 +0,0 @@
-import React from "react"
-import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
-
-const Language = {
-  deleteDialogTitle: "Delete workspace?",
-  deleteDialogMessage: "Deleting your workspace is irreversible. Are you sure?",
-}
-
-export interface DeleteWorkspaceDialogProps {
-  isOpen: boolean
-  handleConfirm: () => void
-  handleCancel: () => void
-}
-
-export const DeleteWorkspaceDialog: React.FC<
-  React.PropsWithChildren<DeleteWorkspaceDialogProps>
-> = ({ isOpen, handleCancel, handleConfirm }) => (
-  <ConfirmDialog
-    type="delete"
-    hideCancel={false}
-    open={isOpen}
-    title={Language.deleteDialogTitle}
-    onConfirm={handleConfirm}
-    onClose={handleCancel}
-    description={Language.deleteDialogMessage}
-  />
-)

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from "@testing-library/react"
 import { FC } from "react"
-import { WrapperComponent } from "../../testHelpers/renderHelpers"
+import { WrapperComponent } from "../../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -2,8 +2,8 @@ import DialogActions from "@material-ui/core/DialogActions"
 import { fade, makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React, { ReactNode } from "react"
-import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog/Dialog"
-import { ConfirmDialogType } from "../Dialog/types"
+import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
+import { ConfirmDialogType } from "../types"
 
 interface ConfirmDialogTypeConfig {
   confirmText: ReactNode

site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import { DeleteDialog, DeleteDialogProps } from "./DeleteDialog"
+
+export default {
+  title: "Components/Dialogs/DeleteDialog",
+  component: DeleteDialog,
+  argTypes: {
+    onCancel: {
+      action: "onClose",
+    },
+    onConfirm: {
+      action: "onConfirm",
+    },
+    open: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    title: {
+      defaultValue: "Delete Something",
+    },
+    description: {
+      defaultValue:
+        "This is irreversible. To confirm, type the name of the thing you want to delete.",
+    },
+  },
+} as ComponentMeta<typeof DeleteDialog>
+
+const Template: Story<DeleteDialogProps> = (args) => <DeleteDialog {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  isOpen: true,
+}

site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react"
+import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
+
+export interface DeleteDialogProps {
+  isOpen: boolean
+  onConfirm: () => void
+  onCancel: () => void
+  title: string
+  description: string | ReactNode
+  confirmLoading?: boolean
+}
+
+export const DeleteDialog: React.FC<React.PropsWithChildren<DeleteDialogProps>> = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+  title,
+  description,
+  confirmLoading,
+}) => (
+  <ConfirmDialog
+    type="delete"
+    hideCancel={false}
+    open={isOpen}
+    title={title}
+    onConfirm={onConfirm}
+    onClose={onCancel}
+    description={description}
+    confirmLoading={confirmLoading}
+  />
+)

site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx

@@ -1,9 +1,9 @@
 import { Story } from "@storybook/react"
-import { MockUser } from "../../testHelpers/renderHelpers"
+import { MockUser } from "../../../testHelpers/renderHelpers"
 import { ResetPasswordDialog, ResetPasswordDialogProps } from "./ResetPasswordDialog"
 
 export default {
-  title: "components/ResetPasswordDialog",
+  title: "components/Dialogs/ResetPasswordDialog",
   component: ResetPasswordDialog,
   argTypes: {
     onClose: { action: "onClose" },

site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -1,8 +1,8 @@
 import DialogContentText from "@material-ui/core/DialogContentText"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
-import * as TypesGen from "../../api/typesGenerated"
-import { CodeExample } from "../CodeExample/CodeExample"
+import * as TypesGen from "../../../api/typesGenerated"
+import { CodeExample } from "../../CodeExample/CodeExample"
 import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
 
 export interface ResetPasswordDialogProps {

site/src/i18n/en/templatePage.json

@@ -1,8 +1,7 @@
 {
   "deleteDialog": {
     "title": "Delete template",
-    "message": "Are you sure you want to delete this template?",
-    "confirm": "Delete"
+    "description": "Deleting a template is irreversible. Are you sure you want to proceed?"
   },
   "deleteSuccess": "Template successfully deleted."
 }

site/src/i18n/en/workspacePage.json

@@ -1,4 +1,8 @@
 {
+  "deleteDialog": {
+    "title": "Delete workspace",
+    "description": "Deleting a workspace is irreversible. Are you sure you want to proceed?"
+  },
   "workspaceScheduleButton": {
     "schedule": "Schedule",
     "editDeadlineMinus": "Subtract one hour",

site/src/pages/TemplatePage/TemplatePage.tsx

@@ -1,5 +1,5 @@
 import { useMachine, useSelector } from "@xstate/react"
-import { ConfirmDialog } from "components/ConfirmDialog/ConfirmDialog"
+import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
 import { FC, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
@@ -74,20 +74,17 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
         deleteTemplateError={deleteTemplateError}
       />
 
-      <ConfirmDialog
-        type="delete"
-        hideCancel={false}
-        open={templateState.matches("confirmingDelete")}
+      <DeleteDialog
+        isOpen={templateState.matches("confirmingDelete")}
         confirmLoading={templateState.matches("deleting")}
         title={t("deleteDialog.title")}
-        confirmText={t("deleteDialog.confirm")}
+        description={t("deleteDialog.description")}
         onConfirm={() => {
           templateSend("CONFIRM_DELETE")
         }}
-        onClose={() => {
+        onCancel={() => {
           templateSend("CANCEL_DELETE")
         }}
-        description={<>{t("deleteDialog.message")}</>}
       />
     </>
   )

site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx

@@ -1,6 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect } from "react"
-import { ConfirmDialog } from "../../../components/ConfirmDialog/ConfirmDialog"
+import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Section } from "../../../components/Section/Section"
 import { XServiceContext } from "../../../xServices/StateContext"
 import { SSHKeysPageView } from "./SSHKeysPageView"

site/src/pages/UsersPage/UsersPage.test.tsx

@@ -4,8 +4,8 @@ import { rest } from "msw"
 import { Language as usersXServiceLanguage } from "xServices/users/usersXService"
 import * as API from "../../api/api"
 import { Role } from "../../api/typesGenerated"
+import { Language as ResetPasswordDialogLanguage } from "../../components/Dialogs/ResetPasswordDialog/ResetPasswordDialog"
 import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
-import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
 import { Language as RoleSelectLanguage } from "../../components/RoleSelect/RoleSelect"
 import { Language as UsersTableBodyLanguage } from "../../components/UsersTable/UsersTableBody"
 import {

site/src/pages/UsersPage/UsersPage.tsx

@@ -3,8 +3,8 @@ import { FC, ReactNode, useContext, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router"
 import { useSearchParams } from "react-router-dom"
-import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
-import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
+import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog"
+import { ResetPasswordDialog } from "../../components/Dialogs/ResetPasswordDialog/ResetPasswordDialog"
 import { userFilterQuery } from "../../util/filters"
 import { pageTitle } from "../../util/page"
 import { XServiceContext } from "../../xServices/StateContext"

site/src/pages/WorkspacePage/WorkspacePage.tsx

@@ -4,8 +4,9 @@ import dayjs from "dayjs"
 import minMax from "dayjs/plugin/minMax"
 import { FC, useContext, useEffect } from "react"
 import { Helmet } from "react-helmet-async"
+import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
-import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
+import { DeleteDialog } from "../../components/Dialogs/DeleteDialog/DeleteDialog"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { Workspace, WorkspaceErrors } from "../../components/Workspace/Workspace"
@@ -25,6 +26,8 @@ export const WorkspacePage: FC = () => {
   const username = firstOrItem(usernameQueryParam, null)
   const workspaceName = firstOrItem(workspaceQueryParam, null)
 
+  const { t } = useTranslation("workspacePage")
+
   const xServices = useContext(XServiceContext)
   const me = useSelector(xServices.authXService, selectUser)
 
@@ -136,10 +139,12 @@ export const WorkspacePage: FC = () => {
           }}
           buildInfo={buildInfoState.context.buildInfo}
         />
-        <DeleteWorkspaceDialog
+        <DeleteDialog
+          title={t("deleteDialog.title")}
+          description={t("deleteDialog.description")}
           isOpen={workspaceState.matches({ ready: { build: "askingDelete" } })}
-          handleCancel={() => workspaceSend("CANCEL_DELETE")}
-          handleConfirm={() => {
+          onCancel={() => workspaceSend("CANCEL_DELETE")}
+          onConfirm={() => {
             workspaceSend("DELETE")
           }}
         />