Skip to content

Commit 540f718

Browse files
jonathanawesomejonathanawesome
authored
Console 1509 change close to discard in create token flow (#7249)
1 parent 8867874 commit 540f718

File tree

5 files changed

+78
-99
lines changed

5 files changed

+78
-99
lines changed

‎packages/web/app/src/components/common/discard-access-token-draft.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
AlertDialog,
3+
AlertDialogAction,
4+
AlertDialogCancel,
5+
AlertDialogContent,
6+
AlertDialogDescription,
7+
AlertDialogFooter,
8+
AlertDialogHeader,
9+
AlertDialogTitle,
10+
} from '@/components/ui/alert-dialog';
11+
12+
type DiscardAccessTokenDraftProps = {
13+
onContinue: () => void;
14+
onDiscard: () => void;
15+
};
16+
17+
export const DiscardAccessTokenDraft = ({
18+
onContinue,
19+
onDiscard,
20+
}: DiscardAccessTokenDraftProps) => {
21+
return (
22+
<AlertDialog open>
23+
<AlertDialogContent>
24+
<AlertDialogHeader>
25+
<AlertDialogTitle>Do you want to discard the access token?</AlertDialogTitle>
26+
<AlertDialogDescription>
27+
If you discard now, any draft information will be lost.
28+
</AlertDialogDescription>
29+
</AlertDialogHeader>
30+
<AlertDialogFooter>
31+
<AlertDialogCancel onClick={() => onContinue()}>
32+
Continue creating token
33+
</AlertDialogCancel>
34+
<AlertDialogAction onClick={() => onDiscard()}>Discard draft token</AlertDialogAction>
35+
</AlertDialogFooter>
36+
</AlertDialogContent>
37+
</AlertDialog>
38+
);
39+
};

