Skip to content

Commit d631aa0

Browse files
f0sself0ssel
committed
confirm dialog
1 parent 0203af2 commit d631aa0

File tree

5 files changed

+103
-110
lines changed

5 files changed

+103
-110
lines changed

‎site/src/api/api.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,8 @@ export const getTokens = async (): Promise<TypesGen.APIKey[]> => {
140140
return response.data
141141
}
142142

143-
export const deleteAPIKey = async (keyId :string): Promise<void> => {
144-
const response = await axios.get(
145-
"/api/v2/users/me/keys/" + keyId,
146-
)
143+
export const deleteAPIKey = async (keyId: string): Promise<void> => {
144+
const response = await axios.delete("/api/v2/users/me/keys/" + keyId)
147145
return response.data
148146
}
149147

‎site/src/components/SettingsLayout/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
3-
import FingerprintOutlinedIcon from '@material-ui/icons/FingerprintOutlined';
3+
import FingerprintOutlinedIcon from "@material-ui/icons/FingerprintOutlined"
44
import { User } from "api/typesGenerated"
55
import { Stack } from "components/Stack/Stack"
66
import { UserAvatar } from "components/UserAvatar/UserAvatar"

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

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,34 @@ import { Section } from "../../../components/Section/Section"
33
import { TokensPageView } from "./TokensPageView"
44
import { tokensMachine } from "xServices/tokens/tokensXService"
55
import { useMachine } from "@xstate/react"
6-
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
6+
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
7+
import { Typography } from "components/Typography/Typography"
78

89
export const Language = {
910
title: "Tokens",
1011
description: (
1112
<p>
12-
Tokens are used to authenticate with the Coder API and can be created with the Coder CLI.
13+
Tokens are used to authenticate with the Coder API and can be created with
14+
the Coder CLI.
1315
</p>
1416
),
17+
deleteTitle: "Delete Token",
18+
deleteDescription: "Are you sure you want to delete this token?",
1519
}
1620

1721
export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
1822
const [tokensState, tokensSend] = useMachine(tokensMachine)
1923
const isLoading = tokensState.matches("gettingTokens")
2024
const hasLoaded = tokensState.matches("loaded")
2125
const { getTokensError, tokens, deleteTokenId } = tokensState.context
26+
const content = (
27+
<Typography>
28+
{Language.deleteDescription}
29+
<br />
30+
<br />
31+
{deleteTokenId}
32+
</Typography>
33+
)
2234

2335
return (
2436
<>
@@ -27,7 +39,7 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
2739
description={Language.description}
2840
layout="fluid"
2941
>
30-
<TokensPageView
42+
<TokensPageView
3143
tokens={tokens}
3244
isLoading={isLoading}
3345
hasLoaded={hasLoaded}
@@ -38,18 +50,18 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
3850
/>
3951
</Section>
4052

41-
<DeleteDialog
42-
isOpen={tokensState.matches("confirmTokenDelete")}
43-
confirmLoading={tokensState.matches("deletingToken")}
44-
name={deleteTokenId ? deleteTokenId : ""}
45-
entity="token"
46-
onConfirm={() => {
47-
tokensSend("CONFIRM_DELETE_TOKEN")
48-
}}
49-
onCancel={() => {
50-
tokensSend("CANCEL_DELETE_TOKEN")
51-
}}
52-
/>
53+
<ConfirmDialog
54+
title={Language.deleteTitle}
55+
description={content}
56+
open={tokensState.matches("confirmTokenDelete")}
57+
confirmLoading={tokensState.matches("deletingToken")}
58+
onConfirm={() => {
59+
tokensSend("CONFIRM_DELETE_TOKEN")
60+
}}
61+
onClose={() => {
62+
tokensSend("CANCEL_DELETE_TOKEN")
63+
}}
64+
/>
5365
</>
5466
)
5567
}

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

