import { FC, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; // icons import { Info, Lock } from "lucide-react"; import { IProject, IWorkspace } from "@plane/types"; // ui import { Button, CustomSelect, Input, TextArea, TOAST_TYPE, setToast, CustomEmojiIconPicker, EmojiIconPickerTypes, Tooltip, } from "@plane/ui"; // components import { Logo } from "@/components/common"; import { ImagePickerPopover } from "@/components/core"; // constants import { PROJECT_UPDATED } from "@/constants/event-tracker"; import { NETWORK_CHOICES } from "@/constants/project"; // helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; // hooks import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper"; import { useEventTracker, useProject } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // services import { ProjectService } from "@/services/project"; // types export interface IProjectDetailsForm { project: IProject; workspaceSlug: string; projectId: string; isAdmin: boolean; } const projectService = new ProjectService(); export const ProjectDetailsForm: FC = (props) => { const { project, workspaceSlug, projectId, isAdmin } = props; // states const [isOpen, setIsOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); // store hooks const { captureProjectEvent } = useEventTracker(); const { updateProject } = useProject(); const { isMobile } = usePlatformOS(); // form info const { handleSubmit, watch, control, setValue, setError, reset, formState: { errors, dirtyFields }, getValues, } = useForm({ defaultValues: { ...project, workspace: (project.workspace as IWorkspace).id, }, }); useEffect(() => { if (project && projectId !== getValues("id")) { reset({ ...project, workspace: (project.workspace as IWorkspace).id, }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [project, projectId]); const handleIdentifierChange = (event: React.ChangeEvent) => { const { value } = event.target; const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, ""); const formattedValue = alphanumericValue.toUpperCase(); setValue("identifier", formattedValue); }; const handleUpdateChange = async (payload: Partial) => { if (!workspaceSlug || !project) return; return updateProject(workspaceSlug.toString(), project.id, payload) .then((res) => { const changed_properties = Object.keys(dirtyFields); captureProjectEvent({ eventName: PROJECT_UPDATED, payload: { ...res, changed_properties: changed_properties, state: "SUCCESS", element: "Project general settings", }, }); setToast({ type: TOAST_TYPE.SUCCESS, title: "Success!", message: "Project updated successfully", }); }) .catch((error) => { captureProjectEvent({ eventName: PROJECT_UPDATED, payload: { ...payload, state: "FAILED", element: "Project general settings" }, }); setToast({ type: TOAST_TYPE.ERROR, title: "Error!", message: error?.error ?? "Project could not be updated. Please try again.", }); }); }; const onSubmit = async (formData: IProject) => { if (!workspaceSlug) return; setIsLoading(true); const payload: Partial = { name: formData.name, network: formData.network, identifier: formData.identifier, description: formData.description, cover_image: formData.cover_image, logo_props: formData.logo_props, }; if (project.identifier !== formData.identifier) await projectService .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "") .then(async (res) => { if (res.exists) setError("identifier", { message: "Identifier already exists" }); else await handleUpdateChange(payload); }); else await handleUpdateChange(payload); setTimeout(() => { setIsLoading(false); }, 300); }; const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network); return (
{watch("cover_image")!}
( setIsOpen(val)} className="flex items-center justify-center" buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90" label={} onChange={(val) => { let logoValue = {}; if (val?.type === "emoji") logoValue = { value: convertHexEmojiToDecimal(val.value.unified), url: val.value.imageUrl, }; else if (val?.type === "icon") logoValue = val.value; onChange({ in_use: val?.type, [val?.type]: logoValue, }); setIsOpen(false); }} defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined} defaultOpen={ value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON } disabled={!isAdmin} /> )} />
{watch("name")} {watch("identifier")} . {project.network === 0 && } {currentNetwork?.label}
( )} />

Project Name

( )} /> {errors?.name?.message}

Description

(