Buttons hidden by permissions

src/ui/raidInstance/RaidInstanceAdminButtons.tsx

@@ -1,25 +1,37 @@
 import { ButtonProps } from "@/components/button/Button";
 import DangerButton from "@/components/button/DangerButton";
 import PrimaryButton from "@/components/button/PrimaryButton";
+import { RaidInstance } from "@/interface/RaidInstance";
+import { useTheme } from "@/providers/ThemeProvider";
 import { BsPencilFill, BsTrash3 } from "react-icons/bs";
+import { Tooltip } from "react-tooltip";
 
 
 export default function RaidInstanceAdminButtons({
+	raidInstance,
 	buttonProps,
 	showRaidInstanceModal,
 	showDeleteRaidInstanceModal
 }:{
+	raidInstance?: RaidInstance;
 	buttonProps: ButtonProps;
 	showRaidInstanceModal: () => void;
 	showDeleteRaidInstanceModal: () => void;
 }){
+	const { theme } = useTheme();
+	const componentId = crypto.randomUUID().replaceAll("-", "");
+
+
 	return (
 		<div
 			className="flex flex-row gap-2"
 		>
 			<PrimaryButton
 				{...buttonProps}
+				id={`raidInstanceAdminButtonsEdit${componentId}`}
 				onClick={showRaidInstanceModal}
+				aria-label={`Edit ${raidInstance?.raidInstanceName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsPencilFill
 					size={22}
@@ -27,12 +39,29 @@ export default function RaidInstanceAdminButtons({
 			</PrimaryButton>
 			<DangerButton
 				{...buttonProps}
+				id={`raidInstanceAdminButtonsDelete${componentId}`}
 				onClick={showDeleteRaidInstanceModal}
+				aria-label={`Delete ${raidInstance?.raidInstanceName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsTrash3
 					size={22}
 				/>
 			</DangerButton>
+			<Tooltip
+				anchorSelect={`#raidInstanceAdminButtonsEdit${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Edit {raidInstance?.raidInstanceName}
+			</Tooltip>
+			<Tooltip
+				anchorSelect={`#raidInstanceAdminButtonsDelete${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Delete {raidInstance?.raidInstanceName}
+			</Tooltip>
 		</div>
 	);
 }

src/ui/raidInstance/RaidInstanceList.tsx

@@ -2,6 +2,8 @@ import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { RaidInstance } from "@/interface/RaidInstance";
+import { useAuth } from "@/providers/AuthProvider";
+import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
 import moment from "moment";
 import { useState } from "react";
 import { Link } from "react-router";
@@ -17,6 +19,7 @@ export default function RaidInstanceList({
 	raidInstances: RaidInstance[];
 	raidGroup: RaidGroup;
 }){
+	const { accountPermissions, raidGroupPermissions } = useAuth();
 	const [ selectedRaidInstance, setSelectedRaidInstance ] = useState<RaidInstance>();
 	const [ displayEditRaidInstanceModal, setDisplayEditRaidInstanceModal ] = useState(false);
 	const [ displayDeleteRaidInstanceModal, setDisplayDeleteRaidInstanceModal ] = useState(false);
@@ -25,7 +28,8 @@ export default function RaidInstanceList({
 	const buttonProps: ButtonProps = {
 		variant: "ghost",
 		size: "md",
-		shape: "square"
+		shape: "square",
+		disabled: !isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) || !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)
 	};
 
 
@@ -94,6 +98,7 @@ export default function RaidInstanceList({
 				&nbsp;
 			</div>
 			<RaidInstanceAdminButtons
+				raidInstance={raidInstance}
 				buttonProps={buttonProps}
 				showRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayEditRaidInstanceModal(true); }}
 				showDeleteRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayDeleteRaidInstanceModal(true); }}

src/ui/raidInstance/RaidInstanceTab.tsx

@@ -3,6 +3,8 @@ import TextInput from "@/components/input/TextInput";
 import Pagination from "@/components/pagination/Pagination";
 import { useGetRaidInstancesByRaidGroupCount } from "@/hooks/RaidInstanceHooks";
 import { RaidGroup } from "@/interface/RaidGroup";
+import { useAuth } from "@/providers/AuthProvider";
+import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import RaidInstanceLoader from "./RaidInstanceLoader";
@@ -14,6 +16,7 @@ export default function RaidInstanceTab({
 }:{
 	raidGroup: RaidGroup;
 }){
+	const { accountPermissions, raidGroupPermissions } = useAuth();
 	const [ displayCreateRaidInstanceModal, setDisplayCreateRaidInstanceModal ] = useState(false);
 	const [ page, setPage ] = useState(1);
 	const [ totalPages, setTotalPages ] = useState(1);
@@ -59,6 +62,7 @@ export default function RaidInstanceTab({
 					<PrimaryButton
 						className="text-nowrap"
 						onClick={() => setDisplayCreateRaidInstanceModal(true)}
+						disabled={!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
 					>
 						Create Raid Instance
 					</PrimaryButton>