-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'preview' into feat/smooth-cursor
- Loading branch information
Showing
98 changed files
with
2,581 additions
and
981 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -72,7 +72,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => { | |
| { | ||
| key: "EMAIL_FROM", | ||
| type: "text", | ||
| label: "Sender email address", | ||
| label: "Sender's email address", | ||
| description: | ||
| "This is the email address your users will see when getting emails from this instance. You will need to verify this address.", | ||
| placeholder: "[email protected]", | ||
|
|
@@ -174,12 +174,12 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => { | |
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100"> | ||
| <div className="flex w-full max-w-md flex-col gap-y-10 px-1"> | ||
| <div className="flex w-full max-w-xl flex-col gap-y-10 px-1"> | ||
| <div className="mr-8 flex items-center gap-10 pt-4"> | ||
| <div className="grow"> | ||
| <div className="text-sm font-medium text-custom-text-100">Authentication (optional)</div> | ||
| <div className="text-sm font-medium text-custom-text-100">Authentication</div> | ||
| <div className="text-xs font-normal text-custom-text-300"> | ||
| We recommend setting up a username password for your SMTP server | ||
| This is optional, but we recommend setting up a username and a password for your SMTP server. | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,212 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import Link from "next/link"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { Controller, useForm } from "react-hook-form"; | ||
| // constants | ||
| import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants"; | ||
| // types | ||
| import { IWorkspace } from "@plane/types"; | ||
| // components | ||
| import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui"; | ||
| // helpers | ||
| import { WEB_BASE_URL } from "@/helpers/common.helper"; | ||
| // hooks | ||
| import { useWorkspace } from "@/hooks/store"; | ||
| // services | ||
| import { WorkspaceService } from "@/services/workspace.service"; | ||
|
|
||
| const workspaceService = new WorkspaceService(); | ||
|
|
||
| export const 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" }); | ||
|
|
||
| const handleCreateWorkspace = async (formData: IWorkspace) => { | ||
| await workspaceService | ||
| .workspaceSlugCheck(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-sm text-custom-text-300">Name your workspace</h4> | ||
| <div className="flex flex-col gap-1"> | ||
| <Controller | ||
| control={control} | ||
| name="name" | ||
| rules={{ | ||
| required: "This is a required field.", | ||
| validate: (value) => | ||
| /^[\w\s-]*$/.test(value) || | ||
| `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`, | ||
| maxLength: { | ||
| value: 80, | ||
| message: "Limit your name to 80 characters.", | ||
| }, | ||
| }} | ||
| render={({ field: { value, ref, onChange } }) => ( | ||
| <Input | ||
| 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} | ||
| hasError={Boolean(errors.name)} | ||
| placeholder="Something familiar and recognizable is always best." | ||
| className="w-full" | ||
| /> | ||
| )} | ||
| /> | ||
| <span className="text-xs text-red-500">{errors?.name?.message}</span> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-1"> | ||
| <h4 className="text-sm text-custom-text-300">Set your workspace's URL</h4> | ||
| <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3"> | ||
| <span className="whitespace-nowrap text-sm text-custom-text-200">{WEB_BASE_URL}/</span> | ||
| <Controller | ||
| control={control} | ||
| name="slug" | ||
| rules={{ | ||
| required: "The URL is a required field.", | ||
| maxLength: { | ||
| value: 48, | ||
| message: "Limit your URL to 48 characters.", | ||
| }, | ||
| }} | ||
| render={({ field: { onChange, value, ref } }) => ( | ||
| <Input | ||
| id="workspaceUrl" | ||
| type="text" | ||
| 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} | ||
| hasError={Boolean(errors.slug)} | ||
| placeholder="workspace-name" | ||
| className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm" | ||
| /> | ||
| )} | ||
| /> | ||
| </div> | ||
| {slugError && <p className="text-sm text-red-500">This URL is taken. Try something else.</p>} | ||
| {invalidSlug && ( | ||
| <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p> | ||
| )} | ||
| {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>} | ||
| </div> | ||
| <div className="flex flex-col gap-1"> | ||
| <h4 className="text-sm text-custom-text-300">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 } }) => ( | ||
| <CustomSelect | ||
| value={value} | ||
| onChange={onChange} | ||
| label={ | ||
| ORGANIZATION_SIZE.find((c) => c === value) ?? ( | ||
| <span className="text-custom-text-400">Select a range</span> | ||
| ) | ||
| } | ||
| buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none" | ||
| input | ||
| optionsClassName="w-full" | ||
| > | ||
| {ORGANIZATION_SIZE.map((item) => ( | ||
| <CustomSelect.Option key={item} value={item}> | ||
| {item} | ||
| </CustomSelect.Option> | ||
| ))} | ||
| </CustomSelect> | ||
| )} | ||
| /> | ||
| {errors.organization_size && ( | ||
| <span className="text-sm text-red-500">{errors.organization_size.message}</span> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex max-w-4xl items-center py-1 gap-4"> | ||
| <Button | ||
| variant="primary" | ||
| size="sm" | ||
| onClick={handleSubmit(handleCreateWorkspace)} | ||
| disabled={!isValid} | ||
| loading={isSubmitting} | ||
| > | ||
| {isSubmitting ? "Creating workspace" : "Create workspace"} | ||
| </Button> | ||
| <Link className={getButtonStyling("neutral-primary", "sm")} href="/workspace"> | ||
| Go back | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| "use client"; | ||
|
|
||
| import { observer } from "mobx-react"; | ||
| // components | ||
| import { WorkspaceCreateForm } from "./form"; | ||
|
|
||
| const WorkspaceCreatePage = observer(() => ( | ||
| <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col"> | ||
| <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0"> | ||
| <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div> | ||
| <div className="text-sm font-normal text-custom-text-300"> | ||
| You will need to invite users from Workspace Settings after you create this workspace. | ||
| </div> | ||
| </div> | ||
| <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4"> | ||
| <WorkspaceCreateForm /> | ||
| </div> | ||
| </div> | ||
| )); | ||
|
|
||
| export default WorkspaceCreatePage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { ReactNode } from "react"; | ||
| import { Metadata } from "next"; | ||
| // layouts | ||
| import { AdminLayout } from "@/layouts/admin-layout"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Workspace Management - Plane Web", | ||
| }; | ||
|
|
||
| export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) { | ||
| return <AdminLayout>{children}</AdminLayout>; | ||
| } |
Oops, something went wrong.