Skip to content

Commit 810a3dd

Browse files
f0sself0ssel
committed
add storybook
1 parent fe220f1 commit 810a3dd

File tree

4 files changed

+117
-21
lines changed

4 files changed

+117
-21
lines changed

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ import { tokensMachine } from "xServices/tokens/tokensXService"
55
import { useMachine } from "@xstate/react"
66
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
77
import { Typography } from "components/Typography/Typography"
8+
import makeStyles from "@material-ui/core/styles/makeStyles"
89

910
export const Language = {
1011
title: "Tokens",
11-
description: (
12-
<p>
13-
Tokens are used to authenticate with the Coder API and can be created with
14-
the Coder CLI.
15-
</p>
16-
),
12+
descriptionPrefix:
13+
"Tokens are used to authenticate with the Coder API. You can create a token with the Coder CLI using the ",
1714
deleteTitle: "Delete Token",
1815
deleteDescription: "Are you sure you want to delete this token?",
1916
}
@@ -23,6 +20,14 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
2320
const isLoading = tokensState.matches("gettingTokens")
2421
const hasLoaded = tokensState.matches("loaded")
2522
const { getTokensError, tokens, deleteTokenId } = tokensState.context
23+
const styles = useStyles()
24+
const description = (
25+
<p>
26+
{Language.descriptionPrefix}{" "}
27+
<code className={styles.code}>coder tokens create</code> command.
28+
</p>
29+
)
30+
2631
const content = (
2732
<Typography>
2833
{Language.deleteDescription}
@@ -34,11 +39,7 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
3439

3540
return (
3641
<>
37-
<Section
38-
title={Language.title}
39-
description={Language.description}
40-
layout="fluid"
41-
>
42+
<Section title={Language.title} description={description} layout="fluid">
4243
<TokensPageView
4344
tokens={tokens}
4445
isLoading={isLoading}
@@ -66,4 +67,14 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
6667
)
6768
}
6869

70+
const useStyles = makeStyles((theme) => ({
71+
code: {
72+
background: theme.palette.divider,
73+
fontSize: 12,
74+
padding: "2px 4px",
75+
color: theme.palette.text.primary,
76+
borderRadius: 2,
77+
},
78+
}))
79+
6980
export default TokensPage

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Story } from "@storybook/react"
2+
import { makeMockApiError } from "testHelpers/entities"
3+
import { TokensPageView, TokensPageViewProps } from "./TokensPageView"
4+
5+
export default {
6+
title: "components/TokensPageView",
7+
component: TokensPageView,
8+
argTypes: {
9+
onRegenerateClick: { action: "Submit" },
10+
},
11+
}
12+
13+
const Template: Story<TokensPageViewProps> = (args: TokensPageViewProps) => (
14+
<TokensPageView {...args} />
15+
)
16+
17+
export const Example = Template.bind({})
18+
Example.args = {
19+
isLoading: false,
20+
hasLoaded: true,
21+
tokens: [
22+
{
23+
id: "tBoVE3dqLl",
24+
user_id: "f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
25+
last_used: "0001-01-01T00:00:00Z",
26+
expires_at: "2023-01-15T20:10:45.637438Z",
27+
created_at: "2022-12-16T20:10:45.637452Z",
28+
updated_at: "2022-12-16T20:10:45.637452Z",
29+
login_type: "token",
30+
scope: "all",
31+
lifetime_seconds: 2592000,
32+
},
33+
{
34+
id: "tBoVE3dqLl",
35+
user_id: "f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
36+
last_used: "0001-01-01T00:00:00Z",
37+
expires_at: "2023-01-15T20:10:45.637438Z",
38+
created_at: "2022-12-16T20:10:45.637452Z",
39+
updated_at: "2022-12-16T20:10:45.637452Z",
40+
login_type: "token",
41+
scope: "all",
42+
lifetime_seconds: 2592000,
43+
},
44+
],
45+
onDelete: () => {
46+
return Promise.resolve()
47+
},
48+
}
49+
50+
export const Loading = Template.bind({})
51+
Loading.args = {
52+
...Example.args,
53+
isLoading: true,
54+
hasLoaded: false,
55+
}
56+
57+
export const Empty = Template.bind({})
58+
Empty.args = {
59+
...Example.args,
60+
tokens: [],
61+
}
62+
63+
export const WithGetTokensError = Template.bind({})
64+
WithGetTokensError.args = {
65+
...Example.args,
66+
hasLoaded: false,
67+
getTokensError: makeMockApiError({
68+
message: "Failed to get tokens.",
69+
}),
70+
}
71+
72+
export const WithDeleteTokenError = Template.bind({})
73+
WithDeleteTokenError.args = {
74+
...Example.args,
75+
hasLoaded: false,
76+
deleteTokenError: makeMockApiError({
77+
message: "Failed to delete token.",
78+
}),
79+
}

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@ import TableHead from "@material-ui/core/TableHead"
77
import TableRow from "@material-ui/core/TableRow"
88
import { APIKey } from "api/typesGenerated"
99
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
10-
import { Maybe } from "components/Conditionals/Maybe"
1110
import { Stack } from "components/Stack/Stack"
1211
import { TableEmpty } from "components/TableEmpty/TableEmpty"
1312
import { TableLoader } from "components/TableLoader/TableLoader"
1413
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline"
1514
import dayjs from "dayjs"
1615
import { FC } from "react"
1716
import { AlertBanner } from "components/AlertBanner/AlertBanner"
18-
1917
import IconButton from "@material-ui/core/IconButton/IconButton"
2018

2119
export const Language = {
@@ -33,18 +31,29 @@ export interface TokensPageViewProps {
3331
isLoading: boolean
3432
hasLoaded: boolean
3533
onDelete: (id: string) => void
34+
deleteTokenError?: Error | unknown
3635
}
3736

3837
export const TokensPageView: FC<
3938
React.PropsWithChildren<TokensPageViewProps>
40-
> = ({ tokens, getTokensError, isLoading, hasLoaded, onDelete }) => {
39+
> = ({
40+
tokens,
41+
getTokensError,
42+
isLoading,
43+
hasLoaded,
44+
onDelete,
45+
deleteTokenError,
46+
}) => {
4147
const theme = useTheme()
4248

4349
return (
4450
<Stack>
4551
{Boolean(getTokensError) && (
4652
<AlertBanner severity="error" error={getTokensError} />
4753
)}
54+
{Boolean(deleteTokenError) && (
55+
<AlertBanner severity="error" error={deleteTokenError} />
56+
)}
4857
<TableContainer>
4958
<Table>
5059
<TableHead>
@@ -57,11 +66,10 @@ export const TokensPageView: FC<
5766
</TableRow>
5867
</TableHead>
5968
<TableBody>
60-
<Maybe condition={isLoading}>
61-
<TableLoader />
62-
</Maybe>
63-
6469
<ChooseOne>
70+
<Cond condition={isLoading}>
71+
<TableLoader />
72+
</Cond>
6573
<Cond condition={hasLoaded && tokens?.length === 0}>
6674
<TableEmpty message={Language.emptyMessage} />
6775
</Cond>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,7 @@ export const tokensMachine = createMachine(
132132
deleteTokenError: (_) => undefined,
133133
}),
134134
notifySuccessTokenDeleted: () => {
135-
displaySuccess(
136-
Language.deleteSuccess,
137-
)
135+
displaySuccess(Language.deleteSuccess)
138136
},
139137
},
140138
},

0 commit comments

Comments
 (0)