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

Commite828dab

Browse files
refactor(site): simplify create workspace form (#11771)
This is the first PR of a series of PRs trying to simplify and improve the create workspace flow.- Use the existent template header and remove the selected template card- Move the owner field to the general section so we don't have "anemic" sections with single fieldsBefore:<img width="1512" alt="Screenshot 2024-01-23 at 10 22 45" src="https://github.com/coder/coder/assets/3165839/6a2ba6b4-9ffb-4576-9282-7901691f45ee">Now:<img width="1512" alt="Screenshot 2024-01-23 at 10 22 56" src="https://github.com/coder/coder/assets/3165839/84301548-4af9-4de0-96ff-2a6363fc8cf7">
1 parentd6ba0df commite828dab

File tree

1 file changed

+44
-18
lines changed

1 file changed

+44
-18
lines changed

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

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ import {
1111
onChangeTrimmed,
1212
}from"utils/formUtils";
1313
import*asYupfrom"yup";
14-
import{FullPageHorizontalForm}from"components/FullPageForm/FullPageHorizontalForm";
15-
import{SelectedTemplate}from"./SelectedTemplate";
1614
import{
1715
FormFields,
1816
FormSection,
@@ -37,6 +35,15 @@ import {
3735
import{useSearchParams}from"react-router-dom";
3836
import{CreateWSPermissions}from"./permissions";
3937
import{Alert}from"components/Alert/Alert";
38+
import{Margins}from"components/Margins/Margins";
39+
importButtonfrom"@mui/material/Button";
40+
import{Avatar}from"components/Avatar/Avatar";
41+
import{
42+
PageHeader,
43+
PageHeaderTitle,
44+
PageHeaderSubtitle,
45+
}from"components/PageHeader/PageHeader";
46+
import{Pill}from"components/Pill/Pill";
4047

4148
exportconstLanguage={
4249
duplicationWarning:
@@ -125,8 +132,30 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
125132
);
126133

127134
return(
128-
<FullPageHorizontalFormtitle="New workspace"onCancel={onCancel}>
129-
<HorizontalFormonSubmit={form.handleSubmit}>
135+
<Marginssize="medium">
136+
<PageHeaderactions={<ButtononClick={onCancel}>Cancel</Button>}>
137+
<Stackdirection="row"spacing={3}alignItems="center">
138+
{template.icon!=="" ?(
139+
<Avatarsize="xl"src={template.icon}variant="square"fitImage/>
140+
) :(
141+
<Avatarsize="xl">{template.name}</Avatar>
142+
)}
143+
144+
<div>
145+
<PageHeaderTitle>
146+
{template.display_name.length>0
147+
?template.display_name
148+
:template.name}
149+
</PageHeaderTitle>
150+
151+
<PageHeaderSubtitlecondensed>New workspace</PageHeaderSubtitle>
152+
</div>
153+
154+
{template.deprecated&&<Pilltype="warning">Deprecated</Pill>}
155+
</Stack>
156+
</PageHeader>
157+
158+
<HorizontalFormonSubmit={form.handleSubmit}css={{padding:"16px 0"}}>
130159
{Boolean(error)&&<ErrorAlerterror={error}/>}
131160

132161
{mode==="duplicate"&&(
@@ -138,10 +167,13 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
138167
{/* General info */}
139168
<FormSection
140169
title="General"
141-
description="The template and name of your new workspace."
170+
description={
171+
permissions.createWorkspaceForUser
172+
?"The name of the workspace and its owner. Only admins can create workspace for other users."
173+
:"The name of your new workspace."
174+
}
142175
>
143176
<FormFields>
144-
<SelectedTemplatetemplate={template}/>
145177
{versionId&&versionId!==template.active_version_id&&(
146178
<Stackspacing={1}css={styles.hasDescription}>
147179
<TextField
@@ -155,6 +187,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
155187
</span>
156188
</Stack>
157189
)}
190+
158191
<TextField
159192
{...getFieldHelpers("name")}
160193
disabled={creatingWorkspace}
@@ -164,15 +197,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
164197
fullWidth
165198
label="Workspace Name"
166199
/>
167-
</FormFields>
168-
</FormSection>
169200

170-
{permissions.createWorkspaceForUser&&(
171-
<FormSection
172-
title="Workspace Owner"
173-
description="Only admins can create workspace for other users."
174-
>
175-
<FormFields>
201+
{permissions.createWorkspaceForUser&&(
176202
<UserAutocomplete
177203
value={owner}
178204
onChange={(user)=>{
@@ -181,9 +207,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
181207
label="Owner"
182208
size="medium"
183209
/>
184-
</FormFields>
185-
</FormSection>
186-
)}
210+
)}
211+
</FormFields>
212+
</FormSection>
187213

188214
{externalAuth&&externalAuth.length>0&&(
189215
<FormSection
@@ -272,7 +298,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
272298
submitLabel="Create Workspace"
273299
/>
274300
</HorizontalForm>
275-
</FullPageHorizontalForm>
301+
</Margins>
276302
);
277303
};
278304

0 commit comments

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