Skip to content

refactor(site): simplify create workspace form #11771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 23, 2024
Merged

refactor(site): simplify create workspace form #11771

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 44 additions & 18 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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:
Expand Down Expand Up @@ -126,8 +133,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" && (
Expand All @@ -139,10 +168,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
Expand All @@ -156,6 +188,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
</span>
</Stack>
)}

<TextField
{...getFieldHelpers("name")}
disabled={creatingWorkspace}
Expand All @@ -165,15 +198,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) => {
Expand All @@ -182,9 +208,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
label="Owner"
size="medium"
/>
</FormFields>
</FormSection>
)}
)}
</FormFields>
</FormSection>

{externalAuth && externalAuth.length > 0 && (
<FormSection
Expand Down Expand Up @@ -269,7 +295,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
submitLabel="Create Workspace"
/>
</HorizontalForm>
</FullPageHorizontalForm>
</Margins>
);
};

Expand Down