mirror of https://github.com/coder/coder.git
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 fields Before: <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">
This commit is contained in:
parent
d6ba0dfecb
commit
e828daba6e
|
@ -11,8 +11,6 @@ import {
|
|||
onChangeTrimmed,
|
||||
} from "utils/formUtils";
|
||||
import * as Yup from "yup";
|
||||
import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
|
||||
import { SelectedTemplate } from "./SelectedTemplate";
|
||||
import {
|
||||
FormFields,
|
||||
FormSection,
|
||||
|
@ -37,6 +35,15 @@ import {
|
|||
import { useSearchParams } from "react-router-dom";
|
||||
import { CreateWSPermissions } from "./permissions";
|
||||
import { Alert } from "components/Alert/Alert";
|
||||
import { Margins } from "components/Margins/Margins";
|
||||
import Button from "@mui/material/Button";
|
||||
import { Avatar } from "components/Avatar/Avatar";
|
||||
import {
|
||||
PageHeader,
|
||||
PageHeaderTitle,
|
||||
PageHeaderSubtitle,
|
||||
} from "components/PageHeader/PageHeader";
|
||||
import { Pill } from "components/Pill/Pill";
|
||||
|
||||
export const Language = {
|
||||
duplicationWarning:
|
||||
|
@ -125,8 +132,30 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<FullPageHorizontalForm title="New workspace" onCancel={onCancel}>
|
||||
<HorizontalForm onSubmit={form.handleSubmit}>
|
||||
<Margins size="medium">
|
||||
<PageHeader actions={<Button onClick={onCancel}>Cancel</Button>}>
|
||||
<Stack direction="row" spacing={3} alignItems="center">
|
||||
{template.icon !== "" ? (
|
||||
<Avatar size="xl" src={template.icon} variant="square" fitImage />
|
||||
) : (
|
||||
<Avatar size="xl">{template.name}</Avatar>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<PageHeaderTitle>
|
||||
{template.display_name.length > 0
|
||||
? template.display_name
|
||||
: template.name}
|
||||
</PageHeaderTitle>
|
||||
|
||||
<PageHeaderSubtitle condensed>New workspace</PageHeaderSubtitle>
|
||||
</div>
|
||||
|
||||
{template.deprecated && <Pill type="warning">Deprecated</Pill>}
|
||||
</Stack>
|
||||
</PageHeader>
|
||||
|
||||
<HorizontalForm onSubmit={form.handleSubmit} css={{ padding: "16px 0" }}>
|
||||
{Boolean(error) && <ErrorAlert error={error} />}
|
||||
|
||||
{mode === "duplicate" && (
|
||||
|
@ -138,10 +167,13 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
{/* General info */}
|
||||
<FormSection
|
||||
title="General"
|
||||
description="The template and name of your new workspace."
|
||||
description={
|
||||
permissions.createWorkspaceForUser
|
||||
? "The name of the workspace and its owner. Only admins can create workspace for other users."
|
||||
: "The name of your new workspace."
|
||||
}
|
||||
>
|
||||
<FormFields>
|
||||
<SelectedTemplate template={template} />
|
||||
{versionId && versionId !== template.active_version_id && (
|
||||
<Stack spacing={1} css={styles.hasDescription}>
|
||||
<TextField
|
||||
|
@ -155,6 +187,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
</span>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
{...getFieldHelpers("name")}
|
||||
disabled={creatingWorkspace}
|
||||
|
@ -164,15 +197,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
fullWidth
|
||||
label="Workspace Name"
|
||||
/>
|
||||
</FormFields>
|
||||
</FormSection>
|
||||
|
||||
{permissions.createWorkspaceForUser && (
|
||||
<FormSection
|
||||
title="Workspace Owner"
|
||||
description="Only admins can create workspace for other users."
|
||||
>
|
||||
<FormFields>
|
||||
{permissions.createWorkspaceForUser && (
|
||||
<UserAutocomplete
|
||||
value={owner}
|
||||
onChange={(user) => {
|
||||
|
@ -181,9 +207,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
label="Owner"
|
||||
size="medium"
|
||||
/>
|
||||
</FormFields>
|
||||
</FormSection>
|
||||
)}
|
||||
)}
|
||||
</FormFields>
|
||||
</FormSection>
|
||||
|
||||
{externalAuth && externalAuth.length > 0 && (
|
||||
<FormSection
|
||||
|
@ -272,7 +298,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
|
|||
submitLabel="Create Workspace"
|
||||
/>
|
||||
</HorizontalForm>
|
||||
</FullPageHorizontalForm>
|
||||
</Margins>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue