8000 Add "View more" card by himdel · Pull Request #4502 · ansible/ansible-hub-ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add "View more" card #4502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 11, 2023
Merged

Add "View more" card #4502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9b0174
Collections: add "View more" card
himdel Nov 7, 2023
929cd1a
Namespaces: add "View more" card
himdel Nov 7, 2023
60da279
test - expect 11 cards, not 10
himdel Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions src/components/cards/collection-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Trans, t } from '@lingui/macro';
import {
Badge,
Button,
Card,
CardBody,
CardFooter,
Expand All @@ -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';
Expand All @@ -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 (
<Card className='hub-c-card-collection-container card'>
<div
style={{
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<Button variant='link' >
{t`View more`}
<br />
<br />
<ArrowRightIcon />
</Button>
</div>
</Card>
);
};

export const CollectionCard = ({
collection_version,
namespace_metadata: namespace,
repository,
is_signed,
className,
displaySignatures,
menu,
footer,
Expand All @@ -46,7 +70,7 @@ export const CollectionCard = ({
const contentSummary = convertContentSummaryCounts(collection_version);

return (
<Card className={cx('hub-c-card-collection-container ', className)}>
<Card className='hub-c-card-collection-container card'>
<CardHeader className='logo-row'>
<Logo
alt={t`${nsTitle} logo`}
Expand Down
28 changes: 28 additions & 0 deletions src/components/cards/namespace-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { t } from '@lingui/macro';
import {
Button,
Card,
CardBody,
CardFooter,
Expand All @@ -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';

Expand All @@ -25,11 +28,36 @@ interface IProps {
namespaceURL?: string;
}

export const NamespaceNextPageCard = ({ onClick }: { onClick: () => void }) => {
return (
<Card className='hub-c-card-ns-container'>
<div
style={{
display: 'flex',
height:
DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE
? '216px'
: '168px',
justifyContent: 'center',
}}
>
<Button variant='link' >
{t`View more`}
<br />
<br />
<ArrowRightIcon />
</Button>
</div>
</Card>
);
};

export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
const { avatar_url, name } = namespace;
const title = namespaceTitle(namespace);

const MAX_DESCRIPTION_LENGTH = 26;

return (
<Card className='hub-c-card-ns-container'>
<CardHeader>
Expand Down
7 changes: 5 additions & 2 deletions src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ export { AboutModalWindow } from './about-modal/about-modal';
export { ApprovalRow } from './approval/approval-row';
export { ApproveModal } from './approval/approve-modal';
export { CardListSwitcher } from './card-list-switcher/card-list-switcher';
export { CollectionCard } from './cards/collection-card';
export {
CollectionCard,
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';
Expand Down
41 changes: 24 additions & 17 deletions src/containers/namespace-list/namespace-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
LoadingPageWithHeader,
NamespaceCard,
NamespaceModal,
NamespaceNextPageCard,
Pagination,
Sort,
closeAlertMixin,
Expand Down Expand Up @@ -160,6 +161,9 @@ export class NamespaceList extends React.Component<IProps, IState> {
// Namespaces or Partners
const title = namespaceBreadcrumb().name;

const updateParams = (p) =>
this.updateParams(p, () => this.loadNamespaces());

return (
<div className='hub-namespace-page'>
<NamespaceModal
Expand Down Expand Up @@ -208,19 +212,17 @@ export class NamespaceList extends React.Component<IProps, IState> {
<CompoundFilter
inputText={inputText}
=> this.setState({ inputText: text })}
updateParams={(p) =>
this.updateParams(p, () => this.loadNamespaces())
}
params={params}
updateParams={updateParams}
filterConfig={[{ id: 'keywords', title: t`keywords` }]}
/>
<AppliedFilters
style={{ marginTop: '16px' }}
params={params}
updateParams={(p) => {
this.updateParams(p, () => this.loadNamespaces());
updateParams(p);
this.setState({ inputText: '' });
}}
params={params}
ignoredParams={['page_size', 'page', 'sort']}
niceNames={{ keywords: t`keywords` }}
/>
Expand All @@ -233,9 +235,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
{ title: t`Name`, id: 'name', type: 'alpha' },
]}
params={params}
updateParams={(p) =>
this.updateParams(p, () => this.loadNamespaces())
}
updateParams={updateParams}
/>
</ToolbarItem>
{hasPermission('galaxy.add_namespace') && (
Expand All @@ -254,9 +254,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
<div>
<Pagination
params={params}
updateParams={(p) =>
this.updateParams(p, () => this.loadNamespaces())
}
updateParams={updateParams}
count={itemCount}
isCompact
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
Expand All @@ -265,14 +263,14 @@ export class NamespaceList extends React.Component<IProps, IState> {
</div>
)}
</BaseHeader>
<section className='card-area'>{this.renderBody()}</section>
<section className='card-area'>
{this.renderBody({ updateParams })}
</section>
{noData || loading ? null : (
<section className='footer'>
<Pagination
params={params}
updateParams={(p) =>
this.updateParams(p, () => this.loadNamespaces())
}
updateParams={updateParams}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
count={itemCount}
/>
Expand All @@ -282,8 +280,8 @@ export class NamespaceList extends React.Component<IProps, IState> {
);
}

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;

Expand Down Expand Up @@ -335,6 +333,15 @@ export class NamespaceList extends React.Component<IProps, IState> {
/>
</div>
))}
{itemCount > params.page_size * (params.page ?? 1) ? (
<div className='card-wrapper'>
<NamespaceNextPageCard
=>
updateParams({ ...params, page: (params.page ?? 1) + 1 })
}
/>
</div>
) : null}
</section>
);
}
Expand Down
42 changes: 28 additions & 14 deletions src/containers/search/search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
CollectionCard,
CollectionFilter,
CollectionListItem,
CollectionNextPageCard,
DeleteCollectionModal,
EmptyStateFilter,
EmptyStateNoData,
Expand All @@ -45,7 +46,7 @@ import './search.scss';

interface IState {
collections: CollectionVersionSearch[];
numberOfResults: number;
count: number;
params: {
page?: number;
page_size?: number;
Expand Down Expand Up @@ -94,7 +95,7 @@ class Search extends React.Component<RouteProps, IState> {
this.state = {
collections: [],
params: params,
numberOfResults: 0,
count: 0,
loading: true,
synclist: undefined,
alerts: [],
Expand Down Expand Up @@ -140,7 +141,7 @@ class Search extends React.Component<RouteProps, IState> {
loading,
collections,
params,
numberOfResults,
count,
showImportModal,
updateCollection,
deleteCollection,
Expand Down Expand Up @@ -246,7 +247,7 @@ class Search extends React.Component<RouteProps, IState> {
<Pagination
params={params}
updateParams={updateParams}
count={numberOfResults}
count={count}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
isTop
/>
Expand All @@ -265,16 +266,18 @@ class Search extends React.Component<RouteProps, IState> {
) : (
<React.Fragment>
<section className='collection-container'>
{this.renderCollections(collections, params, updateParams)}
{this.renderCollections(collections, {
count,
params,
updateParams,
})}
</section>
<section className='footer'>
<Pagination
params={params}
updateParams={(p) =>
this.updateParams(p, () => this.queryCollections())
}
updateParams={updateParams}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
count={numberOfResults}
count={count}
/>
</secti 10000 on>
</React.Fragment>
Expand All @@ -292,7 +295,7 @@ class Search extends React.Component<RouteProps, IState> {
this.setState({ showImportModal: isOpen });
}

private renderCollections(collections, params, updateParams) {
private renderCollections(collections, { count, params, updateParams }) {
if (collections.length === 0) {
return (
<EmptyStateFilter
Expand All @@ -306,20 +309,24 @@ class Search extends React.Component<RouteProps, IState> {
/>
);
}

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 (
<div className='hub-cards'>
{collections.map((c, i) => {
return (
<CollectionCard
className='card'
key={i}
{...c}
footer={this.renderSyncToogle(
Expand All @@ -331,6 +338,13 @@ class Search extends React.Component<RouteProps, IState> {
/>
);
})}
{count > params.page_size * (params.page ?? 1) ? (
<CollectionNextPageCard
=>
updateParams({ ...params, page: (params.page ?? 1) + 1 })
}
/>
) : null}
</div>
);
}
Expand Down Expand Up @@ -590,7 +604,7 @@ class Search extends React.Component<RouteProps, IState> {
}).then((result) => {
this.setState({
collections: result.data.data,
numberOfResults: result.data.meta.count,
count: result.data.meta.count,
loading: false,
});
});
Expand Down
4 changes: 2 additions & 2 deletions test/cypress/e2e/collections/collections_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions test/cypress/e2e/insights_collections/collections_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
0