diff --git a/packages/manager/.changeset/pr-13535-upcoming-features-1774884439494.md b/packages/manager/.changeset/pr-13535-upcoming-features-1774884439494.md new file mode 100644 index 00000000000..875a2aa4e8b --- /dev/null +++ b/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)) diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx index 4446ede6ae1..8aaf6da3bb4 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTable.tsx +++ b/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, }} > { ))} - + {pagination.count > DEFAULT_PAGE_SIZES[0] && ( + + )} ); diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.test.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.test.tsx index 434411e78d5..7a9eb4ea83e 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.test.tsx +++ b/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', diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx index b806e090965..b108f6603a1 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsView.tsx +++ b/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 ?? []} diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx b/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx index 06ffb28f733..b8a1b5f391b 100644 --- a/packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/shareGroupsTabsConfig.tsx +++ b/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', }, }; diff --git a/packages/manager/src/features/Images/ImagesLanding/v2/constants.ts b/packages/manager/src/features/Images/ImagesLanding/v2/constants.ts new file mode 100644 index 00000000000..1d50213647e --- /dev/null +++ b/packages/manager/src/features/Images/ImagesLanding/v2/constants.ts @@ -0,0 +1 @@ +export const DEFAULT_PAGE_SIZES = [25, 50, 75, 100]; diff --git a/packages/utilities/.changeset/pr-13535-upcoming-features-1774634932470.md b/packages/utilities/.changeset/pr-13535-upcoming-features-1774634932470.md new file mode 100644 index 00000000000..76d9579b417 --- /dev/null +++ b/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)) diff --git a/packages/utilities/src/factories/index.ts b/packages/utilities/src/factories/index.ts index e410363d74e..47d6bb32b97 100644 --- a/packages/utilities/src/factories/index.ts +++ b/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'; diff --git a/packages/utilities/src/factories/sharegroups.ts b/packages/utilities/src/factories/sharegroups.ts new file mode 100644 index 00000000000..05719f833ec --- /dev/null +++ b/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({ + 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({ + 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({ + description: 'A test sharegroup.', + images: sharegroupImagePayloadFactory.buildList(2), + label: Factory.each((id) => `sharegroup-${id}`), + }); + +export const updateSharegroupPayloadFactory = + Factory.Sync.makeFactory({ + description: 'An updated test sharegroup.', + disk_id: 1, + label: Factory.each((id) => `updated-sharegroup-${id}`), + }); + +export const addSharegroupImagesPayloadFactory = + Factory.Sync.makeFactory({ + images: sharegroupImagePayloadFactory.buildList(2), + }); + +export const updateSharegroupImagePayloadFactory = + Factory.Sync.makeFactory({ + description: 'An updated shared image.', + label: Factory.each((id) => `updated-sharegroup-image-${id}`), + }); + +export const sharegroupMemberFactory = + Factory.Sync.makeFactory({ + 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({ + label: Factory.each((id) => `sharegroup-member-${id}`), + token: Factory.each((id) => `sharegroup-token-${id}`), + }); + +export const updateSharegroupMemberPayloadFactory = + Factory.Sync.makeFactory({ + label: Factory.each((id) => `updated-sharegroup-member-${id}`), + }); + +export const generateSharegroupTokenPayloadFactory = + Factory.Sync.makeFactory({ + label: Factory.each((id) => `sharegroup-token-${id}`), + valid_for_sharegroup_uuid: Factory.each(() => crypto.randomUUID()), + }); + +export const sharegroupTokenFactory = Factory.Sync.makeFactory( + { + 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()), + }, +);