Skip to content

Commit bb03df8

Browse files
jsjoeiojsjoeio
authored
feat: add storybook for /deployment/appearance page (#5582)
* wip * wip: move appearancesettingspage * refactor: separate page and view ApperanceSettings * refactor: create storybook from AppearanceSettingsView * fixup: formatting and types
1 parent 0d30a1e commit bb03df8

File tree

4 files changed

+129
-66
lines changed

4 files changed

+129
-66
lines changed

‎site/src/AppRouter.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,10 @@ const SecuritySettingsPage = lazy(
7777
() => import("./pages/DeploySettingsPage/SecuritySettingsPage"),
7878
)
7979
const AppearanceSettingsPage = lazy(
80-
() => import("./pages/DeploySettingsPage/AppearanceSettingsPage"),
80+
() =>
81+
import(
82+
"./pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage"
83+
),
8184
)
8285
const UserAuthSettingsPage = lazy(
8386
() => import("./pages/DeploySettingsPage/UserAuthSettingsPage"),

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { useActor } from "@xstate/react"
2+
import { FeatureNames } from "api/types"
3+
import { AppearanceConfig } from "api/typesGenerated"
4+
import React, { useContext } from "react"
5+
import { Helmet } from "react-helmet-async"
6+
import { pageTitle } from "util/page"
7+
import { XServiceContext } from "xServices/StateContext"
8+
import { AppearanceSettingsPageView } from "./AppearanceSettingsPageView"
9+
10+
// ServiceBanner is unlike the other Deployment Settings pages because it
11+
// implements a form, whereas the others are read-only. We make this
12+
// exception because the Service Banner is visual, and configuring it from
13+
// the command line would be a significantly worse user experience.
14+
const AppearanceSettingsPage: React.FC = () => {
15+
const xServices = useContext(XServiceContext)
16+
const [appearanceXService, appearanceSend] = useActor(
17+
xServices.appearanceXService,
18+
)
19+
const [entitlementsState] = useActor(xServices.entitlementsXService)
20+
const appearance = appearanceXService.context.appearance
21+
22+
const isEntitled =
23+
entitlementsState.context.entitlements.features[FeatureNames.Appearance]
24+
.entitlement !== "not_entitled"
25+
26+
const updateAppearance = (
27+
newConfig: Partial<AppearanceConfig>,
28+
preview: boolean,
29+
) => {
30+
const newAppearance = {
31+
...appearance,
32+
...newConfig,
33+
}
34+
if (preview) {
35+
appearanceSend({
36+
type: "SET_PREVIEW_APPEARANCE",
37+
appearance: newAppearance,
38+
})
39+
return
40+
}
41+
appearanceSend({
42+
type: "SET_APPEARANCE",
43+
appearance: newAppearance,
44+
})
45+
}
46+
47+
return (
48+
<>
49+
<Helmet>
50+
<title>{pageTitle("Appearance Settings")}</title>
51+
</Helmet>
52+
53+
<AppearanceSettingsPageView
54+
appearance={appearance}
55+
isEntitled={isEntitled}
56+
updateAppearance={updateAppearance}
57+
/>
58+
</>
59+
)
60+
}
61+
62+
export default AppearanceSettingsPage

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.stories.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ComponentMeta, Story } from "@storybook/react"
2+
import {
3+
AppearanceSettingsPageView,
4+
AppearanceSettingsPageViewProps,
5+
} from "./AppearanceSettingsPageView"
6+
7+
export default {
8+
title: "pages/AppearanceSettingsPageView",
9+
component: AppearanceSettingsPageView,
10+
argTypes: {
11+
appearance: {
12+
defaultValue: {
13+
logo_url: "https://github.com/coder.png",
14+
service_banner: {
15+
enabled: true,
16+
message: "hello world",
17+
background_color: "white",
18+
},
19+
},
20+
},
21+
isEntitled: {
22+
defaultValue: false,
23+
},
24+
updateAppearance: {
25+
defaultValue: () => {
26+
return undefined
27+
},
28+
},
29+
},
30+
} as ComponentMeta<typeof AppearanceSettingsPageView>
31+
32+
const Template: Story<AppearanceSettingsPageViewProps> = (args) => (
33+
<AppearanceSettingsPageView {...args} />
34+
)
35+
export const Page = Template.bind({})

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage.tsx renamed to ‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 28 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,43 @@
1-
import Button from "@material-ui/core/Button"
2-
import FormControlLabel from "@material-ui/core/FormControlLabel"
3-
import FormHelperText from "@material-ui/core/FormHelperText"
4-
import InputAdornment from "@material-ui/core/InputAdornment"
5-
import { useTheme } from "@material-ui/core/styles"
6-
import makeStyles from "@material-ui/core/styles/makeStyles"
7-
import Switch from "@material-ui/core/Switch"
8-
import TextField from "@material-ui/core/TextField"
9-
import { useActor } from "@xstate/react"
10-
import { FeatureNames } from "api/types"
11-
import { AppearanceConfig } from "api/typesGenerated"
1+
import { useState } from "react"
2+
import { Header } from "components/DeploySettingsLayout/Header"
123
import {
134
Badges,
145
DisabledBadge,
156
EnterpriseBadge,
167
EntitledBadge,
178
} from "components/DeploySettingsLayout/Badges"
9+
import InputAdornment from "@material-ui/core/InputAdornment"
1810
import { Fieldset } from "components/DeploySettingsLayout/Fieldset"
19-
import { Header } from "components/DeploySettingsLayout/Header"
20-
import { Stack } from "components/Stack/Stack"
21-
import { useFormik } from "formik"
22-
import React, { useContext, useState } from "react"
11+
import { getFormHelpers } from "util/formUtils"
12+
import Button from "@material-ui/core/Button"
13+
import FormControlLabel from "@material-ui/core/FormControlLabel"
14+
import FormHelperText from "@material-ui/core/FormHelperText"
2315
import { BlockPicker } from "react-color"
24-
import { Helmet } from "react-helmet-async"
2516
import { useTranslation } from "react-i18next"
26-
import { getFormHelpers } from "util/formUtils"
27-
import { pageTitle } from "util/page"
28-
import { XServiceContext } from "xServices/StateContext"
29-
30-
// ServiceBanner is unlike the other Deployment Settings pages because it
31-
// implements a form, whereas the others are read-only. We make this
32-
// exception because the Service Banner is visual, and configuring it from
33-
// the command line would be a significantly worse user experience.
34-
const AppearanceSettingsPage: React.FC = () => {
35-
const xServices = useContext(XServiceContext)
36-
const [appearanceXService, appearanceSend] = useActor(
37-
xServices.appearanceXService,
38-
)
39-
const [entitlementsState] = useActor(xServices.entitlementsXService)
40-
const appearance = appearanceXService.context.appearance
41-
const styles = useStyles()
42-
43-
const isEntitled =
44-
entitlementsState.context.entitlements.features[FeatureNames.Appearance]
45-
.entitlement !== "not_entitled"
17+
import makeStyles from "@material-ui/core/styles/makeStyles"
18+
import Switch from "@material-ui/core/Switch"
19+
import TextField from "@material-ui/core/TextField"
20+
import { AppearanceConfig } from "api/typesGenerated"
21+
import { Stack } from "components/Stack/Stack"
22+
import { useFormik } from "formik"
23+
import { useTheme } from "@material-ui/core/styles"
4624

47-
const updateAppearance = (
25+
export type AppearanceSettingsPageViewProps = {
26+
appearance: AppearanceConfig
27+
isEntitled: boolean
28+
updateAppearance: (
4829
newConfig: Partial<AppearanceConfig>,
4930
preview: boolean,
50-
) => {
51-
const newAppearance = {
52-
...appearance,
53-
...newConfig,
54-
}
55-
if (preview) {
56-
appearanceSend({
57-
type: "SET_PREVIEW_APPEARANCE",
58-
appearance: newAppearance,
59-
})
60-
return
61-
}
62-
appearanceSend({
63-
type: "SET_APPEARANCE",
64-
appearance: newAppearance,
65-
})
66-
}
67-
31+
) => void
32+
}
33+
export const AppearanceSettingsPageView = ({
34+
appearance,
35+
isEntitled,
36+
updateAppearance,
37+
}: AppearanceSettingsPageViewProps): JSX.Element => {
38+
const styles = useStyles()
39+
const theme = useTheme()
40+
const [t] = useTranslation("appearanceSettings")
6841
const logoForm = useFormik<{
6942
logo_url: string
7043
}>({
@@ -93,16 +66,8 @@ const AppearanceSettingsPage: React.FC = () => {
9366
const [backgroundColor, setBackgroundColor] = useState(
9467
serviceBannerForm.values.background_color,
9568
)
96-
97-
const theme = useTheme()
98-
const [t] = useTranslation("appearanceSettings")
99-
10069
return (
10170
<>
102-
<Helmet>
103-
<title>{pageTitle("Appearance Settings")}</title>
104-
</Helmet>
105-
10671
<Header
10772
title="Appearance"
10873
description="Customize the look and feel of your Coder deployment."
@@ -280,5 +245,3 @@ const useStyles = makeStyles((theme) => ({
280245
},
281246
},
282247
}))
283-
284-
export default AppearanceSettingsPage

0 commit comments

Comments
 (0)