binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5746]fix: workspace member modal z-index #8410

Browse source
This commit is contained in:
Vamsi Krishna 2025-12-22 13:50:50 +05:30 • committed by GitHub
parent 46453560f2
commit 57bbf3cf43
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 41 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

116
apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
View file

@ -1,10 +1,9 @@
import React, { useState } from "react"; import { useState } from "react"; import { observer } from "mobx-react";
import { observer } from "mobx-react";
import { AlertTriangle } from "lucide-react"; import { AlertTriangle } from "lucide-react";
import { Dialog, Transition } from "@headlessui/react";
// ui // ui
import { useTranslation } from "@plane/i18n"; import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button"; import { Button } from "@plane/propel/button";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
// hooks // hooks
import { useUser } from "@/hooks/store/user"; import { useUser } from "@/hooks/store/user";
@ -40,79 +39,46 @@ export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMe
}; };
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<Transition.Child <div className="sm:flex sm:items-start">
as={React.Fragment} <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
enter="ease-out duration-300" <AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
enterFrom="opacity-0" </div>
enterTo="opacity-100" <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
leave="ease-in duration-200" <h3 className="text-h5-medium leading-6 text-primary">
leaveFrom="opacity-100" {currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
leaveTo="opacity-0" </h3>
> <div className="mt-2">
<div className="fixed inset-0 bg-backdrop transition-opacity" /> {currentUser?.id === userDetails.id ? (
</Transition.Child> <p className="text-body-xs-regular text-secondary">
{t("workspace_settings.settings.members.leave_confirmation")}
<div className="fixed inset-0 z-20 overflow-y-auto"> </p>
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> ) : (
<Transition.Child <p className="text-body-xs-regular text-secondary">
as={React.Fragment} {/* TODO: Add translation here */}
enter="ease-out duration-300" Are you sure you want to remove member- <span className="font-bold">{userDetails?.display_name}</span>
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" ? They will no longer have access to this workspace. This action cannot be undone.
enterTo="opacity-100 translate-y-0 sm:scale-100" </p>
leave="ease-in duration-200" )}
leaveFrom="opacity-100 translate-y-0 sm:scale-100" </div>
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-danger-primary" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<Dialog.Title as="h3" className="text-h5-medium leading-6 text-primary">
{currentUser?.id === userDetails.id
? "Leave workspace?"
: `Remove ${userDetails?.display_name}?`}
</Dialog.Title>
<div className="mt-2">
{currentUser?.id === userDetails.id ? (
<p className="text-body-xs-regular text-secondary">
{t("workspace_settings.settings.members.leave_confirmation")}
</p>
) : (
<p className="text-body-xs-regular text-secondary">
{/* TODO: Add translation here */}
Are you sure you want to remove member-{" "}
<span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
access to this workspace. This action cannot be undone.
</p>
)}
</div>
</div>
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="secondary" size="lg" onClick={handleClose}>
{t("cancel")}
</Button>
<Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
{currentUser?.id === userDetails.id
? isRemoving
? t("leaving")
: t("leave")
: isRemoving
? t("removing")
: t("remove")}
</Button>
</div>
</Dialog.Panel>
</Transition.Child>
</div> </div>
</div> </div>
</Dialog> </div>
</Transition.Root> <div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="secondary" size="lg" onClick={handleClose}>
{t("cancel")}
</Button>
<Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
{currentUser?.id === userDetails.id
? isRemoving
? t("leaving")
: t("leave")
: isRemoving
? t("removing")
: t("remove")}
</Button>
</div>
</ModalCore>
); );
}); });