upcoming: [UIE-9402] - Update pagination in the owned groups table (#13535)

* Added missing padding around the Managed dashboard card

* changed spacing to spacingFunction

* Replace PaginationFooter by CDS pagination component

* Add sharegroup factory for testing and mocking

* Update pagination to show only when sharegroups count exceeds 25

* Added changeset: Add shareGroup factory for testing and mocking data

* Move shareGroup factory to linode utilities

* Added changeset: Private Image Sharing: update pagination footer in Owned groups tab

* Fix formatting in sharegroups.ts

Author: fabrice-akamai

packages/manager/.changeset/pr-13535-upcoming-features-1774884439494.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Private Image Sharing: update pagination footer in Owned groups tab ([#13535](https://github.com/linode/manager/pull/13535))

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx

@@ -7,6 +7,7 @@ import {
   useTheme,
   ZeroStateSearchNarrowIcon,
 } from '@linode/ui';
+import { Pagination } from 'akamai-cds-react-components';
 import {
   Table,
   TableBody,
@@ -18,8 +19,8 @@ import {
 import React from 'react';
 
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
-import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 
+import { DEFAULT_PAGE_SIZES } from '../constants';
 import {
   StyledImageContainer,
   StyledImageTableContainer,
@@ -52,15 +53,14 @@ interface ShareGroupsTableProps {
     main: string;
   };
   error?: APIError[] | null;
-  eventCategory: string;
   handleOrderChange: (newOrderBy: string, newOrder: Order) => void;
   headerProps?: HeaderProps;
   order: Order;
   orderBy: string;
   pagination: {
     count: number;
-    handlePageChange: (newPage: number) => void;
-    handlePageSizeChange: (newSize: number) => void;
+    onPageChange: (event: CustomEvent<{ page: number }>) => void;
+    onPageSizeChange: (event: CustomEvent<{ pageSize: number }>) => void;
     page: number;
     pageSize: number;
   };
@@ -72,7 +72,6 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => {
   const {
     columns,
     headerProps,
-    eventCategory,
     shareGroups,
     query,
     handleOrderChange,
@@ -183,7 +182,7 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => {
                   style={{
                     display: 'flex',
                     justifyContent: 'center',
-                    padding: 0
+                    padding: 0,
                   }}
                 >
                   <Box
@@ -220,14 +219,16 @@ export const ShareGroupsTable = (props: ShareGroupsTableProps) => {
             ))}
           </TableBody>
         </Table>
-        <PaginationFooter
-          count={pagination.count}
-          eventCategory={eventCategory}
-          handlePageChange={pagination.handlePageChange}
-          handleSizeChange={pagination.handlePageSizeChange}
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-        />
+        {pagination.count > DEFAULT_PAGE_SIZES[0] && (
+          <Pagination
+            count={pagination.count}
+            onPageChange={pagination.onPageChange}
+            onPageSizeChange={pagination.onPageSizeChange}
+            page={pagination.page}
+            pageSize={pagination.pageSize}
+            pageSizes={DEFAULT_PAGE_SIZES}
+          />
+        )}
       </StyledImageTableContainer>
     </StyledImageContainer>
   );

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.test.tsx

@@ -20,7 +20,6 @@ type ShareGroupsConfigMock = {
   description: string;
   docsLink: { href: string; label: string };
   emptyMessage: { instruction: string; main: string };
-  eventCategory: string;
   orderByDefault: string;
   orderDefault: 'asc' | 'desc';
   preferenceKey: string;
@@ -40,7 +39,6 @@ const queryMocks = vi.hoisted(() => {
       main: 'No Share groups to display',
       instruction: 'Create your first share group',
     },
-    eventCategory: 'shareGroups',
     orderByDefault: 'label',
     orderDefault: 'asc' as const,
     preferenceKey: 'owned-sharegroups',
@@ -319,7 +317,6 @@ describe('For Owned groups', () => {
     expect(queryMocks.tableProps).toMatchObject({
       columns: queryMocks.shareGroupsConfig['owned-groups'].columns,
       emptyMessage: queryMocks.shareGroupsConfig['owned-groups'].emptyMessage,
-      eventCategory: queryMocks.shareGroupsConfig['owned-groups'].eventCategory,
       handleOrderChange,
       order: 'desc',
       orderBy: 'created',

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx

@@ -102,6 +102,15 @@ export const ShareGroupsView = (props: Props) => {
     );
   }
 
+  const handlePageChange = (event: CustomEvent<{ page: number }>) => {
+    pagination.handlePageChange(Number(event.detail));
+  };
+
+  const handlePageSizeChange = (event: CustomEvent<{ pageSize: number }>) => {
+    const newSize = event.detail.pageSize;
+    pagination.handlePageSizeChange(newSize);
+  };
+
   const tableHeaderProps = {
     title: config.title,
     buttonProps: config.buttonProps
@@ -145,7 +154,6 @@ export const ShareGroupsView = (props: Props) => {
         columns={config.columns}
         emptyMessage={config.emptyMessage}
         error={shareGroupsError}
-        eventCategory={config.eventCategory}
         handleOrderChange={handleShareGroupsOrderChange}
         headerProps={tableHeaderProps}
         order={shareGroupsOrder}
@@ -154,8 +162,8 @@ export const ShareGroupsView = (props: Props) => {
           page: pagination.page,
           pageSize: pagination.pageSize,
           count: shareGroups?.results ?? 0,
-          handlePageChange: pagination.handlePageChange,
-          handlePageSizeChange: pagination.handlePageSizeChange,
+          onPageChange: handlePageChange,
+          onPageSizeChange: handlePageSizeChange,
         }}
         query={search.query}
         shareGroups={shareGroups?.data ?? []}

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx

@@ -34,7 +34,6 @@ export interface ShareGroupsTabsConfig {
     main: string;
   };
   error?: APIError[] | null;
-  eventCategory: string;
   orderByDefault: string;
   orderDefault: 'asc' | 'desc';
   preferenceKey: string;
@@ -132,10 +131,9 @@ export const SHAREGROUPS_CONFIG: Record<
       instruction:
         'Click \u2018Create Share Group\u2019 to create your first share group and share your custom images with other accounts.',
     },
-    eventCategory: 'owned-groups',
     orderByDefault: 'label',
     orderDefault: 'asc',
-    preferenceKey: 'owned-groups',
+    preferenceKey: 'owned-groups-table',
     buttonProps: {
       buttonText: 'Create Share Group',
       navigateTo: '/images/share-groups/create',
@@ -158,10 +156,9 @@ export const SHAREGROUPS_CONFIG: Record<
       instruction:
         "Go to 'My membership requests' to make a request and join a group",
     },
-    eventCategory: 'joined-groups',
     orderByDefault: 'label',
     orderDefault: 'asc',
-    preferenceKey: 'joined-groups',
+    preferenceKey: 'joined-groups-table',
   },
   'membership-requests': {
     title: 'Membership requests',
@@ -177,9 +174,8 @@ export const SHAREGROUPS_CONFIG: Record<
       instruction:
         "Click 'Request Membership' to create your first membership request",
     },
-    eventCategory: 'membership-requests',
     orderByDefault: 'label',
     orderDefault: 'asc',
-    preferenceKey: 'membership-requests',
+    preferenceKey: 'membership-requests-table',
   },
 };

packages/manager/src/features/Images/ImagesLanding/v2/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_PAGE_SIZES = [25, 50, 75, 100];

packages/utilities/.changeset/pr-13535-upcoming-features-1774634932470.md

@@ -0,0 +1,5 @@
+---
+"@linode/utilities": Upcoming Features
+---
+
+Add shareGroup factory for testing and mocking data ([#13535](https://github.com/linode/manager/pull/13535))

packages/utilities/src/factories/index.ts

@@ -11,3 +11,4 @@ export * from './linodes';
 export * from './nodebalancer';
 export * from './profile';
 export * from './regions';
+export * from './sharegroups';

packages/utilities/src/factories/sharegroups.ts

@@ -0,0 +1,102 @@
+import { Factory } from './factoryProxy';
+
+import type {
+  AddSharegroupImagesPayload,
+  AddSharegroupMemberPayload,
+  CreateSharegroupPayload,
+  GenerateSharegroupTokenPayload,
+  Sharegroup,
+  SharegroupImagePayload,
+  SharegroupMember,
+  SharegroupToken,
+  UpdateSharegroupImagePayload,
+  UpdateSharegroupMemberPayload,
+  UpdateSharegroupPayload,
+} from '@linode/api-v4';
+
+export const sharegroupImagePayloadFactory =
+  Factory.Sync.makeFactory<SharegroupImagePayload>({
+    description: 'A shared image for the sharegroup.',
+    id: Factory.each((id) => `private/${id}`),
+    label: Factory.each((id) => `sharegroup-image-${id}`),
+  });
+
+export const sharegroupFactory = Factory.Sync.makeFactory<Sharegroup>({
+  created: new Date().toISOString(),
+  description: 'A test sharegroup.',
+  expiry: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30).toISOString(),
+  id: Factory.each((id) => id),
+  images_count: 3,
+  is_suspended: false,
+  label: Factory.each((id) => `sharegroup-${id}`),
+  members_count: 2,
+  updated: new Date().toISOString(),
+  uuid: Factory.each(() => crypto.randomUUID()),
+});
+
+export const createSharegroupPayloadFactory =
+  Factory.Sync.makeFactory<CreateSharegroupPayload>({
+    description: 'A test sharegroup.',
+    images: sharegroupImagePayloadFactory.buildList(2),
+    label: Factory.each((id) => `sharegroup-${id}`),
+  });
+
+export const updateSharegroupPayloadFactory =
+  Factory.Sync.makeFactory<UpdateSharegroupPayload>({
+    description: 'An updated test sharegroup.',
+    disk_id: 1,
+    label: Factory.each((id) => `updated-sharegroup-${id}`),
+  });
+
+export const addSharegroupImagesPayloadFactory =
+  Factory.Sync.makeFactory<AddSharegroupImagesPayload>({
+    images: sharegroupImagePayloadFactory.buildList(2),
+  });
+
+export const updateSharegroupImagePayloadFactory =
+  Factory.Sync.makeFactory<UpdateSharegroupImagePayload>({
+    description: 'An updated shared image.',
+    label: Factory.each((id) => `updated-sharegroup-image-${id}`),
+  });
+
+export const sharegroupMemberFactory =
+  Factory.Sync.makeFactory<SharegroupMember>({
+    created: new Date().toISOString(),
+    expiry: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30).toISOString(),
+    label: Factory.each((id) => `sharegroup-member-${id}`),
+    status: 'active',
+    token_uuid: Factory.each(() => crypto.randomUUID()),
+    updated: new Date().toISOString(),
+  });
+
+export const addSharegroupMemberPayloadFactory =
+  Factory.Sync.makeFactory<AddSharegroupMemberPayload>({
+    label: Factory.each((id) => `sharegroup-member-${id}`),
+    token: Factory.each((id) => `sharegroup-token-${id}`),
+  });
+
+export const updateSharegroupMemberPayloadFactory =
+  Factory.Sync.makeFactory<UpdateSharegroupMemberPayload>({
+    label: Factory.each((id) => `updated-sharegroup-member-${id}`),
+  });
+
+export const generateSharegroupTokenPayloadFactory =
+  Factory.Sync.makeFactory<GenerateSharegroupTokenPayload>({
+    label: Factory.each((id) => `sharegroup-token-${id}`),
+    valid_for_sharegroup_uuid: Factory.each(() => crypto.randomUUID()),
+  });
+
+export const sharegroupTokenFactory = Factory.Sync.makeFactory<SharegroupToken>(
+  {
+    created: new Date().toISOString(),
+    expiry: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30).toISOString(),
+    label: Factory.each((id) => `sharegroup-token-${id}`),
+    sharegroup_label: Factory.each((id) => `sharegroup-${id}`),
+    sharegroup_uuid: Factory.each(() => crypto.randomUUID()),
+    status: 'active',
+    token: Factory.each((id) => `token-${id}`),
+    token_uuid: Factory.each(() => crypto.randomUUID()),
+    updated: new Date().toISOString(),
+    valid_for_sharegroup_uuid: Factory.each(() => crypto.randomUUID()),
+  },
+);