Fix audit pages permission handling

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/pages/organizations/audits/AuditDetailsPage.tsx

@@ -44,8 +44,6 @@ import {
   type GraphQLError,
 } from "@probo/helpers";
 import type { AuditGraphNodeQuery } from "/__generated__/core/AuditGraphNodeQuery.graphql";
-import { use } from "react";
-import { PermissionsContext } from "/providers/PermissionsContext";
 import { useNavigate } from "react-router";
 
 const updateAuditSchema = z.object({
@@ -73,7 +71,6 @@ export default function AuditDetailsPage(props: Props) {
   const auditEntry = audit.node;
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
-  const { isAuthorized } = use(PermissionsContext);
   const navigate = useNavigate();
 
   const deleteAudit = useDeleteAudit(
@@ -178,7 +175,7 @@ export default function AuditDetailsPage(props: Props) {
           </Badge>
         </div>
         <ActionDropdown variant="secondary">
-          {isAuthorized("Audit", "deleteAudit") && (
+          {auditEntry.canDelete && (
             <DropdownItem
               variant="danger"
               icon={IconTrashCan}
@@ -218,7 +215,7 @@ export default function AuditDetailsPage(props: Props) {
           </Field>
 
           <div className="flex justify-end">
-            {formState.isDirty && isAuthorized("Audit", "updateAudit") && (
+            {formState.isDirty && auditEntry.canUpdate && (
               <Button type="submit" disabled={formState.isSubmitting}>
                 {formState.isSubmitting ? __("Updating...") : __("Update")}
               </Button>

apps/console/src/pages/organizations/audits/AuditsPage.tsx

@@ -35,8 +35,6 @@ import type {
   AuditsPageFragment$key,
 } from "/__generated__/core/AuditsPageFragment.graphql";
 import { SortableTable } from "/components/SortableTable";
-import { PermissionsContext } from "/providers/PermissionsContext";
-import { use } from "react";
 
 const paginatedAuditsFragment = graphql`
   fragment AuditsPageFragment on Organization
@@ -72,6 +70,8 @@ const paginatedAuditsFragment = graphql`
             name
           }
           createdAt
+          canUpdate: permission(action: "core:audit:update")
+          canDelete: permission(action: "core:audit:delete")
         }
       }
     }
@@ -87,7 +87,6 @@ type Props = {
 export default function AuditsPage(props: Props) {
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
-  const { isAuthorized } = use(PermissionsContext);
 
   const data = usePreloadedQuery(auditsQuery, props.queryRef);
   const pagination = usePaginationFragment(
@@ -99,9 +98,9 @@ export default function AuditsPage(props: Props) {
 
   usePageTitle(__("Audits"));
 
-  const hasAnyAction =
-    isAuthorized("Audit", "updateAudit") ||
-    isAuthorized("Audit", "deleteAudit");
+  const hasAnyAction = audits.some(
+    (audit) => audit.canDelete || audit.canUpdate,
+  );
 
   return (
     <div className="space-y-6">
@@ -111,7 +110,7 @@ export default function AuditsPage(props: Props) {
           "Manage your organization's compliance audits and their progress.",
         )}
       >
-        {isAuthorized("Organization", "createAudit") && (
+        {data.node.canCreateAudit && (
           <CreateAuditDialog
             connection={connectionId}
             organizationId={organizationId}
@@ -159,7 +158,6 @@ function AuditRow({
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
   const deleteAudit = useDeleteAudit(entry, connectionId);
-  const { isAuthorized } = use(PermissionsContext);
 
   return (
     <Tr to={`/organizations/${organizationId}/audits/${entry.id}`}>
@@ -184,7 +182,7 @@ function AuditRow({
       {hasAnyAction && (
         <Td noLink width={50} className="text-end">
           <ActionDropdown>
-            {isAuthorized("Audit", "deleteAudit") && (
+            {entry.canDelete && (
               <DropdownItem
                 onClick={deleteAudit}
                 variant="danger"