Skip to content

Commit 2a085d1

Browse files
presleyppresleyp
authored
chore: refactor dialogs (coder#3935)
* Move dialogs * Repurpose WorkspaceDeleteDialog * Rename to DeleteDialog Pausing on the typing part for now, leaving this as a refactor * Rename handlers
1 parent 47ee44e commit 2a085d1

18 files changed

+94
-81
lines changed

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

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx renamed to ‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

File renamed without changes.

‎site/src/components/ConfirmDialog/ConfirmDialog.test.tsx renamed to ‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { fireEvent, render } from "@testing-library/react"
22
import { FC } from "react"
3-
import { WrapperComponent } from "../../testHelpers/renderHelpers"
3+
import { WrapperComponent } from "../../../testHelpers/renderHelpers"
44
import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
55

66
namespace Helpers {

‎site/src/components/ConfirmDialog/ConfirmDialog.tsx renamed to ‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import DialogActions from "@material-ui/core/DialogActions"
22
import { fade, makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
44
import React, { ReactNode } from "react"
5-
import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog/Dialog"
6-
import { ConfirmDialogType } from "../Dialog/types"
5+
import { Dialog, DialogActionButtons, DialogActionButtonsProps } from "../Dialog"
6+
import { ConfirmDialogType } from "../types"
77

88
interface ConfirmDialogTypeConfig {
99
confirmText: ReactNode

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import { DeleteDialog, DeleteDialogProps } from "./DeleteDialog"
3+
4+
export default {
5+
title: "Components/Dialogs/DeleteDialog",
6+
component: DeleteDialog,
7+
argTypes: {
8+
onCancel: {
9+
action: "onClose",
10+
},
11+
onConfirm: {
12+
action: "onConfirm",
13+
},
14+
open: {
15+
control: "boolean",
16+
defaultValue: true,
17+
},
18+
title: {
19+
defaultValue: "Delete Something",
20+
},
21+
description: {
22+
defaultValue:
23+
"This is irreversible. To confirm, type the name of the thing you want to delete.",
24+
},
25+
},
26+
} as ComponentMeta<typeof DeleteDialog>
27+
28+
const Template: Story<DeleteDialogProps> = (args) => <DeleteDialog {...args} />
29+
30+
export const Example = Template.bind({})
31+
Example.args = {
32+
isOpen: true,
33+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { ReactNode } from "react"
2+
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
3+
4+
export interface DeleteDialogProps {
5+
isOpen: boolean
6+
onConfirm: () => void
7+
onCancel: () => void
8+
title: string
9+
description: string | ReactNode
10+
confirmLoading?: boolean
11+
}
12+
13+
export const DeleteDialog: React.FC<React.PropsWithChildren<DeleteDialogProps>> = ({
14+
isOpen,
15+
onCancel,
16+
onConfirm,
17+
title,
18+
description,
19+
confirmLoading,
20+
}) => (
21+
<ConfirmDialog
22+
type="delete"
23+
hideCancel={false}
24+
open={isOpen}
25+
title={title}
26+
onConfirm={onConfirm}
27+
onClose={onCancel}
28+
description={description}
29+
confirmLoading={confirmLoading}
30+
/>
31+
)

‎site/src/components/Dialog/Dialog.tsx renamed to ‎site/src/components/Dialogs/Dialog.tsx

File renamed without changes.

‎site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx renamed to ‎site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Story } from "@storybook/react"
2-
import { MockUser } from "../../testHelpers/renderHelpers"
2+
import { MockUser } from "../../../testHelpers/renderHelpers"
33
import { ResetPasswordDialog, ResetPasswordDialogProps } from "./ResetPasswordDialog"
44

55
export default {
6-
title: "components/ResetPasswordDialog",
6+
title: "components/Dialogs/ResetPasswordDialog",
77
component: ResetPasswordDialog,
88
argTypes: {
99
onClose: { action: "onClose" },

‎site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx renamed to ‎site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import DialogContentText from "@material-ui/core/DialogContentText"
22
import { makeStyles } from "@material-ui/core/styles"
33
import { FC } from "react"
4-
import * as TypesGen from "../../api/typesGenerated"
5-
import { CodeExample } from "../CodeExample/CodeExample"
4+
import * as TypesGen from "../../../api/typesGenerated"
5+
import { CodeExample } from "../../CodeExample/CodeExample"
66
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
77

88
export interface ResetPasswordDialogProps {

‎site/src/components/Dialog/types.ts renamed to ‎site/src/components/Dialogs/types.ts

File renamed without changes.

‎site/src/i18n/en/templatePage.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"deleteDialog": {
33
"title": "Delete template",
4-
"message": "Are you sure you want to delete this template?",
5-
"confirm": "Delete"
4+
"description": "Deleting a template is irreversible. Are you sure you want to proceed?"
65
},
76
"deleteSuccess": "Template successfully deleted."
87
}

‎site/src/i18n/en/workspacePage.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
{
2+
"deleteDialog": {
3+
"title": "Delete workspace",
4+
"description": "Deleting a workspace is irreversible. Are you sure you want to proceed?"
5+
},
26
"workspaceScheduleButton": {
37
"schedule": "Schedule",
48
"editDeadlineMinus": "Subtract one hour",

‎site/src/pages/TemplatePage/TemplatePage.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useMachine, useSelector } from "@xstate/react"
2-
import { ConfirmDialog } from "components/ConfirmDialog/ConfirmDialog"
2+
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
33
import { FC, useContext } from "react"
44
import { Helmet } from "react-helmet-async"
55
import { useTranslation } from "react-i18next"
@@ -74,20 +74,17 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
7474
deleteTemplateError={deleteTemplateError}
7575
/>
7676

77-
<ConfirmDialog
78-
type="delete"
79-
hideCancel={false}
80-
open={templateState.matches("confirmingDelete")}
77+
<DeleteDialog
78+
isOpen={templateState.matches("confirmingDelete")}
8179
confirmLoading={templateState.matches("deleting")}
8280
title={t("deleteDialog.title")}
83-
confirmText={t("deleteDialog.confirm")}
81+
description={t("deleteDialog.description")}
8482
onConfirm={() => {
8583
templateSend("CONFIRM_DELETE")
8684
}}
87-
onClose={() => {
85+
onCancel={() => {
8886
templateSend("CANCEL_DELETE")
8987
}}
90-
description={<>{t("deleteDialog.message")}</>}
9188
/>
9289
</>
9390
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useActor } from "@xstate/react"
22
import React, { useContext, useEffect } from "react"
3-
import { ConfirmDialog } from "../../../components/ConfirmDialog/ConfirmDialog"
3+
import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog"
44
import { Section } from "../../../components/Section/Section"
55
import { XServiceContext } from "../../../xServices/StateContext"
66
import { SSHKeysPageView } from "./SSHKeysPageView"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { rest } from "msw"
44
import { Language as usersXServiceLanguage } from "xServices/users/usersXService"
55
import * as API from "../../api/api"
66
import { Role } from "../../api/typesGenerated"
7+
import { Language as ResetPasswordDialogLanguage } from "../../components/Dialogs/ResetPasswordDialog/ResetPasswordDialog"
78
import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
8-
import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
99
import { Language as RoleSelectLanguage } from "../../components/RoleSelect/RoleSelect"
1010
import { Language as UsersTableBodyLanguage } from "../../components/UsersTable/UsersTableBody"
1111
import {

‎site/src/pages/UsersPage/UsersPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { FC, ReactNode, useContext, useEffect } from "react"
33
import { Helmet } from "react-helmet-async"
44
import { useNavigate } from "react-router"
55
import { useSearchParams } from "react-router-dom"
6-
import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
7-
import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
6+
import { ConfirmDialog } from "../../components/Dialogs/ConfirmDialog/ConfirmDialog"
7+
import { ResetPasswordDialog } from "../../components/Dialogs/ResetPasswordDialog/ResetPasswordDialog"
88
import { userFilterQuery } from "../../util/filters"
99
import { pageTitle } from "../../util/page"
1010
import { XServiceContext } from "../../xServices/StateContext"

‎site/src/pages/WorkspacePage/WorkspacePage.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import dayjs from "dayjs"
44
import minMax from "dayjs/plugin/minMax"
55
import { FC, useContext, useEffect } from "react"
66
import { Helmet } from "react-helmet-async"
7+
import { useTranslation } from "react-i18next"
78
import { useParams } from "react-router-dom"
8-
import { DeleteWorkspaceDialog } from "../../components/DeleteWorkspaceDialog/DeleteWorkspaceDialog"
9+
import { DeleteDialog } from "../../components/Dialogs/DeleteDialog/DeleteDialog"
910
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
1011
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1112
import { Workspace, WorkspaceErrors } from "../../components/Workspace/Workspace"
@@ -25,6 +26,8 @@ export const WorkspacePage: FC = () => {
2526
const username = firstOrItem(usernameQueryParam, null)
2627
const workspaceName = firstOrItem(workspaceQueryParam, null)
2728

29+
const { t } = useTranslation("workspacePage")
30+
2831
const xServices = useContext(XServiceContext)
2932
const me = useSelector(xServices.authXService, selectUser)
3033

@@ -136,10 +139,12 @@ export const WorkspacePage: FC = () => {
136139
}}
137140
buildInfo={buildInfoState.context.buildInfo}
138141
/>
139-
<DeleteWorkspaceDialog
142+
<DeleteDialog
143+
title={t("deleteDialog.title")}
144+
description={t("deleteDialog.description")}
140145
isOpen={workspaceState.matches({ ready: { build: "askingDelete" } })}
141-
handleCancel={() => workspaceSend("CANCEL_DELETE")}
142-
handleConfirm={() => {
146+
onCancel={() => workspaceSend("CANCEL_DELETE")}
147+
onConfirm={() => {
143148
workspaceSend("DELETE")
144149
}}
145150
/>

0 commit comments

Comments
 (0)