Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5b07f1e

Browse files
authored
feat(tokens): improve delete confirmation dialog (#6651)
1 parentdb40c29 commit5b07f1e

File tree

6 files changed

+88
-39
lines changed

6 files changed

+88
-39
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"addToken":"Add token",
77
"deleteToken": {
88
"delete":"Delete Token",
9-
"deleteCaption":"Are you sure you want to deletethistoken?<br/><br/><4>{{tokenId}}</4>",
9+
"deleteCaption":"Are you sure you want topermanentlydelete token <strong><4>{{tokenName}}</4></strong>?",
1010
"deleteSuccess":"Token has been deleted",
1111
"deleteFailure":"Failed to delete token"
1212
}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Stack } from "components/Stack/Stack"
99
importButtonfrom"@material-ui/core/Button"
1010
import{LinkasRouterLink}from"react-router-dom"
1111
importAddIconfrom"@material-ui/icons/AddOutlined"
12+
import{APIKeyWithOwner}from"api/typesGenerated"
1213

1314
exportconstTokensPage:FC<PropsWithChildren<unknown>>=()=>{
1415
conststyles=useStyles()
@@ -30,9 +31,9 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
3031
</Stack>
3132
)
3233

33-
const[tokenIdToDelete,setTokenIdToDelete]=useState<string|undefined>(
34-
undefined,
35-
)
34+
const[tokenToDelete,setTokenToDelete]=useState<
35+
APIKeyWithOwner|undefined
36+
>(undefined)
3637

