From c9b017473d656acd7b33951f2769871643304f41 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Tue, 7 Nov 2023 02:51:48 +0000 Subject: [PATCH 1/3] Collections: add "View more" card except on last page No-Issue --- src/components/cards/collection-card.tsx | 32 +++++++++++++++--- src/components/index.ts | 5 ++- src/containers/search/search.tsx | 42 ++++++++++++++++-------- 3 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/components/cards/collection-card.tsx b/src/components/cards/collection-card.tsx index e0fef53b20..620463f579 100644 --- a/src/components/cards/collection-card.tsx +++ b/src/components/cards/collection-card.tsx @@ -1,6 +1,7 @@ import { Trans, t } from '@lingui/macro'; import { Badge, + Button, Card, CardBody, CardFooter, @@ -10,7 +11,7 @@ import { TextVariants, Tooltip, } from '@patternfly/react-core'; -import cx from 'classnames'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import React from 'react'; import { Link } from 'react-router-dom'; import { CollectionVersionSearch } from 'src/api'; @@ -21,18 +22,41 @@ import { Paths, formatPath } from 'src/paths'; import { convertContentSummaryCounts, namespaceTitle } from 'src/utilities'; interface IProps extends CollectionVersionSearch { - className?: string; displaySignatures: boolean; footer?: React.ReactNode; menu?: React.ReactNode; } +export const CollectionNextPageCard = ({ + onClick, +}: { + onClick: () => void; +}) => { + return ( + +
+ +
+ + ); +}; + export const CollectionCard = ({ collection_version, namespace_metadata: namespace, repository, is_signed, - className, displaySignatures, menu, footer, @@ -46,7 +70,7 @@ export const CollectionCard = ({ const contentSummary = convertContentSummaryCounts(collection_version); return ( - + { this.state = { collections: [], params: params, - numberOfResults: 0, + count: 0, loading: true, synclist: undefined, alerts: [], @@ -140,7 +141,7 @@ class Search extends React.Component { loading, collections, params, - numberOfResults, + count, showImportModal, updateCollection, deleteCollection, @@ -246,7 +247,7 @@ class Search extends React.Component { @@ -265,16 +266,18 @@ class Search extends React.Component { ) : (
- {this.renderCollections(collections, params, updateParams)} + {this.renderCollections(collections, { + count, + params, + updateParams, + })}
- this.updateParams(p, () => this.queryCollections()) - } + updateParams={updateParams} perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS} - count={numberOfResults} + count={count} />
@@ -292,7 +295,7 @@ class Search extends React.Component { this.setState({ showImportModal: isOpen }); } - private renderCollections(collections, params, updateParams) { + private renderCollections(collections, { count, params, updateParams }) { if (collections.length === 0) { return ( { /> ); } + if (params.view_type === 'list') { return this.renderList(collections); } else { - return this.renderCards(collections); + return this.renderCards(collections, { + count, + params, + updateParams, + }); } } - private renderCards(collections) { + private renderCards(collections, { count, params, updateParams }) { return (
{collections.map((c, i) => { return ( { /> ); })} + {count > params.page_size * (params.page ?? 1) ? ( + + updateParams({ ...params, page: (params.page ?? 1) + 1 }) + } + /> + ) : null}
); } @@ -590,7 +604,7 @@ class Search extends React.Component { }).then((result) => { this.setState({ collections: result.data.data, - numberOfResults: result.data.meta.count, + count: result.data.meta.count, loading: false, }); }); From 929cd1a556f1f1393a655bbe4c3f03271775ddb0 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Tue, 7 Nov 2023 03:14:31 +0000 Subject: [PATCH 2/3] Namespaces: add "View more" card --- src/components/cards/namespace-card.tsx | 28 +++++++++++++ src/components/index.ts | 2 +- .../namespace-list/namespace-list.tsx | 41 +++++++++++-------- 3 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/components/cards/namespace-card.tsx b/src/components/cards/namespace-card.tsx index bb6cd99e72..2088a3d4ba 100644 --- a/src/components/cards/namespace-card.tsx +++ b/src/components/cards/namespace-card.tsx @@ -1,5 +1,6 @@ import { t } from '@lingui/macro'; import { + Button, Card, CardBody, CardFooter, @@ -8,9 +9,11 @@ import { CardTitle, Tooltip, } from '@patternfly/react-core'; +import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import React from 'react'; import { Link } from 'react-router-dom'; import { Logo } from 'src/components'; +import { Constants } from 'src/constants'; import { namespaceTitle } from 'src/utilities'; import './cards.scss'; @@ -25,11 +28,36 @@ interface IProps { namespaceURL?: string; } +export const NamespaceNextPageCard = ({ onClick }: { onClick: () => void }) => { + return ( + +
+ +
+ + ); +}; + export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => { const { avatar_url, name } = namespace; const title = namespaceTitle(namespace); const MAX_DESCRIPTION_LENGTH = 26; + return ( diff --git a/src/components/index.ts b/src/components/index.ts index fc9dfb7f6b..e379dccad9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,7 +7,7 @@ export { CollectionNextPageCard, } from './cards/collection-card'; export { LandingPageCard } from './cards/landing-page-card'; -export { NamespaceCard } from './cards/namespace-card'; +export { NamespaceCard, NamespaceNextPageCard } from './cards/namespace-card'; export { CollectionDependenciesList } from './collection-dependencies-list/collection-dependencies-list'; export { CollectionUsedbyDependenciesList } from './collection-dependencies-list/collection-usedby-dependencies-list'; export { CollectionContentList } from './collection-detail/collection-content-list'; diff --git a/src/containers/namespace-list/namespace-list.tsx b/src/containers/namespace-list/namespace-list.tsx index 55428b0c6f..d74924d528 100644 --- a/src/containers/namespace-list/namespace-list.tsx +++ b/src/containers/namespace-list/namespace-list.tsx @@ -22,6 +22,7 @@ import { LoadingPageWithHeader, NamespaceCard, NamespaceModal, + NamespaceNextPageCard, Pagination, Sort, closeAlertMixin, @@ -160,6 +161,9 @@ export class NamespaceList extends React.Component { // Namespaces or Partners const title = namespaceBreadcrumb().name; + const updateParams = (p) => + this.updateParams(p, () => this.loadNamespaces()); + return (
{ this.setState({ inputText: text })} - updateParams={(p) => - this.updateParams(p, () => this.loadNamespaces()) - } params={params} + updateParams={updateParams} filterConfig={[{ id: 'keywords', title: t`keywords` }]} /> { - this.updateParams(p, () => this.loadNamespaces()); + updateParams(p); this.setState({ inputText: '' }); }} - params={params} ignoredParams={['page_size', 'page', 'sort']} niceNames={{ keywords: t`keywords` }} /> @@ -233,9 +235,7 @@ export class NamespaceList extends React.Component { { title: t`Name`, id: 'name', type: 'alpha' }, ]} params={params} - updateParams={(p) => - this.updateParams(p, () => this.loadNamespaces()) - } + updateParams={updateParams} /> {hasPermission('galaxy.add_namespace') && ( @@ -254,9 +254,7 @@ export class NamespaceList extends React.Component {
- this.updateParams(p, () => this.loadNamespaces()) - } + updateParams={updateParams} count={itemCount} isCompact perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS} @@ -265,14 +263,14 @@ export class NamespaceList extends React.Component {
)} -
{this.renderBody()}
+
+ {this.renderBody({ updateParams })} +
{noData || loading ? null : (
- this.updateParams(p, () => this.loadNamespaces()) - } + updateParams={updateParams} perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS} count={itemCount} /> @@ -282,8 +280,8 @@ export class NamespaceList extends React.Component { ); } - private renderBody() { - const { namespaces, loading } = this.state; + private renderBody({ updateParams }) { + const { itemCount, loading, namespaces, params } = this.state; const { namespacePath, filterOwner } = this.props; const { hasPermission } = this.context; @@ -335,6 +333,15 @@ export class NamespaceList extends React.Component { />
))} + {itemCount > params.page_size * (params.page ?? 1) ? ( +
+ + updateParams({ ...params, page: (params.page ?? 1) + 1 }) + } + /> +
+ ) : null} ); } From 60da2795c7ec1c8039d61e9ba249c728c0e23282 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Fri, 10 Nov 2023 23:53:36 +0000 Subject: [PATCH 3/3] test - expect 11 cards, not 10 --- test/cypress/e2e/collections/collections_list.js | 4 ++-- test/cypress/e2e/insights_collections/collections_list.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/cypress/e2e/collections/collections_list.js b/test/cypress/e2e/collections/collections_list.js index 39beee1593..a16b7fb72a 100644 --- a/test/cypress/e2e/collections/collections_list.js +++ b/test/cypress/e2e/collections/collections_list.js @@ -88,8 +88,8 @@ describe('Collections list Tests', () => { }); it('paging is working', () => { - // this page cant sort items, so we can only count them, there should be 11 items that we inserted - cy.get('.collection-container').get('article').should('have.length', 10); + // there should be 11 items in db, 10 per page + 1 view more + cy.get('.collection-container').get('article').should('have.length', 11); cy.get('.hub-cards').get('[aria-label="Go to next page"]:first').click(); cy.get('.collection-container').get('article').should('have.length', 1); diff --git a/test/cypress/e2e/insights_collections/collections_list.js b/test/cypress/e2e/insights_collections/collections_list.js index ef116a2c99..af37752d58 100644 --- a/test/cypress/e2e/insights_collections/collections_list.js +++ b/test/cypress/e2e/insights_collections/collections_list.js @@ -71,8 +71,8 @@ describe('Collections list Tests', () => { }); it('paging is working', () => { - // this page cant sort items, so we can only count them, there should be 11 items that we inserted - cy.get('.collection-container').get('article').should('have.length', 10); + // there should be 11 items in db, 10 per page + 1 view more + cy.get('.collection-container').get('article').should('have.length', 11); cy.get('.hub-cards').get('[aria-label="Go to next page"]:first').click(); cy.get('.collection-container').get('article').should('have.length', 1);