thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: delete workspace modal (#631)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-31 00:25:42 +05:30 committed by GitHub
parent a8a5873d88
commit 3cf2172520
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
apps/app/components/workspace/delete-workspace-modal.tsx
View File

@ -27,8 +27,10 @@ type Props = {
export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose }) => { export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [confirmProjectName, setConfirmProjectName] = useState("");
const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false); const [confirmWorkspaceName, setConfirmWorkspaceName] = useState("");
const [confirmDeleteMyWorkspace, setConfirmDeleteMyWorkspace] = useState(false);
const [selectedWorkspace, setSelectedWorkspace] = useState<IWorkspace | null>(null); const [selectedWorkspace, setSelectedWorkspace] = useState<IWorkspace | null>(null);
const router = useRouter(); const router = useRouter();
@ -44,7 +46,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
} }
}, [data]); }, [data]);
const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject; const canDelete = confirmWorkspaceName === data?.name && confirmDeleteMyWorkspace;
const handleClose = () => { const handleClose = () => {
onClose(); onClose();
@ -100,71 +102,72 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div className="flex flex-col gap-6 p-6">
<div className="sm:flex sm:items-start"> <div className="flex w-full items-center justify-start gap-6">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <span className="place-items-center rounded-full bg-red-100 p-4">
<ExclamationTriangleIcon <ExclamationTriangleIcon
className="h-6 w-6 text-red-600" className="h-6 w-6 text-red-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </span>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <span className="flex items-center justify-start">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900"> <h3 className="text-xl font-medium 2xl:text-2xl">Delete Workspace</h3>
Delete Workspace </span>
</Dialog.Title> </div>
<div className="mt-2">
<p className="text-sm text-gray-500"> <span>
Are you sure you want to delete workspace- {" "} <p className="text-sm leading-7 text-gray-500">
<span className="font-bold">{data?.name}</span> Are you sure you want to delete workspace{" "}
? All of the data related to the workspace will be permanently <span className="break-all font-semibold">{data?.name}</span>? All of the data
removed. This action cannot be undone. related to the workspace will be permanently removed. This action cannot be
</p> undone.
</div> </p>
<div className="mt-3"> </span>
<p className="text-sm text-gray-500">
Enter the workspace name{" "} <div className="text-gray-600">
<span className="font-semibold">{selectedWorkspace?.name}</span> to <p className="break-all text-sm ">
continue: Enter the workspace name{" "}
</p> <span className="font-medium">{selectedWorkspace?.name}</span> to continue:
<Input </p>
type="text" <Input
placeholder="Project name" type="text"
className="mt-2" placeholder="Workspace name"
value={confirmProjectName} className="mt-2"
onChange={(e) => { value={confirmWorkspaceName}
setConfirmProjectName(e.target.value); onChange={(e) => {
}} setConfirmWorkspaceName(e.target.value);
name="workspaceName" }}
/> name="workspaceName"
</div> />
<div className="mt-3"> </div>
<p className="text-sm text-gray-500">
To confirm, type{" "} <div className="text-gray-600">
<span className="font-semibold">delete my workspace</span> below: <p className="text-sm">
</p> To confirm, type <span className="font-medium">delete my workspace</span>{" "}
<Input below:
type="text" </p>
placeholder="Enter 'delete my workspace'" <Input
className="mt-2" type="text"
onChange={(e) => { placeholder="Enter 'delete my workspace'"
if (e.target.value === "delete my workspace") { className="mt-2"
setConfirmDeleteMyProject(true); onChange={(e) => {
} else { if (e.target.value === "delete my workspace") {
setConfirmDeleteMyProject(false); setConfirmDeleteMyWorkspace(true);
} } else {
}} setConfirmDeleteMyWorkspace(false);
name="typeDelete" }
/> }}
</div> name="typeDelete"
</div> />
</div>
<div className="flex justify-end gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
{isDeleteLoading ? "Deleting..." : "Delete Workspace"}
</DangerButton>
</div> </div>
</div>
<div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<DangerButton onClick={handleDeletion} loading={isDeleteLoading || !canDelete}>
{isDeleteLoading ? "Deleting..." : "Delete"}
</DangerButton>
</div> </div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>