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

Commitbb03df8

Browse files
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 parent0d30a1e commitbb03df8

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
constAppearanceSettingsPage=lazy(
80-
()=>import("./pages/DeploySettingsPage/AppearanceSettingsPage"),
80+
()=>
81+
import(
82+
"./pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPage"
83+
),
8184
)
8285
constUserAuthSettingsPage=lazy(
8386
()=>import("./pages/DeploySettingsPage/UserAuthSettingsPage"),
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+
importReact,{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+
constAppearanceSettingsPage:React.FC=()=>{
15+
constxServices=useContext(XServiceContext)
16+
const[appearanceXService,appearanceSend]=useActor(
17+
xServices.appearanceXService,
18+
)
19+
const[entitlementsState]=useActor(xServices.entitlementsXService)
20+
constappearance=appearanceXService.context.appearance
21+
22+
constisEntitled=
23+
entitlementsState.context.entitlements.features[FeatureNames.Appearance]
24+
.entitlement!=="not_entitled"
25+
26+
constupdateAppearance=(
27+
newConfig:Partial<AppearanceConfig>,
28+
preview:boolean,
29+
)=>{
30+
constnewAppearance={
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+
exportdefaultAppearanceSettingsPage
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+
exportdefault{
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+
returnundefined
27+
},
28+
},
29+
},
30+
}asComponentMeta<typeofAppearanceSettingsPageView>
31+
32+
constTemplate:Story<AppearanceSettingsPageViewProps>=(args)=>(
33+
<AppearanceSettingsPageView{...args}/>
34+
)
35+
exportconstPage=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-
importButtonfrom"@material-ui/core/Button"
2-
importFormControlLabelfrom"@material-ui/core/FormControlLabel"
3-
importFormHelperTextfrom"@material-ui/core/FormHelperText"
4-
importInputAdornmentfrom"@material-ui/core/InputAdornment"
5-
import{useTheme}from"@material-ui/core/styles"
6-
importmakeStylesfrom"@material-ui/core/styles/makeStyles"
7-
importSwitchfrom"@material-ui/core/Switch"
8-
importTextFieldfrom"@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+
importInputAdornmentfrom"@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-
importReact,{useContext,useState}from"react"
11+
import{getFormHelpers}from"util/formUtils"
12+
importButtonfrom"@material-ui/core/Button"
13+
importFormControlLabelfrom"@material-ui/core/FormControlLabel"
14+
importFormHelperTextfrom"@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-
constAppearanceSettingsPage:React.FC=()=>{
35-
constxServices=useContext(XServiceContext)
36-
const[appearanceXService,appearanceSend]=useActor(
37-
xServices.appearanceXService,
38-
)
39-
const[entitlementsState]=useActor(xServices.entitlementsXService)
40-
constappearance=appearanceXService.context.appearance
41-
conststyles=useStyles()
42-
43-
constisEntitled=
44-
entitlementsState.context.entitlements.features[FeatureNames.Appearance]
45-
.entitlement!=="not_entitled"
17+
importmakeStylesfrom"@material-ui/core/styles/makeStyles"
18+
importSwitchfrom"@material-ui/core/Switch"
19+
importTextFieldfrom"@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-
constupdateAppearance=(
25+
exporttypeAppearanceSettingsPageViewProps={
26+
appearance:AppearanceConfig
27+
isEntitled:boolean
28+
updateAppearance:(
4829
newConfig:Partial<AppearanceConfig>,
4930
preview:boolean,
50-
)=>{
51-
constnewAppearance={
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+
exportconstAppearanceSettingsPageView=({
34+
appearance,
35+
isEntitled,
36+
updateAppearance,
37+
}:AppearanceSettingsPageViewProps):JSX.Element=>{
38+
conststyles=useStyles()
39+
consttheme=useTheme()
40+
const[t]=useTranslation("appearanceSettings")
6841
constlogoForm=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-
consttheme=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-
exportdefaultAppearanceSettingsPage

0 commit comments

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