Buttons hidden by permissions

2025-03-15 16:51:13 -04:00
parent 56236fd2ac
commit a842c24d0d
44 changed files with 624 additions and 94 deletions
--- a/src/ui/raidGroup/RaidGroupAdminButtons.tsx
+++ b/src/ui/raidGroup/RaidGroupAdminButtons.tsx
@@ -2,10 +2,14 @@ import { ButtonProps } from "@/components/button/Button";
 import DangerButton from "@/components/button/DangerButton";
 import PrimaryButton from "@/components/button/PrimaryButton";
 import TertiaryButton from "@/components/button/TertiaryButton";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useTheme } from "@/providers/ThemeProvider";
 import { BsChatRightText, BsPencilFill, BsTrash3 } from "react-icons/bs";
+import { Tooltip } from "react-tooltip";


 export default function RaidGroupAdminButtons({
+	raidGroup,
 	buttonProps,
 	showRaidGroupRequestModal,
 	showEditRaidGroupModal,
@@ -13,6 +17,7 @@ export default function RaidGroupAdminButtons({
 	hasRaidGroupPermissions,
 	hasRaidGroupRequest
 }:{
+	raidGroup: RaidGroup;
 	buttonProps: ButtonProps;
 	showRaidGroupRequestModal?: () => void;
 	showEditRaidGroupModal: () => void;
@@ -20,6 +25,10 @@ export default function RaidGroupAdminButtons({
 	hasRaidGroupPermissions: boolean;
 	hasRaidGroupRequest: boolean;
 }){
+	const { theme } = useTheme();
+	const componentId = crypto.randomUUID().replaceAll("-", "");
+
+
 	return (
 		<div
 			className="flex flex-row items-center justify-center gap-2"
@@ -27,9 +36,12 @@ export default function RaidGroupAdminButtons({
 			{
 				!hasRaidGroupPermissions &&
 				<TertiaryButton
+					id={`raidGroupRequestButton${componentId}`}
 					{...buttonProps}
 					onClick={showRaidGroupRequestModal}
 					disabled={hasRaidGroupRequest}
+					aria-label={`Request to join ${raidGroup.raidGroupName}`}
+					data-tooltip-delay-show={750}
 				>
 					<BsChatRightText
 						size={22}
@@ -37,21 +49,48 @@ export default function RaidGroupAdminButtons({
 				</TertiaryButton>
 			}
 			<PrimaryButton
+				id={`raidGroupEditButton${componentId}`}
 				{...buttonProps}
 				onClick={showEditRaidGroupModal}
+				aria-label={`Edit ${raidGroup.raidGroupName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsPencilFill
 					size={22}
 				/>
 			</PrimaryButton>
 			<DangerButton
+				id={`raidGroupDeleteButton${componentId}`}
 				{...buttonProps}
 				onClick={showDeleteRaidGroupModal}
+				aria-label={`Delete ${raidGroup.raidGroupName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsTrash3
 					size={22}
 				/>
 			</DangerButton>
+			<Tooltip
+				anchorSelect={`#raidGroupRequestButton${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Request to join {raidGroup.raidGroupName}
+			</Tooltip>
+			<Tooltip
+				anchorSelect={`#raidGroupEditButton${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Edit {raidGroup.raidGroupName}
+			</Tooltip>
+			<Tooltip
+				anchorSelect={`#raidGroupDeleteButton${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Delete {raidGroup.raidGroupName}
+			</Tooltip>
 		</div>
 	);
 }
--- a/src/ui/raidGroup/RaidGroupsList.tsx
+++ b/src/ui/raidGroup/RaidGroupsList.tsx
@@ -2,7 +2,7 @@ import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { useAuth } from "@/providers/AuthProvider";
-import { containsRaidGroupPermission, containsRaidGroupRequest } from "@/util/PermissionUtil";
+import { containsRaidGroupPermission, containsRaidGroupRequest, isRaidGroupAdmin } from "@/util/PermissionUtil";
 import { useState } from "react";
 import { Link } from "react-router";
 import RaidGroupRequestModal from "../raidGroupRequest/modal/RaidGroupRequestModal";
@@ -20,7 +20,7 @@ export default function RaidGroupsList({
 	const [ displayRaidGroupRequestModal, setDisplayRaidGroupRequestModal ] = useState(false);
 	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
 	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
-	const { raidGroupPermissions, raidGroupRequests } = useAuth();
+	const { accountPermissions, raidGroupPermissions, raidGroupRequests } = useAuth();


 	const buttonProps: ButtonProps = {
@@ -73,7 +73,11 @@ export default function RaidGroupsList({
 				&nbsp;
 			</div>
 			<RaidGroupAdminButtons
-				buttonProps={buttonProps}
+				raidGroup={raidGroup}
+				buttonProps={{
+					...buttonProps,
+					disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)
+				}}
 				showRaidGroupRequestModal={() => {
 					setSelectedRaidGroup(raidGroup);
 					setDisplayRaidGroupRequestModal(true);
@@ -86,7 +90,7 @@ export default function RaidGroupsList({
 					setSelectedRaidGroup(raidGroup);
 					setDisplayDeleteRaidGroupModal(true);
 				}}
-				hasRaidGroupPermissions={containsRaidGroupPermission(raidGroup.raidGroupId ?? "", raidGroupPermissions)}
+				hasRaidGroupPermissions={containsRaidGroupPermission(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
 				hasRaidGroupRequest={containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)}
 			/>
 		</div>
--- a/src/ui/raidGroup/RaidGroupsListSkeleton.tsx
+++ b/src/ui/raidGroup/RaidGroupsListSkeleton.tsx
@@ -1,5 +1,6 @@
 import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
 import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
 import { elementBg } from "@/util/SkeletonUtil";
 import RaidGroupAdminButtons from "./RaidGroupAdminButtons";

@@ -49,8 +50,11 @@ function RaidGroupSkeleton(): React.ReactNode[]{
 			shape: "square" as ButtonShape,
 			disabled: true
 		},
+		showRaidGroupRequestModal: () => {},
 		showEditRaidGroupModal: () => {},
-		showDeleteRaidGroupModal: () => {}
+		showDeleteRaidGroupModal: () => {},
+		hasRaidGroupPermissions: false,
+		hasRaidGroupRequest: false
 	}
 	const elements: React.ReactNode[] = [
 		<div
@@ -63,7 +67,7 @@ function RaidGroupSkeleton(): React.ReactNode[]{
 			className={`flex flex-row items-center justify-center gap-2 pl-16`}
 		>
 			<div className="py-4 border-l border-neutral-500">&nbsp;</div>
-			<RaidGroupAdminButtons {...buttonsProps}/>
+			<RaidGroupAdminButtons raidGroup={{} as RaidGroup} {...buttonsProps}/>
 		</div>
 	];

--- a/src/ui/raidGroup/modals/RaidGroupModal.tsx
+++ b/src/ui/raidGroup/modals/RaidGroupModal.tsx
@@ -32,7 +32,7 @@ export default function RaidGroupModal({
 		setRaidGroupName(raidGroup?.raidGroupName ?? "");
 		setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
 		setIconFile(null);
-	}, [ raidGroup, setRaidGroupName, setRaidGroupIcon ]);
+	}, [ display, raidGroup, setRaidGroupName, setRaidGroupIcon ]);


 	const updateRaidGroupMutate = useUpdateRaidGroup();
@@ -47,25 +47,25 @@ export default function RaidGroupModal({
 	useEffect(() => {
 		if(updateRaidGroupMutate.status === "success"){
 			updateRaidGroupMutate.reset();
-			addSuccessMessage(`Updated raid group ${raidGroupName}`);
+			addSuccessMessage(`Updated raid group ${raidGroup?.raidGroupName}`);
 			close();
 		}
 		else if(updateRaidGroupMutate.status === "error"){
 			updateRaidGroupMutate.reset();
-			addErrorMessage(`Error updating raid group ${raidGroupName}: ${updateRaidGroupMutate.error.message}`);
+			addErrorMessage(`Error updating raid group ${raidGroup?.raidGroupName}: ${updateRaidGroupMutate.error.message}`);
 			console.log(updateRaidGroupMutate.error);
 		}
 		else if(createRaidGroupMutate.status === "success"){
 			createRaidGroupMutate.reset();
-			addSuccessMessage(`Created raid group ${raidGroupName}`);
+			addSuccessMessage(`Created raid group ${raidGroup?.raidGroupName}`);
 			close();
 		}
 		else if(createRaidGroupMutate.status === "error"){
 			createRaidGroupMutate.reset();
-			addErrorMessage(`Error creating raid group ${raidGroupName}: ${createRaidGroupMutate.error.message}`);
+			addErrorMessage(`Error creating raid group ${raidGroup?.raidGroupName}: ${createRaidGroupMutate.error.message}`);
 			console.log(createRaidGroupMutate.error);
 		}
-	}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroupName, close, addSuccessMessage, addErrorMessage ]);
+	}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroup, close, addSuccessMessage, addErrorMessage ]);


 	const updateRaidGroup = () => {