snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Select, SelectContent, SelectItem, SelectList, SelectTrigger } from "@makeplane/propel/components/select";
+import { InstanceWorkspaceService } from "@plane/services";
+import type { IWorkspace } from "@plane/types";
+import { validateSlug, validateWorkspaceName } from "@plane/utils";
+// components
+import { TOAST_TYPE, setToast } from "@/providers/toast";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+
+const instanceWorkspaceService = new InstanceWorkspaceService();
+
+export function WorkspaceCreateForm() {
+  // router
+  const router = useRouter();
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  const [defaultValues, setDefaultValues] = useState<Partial<IWorkspace>>({
+    name: "",
+    slug: "",
+    organization_size: "",
+  });
+  // store hooks
+  const { createWorkspace } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
+  // derived values
+  const [workspaceBaseURL, setWorkspaceBaseURL] = useState(() => encodeURI(WEB_BASE_URL || ""));
+
+  useEffect(() => {
+    if (!WEB_BASE_URL) {
+      setWorkspaceBaseURL(encodeURI(window.location.origin + "/"));
+    }
+  }, []);
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await instanceWorkspaceService
+      .slugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+          await createWorkspace(formData)
+            .then(async () => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              router.push(`/workspace`);
+            })
+            .catch(() => {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              });
+            });
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">Name your workspace</h4>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                validate: (value) => validateWorkspaceName(value, true),
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="workspaceName"
+                    type="text"
+                    value={value}
+                    onChange={(e) => {
+                      onChange(e.target.value);
+                      setValue("name", e.target.value);
+                      setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                        shouldValidate: true,
+                      });
+                    }}
+                    ref={ref}
+                    aria-invalid={Boolean(errors.name)}
+                    placeholder="Something familiar and recognizable is always best."
+                  />
+                </InputGroup>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
+          <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
+            <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
+            <Controller
+              control={control}
+              name="slug"
+              rules={{
+                validate: (value) => validateSlug(value),
+              }}
+              render={({ field: { onChange, value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  type="text"
+                  size="lg"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  aria-invalid={Boolean(errors.slug)}
+                  placeholder="workspace-name"
+                />
+              )}
+            />
+          </div>
+          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+          )}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: "This is a required field." }}
+              render={({ field: { value, onChange } }) => (
+                <Select value={value} onValueChange={onChange}>
+                  <SelectTrigger size="lg" placeholder={<span className="text-placeholder">Select a range</span>} />
+                  <SelectContent>
+                    <SelectList>
+                      {ORGANIZATION_SIZE.map((item) => (
+                        <SelectItem key={item} value={item} label={item} size="lg" />
+                      ))}
+                    </SelectList>
+                  </SelectContent>
+                </Select>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex max-w-4xl items-center gap-4 py-1">
+        <Button
+          variant="primary"
+          size="md"
+          stretch="auto"
+          onClick={handleSubmit(handleCreateWorkspace)}
+          disabled={!isValid}
+          loading={isSubmitting}
+          label={isSubmitting ? "Creating workspace" : "Create workspace"}
+        />
+        <Button
+          variant="secondary"
+          size="md"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/workspace" />}
+          label="Go back"
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
+// types
+import type { Route } from "./+types/page";
+// local
+import { WorkspaceCreateForm } from "./form";
+
+const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
+  return (
+    <PageWrapper
+      header={{
+        title: "Create a new workspace on this instance.",
+        description: "You will need to invite users from Workspace Settings after you create this workspace.",
+      }}
+    >
+      <WorkspaceCreateForm />
+    </PageWrapper>
+  );
+});
+
+export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
+
+export default WorkspaceCreatePage;