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

Commit910f17f

Browse files
refactor(site): refactor external auth component (#11758)
Recommended improvements:- Rename component for clarity - Simplify interface for contextual relevance - Handle polling errors based on section, not every buttonBefore:<img width="1511" alt="Screenshot 2024-01-22 at 15 24 26" src="https://github.com/coder/coder/assets/3165839/cfb8c0bc-f5a2-4708-bd97-fdfc46bd1eee">Now:<img width="1512" alt="Screenshot 2024-01-22 at 15 24 41" src="https://github.com/coder/coder/assets/3165839/5aaad448-1bb2-45ea-9250-cd374a072be2">
1 parent059e533 commit910f17f

File tree

7 files changed

+213
-254
lines changed

7 files changed

+213
-254
lines changed

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -201,25 +201,17 @@ describe("CreateWorkspacePage", () => {
201201
);
202202
});
203203

204-
it("external auth: errors if unauthenticated and submits",async()=>{
204+
it("external auth: errors if unauthenticated",async()=>{
205205
jest
206206
.spyOn(API,"getTemplateVersionExternalAuth")
207207
.mockResolvedValueOnce([MockTemplateVersionExternalAuthGithub]);
208208

209209
renderCreateWorkspacePage();
210210
awaitwaitForLoaderToBeRemoved();
211211

212-
constnameField=awaitscreen.findByLabelText(nameLabelText);
213-
214-
// have to use fireEvent b/c userEvent isn't cleaning up properly between tests
215-
fireEvent.change(nameField,{
216-
target:{value:"test"},
217-
});
218-
219-
constsubmitButton=screen.getByText(createWorkspaceText);
220-
awaituserEvent.click(submitButton);
221-
222-
awaitscreen.findByText("You must authenticate to create a workspace!");
212+
awaitscreen.findByText(
213+
"To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
214+
);
223215
});
224216

225217
it("auto create a workspace if uses mode=auto",async()=>{

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,12 @@ const CreateWorkspacePage: FC = () => {
6868
?richParametersQuery.data.filter(paramsUsedToCreateWorkspace)
6969
:undefined;
7070

71-
const{ externalAuth, externalAuthPollingState, startPollingExternalAuth}=
72-
useExternalAuth(realizedVersionId);
71+
const{
72+
externalAuth,
73+
externalAuthPollingState,
74+
startPollingExternalAuth,
75+
isLoadingExternalAuth,
76+
}=useExternalAuth(realizedVersionId);
7377

7478
constisLoadingFormData=
7579
templateQuery.isLoading||
@@ -118,7 +122,9 @@ const CreateWorkspacePage: FC = () => {
118122
<title>{pageTitle(title)}</title>
119123
</Helmet>
120124
{loadFormDataError&&<ErrorAlerterror={loadFormDataError}/>}
121-
{isLoadingFormData||autoCreateWorkspaceMutation.isLoading ?(
125+
{isLoadingFormData||
126+
isLoadingExternalAuth||
127+
autoCreateWorkspaceMutation.isLoading ?(
122128
<Loader/>
123129
) :(
124130
<CreateWorkspacePageView
@@ -169,7 +175,7 @@ const useExternalAuth = (versionId: string | undefined) => {
169175
setExternalAuthPollingState("polling");
170176
},[]);
171177

172-
const{data:externalAuth}=useQuery(
178+
const{data:externalAuth,isLoading:isLoadingExternalAuth}=useQuery(
173179
versionId
174180
?{
175181
...templateVersionExternalAuth(versionId),
@@ -205,6 +211,7 @@ const useExternalAuth = (versionId: string | undefined) => {
205211
startPollingExternalAuth,
206212
externalAuth,
207213
externalAuthPollingState,
214+
isLoadingExternalAuth,
208215
};
209216
};
210217

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

Lines changed: 16 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import {
2727
ImmutableTemplateParametersSection,
2828
MutableTemplateParametersSection,
2929
}from"components/TemplateParameters/TemplateParameters";
30-
import{ExternalAuth}from"./ExternalAuth";
30+
import{ExternalAuthButton}from"./ExternalAuthButton";
3131
import{ErrorAlert}from"components/Alert/ErrorAlert";
3232
import{Stack}from"components/Stack/Stack";
3333
import{
3434
CreateWorkspaceMode,
35-
typeExternalAuthPollingState,
35+
ExternalAuthPollingState,
3636
}from"./CreateWorkspacePage";
3737
import{useSearchParams}from"react-router-dom";
3838
import{CreateWSPermissions}from"./permissions";
@@ -85,10 +85,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
8585
})=>{
8686
consttheme=useTheme();
8787
const[owner,setOwner]=useState(defaultOwner);
88-
const{ verifyExternalAuth, externalAuthErrors}=
89-
useExternalAuthVerification(externalAuth);
9088
const[searchParams]=useSearchParams();
9189
constdisabledParamsList=searchParams?.get("disable_params")?.split(",");
90+
constrequiresExternalAuth=externalAuth.some((auth)=>!auth.authenticated);
9291

9392
constform:FormikContextType<TypesGen.CreateWorkspaceRequest>=
9493
useFormik<TypesGen.CreateWorkspaceRequest>({
@@ -106,7 +105,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
106105
}),
107106
enableReinitialize:true,
108107
onSubmit:(request)=>{
109-
if(!verifyExternalAuth()){
108+
if(requiresExternalAuth){
110109
return;
111110
}
112111

@@ -192,16 +191,20 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
192191
description="This template requires authentication to external services."
193192
>
194193
<FormFields>
194+
{requiresExternalAuth&&(
195+
<Alertseverity="error">
196+
To create a workspace using the selected template, please
197+
ensure you are authenticated with all the external providers
198+
listed below.
199+
</Alert>
200+
)}
195201
{externalAuth.map((auth)=>(
196-
<ExternalAuth
202+
<ExternalAuthButton
197203
key={auth.id}
198-
authenticateURL={auth.authenticate_url}
199-
authenticated={auth.authenticated}
200-
externalAuthPollingState={externalAuthPollingState}
201-
startPollingExternalAuth={startPollingExternalAuth}
202-
displayName={auth.display_name}
203-
displayIcon={auth.display_icon}
204-
error={externalAuthErrors[auth.id]}
204+
auth={auth}
205+
isLoading={externalAuthPollingState==="polling"}
206+
onStartPolling={startPollingExternalAuth}
207+
displayRetry={externalAuthPollingState==="abandoned"}
205208
/>
206209
))}
207210
</FormFields>
@@ -273,43 +276,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
273276
);
274277
};
275278

276-
typeExternalAuthErrors=Record<string,string>;
277-
278-
constuseExternalAuthVerification=(
279-
externalAuth:TypesGen.TemplateVersionExternalAuth[],
280-
)=>{
281-
const[externalAuthErrors,setExternalAuthErrors]=
282-
useState<ExternalAuthErrors>({});
283-
284-
// Clear errors when externalAuth is refreshed
285-
useEffect(()=>{
286-
setExternalAuthErrors({});
287-
},[externalAuth]);
288-
289-
constverifyExternalAuth=()=>{
290-
consterrors:ExternalAuthErrors={};
291-
292-
for(leti=0;i<externalAuth.length;i++){
293-
constauth=externalAuth.at(i);
294-
if(!auth){
295-
continue;
296-
}
297-
if(!auth.authenticated){
298-
errors[auth.id]="You must authenticate to create a workspace!";
299-
}
300-
}
301-
302-
setExternalAuthErrors(errors);
303-
constisValid=Object.keys(errors).length===0;
304-
returnisValid;
305-
};
306-
307-
return{
308-
externalAuthErrors,
309-
verifyExternalAuth,
310-
};
311-
};
312-
313279
conststyles={
314280
hasDescription:{
315281
paddingBottom:16,

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

Lines changed: 0 additions & 92 deletions
This file was deleted.

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

Lines changed: 0 additions & 96 deletions
This file was deleted.

0 commit comments

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