3738
const{
3839
data:tokens,
@@ -60,15 +61,15 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
6061
isLoading={isFetching}
6162
hasLoaded={isFetched}
6263
getTokensError={getTokensError}
63-
onDelete={(id)=>{
64-
setTokenIdToDelete(id)
64+
onDelete={(token)=>{
65+
setTokenToDelete(token)
6566
}}
6667
/>
6768
</Section>
6869
<ConfirmDeleteDialog
6970
queryKey={queryKey}
70-
tokenId={tokenIdToDelete}
71-
setTokenId={setTokenIdToDelete}
71+
token={tokenToDelete}
72+
setToken={setTokenToDelete}
7273
/>
7374
</>
7475
)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export interface TokensPageViewProps {
2828
getTokensError?:Error|unknown
2929
isLoading:boolean
3030
hasLoaded:boolean
31-
onDelete:(id:string)=>void
31+
onDelete:(token:APIKeyWithOwner)=>void
3232
deleteTokenError?:Error|unknown
3333
}
3434

@@ -114,7 +114,7 @@ export const TokensPageView: FC<
114114
<spanstyle={{color:theme.palette.text.secondary}}>
115115
<IconButton
116116
onClick={()=>{
117-
onDelete(token.id)
117+
onDelete(token)
118118
}}
119119
size="medium"
120120
aria-label={t("tokenActions.deleteToken.delete")}
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import{Story}from"@storybook/react"
2+
import{MockToken}from"testHelpers/entities"
3+
import{
4+
ConfirmDeleteDialog,
5+
ConfirmDeleteDialogProps,
6+
}from"./ConfirmDeleteDialog"
7+
import{QueryClient,QueryClientProvider}from"@tanstack/react-query"
8+
9+
constqueryClient=newQueryClient({
10+
defaultOptions:{
11+
queries:{
12+
retry:false,
13+
cacheTime:0,
14+
refetchOnWindowFocus:false,
15+
},
16+
},
17+
})
18+
19+
exportdefault{
20+
title:"components/ConfirmDeleteDialog",
21+
component:ConfirmDeleteDialog,
22+
}
23+
24+
constTemplate:Story<ConfirmDeleteDialogProps>=(
25+
args:ConfirmDeleteDialogProps,
26+
)=>(
27+
<QueryClientProviderclient={queryClient}>
28+
<ConfirmDeleteDialog{...args}/>
29+
</QueryClientProvider>
30+
)
31+
32+
exportconstDeleteDialog=Template.bind({})
33+
DeleteDialog.args={
34+
queryKey:["tokens"],
35+
token:MockToken,
36+
setToken:()=>{
37+
returnnull
38+
},
39+
}

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,28 @@ import { useTranslation, Trans } from "react-i18next"
44
import{useDeleteToken}from"../hooks"
55
import{displaySuccess,displayError}from"components/GlobalSnackbar/utils"
66
import{getErrorMessage}from"api/errors"
7+
import{APIKeyWithOwner}from"api/typesGenerated"
78

8-
exportconstConfirmDeleteDialog:FC<{
9+
exportinterfaceConfirmDeleteDialogProps{
910
queryKey:(string|boolean)[]
10-
tokenId:string|undefined
11-
setTokenId:(arg:string|undefined)=>void
12-
}>=({ queryKey, tokenId, setTokenId})=>{
13-
const{ t}=useTranslation("tokensPage")
11+
token:APIKeyWithOwner|undefined
12+
setToken:(arg:APIKeyWithOwner|undefined)=>void
13+
}
1414

15+
exportconstConfirmDeleteDialog:FC<ConfirmDeleteDialogProps>=({
16+
queryKey,
17+
token,
18+
setToken,
19+
})=>{
20+
const{ t}=useTranslation("tokensPage")
21+
consttokenName=token?.token_name
1522
constdescription=(
1623
<Trans
1724
t={t}
1825
i18nKey="tokenActions.deleteToken.deleteCaption"
19-
values={{tokenId}}
26+
values={{tokenName}}
2027
>
21-
Are you sure you want to delete this token?
22-
<br/>
23-
<br/>
24-
{{ tokenId}}
28+
Are you sure you want to permanently delete token{{ tokenName}}?
2529
</Trans>
2630
)
2731

@@ -30,7 +34,7 @@ export const ConfirmDeleteDialog: FC<{
3034

3135
constonDeleteSuccess=()=>{
3236
displaySuccess(t("tokenActions.deleteToken.deleteSuccess"))
33-
setTokenId(undefined)
37+
setToken(undefined)
3438
}
3539

3640
constonDeleteError=(error:unknown)=>{
@@ -39,26 +43,27 @@ export const ConfirmDeleteDialog: FC<{
3943
t("tokenActions.deleteToken.deleteFailure"),
4044
)
4145
displayError(message)
42-
setTokenId(undefined)
46+
setToken(undefined)
4347
}
4448

4549
return(
4650
<ConfirmDialog
51+
type="delete"
4752
title={t("tokenActions.deleteToken.delete")}
4853
description={description}
49-
open={Boolean(tokenId)||isDeleting}
54+
open={Boolean(token)||isDeleting}
5055
confirmLoading={isDeleting}
5156
onConfirm={()=>{
52-
if(!tokenId){
57+
if(!token){
5358
return
5459
}
55-
deleteToken(tokenId,{
60+
deleteToken(token.id,{
5661
onError:onDeleteError,
5762
onSuccess:onDeleteSuccess,
5863
})
5964
}}
6065
onClose={()=>{
61-
setTokenId(undefined)
66+
setToken(undefined)
6267
}}
6368
/>
6469
)

‎site/src/testHelpers/entities.ts

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,22 @@ export const MockAPIKey: TypesGen.GenerateAPIKeyResponse = {
3737
key:"my-api-key",
3838
}
3939

40-
exportconstMockTokens:TypesGen.APIKey[]=[
41-
{
42-
id:"tBoVE3dqLl",
43-
user_id:"f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
44-
last_used:"0001-01-01T00:00:00Z",
45-
expires_at:"2023-01-15T20:10:45.637438Z",
46-
created_at:"2022-12-16T20:10:45.637452Z",
47-
updated_at:"2022-12-16T20:10:45.637452Z",
48-
login_type:"token",
49-
scope:"all",
50-
lifetime_seconds:2592000,
51-
token_name:"token-one",
52-
},
40+
exportconstMockToken:TypesGen.APIKeyWithOwner={
41+
id:"tBoVE3dqLl",
42+
user_id:"f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
43+
last_used:"0001-01-01T00:00:00Z",
44+
expires_at:"2023-01-15T20:10:45.637438Z",
45+
created_at:"2022-12-16T20:10:45.637452Z",
46+
updated_at:"2022-12-16T20:10:45.637452Z",
47+
login_type:"token",
48+
scope:"all",
49+
lifetime_seconds:2592000,
50+
token_name:"token-one",
51+
username:"admin",
52+
}
53+
54+
exportconstMockTokens:TypesGen.APIKeyWithOwner[]=[
55+
MockToken,
5356
{
5457
id:"tBoVE3dqLl",
5558
user_id:"f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
@@ -61,6 +64,7 @@ export const MockTokens: TypesGen.APIKey[] = [
6164
scope:"all",
6265
lifetime_seconds:2592000,
6366
token_name:"token-two",
67+
username:"admin",
6468
},
6569
]
6670

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp