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

Commitf76e7b1

Browse files
refactor: Refactor create workspace page (#4862)
1 parent86fc3e0 commitf76e7b1

File tree

12 files changed

+382
-135
lines changed

12 files changed

+382
-135
lines changed

‎site/src/components/FormCloseButton/FormCloseButton.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ const useStyles = makeStyles((theme) => ({
4747
"&:hover":{
4848
opacity:1,
4949
},
50+
51+
[theme.breakpoints.down("sm")]:{
52+
top:theme.spacing(1),
53+
right:theme.spacing(1),
54+
},
5055
},
5156
label:{
5257
position:"absolute",
Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importButtonfrom"@material-ui/core/Button"
22
import{makeStyles}from"@material-ui/core/styles"
3+
import{ClassNameMap}from"@material-ui/core/styles/withStyles"
34
import{FC}from"react"
45
import{LoadingButton}from"../LoadingButton/LoadingButton"
56

@@ -8,36 +9,22 @@ export const Language = {
89
defaultSubmitLabel:"Submit",
910
}
1011

12+
typeFormFooterStyles=ClassNameMap<"footer"|"button">
1113
exportinterfaceFormFooterProps{
1214
onCancel:()=>void
1315
isLoading:boolean
16+
styles?:FormFooterStyles
1417
submitLabel?:string
1518
submitDisabled?:boolean
1619
}
1720

18-
constuseStyles=makeStyles((theme)=>({
19-
footer:{
20-
display:"flex",
21-
flex:"0",
22-
// The first button is the submit so it is the first element to be focused
23-
// on tab so we use row-reverse to display it on the right
24-
flexDirection:"row-reverse",
25-
gap:theme.spacing(1.5),
26-
alignItems:"center",
27-
marginTop:theme.spacing(3),
28-
},
29-
button:{
30-
width:"100%",
31-
},
32-
}))
33-
34-
exportconstFormFooter:FC<React.PropsWithChildren<FormFooterProps>>=({
21+
exportconstFormFooter:FC<FormFooterProps>=({
3522
onCancel,
3623
isLoading,
37-
submitLabel=Language.defaultSubmitLabel,
3824
submitDisabled,
25+
submitLabel=Language.defaultSubmitLabel,
26+
styles=defaultStyles(),
3927
})=>{
40-
conststyles=useStyles()
4128
return(
4229
<divclassName={styles.footer}>
4330
<LoadingButton
@@ -63,3 +50,19 @@ export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
6350
</div>
6451
)
6552
}
53+
54+
constdefaultStyles=makeStyles((theme)=>({
55+
footer:{
56+
display:"flex",
57+
flex:"0",
58+
// The first button is the submit so it is the first element to be focused
59+
// on tab so we use row-reverse to display it on the right
60+
flexDirection:"row-reverse",
61+
gap:theme.spacing(1.5),
62+
alignItems:"center",
63+
marginTop:theme.spacing(3),
64+
},
65+
button:{
66+
width:"100%",
67+
},
68+
}))
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import{FormCloseButton}from"../FormCloseButton/FormCloseButton"
2+
import{makeStyles}from"@material-ui/core/styles"
3+
importTypographyfrom"@material-ui/core/Typography"
4+
import{Margins}from"components/Margins/Margins"
5+
import{FC,ReactNode}from"react"
6+
7+
exportinterfaceFormTitleProps{
8+
title:string
9+
detail?:ReactNode
10+
}
11+
12+
exportinterfaceFullPageHorizontalFormProps{
13+
title:string
14+
detail?:ReactNode
15+
onCancel:()=>void
16+
}
17+
18+
exportconstFullPageHorizontalForm:FC<
19+
React.PropsWithChildren<FullPageHorizontalFormProps>
20+
>=({ title, detail, onCancel, children})=>{
21+
conststyles=useStyles()
22+
23+
return(
24+
<>
25+
<headerclassName={styles.title}>
26+
<Marginssize="medium">
27+
<Typographyvariant="h3">{title}</Typography>
28+
{detail&&<Typographyvariant="caption">{detail}</Typography>}
29+
</Margins>
30+
</header>
31+
32+
<FormCloseButtononClose={onCancel}/>
33+
34+
<mainclassName={styles.main}>
35+
<Marginssize="medium">{children}</Margins>
36+
</main>
37+
</>
38+
)
39+
}
40+
41+
constuseStyles=makeStyles((theme)=>({
42+
title:{
43+
paddingTop:theme.spacing(6),
44+
paddingBottom:theme.spacing(8),
45+
46+
[theme.breakpoints.down("sm")]:{
47+
paddingTop:theme.spacing(4),
48+
paddingBottom:theme.spacing(4),
49+
},
50+
},
51+
52+
main:{
53+
paddingBottom:theme.spacing(10),
54+
},
55+
}))

‎site/src/components/Margins/Margins.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import{makeStyles}from"@material-ui/core/styles"
22
import{FC}from"react"
3-
import{containerWidth,sidePadding}from"../../theme/constants"
3+
import{
4+
containerWidth,
5+
containerWidthMedium,
6+
sidePadding,
7+
}from"../../theme/constants"
48

59
typeSize="regular"|"medium"|"small"
610

711
constwidthBySize:Record<Size,number>={
812
regular:containerWidth,
9-
medium:containerWidth/2,
13+
medium:containerWidthMedium,
1014
small:containerWidth/3,
1115
}
1216

‎site/src/components/ParameterInput/ParameterInput.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import TextField from "@material-ui/core/TextField"
77
import{Stack}from"components/Stack/Stack"
88
import{FC}from"react"
99
import{ParameterSchema}from"../../api/typesGenerated"
10-
import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
1110

1211
constisBoolean=(schema:ParameterSchema)=>{
1312
returnschema.validation_value_type==="bool"
@@ -16,12 +15,18 @@ const isBoolean = (schema: ParameterSchema) => {
1615
constParameterLabel:React.FC<{schema:ParameterSchema}>=({ schema})=>{
1716
conststyles=useStyles()
1817

19-
return(
20-
<labelclassName={styles.label}htmlFor={schema.name}>
21-
<strong>var.{schema.name}</strong>
22-
{schema.description&&(
18+
if(schema.name&&schema.description){
19+
return(
20+
<labelhtmlFor={schema.name}>
21+
<spanclassName={styles.labelName}>var.{schema.name}</span>
2322
<spanclassName={styles.labelDescription}>{schema.description}</span>
24-
)}
23+
</label>
24+
)
25+
}
26+
27+
return(
28+
<labelhtmlFor={schema.name}>
29+
<spanclassName={styles.labelDescription}>var.{schema.name}</span>
2530
</label>
2631
)
2732
}
@@ -38,7 +43,7 @@ export const ParameterInput: FC<
3843
conststyles=useStyles()
3944

4045
return(
41-
<Stackdirection="column"className={styles.root}>
46+
<Stackdirection="column"spacing={0.75}>
4247
<ParameterLabelschema={schema}/>
4348
<divclassName={styles.input}>
4449
<ParameterField
@@ -119,19 +124,17 @@ const ParameterField: React.FC<
119124
}
120125

121126
constuseStyles=makeStyles((theme)=>({
122-
root:{
123-
fontFamily:MONOSPACE_FONT_FAMILY,
124-
paddingTop:theme.spacing(2),
125-
paddingBottom:theme.spacing(2),
126-
},
127-
label:{
128-
display:"flex",
129-
flexDirection:"column",
130-
fontSize:21,
127+
labelName:{
128+
fontSize:14,
129+
color:theme.palette.text.secondary,
130+
display:"block",
131+
marginBottom:theme.spacing(0.5),
131132
},
132133
labelDescription:{
133-
fontSize:14,
134-
marginTop:theme.spacing(1),
134+
fontSize:16,
135+
color:theme.palette.text.primary,
136+
display:"block",
137+
fontWeight:600,
135138
},
136139
input:{
137140
display:"flex",

‎site/src/components/WorkspaceQuota/WorkspaceQuota.tsx

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
66
import{Stack}from"components/Stack/Stack"
77
import{FC}from"react"
88
import*asTypesGenfrom"../../api/typesGenerated"
9-
import{MONOSPACE_FONT_FAMILY}from"../../theme/constants"
109

1110
exportconstLanguage={
1211
of:"of",
@@ -27,7 +26,7 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
2726
return(
2827
<Box>
2928
<Stackspacing={1}className={styles.stack}>
30-
<spanclassName={styles.title}>Workspace Quota</span>
29+
<spanclassName={styles.title}>Usage Quota</span>
3130
<AlertBannerseverity="error"error={error}/>
3231
</Stack>
3332
</Box>
@@ -39,7 +38,7 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
3938
return(
4039
<Box>
4140
<Stackspacing={1}className={styles.stack}>
42-
<spanclassName={styles.title}>Workspace Quota</span>
41+
<spanclassName={styles.title}>Usage quota</span>
4342
<LinearProgresscolor="primary"/>
4443
<divclassName={styles.label}>
4544
<SkeletonclassName={styles.skeleton}/>
@@ -64,8 +63,23 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
6463

6564
return(
6665
<Box>
67-
<Stackspacing={1}className={styles.stack}>
68-
<spanclassName={styles.title}>Workspace Quota</span>
66+
<Stackspacing={1.5}className={styles.stack}>
67+
<Stackdirection="row"justifyContent="space-between">
68+
<spanclassName={styles.title}>Usage Quota</span>
69+
<divclassName={styles.label}>
70+
<spanclassName={styles.labelHighlight}>
71+
{quota.user_workspace_count}
72+
</span>{" "}
73+
{Language.of}{" "}
74+
<spanclassName={styles.labelHighlight}>
75+
{quota.user_workspace_limit}
76+
</span>{" "}
77+
{quota.user_workspace_limit===1
78+
?Language.workspace
79+
:Language.workspaces}
80+
{" used"}
81+
</div>
82+
</Stack>
6983
<LinearProgress
7084
className={
7185
quota.user_workspace_count>=quota.user_workspace_limit
@@ -75,14 +89,6 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
7589
value={value}
7690
variant="determinate"
7791
/>
78-
<divclassName={styles.label}>
79-
{quota.user_workspace_count}{Language.of}{" "}
80-
{quota.user_workspace_limit}{" "}
81-
{quota.user_workspace_limit===1
82-
?Language.workspace
83-
:Language.workspaces}
84-
{" used"}
85-
</div>
8692
</Stack>
8793
</Box>
8894
)
@@ -101,18 +107,16 @@ const useStyles = makeStyles((theme) => ({
101107
},
102108
},
103109
title:{
104-
fontFamily:MONOSPACE_FONT_FAMILY,
105-
fontSize:21,
106-
paddingBottom:"8px",
110+
fontSize:16,
107111
},
108112
label:{
109-
fontFamily:MONOSPACE_FONT_FAMILY,
110-
fontSize:12,
111-
textTransform:"uppercase",
113+
fontSize:14,
112114
display:"block",
113-
fontWeight:600,
114115
color:theme.palette.text.secondary,
115116
},
117+
labelHighlight:{
118+
color:theme.palette.text.primary,
119+
},
116120
skeleton:{
117121
minWidth:"150px",
118122
},
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"templateLabel":"Template",
3-
"nameLabel":"Name",
4-
"ownerLabel":"Workspace Owner"
3+
"nameLabel":"Workspace Name",
4+
"ownerLabel":"Owner",
5+
"createWorkspace":"Create workspace"
56
}

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import{fireEvent,screen,waitFor}from"@testing-library/react"
33
importuserEventfrom"@testing-library/user-event"
44
import*asAPIfrom"api/api"
5-
import{LanguageasFooterLanguage}from"components/FormFooter/FormFooter"
65
importi18nextfrom"i18next"
76
import{
87
MockTemplate,
@@ -17,6 +16,7 @@ import CreateWorkspacePage from "./CreateWorkspacePage"
1716
const{ t}=i18next
1817

1918
constnameLabelText=t("nameLabel",{ns:"createWorkspacePage"})
19+
constcreateWorkspaceText=t("createWorkspace",{ns:"createWorkspacePage"})
2020

2121
constrenderCreateWorkspacePage=()=>{
2222
returnrenderWithAuth(<CreateWorkspacePage/>,{
@@ -48,7 +48,7 @@ describe("CreateWorkspacePage", () => {
4848
target:{value:"test"},
4949
})
5050

51-
constsubmitButton=screen.getByText(FooterLanguage.defaultSubmitLabel)
51+
constsubmitButton=screen.getByText(createWorkspaceText)
5252
userEvent.click(submitButton)
5353

5454
awaitwaitFor(()=>

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const CreateWorkspacePage: FC = () => {
2525
shallowEqual,
2626
)
2727
constworkspaceQuotaEnabled=featureVisibility[FeatureNames.WorkspaceQuota]
28-
2928
const[authState]=useActor(xServices.authXService)
3029
const{ me}=authState.context
3130
const[createWorkspaceState,send]=useMachine(createWorkspaceMachine,{
@@ -89,7 +88,8 @@ const CreateWorkspacePage: FC = () => {
8988
})
9089
}}
9190
onCancel={()=>{
92-
navigate("/templates")
91+
// Go back
92+
navigate(-1)
9393
}}
9494
onSubmit={(request)=>{
9595
send({

0 commit comments

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