Jan 23, 2024 · Jan 23, 2024
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
  onChangeTrimmed,
 } from "utils/formUtils";
 import * as Yup from "yup";
 import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizontalForm";
 import { SelectedTemplate } from "./SelectedTemplate";
 import {
  FormFields,
  FormSection,
 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:
  );

  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" && (
        {/* 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
                </span>
              </Stack>
            )}

            <TextField
              {...getFieldHelpers("name")}
              disabled={creatingWorkspace}
              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) => {
                label="Owner"
                size="medium"
              />
 </FormFields>
          </FormSection>
 )}
 )}
          </FormFields>
 </FormSection>

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

Expand Down