Fix snapshot pages permissions handling

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

apps/console/src/pages/organizations/snapshots/SnapshotsPage.tsx

@@ -35,8 +35,6 @@ import type { NodeOf } from "/types";
 import SnapshotFormDialog from "./dialog/SnapshotFormDialog";
 import { usePageTitle } from "@probo/hooks";
 import { useOrganizationId } from "/hooks/useOrganizationId";
-import { PermissionsContext } from "/providers/PermissionsContext";
-import { use } from "react";
 
 type Props = {
   queryRef: PreloadedQuery<SnapshotGraphListQuery>;
@@ -54,6 +52,7 @@ const snapshotsFragment = graphql`
           description
           type
           createdAt
+          canDelete: permission(action: "core:snapshot:delete")
         }
       }
     }
@@ -73,10 +72,9 @@ export default function SnapshotsPage(props: Props) {
   );
   const connectionId = data.snapshots.__id;
   const snapshots = data.snapshots.edges.map((edge) => edge.node);
-  const { isAuthorized } = use(PermissionsContext);
   usePageTitle(__("Snapshots"));
 
-  const hasAnyAction = isAuthorized("Snapshot", "deleteSnapshot");
+  const hasAnyAction = snapshots.some(({ canDelete }) => canDelete);
 
   return (
     <div className="space-y-6">
@@ -86,7 +84,7 @@ export default function SnapshotsPage(props: Props) {
           "Snapshots capture point-in-time views of your organization's compliance state. Create snapshots to track progress over time.",
         )}
       >
-        {isAuthorized("Organization", "createSnapshot") && (
+        {organization.canCreateSnapshot && (
           <SnapshotFormDialog connection={connectionId}>
             <Button variant="primary" icon={IconPlusLarge}>
               {__("New snapshot")}
@@ -142,7 +140,6 @@ type SnapshotRowProps = {
 function SnapshotRow(props: SnapshotRowProps) {
   const { __ } = useTranslate();
   const deleteSnapshot = useDeleteSnapshot(props.snapshot, props.connectionId);
-  const { isAuthorized } = use(PermissionsContext);
   const typePath = getSnapshotTypeUrlPath(props.snapshot.type);
 
   return (
@@ -164,7 +161,7 @@ function SnapshotRow(props: SnapshotRowProps) {
       {props.hasAnyAction && (
         <Td noLink width={50} className="text-end">
           <ActionDropdown>
-            {isAuthorized("Snapshot", "deleteSnapshot") && (
+            {props.snapshot.canDelete && (
               <DropdownItem
                 onClick={deleteSnapshot}
                 variant="danger"

apps/console/src/pages/organizations/snapshots/dialog/SnapshotFormDialog.tsx

@@ -34,6 +34,7 @@ const snapshotCreateMutation = graphql`
           description
           type
           createdAt
+          canDelete: permission(action: "core:snapshot:delete")
         }
       }
     }
@@ -60,14 +61,19 @@ export default function SnapshotFormDialog(props: Props) {
     errorMessage: __("Failed to create snapshot"),
   });
 
-  const { handleSubmit, register, reset, control, formState: { errors } } =
-    useFormWithSchema(snapshotSchema, {
-      defaultValues: {
-        name: "",
-        description: "",
-        type: "DATA",
-      },
-    });
+  const {
+    handleSubmit,
+    register,
+    reset,
+    control,
+    formState: { errors },
+  } = useFormWithSchema(snapshotSchema, {
+    defaultValues: {
+      name: "",
+      description: "",
+      type: "DATA",
+    },
+  });
 
   const onSubmit = handleSubmit(async (data) => {
     await mutate({
@@ -89,14 +95,7 @@ export default function SnapshotFormDialog(props: Props) {
     <Dialog
       ref={dialogRef}
       trigger={props.children}
-      title={
-        <Breadcrumb
-          items={[
-            __("Snapshots"),
-            __("New Snapshot"),
-          ]}
-        />
-      }
+      title={<Breadcrumb items={[__("Snapshots"), __("New Snapshot")]} />}
     >
       <form onSubmit={onSubmit}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
@@ -125,20 +124,14 @@ export default function SnapshotFormDialog(props: Props) {
               label={__("Type")}
               error={errors.type?.message}
             >
-              <ControlledField
-                control={control}
-                name="type"
-                type="select"
-              >
+              <ControlledField control={control} name="type" type="select">
                 <SnapshotTypeOptions />
               </ControlledField>
             </PropertyRow>
           </div>
         </DialogContent>
         <DialogFooter>
-          <Button type="submit">
-            {__("Create snapshot")}
-          </Button>
+          <Button type="submit">{__("Create snapshot")}</Button>
         </DialogFooter>
       </form>
     </Dialog>