‎packages/web/app/src/components/organization/settings/access-tokens/access-tokens-sub-page.tsx‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useState } from 'react';
22
import { useQuery } from 'urql';
3-
import * as AlertDialog from '@/components/ui/alert-dialog';
3+
import { DiscardAccessTokenDraft } from '@/components/common/discard-access-token-draft';
44
import { Button } from '@/components/ui/button';
55
import { CardDescription } from '@/components/ui/card';
66
import { DocsLink } from '@/components/ui/docs-note';
77
import { SubPageLayout, SubPageLayoutHeader } from '@/components/ui/page-content-layout';
8-
import * as Sheet from '@/components/ui/sheet';
8+
import { Sheet, SheetTrigger } from '@/components/ui/sheet';
99
import { graphql } from '@/gql';
1010
import { AccessTokensTable } from './access-tokens-table';
1111
import { CreateAccessTokenSheetContent } from './create-access-token-sheet-content';
@@ -73,7 +73,7 @@ export function AccessTokensSubPage(props: AccessTokensSubPageProps): React.Reac
7373
}
7474
/>
7575
<div className="my-3.5 space-y-4" data-cy="organization-settings-access-tokens">
76-
<Sheet.Sheet
76+
<Sheet
7777
open={createAccessTokenState !== CreateAccessTokenState.closed}
7878
onOpenChange={isOpen => {
7979
if (isOpen === false) {
@@ -83,11 +83,11 @@ export function AccessTokensSubPage(props: AccessTokensSubPageProps): React.Reac
8383
setCreateAccessTokenState(CreateAccessTokenState.open);
8484
}}
8585
>
86-
<Sheet.SheetTrigger asChild>
86+
<SheetTrigger asChild>
8787
<Button data-cy="organization-settings-access-tokens-create-new">
8888
Create new access token
8989
</Button>
90-
</Sheet.SheetTrigger>
90+
</SheetTrigger>
9191
{createAccessTokenState !== CreateAccessTokenState.closed && query.data?.organization && (
9292
<>
9393
<CreateAccessTokenSheetContent
@@ -99,32 +99,12 @@ export function AccessTokensSubPage(props: AccessTokensSubPageProps): React.Reac
9999
/>
100100
</>
101101
)}
102-
</Sheet.Sheet>
102+
</Sheet>
103103
{createAccessTokenState === CreateAccessTokenState.closing && (
104-
<AlertDialog.AlertDialog open>
105-
<AlertDialog.AlertDialogContent>
106-
<AlertDialog.AlertDialogHeader>
107-
<AlertDialog.AlertDialogTitle>
108-
Do you want to discard the access token?
109-
</AlertDialog.AlertDialogTitle>
110-
<AlertDialog.AlertDialogDescription>
111-
If you cancel now, any draft information will be lost.
112-
</AlertDialog.AlertDialogDescription>
113-
</AlertDialog.AlertDialogHeader>
114-
<AlertDialog.AlertDialogFooter>
115-
<AlertDialog.AlertDialogCancel
116-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
117-
>
118-
Cancel
119-
</AlertDialog.AlertDialogCancel>
120-
<AlertDialog.AlertDialogAction
121-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
122-
>
123-
Close
124-
</AlertDialog.AlertDialogAction>
125-
</AlertDialog.AlertDialogFooter>
126-
</AlertDialog.AlertDialogContent>
127-
</AlertDialog.AlertDialog>
104+
<DiscardAccessTokenDraft
105+
onContinue={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
106+
onDiscard={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
107+
/>
128108
)}
129109
{query.data?.organization && (
130110
<AccessTokensTable

‎packages/web/app/src/components/organization/settings/personal-access-tokens/personal-access-tokens-sub-page.tsx‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useState } from 'react';
22
import { useQuery } from 'urql';
3-
import * as AlertDialog from '@/components/ui/alert-dialog';
3+
import { DiscardAccessTokenDraft } from '@/components/common/discard-access-token-draft';
44
import { Button } from '@/components/ui/button';
55
import { CardDescription } from '@/components/ui/card';
66
import { DocsLink } from '@/components/ui/docs-note';
77
import { SubPageLayout, SubPageLayoutHeader } from '@/components/ui/page-content-layout';
8-
import * as Sheet from '@/components/ui/sheet';
8+
import { Sheet, SheetTrigger } from '@/components/ui/sheet';
99
import { graphql } from '@/gql';
1010
import { CreateAccessTokenState } from '../access-tokens/access-tokens-sub-page';
1111
import { CreatePersonalAccessTokenSheetContent } from './create-personal-access-token-sheet-content';
@@ -76,7 +76,7 @@ export function PersonalAccessTokensSubPage(
7676
}
7777
/>
7878
<div className="my-3.5 space-y-4" data-cy="organization-settings-personal-access-tokens">
79-
<Sheet.Sheet
79+
<Sheet
8080
open={createAccessTokenState !== CreateAccessTokenState.closed}
8181
onOpenChange={isOpen => {
8282
if (isOpen === false) {
@@ -86,11 +86,11 @@ export function PersonalAccessTokensSubPage(
8686
setCreateAccessTokenState(CreateAccessTokenState.open);
8787
}}
8888
>
89-
<Sheet.SheetTrigger asChild>
89+
<SheetTrigger asChild>
9090
<Button data-cy="organization-settings-access-tokens-create-new">
9191
Create new access token
9292
</Button>
93-
</Sheet.SheetTrigger>
93+
</SheetTrigger>
9494
{createAccessTokenState !== CreateAccessTokenState.closed &&
9595
query.data?.organization?.me && (
9696
<CreatePersonalAccessTokenSheetContent
@@ -101,32 +101,12 @@ export function PersonalAccessTokensSubPage(
101101
}}
102102
/>
103103
)}
104-
</Sheet.Sheet>
104+
</Sheet>
105105
{createAccessTokenState === CreateAccessTokenState.closing && (
106-
<AlertDialog.AlertDialog open>
107-
<AlertDialog.AlertDialogContent>
108-
<AlertDialog.AlertDialogHeader>
109-
<AlertDialog.AlertDialogTitle>
110-
Do you want to discard the access token?
111-
</AlertDialog.AlertDialogTitle>
112-
<AlertDialog.AlertDialogDescription>
113-
If you cancel now, any draft information will be lost.
114-
</AlertDialog.AlertDialogDescription>
115-
</AlertDialog.AlertDialogHeader>
116-
<AlertDialog.AlertDialogFooter>
117-
<AlertDialog.AlertDialogCancel
118-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
119-
>
120-
Cancel
121-
</AlertDialog.AlertDialogCancel>
122-
<AlertDialog.AlertDialogAction
123-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
124-
>
125-
Close
126-
</AlertDialog.AlertDialogAction>
127-
</AlertDialog.AlertDialogFooter>
128-
</AlertDialog.AlertDialogContent>
129-
</AlertDialog.AlertDialog>
106+
<DiscardAccessTokenDraft
107+
onContinue={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
108+
onDiscard={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
109+
/>
130110
)}
131111
{query.data?.organization?.me?.accessTokens && (
132112
<PersonalAccessTokensTable

‎packages/web/app/src/components/project/settings/access-tokens/project-access-tokens-sub-page.tsx‎

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useState } from 'react';
22
import { useQuery } from 'urql';
3-
import * as AlertDialog from '@/components/ui/alert-dialog';
3+
import { DiscardAccessTokenDraft } from '@/components/common/discard-access-token-draft';
44
import { Button } from '@/components/ui/button';
55
import { CardDescription } from '@/components/ui/card';
66
import { DocsLink } from '@/components/ui/docs-note';
77
import { SubPageLayout, SubPageLayoutHeader } from '@/components/ui/page-content-layout';
8-
import * as Sheet from '@/components/ui/sheet';
8+
import { Sheet, SheetTrigger } from '@/components/ui/sheet';
99
import { graphql } from '@/gql';
1010
import { CreateAccessTokenState } from '../../../organization/settings/access-tokens/access-tokens-sub-page';
1111
import { CreateProjectAccessTokenSheetContent } from './create-project-access-token-sheet-content';
@@ -74,7 +74,7 @@ export function ProjectAccessTokensSubPage(
7474
}
7575
/>
7676
<div className="my-3.5 space-y-4" data-cy="organization-settings-personal-access-tokens">
77-
<Sheet.Sheet
77+
<Sheet
7878
open={createAccessTokenState !== CreateAccessTokenState.closed}
7979
onOpenChange={isOpen => {
8080
if (isOpen === false) {
@@ -84,11 +84,11 @@ export function ProjectAccessTokensSubPage(
8484
setCreateAccessTokenState(CreateAccessTokenState.open);
8585
}}
8686
>
87-
<Sheet.SheetTrigger asChild>
87+
<SheetTrigger asChild>
8888
<Button data-cy="organization-settings-access-tokens-create-new">
8989
Create new access token
9090
</Button>
91-
</Sheet.SheetTrigger>
91+
</SheetTrigger>
9292
{createAccessTokenState !== CreateAccessTokenState.closed &&
9393
query.data?.organization?.project && (
9494
<CreateProjectAccessTokenSheetContent
@@ -100,32 +100,12 @@ export function ProjectAccessTokensSubPage(
100100
}}
101101
/>
102102
)}
103-
</Sheet.Sheet>
103+
</Sheet>
104104
{createAccessTokenState === CreateAccessTokenState.closing && (
105-
<AlertDialog.AlertDialog open>
106-
<AlertDialog.AlertDialogContent>
107-
<AlertDialog.AlertDialogHeader>
108-
<AlertDialog.AlertDialogTitle>
109-
Do you want to discard the access token?
110-
</AlertDialog.AlertDialogTitle>
111-
<AlertDialog.AlertDialogDescription>
112-
If you cancel now, any draft information will be lost.
113-
</AlertDialog.AlertDialogDescription>
114-
</AlertDialog.AlertDialogHeader>
115-
<AlertDialog.AlertDialogFooter>
116-
<AlertDialog.AlertDialogCancel
117-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
118-
>
119-
Cancel
120-
</AlertDialog.AlertDialogCancel>
121-
<AlertDialog.AlertDialogAction
122-
onClick={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
123-
>
124-
Close
125-
</AlertDialog.AlertDialogAction>
126-
</AlertDialog.AlertDialogFooter>
127-
</AlertDialog.AlertDialogContent>
128-
</AlertDialog.AlertDialog>
105+
<DiscardAccessTokenDraft
106+
onContinue={() => setCreateAccessTokenState(CreateAccessTokenState.open)}
107+
onDiscard={() => setCreateAccessTokenState(CreateAccessTokenState.closed)}
108+
/>
129109
)}
130110
{query.data?.organization?.project?.accessTokens && (
131111
<ProjectAccessTokensTable

0 commit comments

Comments
 (0)