feat: add WorkerpoolAccessTable component and integrate it into WorkerpoolsRoute

Author: ErwanDecoster

src/modules/access/workerpoolColumns.tsx

@@ -0,0 +1,53 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { PublishedWorkerpoolorder } from 'iexec/IExecOrderbookModule';
+import CopyButton from '@/components/CopyButton';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+export const columns: ColumnDef<PublishedWorkerpoolorder>[] = [
+  {
+    accessorKey: 'order.apprestrict',
+    header: 'App Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(row.original.order.apprestrict, {
+          startLen: 8,
+        })}
+        textToCopy={row.original.order.apprestrict}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.requesterrestrict',
+    header: 'Requester Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(row.original.order.requesterrestrict, {
+          startLen: 8,
+        })}
+        textToCopy={row.original.order.requesterrestrict}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.datasetrestrict',
+    header: 'Dataset Restriction',
+    cell: ({ row }) => (
+      <CopyButton
+        displayText={truncateAddress(row.original.order.datasetrestrict, {
+          startLen: 8,
+        })}
+        textToCopy={row.original.order.datasetrestrict}
+      />
+    ),
+  },
+  {
+    accessorKey: 'order.volume',
+    header: 'Volume',
+    cell: ({ row }) => <span>{row.original.order.volume}</span>,
+  },
+  {
+    accessorKey: 'remaining',
+    header: 'Remaining',
+    cell: ({ row }) => <span>{row.original.remaining}</span>,
+  },
+];

src/modules/workerpools/workerpool/WorkerpoolAccessTable.tsx

@@ -0,0 +1,104 @@
+import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
+import { useQuery } from '@tanstack/react-query';
+import { DataTable } from '@/components/DataTable';
+import { PaginatedNavigation } from '@/components/PaginatedNavigation';
+import { getIExec } from '@/externals/iexecSdkClient';
+import { usePageParam } from '@/hooks/usePageParam';
+import { ErrorAlert } from '@/modules/ErrorAlert';
+import { columns } from '@/modules/access/workerpoolColumns';
+import useUserStore from '@/stores/useUser.store';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+
+function useWorkerpoolAccessData({
+  workerpoolAddress,
+  currentPage,
+}: {
+  workerpoolAddress: string;
+  currentPage: number;
+}) {
+  const { chainId } = useUserStore();
+
+  const queryKey = [
+    chainId,
+    'workerpool',
+    'access',
+    workerpoolAddress,
+    currentPage,
+  ];
+  const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
+    {
+      queryKey,
+      queryFn: async () => {
+        const iexec = await getIExec();
+
+        const { count, orders } =
+          await iexec.orderbook.fetchWorkerpoolOrderbook();
+
+        return { count, orders };
+      },
+      refetchInterval: TABLE_REFETCH_INTERVAL,
+      placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    }
+  );
+
+  const access = data?.orders || [];
+  const count = data?.count || 0;
+  const hasNextPage = count > DETAIL_TABLE_LENGTH;
+  const additionalPages = hasNextPage
+    ? Math.ceil(count / DETAIL_TABLE_LENGTH) - 1
+    : 0;
+
+  return {
+    data: access,
+    isLoading,
+    isRefetching,
+    isError,
+    additionalPages,
+    hasPastError: isError || errorUpdateCount > 0,
+  };
+}
+
+export function WorkerpoolAccessTable({
+  workerpoolAddress,
+  setLoading,
+  setOutdated,
+}: {
+  workerpoolAddress: string;
+  setLoading: (loading: boolean) => void;
+  setOutdated: (outdated: boolean) => void;
+}) {
+  const [currentPage, setCurrentPage] = usePageParam('workerpoolAccessPage');
+  const {
+    data: access,
+    isError,
+    isLoading,
+    isRefetching,
+    additionalPages,
+    hasPastError,
+  } = useWorkerpoolAccessData({
+    workerpoolAddress,
+    currentPage: currentPage - 1,
+  });
+
+  setLoading(isLoading || isRefetching);
+  setOutdated(access.length > 0 && isError);
+
+  return (
+    <div className="space-y-6">
+      {hasPastError && !access.length ? (
+        <ErrorAlert message="A error occurred during workerpool access loading." />
+      ) : (
+        <DataTable
+          columns={columns}
+          data={access}
+          tableLength={DETAIL_TABLE_LENGTH}
+        />
+      )}
+      <PaginatedNavigation
+        currentPage={currentPage}
+        totalPages={currentPage + additionalPages}
+        onPageChange={setCurrentPage}
+      />
+    </div>
+  );
+}

src/modules/workerpools/workerpool/WorkerpoolDealsTable.tsx

@@ -1,7 +1,6 @@
 import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
-import { LoaderCircle } from 'lucide-react';
 import { DataTable } from '@/components/DataTable';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import { usePageParam } from '@/hooks/usePageParam';

src/routes/$chainSlug/_layout/workerpool/$workerpoolAddress.tsx

@@ -13,6 +13,7 @@ import { Tabs } from '@/modules/Tabs';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import { WorkerpoolDealsTable } from '@/modules/workerpools/workerpool/WorkerpoolDealsTable';
 import { buildWorkerpoolDetails } from '@/modules/workerpools/workerpool/buildWorkerpoolDetails';
+import { WorkerpoolAccessTable } from '@/modules/workerpools/workerpool/workerpoolAccessTable';
 import { WorkerpoolBreadcrumbs } from '@/modules/workerpools/workerpool/workerpoolBreadcrumbs';
 import { workerpoolQuery } from '@/modules/workerpools/workerpool/workerpoolQuery';
 import useUserStore from '@/stores/useUser.store';
@@ -138,6 +139,13 @@ function WorkerpoolsRoute() {
           setOutdated={setIsOutdatedChild}
         />
       )}
+      {currentTab === 2 && (
+        <WorkerpoolAccessTable
+          workerpoolAddress={workerpoolAddress}
+          setLoading={setIsLoadingChild}
+          setOutdated={setIsOutdatedChild}
+        />
+      )}
     </div>
   );
 }