Skip to content

Commit 259c54a

Browse files
presleyppresleyp
committed
Deletion flow
1 parent 71f8a1d commit 259c54a

File tree

6 files changed

+55
-7
lines changed

6 files changed

+55
-7
lines changed

‎site/src/i18n/en/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import common from "./common.json"
22
import workspacePage from "./workspacePage.json"
3+
import templatePage from "./templatePage.json"
34

45
export const en = {
56
common,
67
workspacePage,
8+
templatePage,
79
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"deleteDialog": {
3+
"title": "Delete template",
4+
"message": "Are you sure you want to delete this template?",
5+
"confirm": "Delete"
6+
},
7+
"deleteSuccess": "Template successfully deleted."
8+
}

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

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { useMachine } from "@xstate/react"
2+
import { ConfirmDialog } from "components/ConfirmDialog/ConfirmDialog"
23
import { FC } from "react"
34
import { Helmet } from "react-helmet-async"
4-
import { useParams } from "react-router-dom"
5+
import { useTranslation } from "react-i18next"
6+
import { Navigate, useParams } from "react-router-dom"
57
import { Loader } from "../../components/Loader/Loader"
68
import { useOrganizationId } from "../../hooks/useOrganizationId"
79
import { pageTitle } from "../../util/page"
@@ -20,26 +22,30 @@ const useTemplateName = () => {
2022

2123
export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
2224
const organizationId = useOrganizationId()
25+
const { t } = useTranslation("templatePage")
2326
const templateName = useTemplateName()
24-
const [templateState] = useMachine(templateMachine, {
27+
const [templateState, templateSend] = useMachine(templateMachine, {
2528
context: {
2629
templateName,
2730
organizationId,
2831
},
2932
})
30-
const { template, activeTemplateVersion, templateResources, templateVersions } =
33+
const { template, activeTemplateVersion, templateResources, templateVersions, deleteTemplateError } =
3134
templateState.context
3235
const isLoading = !template || !activeTemplateVersion || !templateResources
3336

34-
const handleDeleteTemplate = (templateId: string) => {
35-
//TODO
36-
console.log("implement me", templateId)
37+
const handleDeleteTemplate = () => {
38+
templateSend("DELETE")
3739
}
3840

3941
if (isLoading) {
4042
return <Loader />
4143
}
4244

45+
if (templateState.matches("deleted")) {
46+
return <Navigate to="/templates" />
47+
}
48+
4349
return (
4450
<>
4551
<Helmet>
@@ -51,6 +57,27 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
5157
templateResources={templateResources}
5258
templateVersions={templateVersions}
5359
handleDeleteTemplate={handleDeleteTemplate}
60+
deleteTemplateError={deleteTemplateError}
61+
/>
62+
63+
<ConfirmDialog
64+
type="delete"
65+
hideCancel={false}
66+
open={templateState.matches("confirmingDelete")}
67+
confirmLoading={templateState.matches("deleting")}
68+
title={t("deleteDialog.title")}
69+
confirmText={t("deleteDialog.confirm")}
70+
onConfirm={() => {
71+
templateSend("CONFIRM_DELETE")
72+
}}
73+
onClose={() => {
74+
templateSend("CANCEL_DELETE")
75+
}}
76+
description={
77+
<>
78+
{t("deleteDialog.message")}
79+
</>
80+
}
5481
/>
5582
</>
5683
)

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
66
import SettingsOutlined from "@material-ui/icons/SettingsOutlined"
77
import { DeleteButton } from "components/DropdownButton/ActionCtas"
88
import { DropdownButton } from "components/DropdownButton/DropdownButton"
9+
import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
910
import frontMatter from "front-matter"
1011
import { FC } from "react"
1112
import ReactMarkdown from "react-markdown"
@@ -39,6 +40,7 @@ export interface TemplatePageViewProps {
3940
templateResources: WorkspaceResource[]
4041
templateVersions?: TemplateVersion[]
4142
handleDeleteTemplate: (templateId: string) => void
43+
deleteTemplateError: Error | unknown
4244
}
4345

4446
export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>> = ({
@@ -47,6 +49,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
4749
templateResources,
4850
templateVersions,
4951
handleDeleteTemplate,
52+
deleteTemplateError
5053
}) => {
5154
const styles = useStyles()
5255
const readme = frontMatter(activeTemplateVersion.readme)
@@ -111,6 +114,9 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
111114
</Stack>
112115
</PageHeader>
113116

117+
<>
118+
{deleteTemplateError && <ErrorSummary error={deleteTemplateError} dismissible />}
119+
114120
<Stack spacing={2.5}>
115121
<TemplateStats template={template} activeVersion={activeTemplateVersion} />
116122
<WorkspaceSection
@@ -144,6 +150,7 @@ export const TemplatePageView: FC<React.PropsWithChildren<TemplatePageViewProps>
144150
<VersionsTable versions={templateVersions} />
145151
</WorkspaceSection>
146152
</Stack>
153+
</>
147154
</Margins>
148155
)
149156
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import i18next from "i18next"
44
import { rest } from "msw"
55
import * as api from "../../api/api"
66
import { Workspace } from "../../api/typesGenerated"
7-
import { Language } from "../../components/WorkspaceActions/ActionCtas"
7+
import { Language } from "../../components/DropdownButton/ActionCtas"
88
import {
99
MockBuilds,
1010
MockCanceledWorkspace,

‎site/src/xServices/template/templateXService.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { displaySuccess } from "components/GlobalSnackbar/utils"
12
import { assign, createMachine } from "xstate"
23
import {
34
deleteTemplate,
@@ -7,6 +8,7 @@ import {
78
getTemplateVersions,
89
} from "../../api/api"
910
import { Template, TemplateVersion, WorkspaceResource } from "../../api/typesGenerated"
11+
import { t } from "i18next"
1012

1113
interface TemplateContext {
1214
organizationId: string
@@ -150,6 +152,7 @@ export const templateMachine =
150152
onDone: [
151153
{
152154
target: "deleted",
155+
actions: "displayDeleteSuccess"
153156
},
154157
],
155158
onError: [
@@ -215,6 +218,7 @@ export const templateMachine =
215218
clearDeleteTemplateError: assign({
216219
deleteTemplateError: (_) => undefined,
217220
}),
221+
displayDeleteSuccess: () => displaySuccess(t("deleteSuccess", { ns: "templatePage" }))
218222
},
219223
},
220224
)

0 commit comments

Comments
 (0)