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"; // services import { FileService } from "services/file.service"; // hooks import { useEventTracker, useUser, useWorkspace } from "hooks/store"; 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"; // helpers import { copyUrlToClipboard } from "helpers/string.helper"; // types import { IWorkspace } from "@plane/types"; // constants import { EUserWorkspaceRoles, ORGANIZATION_SIZE } from "constants/workspace"; const defaultValues: Partial = { name: "", url: "", organization_size: "2-10", logo: null, }; // services const fileService = new FileService(); export const WorkspaceDetails: FC = observer(() => { // states const [isLoading, setIsLoading] = useState(false); const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false); const [isImageRemoving, setIsImageRemoving] = useState(false); const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); // store hooks const { captureEvent } = useEventTracker(); const { membership: { currentWorkspaceRole }, } = useUser(); const { currentWorkspace, updateWorkspace } = useWorkspace(); // toast alert const { setToastAlert } = useToast(); // form info const { handleSubmit, control, reset, watch, formState: { errors }, } = useForm({ defaultValues: { ...defaultValues, ...currentWorkspace }, }); const onSubmit = async (formData: IWorkspace) => { if (!currentWorkspace) return; setIsLoading(true); const payload: Partial = { logo: formData.logo, name: formData.name, organization_size: formData.organization_size, }; await updateWorkspace(currentWorkspace.slug, payload) .then((res) => { captureEvent("Workspace updated", { ...res, state: "SUCCESS", }); setToastAlert({ title: "Success", type: "success", message: "Workspace updated successfully", }); }) .catch((err) => { captureEvent("Workspace updated", { state: "FAILED", }); console.error(err); }); setTimeout(() => { setIsLoading(false); }, 300); }; 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]); const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN; if (!currentWorkspace) return (
); return ( <> setDeleteWorkspaceModal(false)} /> ( setIsImageUploadModalOpen(false)} isRemoving={isImageRemoving} handleRemove={handleRemoveLogo} onSuccess={(imageUrl) => { onChange(imageUrl); setIsImageUploadModalOpen(false); handleSubmit(onSubmit)(); }} value={value} /> )} />

{watch("name")}

{isAdmin && ( )}

Workspace name

( )} />

Company size

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

Workspace URL

( )} />
{isAdmin && (
)}
{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.
)}
)}
); });