Fix tables page size issue and refactor table component

JoinColony · Dec 20, 2024 · 0f8a145 · 0f8a145
1 parent 9ee0189
commit 0f8a145
Show file tree

Hide file tree

Showing 62 changed files with 1,577 additions and 923 deletions.
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,5 @@ amplify/backend/api/colonycdapp/resolvers/*
 
 # Temp schema file generated by the codegen
 tmp-schema.graphql
+
+storybook-static
diff --git a/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx b/src/components/common/ColonyActionsTable/ColonyActionsTable.tsx
@@ -2,7 +2,7 @@ import React, { type FC } from 'react';
 
 import { type ColonyAction } from '~types/graphql.ts';
 import { formatText } from '~utils/intl.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 
 import { useActionsTableProps } from './hooks/useActionsTableProps.tsx';
@@ -17,7 +17,7 @@ const ColonyActionsTable: FC<ColonyActionsTableProps> = ({
   actionProps,
   ...rest
 }) => {
-  const { tableProps, renderSubComponent } = useActionsTableProps(
+  const { tableProps } = useActionsTableProps(
     rest,
     actionProps.setSelectedAction,
   );
@@ -35,7 +35,10 @@ const ColonyActionsTable: FC<ColonyActionsTableProps> = ({
       )}
       <Table<ColonyAction>
         {...tableProps}
-        renderSubComponent={renderSubComponent}
+        borders={{
+          type: 'wide',
+          visible: true,
+        }}
       />
     </>
   );

diff --git a/src/components/common/ColonyActionsTable/RecentActivityTable.tsx b/src/components/common/ColonyActionsTable/RecentActivityTable.tsx
@@ -3,7 +3,7 @@ import React, { type FC } from 'react';
 import useActionsCount from '~hooks/useActionsCount.ts';
 import useGetSelectedDomainFilter from '~hooks/useGetSelectedDomainFilter.tsx';
 import { type ColonyAction } from '~types/graphql.ts';
-import Table from '~v5/common/Table/index.ts';
+import { Table } from '~v5/common/Table/Table.tsx';
 
 import { useActionsTableProps } from './hooks/useActionsTableProps.tsx';
 import { useHandleRedoAction } from './hooks/useHandleRedoAction.ts';
@@ -13,6 +13,7 @@ const displayName = 'common.RecentActivityTable';
 
 const RecentActivityTable: FC<ColonyActionsTableProps> = ({
   actionProps,
+  pageSize = 10,
   ...props
 }) => {
   const selectedDomain = useGetSelectedDomainFilter();
@@ -23,13 +24,20 @@ const RecentActivityTable: FC<ColonyActionsTableProps> = ({
       domainId: nativeDomainId,
     });
 
-  const pageCount = Math.ceil(totalActions / (props.pageSize ?? 10));
+  const pageCount = Math.ceil(totalActions / pageSize);
 
-  const { tableProps, renderSubComponent } = useActionsTableProps(
+  const { tableProps } = useActionsTableProps(
     {
       ...props,
+      pageSize,
+      pagination: {
+        visible: totalActions > 0,
+        pageTotalVisible: !loadingActionsCount && pageCount > 1,
+      },
+      overrides: {
+        pageCount,
+      },
       showUserAvatar: false,
-      showTotalPagesNumber: !loadingActionsCount,
       isRecentActivityVariant: true,
     },
     actionProps.setSelectedAction,
@@ -41,13 +49,10 @@ const RecentActivityTable: FC<ColonyActionsTableProps> = ({
     <Table<ColonyAction>
       {...tableProps}
       showTableHead={false}
-      showTableBorder={false}
-      renderSubComponent={renderSubComponent}
-      pageCount={pageCount}
-      withBorder={false}
-      withNarrowBorder
-      alwaysShowPagination={totalActions > 0}
-      showTotalPagesNumber={pageCount > 1}
+      borders={{
+        type: 'narrow',
+        visible: false,
+      }}
     />
   );
 };

diff --git a/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx b/src/components/common/ColonyActionsTable/hooks/useActionsTableProps.tsx
@@ -26,11 +26,10 @@ export const useActionsTableProps = (
   const {
     className,
     pageSize = 10,
-    additionalPaginationButtonsContent,
-    showTotalPagesNumber,
+    pagination,
+    overrides,
     showUserAvatar,
     isRecentActivityVariant,
-    ...rest
   } = props;
 
   const { searchFilter, selectedFiltersCount } = useFiltersContext();
@@ -49,23 +48,24 @@ export const useActionsTableProps = (
     pageNumber,
   } = useActionsTableData(pageSize);
 
+  const getMenuProps = useGetMenuProps({
+    setAction,
+    colonyActions,
+    colonyActionsLoading,
+  });
+
   const columns = useColonyActionsTableColumns({
     loading: colonyActionsLoading,
     loadingMotionStates,
     refetchMotionStates,
     showUserAvatar,
     isRecentActivityVariant,
+    getMenuProps,
   });
   const {
     actionSidebarToggle: [, { toggleOn: toggleActionSidebarOn }],
   } = useActionSidebarContext();
 
-  const getMenuProps = useGetMenuProps({
-    setAction,
-    colonyActions,
-    colonyActionsLoading,
-  });
-
   const renderRowLink = useRenderRowLink(
     colonyActionsLoading,
     isRecentActivityVariant,
@@ -80,87 +80,101 @@ export const useActionsTableProps = (
 
   const isMobile = useMobile();
 
-  const tableProps = merge(
-    {
-      className: clsx(
-        className,
-        'sm:[&_td:first-child]:pl-[1.125rem] sm:[&_td]:pr-[1.125rem] sm:[&_th:first-child]:pl-[1.125rem] sm:[&_th:not(:first-child)]:pl-0 sm:[&_th]:pr-[1.125rem]',
-        {
-          'sm:[&_td]:h-[66px]': isRecentActivityVariant,
-          'sm:[&_td]:h-[70px]': !isRecentActivityVariant,
-          'sm:[&_tr:hover]:bg-gray-25':
-            colonyActions.length > 0 && !colonyActionsLoading,
+  const tableProps = merge({
+    className: clsx(
+      className,
+      'sm:[&_td:first-child]:pl-[1.125rem] sm:[&_td]:pr-[1.125rem] sm:[&_th:first-child]:pl-[1.125rem] sm:[&_th:not(:first-child)]:pl-0 sm:[&_th]:pr-[1.125rem]',
+      {
+        'sm:[&_td]:h-[66px]': isRecentActivityVariant,
+        'sm:[&_td]:h-[70px]': !isRecentActivityVariant,
+        'sm:[&_tr:hover]:bg-gray-25':
+          colonyActions.length > 0 && !colonyActionsLoading,
+      },
+    ),
+    overrides: merge(
+      {
+        enableSortingRemoval: false,
+        onSortingChange: setSorting,
+        state: {
+          columnVisibility: isMobile
+            ? {
+                description: true,
+                motionState: true,
+                team: false,
+                createdAt: false,
+                [MEATBALL_MENU_COLUMN_ID]: false,
+              }
+            : {
+                description: true,
+                motionState: true,
+                team: false,
+                createdAt: true,
+                expander: false,
+              },
+          sorting,
+          pagination: {
+            pageIndex: pageNumber - 1,
+            pageSize,
+          },
         },
-      ),
-      enableSortingRemoval: false,
-      renderCellWrapper: isMobile ? undefined : renderRowLink,
-      state: {
-        columnVisibility: isMobile
-          ? {
-              description: true,
-              motionState: true,
-              team: false,
-              createdAt: false,
-              [MEATBALL_MENU_COLUMN_ID]: false,
-            }
-          : {
-              expander: false,
-            },
-        sorting,
-        pagination: {
-          pageIndex: pageNumber - 1,
-          pageSize,
+        manualPagination: true,
+        getRowId: (row) => row.transactionHash,
+      },
+      overrides,
+    ),
+    pagination: merge(
+      {
+        children: colonyActionsLoading ? undefined : pagination?.children,
+        canNextPage: hasNextPage || colonyActionsLoading,
+        canPreviousPage: hasPrevPage,
+        onPageChange: (direction) => {
+          if (direction === 'previous') {
+            goToPreviousPage();
+          } else {
+            goToNextPage();
+          }
         },
+        disabled: colonyActionsLoading,
       },
-      additionalPaginationButtonsContent: colonyActionsLoading
-        ? undefined
-        : additionalPaginationButtonsContent,
-      onSortingChange: setSorting,
-      getRowId: (row) => row.transactionHash,
-      meatBallMenuStaticSize: isRecentActivityVariant ? '2rem' : '3rem',
-      getMenuProps,
-      columns,
-      data: colonyActions,
-      manualPagination: true,
-      canNextPage: hasNextPage || colonyActionsLoading,
-      canPreviousPage: hasPrevPage,
-      showTotalPagesNumber,
-      nextPage: goToNextPage,
-      previousPage: goToPreviousPage,
-      paginationDisabled: colonyActionsLoading,
+      pagination,
+    ),
+    rows: {
       getRowCanExpand: () => isMobile,
-      emptyContent: (
-        <EmptyContent
-          className="h-[19.125rem] sm:h-[32.8125rem]"
-          icon={Binoculars}
-          title={{
-            id:
-              searchFilter || selectedFiltersCount
-                ? 'activityFeedTable.table.search.emptyTitle'
-                : 'activityFeedTable.table.emptyTitle',
-          }}
-          description={{
-            id:
-              searchFilter || selectedFiltersCount
-                ? 'activityFeedTable.table.search.emptyDescription'
-                : 'activityFeedTable.table.emptyDescription',
-          }}
-          buttonText={
+      renderSubComponent,
+    },
+    columns,
+    renderCellWrapper: isMobile ? undefined : renderRowLink,
+    data: colonyActions,
+    emptyContent: (
+      <EmptyContent
+        className="h-[19.125rem] sm:h-[32.8125rem]"
+        icon={Binoculars}
+        title={{
+          id:
             searchFilter || selectedFiltersCount
-              ? undefined
-              : { id: 'activityFeedTable.table.emptyButtonLabel' }
-          }
-          onClick={
+              ? 'activityFeedTable.table.search.emptyTitle'
+              : 'activityFeedTable.table.emptyTitle',
+        }}
+        description={{
+          id:
             searchFilter || selectedFiltersCount
-              ? undefined
-              : () => toggleActionSidebarOn()
-          }
-          withoutButtonIcon
-        />
-      ),
-    } as TableProps<ColonyAction>,
-    rest,
-  );
+              ? 'activityFeedTable.table.search.emptyDescription'
+              : 'activityFeedTable.table.emptyDescription',
+        }}
+        buttonText={
+          searchFilter || selectedFiltersCount
+            ? undefined
+            : { id: 'activityFeedTable.table.emptyButtonLabel' }
+        }
+        onClick={
+          searchFilter || selectedFiltersCount
+            ? undefined
+            : () => toggleActionSidebarOn()
+        }
+        withoutButtonIcon
+      />
+    ),
+  } as TableProps<ColonyAction>);
 
   return { tableProps, renderSubComponent };
 };
diff --git a/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx b/src/components/common/ColonyActionsTable/hooks/useColonyActionsTableColumns.tsx
@@ -9,6 +9,7 @@ import { type ActivityFeedColonyAction } from '~hooks/useActivityFeed/types.ts';
 import { getFormattedDateFrom } from '~utils/getFormattedDateFrom.ts';
 import { formatText } from '~utils/intl.ts';
 import TeamBadge from '~v5/common/Pills/TeamBadge/index.ts';
+import { makeMenuColumn } from '~v5/common/Table/utils.tsx';
 
 import ActionBadge from '../partials/ActionBadge/ActionBadge.tsx';
 import ActionDescription from '../partials/ActionDescription/index.ts';
@@ -28,6 +29,7 @@ const useColonyActionsTableColumns = ({
   refetchMotionStates,
   showUserAvatar = true,
   isRecentActivityVariant = false,
+  getMenuProps,
 }) => {
   const isMobile = useMobile();
 
@@ -127,6 +129,13 @@ const useColonyActionsTableColumns = ({
           ? 'flex items-end'
           : '',
       }),
+      makeMenuColumn({
+        helper,
+        getMenuProps,
+        cellProps: {
+          staticSize: isRecentActivityVariant ? '2rem' : '3rem',
+        },
+      }),
       helper.display({
         id: 'expander',
         staticSize: '2.25rem',
@@ -154,6 +163,7 @@ const useColonyActionsTableColumns = ({
     loadingMotionStates,
     refetchMotionStates,
     showUserAvatar,
+    getMenuProps,
   ]);
 };
 

diff --git a/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx b/src/components/common/ColonyActionsTable/hooks/useGetMenuProps.tsx
@@ -4,6 +4,7 @@ import {
   ShareNetwork,
   Repeat,
 } from '@phosphor-icons/react';
+import { type Row } from '@tanstack/react-table';
 import React from 'react';
 import { generatePath, useNavigate } from 'react-router-dom';
 
@@ -17,7 +18,7 @@ import {
 } from '~routes';
 import TransactionLink from '~shared/TransactionLink/index.ts';
 import { formatText } from '~utils/intl.ts';
-import { type TableProps } from '~v5/common/Table/types.ts';
+import { type MeatBallMenuProps } from '~v5/shared/MeatBallMenu/types.ts';
 
 import MeatballMenuCopyItem from '../partials/MeatballMenuCopyItem/index.ts';
 import { type ColonyActionsTableProps } from '../types.ts';
@@ -44,9 +45,9 @@ export const useGetMenuProps = ({
     colonyActionsLoading,
   });
 
-  const getMenuProps: TableProps<ActivityFeedColonyAction>['getMenuProps'] = ({
-    original: colonyAction,
-  }) => {
+  const getMenuProps: (
+    row: Row<ActivityFeedColonyAction>,
+  ) => MeatBallMenuProps | undefined = ({ original: colonyAction }) => {
     const { transactionHash } = colonyAction;
 
     return {

diff --git a/...ts/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx b/...ts/common/ColonyActionsTable/partials/ActionMobileDescription/ActionMobileDescription.tsx
@@ -144,7 +144,7 @@ const ActionMobileDescription: FC<ActionMobileDescriptionProps> = ({
       {meatBallMenuProps && (
         <MeatBallMenu
           {...meatBallMenuProps}
-          contentWrapperClassName="!left-6 right-6"
+          contentWrapperClassName="!left-0 right-6"
           buttonClassName={(isMenuOpen) =>
             clsx({ '!text-gray-600': !isMenuOpen })
           }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,3 +49,5 @@ amplify/backend/api/colonycdapp/resolvers/*

		# Temp schema file generated by the codegen
		tmp-schema.graphql

		storybook-static