import { useState } from "react"; import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue } from "react-hook-form"; // ui import { Button, Input } from "@plane/ui"; // types import { IUser, IWorkspace, TOnboardingSteps } from "types"; // hooks import useToast from "hooks/use-toast"; // services import { WorkspaceService } from "services/workspace.service"; // mobx import { useMobxStore } from "lib/mobx/store-provider"; // constants import { RESTRICTED_URLS } from "constants/workspace"; type Props = { stepChange: (steps: Partial) => Promise; user: IUser | undefined; control: Control; handleSubmit: UseFormHandleSubmit; errors: FieldErrors; setValue: UseFormSetValue; isSubmitting: boolean; }; // services const workspaceService = new WorkspaceService(); export const Workspace: React.FC = (props) => { const { stepChange, user, control, handleSubmit, setValue, errors, isSubmitting } = props; const [slugError, setSlugError] = useState(false); const [invalidSlug, setInvalidSlug] = useState(false); const { workspace: workspaceStore, user: { updateCurrentUser }, } = useMobxStore(); const { setToastAlert } = useToast(); const handleCreateWorkspace = async (formData: IWorkspace) => { if (isSubmitting) return; await workspaceService .workspaceSlugCheck(formData.slug) .then(async (res) => { if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) { setSlugError(false); await workspaceStore .createWorkspace(formData) .then(async () => { setToastAlert({ type: "success", title: "Success!", message: "Workspace created successfully.", }); await workspaceStore.fetchWorkspaces(); await completeStep(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Workspace could not be created. Please try again.", }) ); } else setSlugError(true); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Some error occurred while creating workspace. Please try again.", }); }); }; const completeStep = async () => { if (!user || !workspaceStore.workspaces) return; const payload: Partial = { workspace_create: true, workspace_join: true, }; await stepChange(payload); await updateCurrentUser({ last_workspace_id: workspaceStore.workspaces[0]?.id, }); }; return (

Name it.

/^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`, maxLength: { value: 80, message: "Workspace name should not exceed 80 characters", }, }} render={({ field: { value, ref, onChange } }) => (
{ onChange(event.target.value); setValue("name", event.target.value); setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-")); }} placeholder="Enter workspace name..." ref={ref} hasError={Boolean(errors.name)} className="h-[46px] w-full border-onboarding-border-100 text-base placeholder:text-base placeholder:text-custom-text-400/50" />
)} /> {errors.name && {errors.name.message}}

You can edit the slug.

(
{window && window.location.host}/ { /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true); onChange(e.target.value.toLowerCase()); }} ref={ref} hasError={Boolean(errors.slug)} className="h-[46px] w-full border-none !px-0" />
)} /> {slugError && Workspace URL is already taken!} {invalidSlug && ( {`URL can only contain ( - ), ( _ ) & alphanumeric characters.`} )}
); };