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 { WorkspaceImageUploadModal } 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"; import { copyUrlToClipboard } from "helpers/string.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); 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, 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 handleRemoveLogo = () => { if (!currentWorkspace) return; const url = currentWorkspace.logo; if (!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)); }); }; const handleCopyUrl = () => { if (!currentWorkspace) return; copyUrlToClipboard(`${currentWorkspace.slug}`).then(() => { setToastAlert({ type: "success", title: "Workspace URL copied to the clipboard.", }); }); }; useEffect(() => { if (currentWorkspace) reset({ ...currentWorkspace }); }, [currentWorkspace, reset]); if (!currentWorkspace) return (
); return ( <> setDeleteWorkspaceModal(false)} /> ( setIsImageUploadModalOpen(false)} isRemoving={isImageRemoving} handleRemove={handleRemoveLogo} onSuccess={(imageUrl) => { onChange(imageUrl); setIsImageUploadModalOpen(false); handleSubmit(onSubmit)(); }} value={value} /> )} />

{watch("name")}

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.
)}
)}
); });