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

Commit6b75f3e

Browse files
committed
Add error validation for submitting the create workspace form
1 parente418892 commit6b75f3e

File tree

2 files changed

+57
-35
lines changed

2 files changed

+57
-35
lines changed

‎site/src/components/GitAuth/GitAuth.tsx

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
importButtonfrom"@material-ui/core/Button"
2-
import{makeStyles}from"@material-ui/core/styles"
2+
importFormHelperTextfrom"@material-ui/core/FormHelperText"
3+
import{makeStyles,Theme}from"@material-ui/core/styles"
34
import{SvgIconProps}from"@material-ui/core/SvgIcon"
45
importTooltipfrom"@material-ui/core/Tooltip"
56
importGitHubfrom"@material-ui/icons/GitHub"
@@ -14,14 +15,18 @@ export interface GitAuthProps {
1415
type:TypesGen.GitProvider
1516
authenticated:boolean
1617
authenticateURL:string
18+
error?:string
1719
}
1820

1921
exportconstGitAuth:FC<GitAuthProps>=({
2022
type,
2123
authenticated,
2224
authenticateURL,
25+
error,
2326
})=>{
24-
conststyles=useStyles()
27+
conststyles=useStyles({
28+
error:typeoferror!=="undefined",
29+
})
2530

2631
letprettyName:string
2732
letIcon:(props:SvgIconProps)=>JSX.Element
@@ -57,41 +62,42 @@ export const GitAuth: FC<GitAuthProps> = ({
5762
authenticated ?"You're already authenticated! No action needed." :``
5863
}
5964
>
60-
<a
61-
href={redirectURL}
62-
className={styles.link}
63-
onClick={(event)=>{
64-
event.preventDefault()
65-
// If the user is already authenticated, we don't want to redirect them
66-
if(authenticated||authenticateURL===""){
67-
return
68-
}
69-
window.open(redirectURL,"_blank","width=900,height=600")
70-
}}
71-
>
72-
<ButtonclassName={styles.button}disabled={authenticated}fullWidth>
73-
<divclassName={styles.root}>
74-
<IconclassName={styles.icon}/>
75-
<divclassName={styles.text}>
65+
<div>
66+
<a
67+
href={redirectURL}
68+
className={styles.link}
69+
onClick={(event)=>{
70+
event.preventDefault()
71+
// If the user is alreadyauthenticated, we don't want to redirect them
72+
if(authenticated||authenticateURL===""){
73+
return
74+
}
75+
window.open(redirectURL,"_blank","width=900,height=600")
76+
}}
77+
>
78+
<ButtonclassName={styles.button}disabled={authenticated}fullWidth>
79+
<divclassName={styles.root}>
80+
<IconclassName={styles.icon}/>
7681
<Typographyvariant="body2">
7782
{authenticated
7883
?`You're authenticated with${prettyName}!`
7984
:`Click to login with${prettyName}!`}
8085
</Typography>
81-
{!authenticated&&(
82-
<Typographyvariant="caption"color="textSecondary">
83-
{"You'll be redirected back here once authenticated."}
84-
</Typography>
85-
)}
8686
</div>
87-
</div>
88-
</Button>
89-
</a>
87+
</Button>
88+
</a>
89+
{error&&<FormHelperTexterror>{error}</FormHelperText>}
90+
</div>
9091
</Tooltip>
9192
)
9293
}
9394

94-
constuseStyles=makeStyles(()=>({
95+
constuseStyles=makeStyles<
96+
Theme,
97+
{
98+
error:boolean
99+
}
100+
>((theme)=>({
95101
link:{
96102
textDecoration:"none",
97103
},
@@ -104,11 +110,8 @@ const useStyles = makeStyles(() => ({
104110
},
105111
button:{
106112
height:"unset",
107-
},
108-
text:{
109-
display:"flex",
110-
flexDirection:"column",
111-
gap:4,
113+
border:({ error})=>
114+
error ?`1px solid${theme.palette.error.main}` :"unset",
112115
},
113116
icon:{
114117
width:32,

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { RichParameterInput } from "components/RichParameterInput/RichParameterI
66
import{Stack}from"components/Stack/Stack"
77
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete"
88
import{FormikContextType,FormikTouched,useFormik}from"formik"
9-
import{FC,useState}from"react"
9+
import{FC,useEffect,useState}from"react"
1010
import{useTranslation}from"react-i18next"
1111
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
1212
import*asYupfrom"yup"
@@ -58,6 +58,10 @@ export const CreateWorkspacePageView: FC<
5858
props.templateParameters,
5959
props.defaultParameterValues,
6060
)
61+
const[gitAuthErrors,setGitAuthErrors]=useState<Record<string,string>>({})
62+
useEffect(()=>{
63+
setGitAuthErrors({})
64+
},[props.templateGitAuth])
6165

6266
const{ t}=useTranslation("createWorkspacePage")
6367

@@ -78,6 +82,20 @@ export const CreateWorkspacePageView: FC<
7882
enableReinitialize:true,
7983
initialTouched:props.initialTouched,
8084
onSubmit:(request)=>{
85+
for(leti=0;i<(props.templateGitAuth?.length||0);i++){
86+
constauth=props.templateGitAuth?.[i]
87+
if(!auth){
88+
continue
89+
}
90+
if(!auth.authenticated){
91+
setGitAuthErrors({
92+
[auth.id]:"You must authenticate to create a workspace!",
93+
})
94+
form.setSubmitting(false)
95+
return
96+
}
97+
}
98+
8199
if(!props.templateSchema){
82100
thrownewError("No template schema loaded")
83101
}
@@ -231,8 +249,8 @@ export const CreateWorkspacePageView: FC<
231249
Git Authentication
232250
</h2>
233251
<pclassName={styles.formSectionInfoDescription}>
234-
This template requires authentication to automatically
235-
performGit operations on create.
252+
This template requires authentication to automatically perform
253+
Git operations on create.
236254
</p>
237255
</div>
238256

@@ -247,6 +265,7 @@ export const CreateWorkspacePageView: FC<
247265
authenticateURL={auth.authenticate_url}
248266
authenticated={auth.authenticated}
249267
type={auth.type}
268+
error={gitAuthErrors[auth.id]}
250269
/>
251270
))}
252271
</Stack>

0 commit comments

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