feat: disable delete idp group button for restricted permissions

Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 19, 2025 · 9f5e30b · 9f5e30b
1 parent 7dcc0b7
commit 9f5e30b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/pages/permissions/PermissionIdpGroups.tsx b/src/pages/permissions/PermissionIdpGroups.tsx
@@ -94,14 +94,16 @@ const PermissionIdpGroups: FC = () => {
           title: idpGroup.name,
         },
         {
-          content: (
+          content: canEditGroup(idpGroup) ? (
             <Button
               appearance="link"
               dense
               onClick={() => panelParams.openEditIdpGroup(idpGroup.name)}
             >
               {idpGroup.groups.length}
             </Button>
+          ) : (
+            idpGroup.groups.length
           ),
           role: "cell",
           className: "u-align--right",

diff --git a/src/pages/permissions/actions/DeleteIdpGroupBtn.tsx b/src/pages/permissions/actions/DeleteIdpGroupBtn.tsx
@@ -3,13 +3,15 @@ import { Button, Icon } from "@canonical/react-components";
 import type { IdpGroup } from "types/permissions";
 import DeleteIdpGroupsModal from "./DeleteIdpGroupsModal";
 import { usePortal } from "@canonical/react-components";
+import { useIdpGroupEntitlements } from "util/entitlements/idp-groups";
 
 interface Props {
   idpGroup: IdpGroup;
 }
 
 const DeleteIdpGroupBtn: FC<Props> = ({ idpGroup }) => {
   const { openPortal, closePortal, isOpen, Portal } = usePortal();
+  const { canDeleteGroup } = useIdpGroupEntitlements();
 
   return (
     <>
@@ -20,7 +22,12 @@ const DeleteIdpGroupBtn: FC<Props> = ({ idpGroup }) => {
         onClick={openPortal}
         type="button"
         aria-label="Delete IDP group"
-        title="Delete IDP group"
+        title={
+          canDeleteGroup()
+            ? "Delete IDP group"
+            : "You do not have permission to delete this IDP group"
+        }
+        disabled={!canDeleteGroup(idpGroup)}
       >
         <Icon name="delete" />
       </Button>

diff --git a/src/pages/permissions/panels/PermissionSelector.tsx b/src/pages/permissions/panels/PermissionSelector.tsx
@@ -48,7 +48,7 @@ const PermissionSelector: FC<Props> = ({ onAddPermission, disableReason }) => {
   } = useQuery({
     queryKey: [queryKeys.permissions, resourceType],
     queryFn: () => fetchPermissions({ resourceType }),
-    enabled: !!resourceType && !!disableReason,
+    enabled: !!resourceType && !disableReason,
   });
 
   const { data: images = [] } = useImagesInAllProjects();