Lines changed: 70 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Maybe } from "components/Conditionals/Maybe"
1111
import { Stack } from "components/Stack/Stack"
1212
import { TableEmpty } from "components/TableEmpty/TableEmpty"
1313
import { TableLoader } from "components/TableLoader/TableLoader"
14-
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
14+
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
1515
import dayjs from "dayjs"
1616
import { FC } from "react"
1717
import { AlertBanner } from "components/AlertBanner/AlertBanner"
@@ -37,13 +37,7 @@ export interface TokensPageViewProps {
3737

3838
export const TokensPageView: FC<
3939
React.PropsWithChildren<TokensPageViewProps>
40-
> = ({
41-
tokens,
42-
getTokensError,
43-
isLoading,
44-
hasLoaded,
45-
onDelete,
46-
}) => {
40+
> = ({ tokens, getTokensError, isLoading, hasLoaded, onDelete }) => {
4741
const theme = useTheme()
4842

4943
return (
@@ -52,89 +46,78 @@ export const TokensPageView: FC<
5246
<AlertBanner severity="error" error={getTokensError} />
5347
)}
5448
<TableContainer>
55-
<Table>
56-
<TableHead>
57-
<TableRow>
58-
<TableCell width="30%">{Language.idLabel}</TableCell>
59-
<TableCell width="20%">{Language.createdAtLabel}</TableCell>
60-
<TableCell width="20%">{Language.lastUsedLabel}</TableCell>
61-
<TableCell width="20%">{Language.expiresAtLabel}</TableCell>
62-
<TableCell width="10%"></TableCell>
63-
</TableRow>
64-
</TableHead>
65-
<TableBody>
66-
<Maybe condition={isLoading}>
67-
<TableLoader />
68-
</Maybe>
49+
<Table>
50+
<TableHead>
51+
<TableRow>
52+
<TableCell width="30%">{Language.idLabel}</TableCell>
53+
<TableCell width="20%">{Language.createdAtLabel}</TableCell>
54+
<TableCell width="20%">{Language.lastUsedLabel}</TableCell>
55+
<TableCell width="20%">{Language.expiresAtLabel}</TableCell>
56+
<TableCell width="10%"></TableCell>
57+
</TableRow>
58+
</TableHead>
59+
<TableBody>
60+
<Maybe condition={isLoading}>
61+
<TableLoader />
62+
</Maybe>
6963

70-
<ChooseOne>
71-
<Cond condition={hasLoaded && tokens?.length === 0}>
72-
<TableEmpty
73-
message={Language.emptyMessage}
74-
/>
75-
</Cond>
76-
<Cond>
77-
{tokens?.map((token) => {
78-
const t = dayjs(token.last_used)
79-
const now = dayjs()
80-
const lastUsed = now.isBefore(t.add(100, "year")) ? t.fromNow() : "Never"
81-
return (
82-
<TableRow
83-
key={token.id}
84-
data-testid={`token-${token.id}`}
85-
tabIndex={0}
86-
>
87-
<TableCell>
88-
<span
89-
style={{ color: theme.palette.text.secondary }}
90-
>
91-
{token.id}
92-
</span>
93-
</TableCell>
64+
<ChooseOne>
65+
<Cond condition={hasLoaded && tokens?.length === 0}>
66+
<TableEmpty message={Language.emptyMessage} />
67+
</Cond>
68+
<Cond>
69+
{tokens?.map((token) => {
70+
const t = dayjs(token.last_used)
71+
const now = dayjs()
72+
const lastUsed = now.isBefore(t.add(100, "year"))
73+
? t.fromNow()
74+
: "Never"
75+
return (
76+
<TableRow
77+
key={token.id}
78+
data-testid={`token-${token.id}`}
79+
tabIndex={0}
80+
>
81+
<TableCell>
82+
<span style={{ color: theme.palette.text.secondary }}>
83+
{token.id}
84+
</span>
85+
</TableCell>
9486

95-
<TableCell>
96-
<span
97-
style={{ color: theme.palette.text.secondary }}
98-
>
99-
{dayjs(token.created_at).fromNow()}
100-
</span>
101-
</TableCell>
87+
<TableCell>
88+
<span style={{ color: theme.palette.text.secondary }}>
89+
{dayjs(token.created_at).fromNow()}
90+
</span>
91+
</TableCell>
10292

93+
<TableCell>{lastUsed}</TableCell>
10394

104-
<TableCell>
105-
{lastUsed}
106-
</TableCell>
107-
108-
<TableCell>
109-
<span
110-
style={{ color: theme.palette.text.secondary }}
111-
>
112-
{dayjs(token.expires_at).fromNow()}
113-
</span>
114-
</TableCell>
115-
<TableCell>
116-
<span
117-
style={{ color: theme.palette.text.secondary }}
118-
>
119-
<IconButton
120-
onClick={() => {
121-
onDelete(token.id)
122-
}}
123-
size="medium"
124-
aria-label={Language.ariaDeleteLabel}
125-
>
126-
<DeleteOutlineIcon />
127-
</IconButton>
128-
</span>
129-
</TableCell>
130-
</TableRow>
131-
)
132-
})}
133-
</Cond>
134-
</ChooseOne>
135-
</TableBody>
136-
</Table>
137-
</TableContainer>
95+
<TableCell>
96+
<span style={{ color: theme.palette.text.secondary }}>
97+
{dayjs(token.expires_at).fromNow()}
98+
</span>
99+
</TableCell>
100+
<TableCell>
101+
<span style={{ color: theme.palette.text.secondary }}>
102+
<IconButton
103+
onClick={() => {
104+
onDelete(token.id)
105+
}}
106+
size="medium"
107+
aria-label={Language.ariaDeleteLabel}
108+
>
109+
<DeleteOutlineIcon />
110+
</IconButton>
111+
</span>
112+
</TableCell>
113+
</TableRow>
114+
)
115+
})}
116+
</Cond>
117+
</ChooseOne>
118+
</TableBody>
119+
</Table>
120+
</TableContainer>
138121
</Stack>
139122
)
140123
}

‎site/src/xServices/tokens/tokensXService.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface Context {
1414
}
1515

1616
type Events =
17-
| { type: "DELETE_TOKEN", id: string }
17+
| { type: "DELETE_TOKEN"; id: string }
1818
| { type: "CONFIRM_DELETE_TOKEN" }
1919
| { type: "CANCEL_DELETE_TOKEN" }
2020

@@ -30,7 +30,7 @@ export const tokensMachine = createMachine(
3030
data: APIKey[]
3131
}
3232
deleteToken: {
33-
data: unknown,
33+
data: unknown
3434
}
3535
},
3636
},
@@ -101,7 +101,7 @@ export const tokensMachine = createMachine(
101101
services: {
102102
getTokens: () => getTokens(),
103103
deleteToken: (context) => {
104-
if (context.deleteTokenId === undefined) {
104+
if (context.deleteTokenId === undefined) {
105105
return Promise.reject("No token id to delete")
106106
}
107107

0 commit comments

Comments
 (0)