feat: implement revoke access functionality for app, dataset, and workerpool orders

Author: ErwanDecoster

src/modules/access/access/RevokeAccess.tsx

@@ -0,0 +1,72 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  PublishedApporder,
+  PublishedDatasetorder,
+  PublishedWorkerpoolorder,
+} from 'iexec/IExecOrderbookModule';
+import { LoaderCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { getIExec } from '@/externals/iexecSdkClient';
+import useUserStore from '@/stores/useUser.store';
+
+export default function RevokeAccess({
+  access,
+}: {
+  access: PublishedApporder | PublishedDatasetorder | PublishedWorkerpoolorder;
+}) {
+  const { chainId } = useUserStore();
+  const queryClient = useQueryClient();
+
+  if (!access) return;
+
+  console.log('access to revoke', access);
+
+  const order = access.order;
+
+  const revokeAccessMutation = useMutation({
+    mutationFn: async () => {
+      const iexec = await getIExec();
+
+      if ('app' in order) {
+        return await iexec.order.cancelApporder(order);
+      } else if ('dataset' in order) {
+        return await iexec.order.cancelDatasetorder(order);
+      } else if ('workerpool' in order) {
+        return await iexec.order.cancelWorkerpoolorder(order);
+      } else {
+        throw new Error('Unknown order type');
+      }
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+    onSuccess: () => {
+      let accessType = '';
+      if ('app' in order) {
+        accessType = 'App';
+      } else if ('dataset' in order) {
+        accessType = 'Dataset';
+      } else {
+        accessType = 'Workerpool';
+      }
+      queryClient.invalidateQueries({
+        queryKey: [chainId, 'address', `${accessType}sGrantedAccess`],
+      });
+    },
+  });
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => {
+        revokeAccessMutation.mutate();
+      }}
+    >
+      {revokeAccessMutation.isPending && (
+        <LoaderCircle className="animate-spin" />
+      )}
+      Revoke access
+    </Button>
+  );
+}

src/modules/addresses/address/grantedAccess/AddressAppsGrantedAccessTable.tsx

@@ -96,6 +96,12 @@ export function AddressAppsGrantedAccessTable({
     currentPage: currentPage - 1,
   });
 
+  const { address: userAddress } = useUserStore();
+  const filteredColumns =
+    userAddress === addressAddress
+      ? columns
+      : columns.filter((c) => c.accessorKey !== 'revokeAccess');
+
   return (
     <div className="space-y-6">
       <h2 className="flex items-center gap-2 font-extrabold">
@@ -113,7 +119,7 @@ export function AddressAppsGrantedAccessTable({
         <ErrorAlert message="An error occurred during address apps access loading." />
       ) : (
         <DataTable
-          columns={columns}
+          columns={filteredColumns}
           data={access}
           tableLength={PREVIEW_TABLE_LENGTH}
         />

src/modules/addresses/address/grantedAccess/AddressDatasetsGrantedAccessTable.tsx

@@ -97,6 +97,12 @@ export function AddressDatasetsGrantedAccessTable({
     addressAddress,
     currentPage: currentPage - 1,
   });
+  const { address: userAddress } = useUserStore();
+
+  const filteredColumns =
+    userAddress !== addressAddress
+      ? columns.filter((c) => c.accessorKey !== 'revokeAccess')
+      : columns;
 
   return (
     <div className="space-y-6">
@@ -115,7 +121,7 @@ export function AddressDatasetsGrantedAccessTable({
         <ErrorAlert message="An error occurred during address datasets access loading." />
       ) : (
         <DataTable
-          columns={columns}
+          columns={filteredColumns}
           data={access}
           tableLength={PREVIEW_TABLE_LENGTH}
         />

src/modules/addresses/address/grantedAccess/AddressWorkerpoolsGrantedAccessTable.tsx

@@ -99,6 +99,12 @@ export function AddressWorkerpoolsGrantedAccessTable({
     currentPage: currentPage - 1,
   });
 
+  const { address: userAddress } = useUserStore();
+  const filteredColumns =
+    userAddress === addressAddress
+      ? columns
+      : columns.filter((c) => c.accessorKey !== 'revokeAccess');
+
   return (
     <div className="space-y-6">
       <h2 className="flex items-center gap-2 font-extrabold">
@@ -116,7 +122,7 @@ export function AddressWorkerpoolsGrantedAccessTable({
         <ErrorAlert message="An error occurred during address workerpools access loading." />
       ) : (
         <DataTable
-          columns={columns}
+          columns={filteredColumns}
           data={access}
           tableLength={PREVIEW_TABLE_LENGTH}
         />

src/modules/addresses/address/grantedAccess/addressAppColumns.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { PublishedApporder } from 'iexec/IExecOrderbookModule';
 import CopyButton from '@/components/CopyButton';
+import RevokeAccess from '@/modules/access/access/RevokeAccess';
 import useUserStore from '@/stores/useUser.store';
 import { getTokenSymbol } from '@/utils/chain.utils';
 import { nrlcToRlc } from '@/utils/nrlcToRlc';
@@ -84,4 +85,14 @@ export const columns: ColumnDef<PublishedApporder>[] = [
     header: 'Remaining',
     cell: ({ row }) => <span>{row.original.remaining}</span>,
   },
+  {
+    id: 'revokeAccess',
+    accessorKey: 'revokeAccess',
+    header: 'Revoke Access',
+    cell: ({ row }) => (
+      <span className="py-3!">
+        <RevokeAccess access={row.original} />
+      </span>
+    ),
+  },
 ];

src/modules/addresses/address/grantedAccess/addressDatasetColumns.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { PublishedDatasetorder } from 'iexec/IExecOrderbookModule';
 import CopyButton from '@/components/CopyButton';
+import RevokeAccess from '@/modules/access/access/RevokeAccess';
 import useUserStore from '@/stores/useUser.store';
 import { getTokenSymbol } from '@/utils/chain.utils';
 import { nrlcToRlc } from '@/utils/nrlcToRlc';
@@ -84,4 +85,14 @@ export const columns: ColumnDef<PublishedDatasetorder>[] = [
     header: 'Remaining',
     cell: ({ row }) => <span>{row.original.remaining}</span>,
   },
+  {
+    id: 'revokeAccess',
+    accessorKey: 'revokeAccess',
+    header: 'Revoke Access',
+    cell: ({ row }) => (
+      <span className="py-3!">
+        <RevokeAccess access={row.original} />
+      </span>
+    ),
+  },
 ];

src/modules/addresses/address/grantedAccess/addressWorkerpoolColumns.tsx

@@ -1,6 +1,7 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { PublishedWorkerpoolorder } from 'iexec/IExecOrderbookModule';
 import CopyButton from '@/components/CopyButton';
+import RevokeAccess from '@/modules/access/access/RevokeAccess';
 import useUserStore from '@/stores/useUser.store';
 import { getTokenSymbol } from '@/utils/chain.utils';
 import { nrlcToRlc } from '@/utils/nrlcToRlc';
@@ -87,4 +88,14 @@ export const columns: ColumnDef<PublishedWorkerpoolorder>[] = [
     header: 'Remaining',
     cell: ({ row }) => <span>{row.original.remaining}</span>,
   },
+  {
+    id: 'revokeAccess',
+    accessorKey: 'revokeAccess',
+    header: 'Revoke Access',
+    cell: ({ row }) => (
+      <span className="py-3!">
+        <RevokeAccess access={row.original} />
+      </span>
+    ),
+  },
 ];