import { useEffect, useState, FC } from "react"; import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; import { Disclosure, Transition } from "@headlessui/react"; import { ChevronDown, ChevronUp, Pencil } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { FileService } from "services/file.service"; // hooks import useToast from "hooks/use-toast"; // components import { DeleteWorkspaceModal } from "components/workspace"; import { ImageUploadModal } from "components/core"; // ui import { Button, CustomSelect, Input, Spinner } from "@plane/ui"; // types import { IWorkspace } from "types"; // constants import { ORGANIZATION_SIZE } from "constants/workspace"; import { trackEvent } from "helpers/event-tracker.helper"; const defaultValues: Partial = { name: "", url: "", organization_size: "2-10", logo: null, }; // services const fileService = new FileService(); export const WorkspaceDetails: FC = observer(() => { // states const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isImageUploading, setIsImageUploading] = useState(false); const [isImageRemoving, setIsImageRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); // store const { workspace: { currentWorkspace, updateWorkspace }, user: { currentWorkspaceRole }, } = useMobxStore(); const isAdmin = currentWorkspaceRole === 20; // hooks const { setToastAlert } = useToast(); // form info const { handleSubmit, control, reset, watch, setValue, formState: { errors, isSubmitting }, } = useForm({ defaultValues: { ...defaultValues, ...currentWorkspace }, }); const onSubmit = async (formData: IWorkspace) => { if (!currentWorkspace) return; const payload: Partial = { logo: formData.logo, name: formData.name, organization_size: formData.organization_size, }; await updateWorkspace(currentWorkspace.slug, payload) .then((res) => { trackEvent("UPDATE_WORKSPACE", res); setToastAlert({ title: "Success", type: "success", message: "Workspace updated successfully", }); }) .catch((err) => console.error(err)); }; const handleDelete = (url: string | null | undefined) => { if (!currentWorkspace || !url) return; setIsImageRemoving(true); fileService.deleteFile(currentWorkspace.id, url).then(() => { updateWorkspace(currentWorkspace.slug, { logo: "" }) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Workspace picture removed successfully.", }); setIsImageUploadModalOpen(false); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "There was some error in deleting your profile picture. Please try again.", }); }) .finally(() => setIsImageRemoving(false)); }); }; useEffect(() => { if (currentWorkspace) reset({ ...currentWorkspace }); }, [currentWorkspace, reset]); if (!currentWorkspace) return (
); return ( <> setDeleteWorkspaceModal(false)} data={currentWorkspace} /> setIsImageUploadModalOpen(false)} isRemoving={isImageRemoving} handleDelete={() => handleDelete(currentWorkspace?.logo)} onSuccess={(imageUrl) => { setIsImageUploading(true); setValue("logo", imageUrl); setIsImageUploadModalOpen(false); handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); }} value={watch("logo")} />

{watch("name")}

{`${ typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "") }/${currentWorkspace.slug}`}

Workspace Name

( )} />

Company Size

( c === value) ?? "Select organization size"} width="w-full" buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none" input disabled={!isAdmin} > {ORGANIZATION_SIZE.map((item) => ( {item} ))} )} />

Workspace URL

( )} />
{isAdmin && ( {({ open }) => (
Delete Workspace {/* */} {open ? : }
The danger zone of the workspace delete page is a critical area that requires careful consideration and attention. When deleting a workspace, all of the data and resources within that workspace will be permanently removed and cannot be recovered.
)}
)}
); });