Skip to content

Commit

Permalink
PR-in-a-box ansible#4506
Browse files Browse the repository at this point in the history
  • Loading branch information
himdel committed Nov 12, 2023
1 parent e265e67 commit f707759
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 124 deletions.
64 changes: 31 additions & 33 deletions src/components/patternfly-wrappers/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,6 @@ interface IProps {

/** Applies styling to make pagination compact */
isCompact?: boolean;

/** Options for the number of items that can be displayed per page */
perPageOptions?: number[];
}

// AAP-3737 - support both "1 - 2 of 3" and "3 的 1 - 2"
Expand Down Expand Up @@ -56,44 +53,45 @@ export const Pagination = ({
params,
updateParams,
isTop,
perPageOptions,
isCompact,
}: IProps) => {
const extraProps = {};
if (!isTop) {
extraProps['widgetId'] = 'pagination-options-menu-bottom';
extraProps['variant'] = PaginationVariant.bottom;
}
const extraProps = isTop
? {}
: {
widgetId: 'pagination-options-menu-bottom',
variant: PaginationVariant.bottom,
};

const onSetPage = (_, p) =>
updateParams(ParamHelper.setParam(params, 'page', p));

const onPerPageSelect = (_, p) => {
updateParams({ ...params, page: 1, page_size: p });
};

const perPageOptions = Constants.DEFAULT_PAGINATION_OPTIONS.map((option) => ({
title: String(option),
value: option,
}));

const titles = {
ofWord: t`of`,
perPageSuffix: t`per page`,
items: null,
};

return (
<PaginationPF
isCompact={isTop || isCompact}
itemCount={count}
perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
onPerPageSelect={onPerPageSelect}
onSetPage={onSetPage}
page={params.page || 1}
onSetPage={(_, p) =>
updateParams(ParamHelper.setParam(params, 'page', p))
}
onPerPageSelect={(_, p) => {
updateParams({ ...params, page: 1, page_size: p });
}}
{...extraProps}
isCompact={isTop || isCompact}
perPageOptions={mapPerPageOptions(
perPageOptions || Constants.DEFAULT_PAGINATION_OPTIONS,
)}
titles={{
ofWord: t`of`,
perPageSuffix: t`per page`,
items: null,
}}
perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
perPageOptions={perPageOptions}
titles={titles}
toggleTemplate={(props) => <ToggleTemplate {...props} />}
{...extraProps}
/>
);
};

function mapPerPageOptions(options) {
return options.map((option) => ({
title: String(option),
value: option,
}));
}
35 changes: 24 additions & 11 deletions src/components/shared/hub-list-toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';
import React, { useEffect, useState } from 'react';
import React, { ReactNode, useEffect, useState } from 'react';
import {
AppliedFilters,
CompoundFilter,
Expand All @@ -16,6 +16,7 @@ import {
import { ParamType } from 'src/utilities';

interface IProps {
buttons?: ReactNode[];
count?: number;
filterConfig: FilterOption[];
ignoredParams: string[];
Expand Down Expand Up @@ -49,8 +50,9 @@ function useTypeaheads(typeaheads, { inputText, selectedFilter }) {
return options;
}

// FIXME: missing Buttons & CardListSwitcher to be usable everywhere
// FIXME: missing CardListSwitcher to be usable everywhere
export function HubListToolbar({
buttons,
count,
filterConfig,
ignoredParams,
Expand All @@ -76,8 +78,14 @@ export function HubListToolbar({
: { ...item, options: item.options || typeaheadOptions[item.id] || [] },
);

const renderedButtons = buttons?.length
? buttons.map((button, i) =>
button ? <ToolbarItem key={`button${i}`}>{button}</ToolbarItem> : null,
)
: null;

return (
<Toolbar>
<Toolbar style={{ paddingLeft: '8px' }}>
<ToolbarContent>
<ToolbarGroup
style={{
Expand Down Expand Up @@ -107,14 +115,19 @@ export function HubListToolbar({
</ToolbarItem>
</ToolbarGroup>
{sortOptions ? (
<ToolbarItem style={{ alignSelf: 'start' }}>
<Sort
options={sortOptions}
params={params}
updateParams={updateParams}
/>
</ToolbarItem>
) : null}
<ToolbarGroup style={{ alignSelf: 'start' }}>
<ToolbarItem>
<Sort
options={sortOptions}
params={params}
updateParams={updateParams}
/>
</ToolbarItem>
{renderedButtons}
</ToolbarGroup>
) : (
renderedButtons
)}
<ToolbarItem
alignment={{ default: 'alignRight' }}
style={{ alignSelf: 'start' }}
Expand Down
3 changes: 1 addition & 2 deletions src/constants.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import { msg } from '@lingui/macro';

export class Constants {
static readonly SEARCH_VIEW_TYPE_LOCAL_KEY = 'search_view_type';

static readonly DEFAULT_PAGE_SIZE = 10;
static readonly DEFAULT_PAGINATION_OPTIONS = [10, 20, 50, 100];

static readonly CARD_DEFAULT_PAGE_SIZE = 10;
static readonly CARD_DEFAULT_PAGINATION_OPTIONS = [10, 20, 50, 100];
static readonly INSIGHTS_DEPLOYMENT_MODE = 'insights';
static readonly STANDALONE_DEPLOYMENT_MODE = 'standalone';

Expand Down
101 changes: 26 additions & 75 deletions src/containers/namespace-list/namespace-list.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,24 @@
import { t } from '@lingui/macro';
import {
Button,
Toolbar,
ToolbarContent,
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core';
import { Button } from '@patternfly/react-core';
import React from 'react';
import { Navigate } from 'react-router-dom';
import { MyNamespaceAPI, NamespaceAPI, NamespaceListType } from 'src/api';
import {
AlertList,
AlertType,
AppliedFilters,
BaseHeader,
CompoundFilter,
EmptyStateFilter,
EmptyStateNoData,
HubListToolbar,
LinkTabs,
LoadingPageSpinner,
LoadingPageWithHeader,
NamespaceCard,
NamespaceModal,
NamespaceNextPageCard,
Pagination,
Sort,
closeAlertMixin,
} from 'src/components';
import { Constants } from 'src/constants';
import { AppContext } from 'src/loaders/app-context';
import { Paths, formatPath, namespaceBreadcrumb } from 'src/paths';
import {
Expand All @@ -54,7 +45,6 @@ interface IState {
isModalOpen: boolean;
loading: boolean;
redirect?: string;
inputText: string;
}

interface IProps extends RouteProps {
Expand Down Expand Up @@ -89,7 +79,6 @@ export class NamespaceList extends React.Component<IProps, IState> {
hasPermission: true,
isModalOpen: false,
loading: true,
inputText: params['keywords'] || '',
};
}

Expand Down Expand Up @@ -144,8 +133,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
return <Navigate to={this.state.redirect} />;
}

const { alerts, namespaces, params, itemCount, loading, inputText } =
this.state;
const { alerts, namespaces, params, itemCount, loading } = this.state;
const { filterOwner } = this.props;
const { hasPermission } = this.context;

Expand All @@ -164,6 +152,18 @@ export class NamespaceList extends React.Component<IProps, IState> {
const updateParams = (p) =>
this.updateParams(p, () => this.loadNamespaces());

const filterConfig = [{ id: 'keywords', title: t`keywords` }];
const sortOptions = [
{ title: t`Name`, id: 'name', type: 'alpha' as const },
];
const buttons = [
hasPermission('galaxy.add_namespace') ? (
<Button variant='primary' onClick={this.handleModalToggle}>
{t`Create`}
</Button>
) : null,
];

return (
<div className='hub-namespace-page'>
<NamespaceModal
Expand Down Expand Up @@ -203,66 +203,18 @@ export class NamespaceList extends React.Component<IProps, IState> {
</div>
</div>
)}
{noData ? null : (
<div className='hub-toolbar hub-toolbar-left'>
<Toolbar>
<ToolbarContent>
<ToolbarGroup style={{ marginLeft: 0 }}>
<ToolbarItem>
<CompoundFilter
inputText={inputText}
onChange={(text) => this.setState({ inputText: text })}
params={params}
updateParams={updateParams}
filterConfig={[{ id: 'keywords', title: t`keywords` }]}
/>
<AppliedFilters
style={{ marginTop: '16px' }}
params={params}
updateParams={(p) => {
updateParams(p);
this.setState({ inputText: '' });
}}
ignoredParams={['page_size', 'page', 'sort']}
niceNames={{ keywords: t`keywords` }}
/>
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup style={{ alignSelf: 'start' }}>
<ToolbarItem>
<Sort
options={[
{ title: t`Name`, id: 'name', type: 'alpha' },
]}
params={params}
updateParams={updateParams}
/>
</ToolbarItem>
{hasPermission('galaxy.add_namespace') && (
<ToolbarItem key='create-button'>
<Button
variant='primary'
onClick={this.handleModalToggle}
>
{t`Create`}
</Button>
</ToolbarItem>
)}
</ToolbarGroup>
</ToolbarContent>
</Toolbar>
<div>
<Pagination
params={params}
updateParams={updateParams}
count={itemCount}
isCompact
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
/>
</div>
</div>
)}
</BaseHeader>
{noData ? null : (
<HubListToolbar
buttons={buttons}
count={itemCount}
filterConfig={filterConfig}
ignoredParams={['page', 'page_size', 'sort']}
params={params}
sortOptions={sortOptions}
updateParams={updateParams}
/>
)}
<section className='card-area'>
{this.renderBody({ updateParams })}
</section>
Expand All @@ -271,7 +223,6 @@ export class NamespaceList extends React.Component<IProps, IState> {
<Pagination
params={params}
updateParams={updateParams}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
count={itemCount}
/>
</section>
Expand Down
4 changes: 1 addition & 3 deletions src/containers/search/search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ class Search extends React.Component<RouteProps, IState> {
]);

if (!params['page_size']) {
params['page_size'] = Constants.CARD_DEFAULT_PAGE_SIZE;
params['page_size'] = Constants.DEFAULT_PAGE_SIZE;
}

// Load view type from local storage if it's not set. This allows a
Expand Down Expand Up @@ -248,7 +248,6 @@ class Search extends React.Component<RouteProps, IState> {
params={params}
updateParams={updateParams}
count={count}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
isTop
/>
</div>
Expand Down Expand Up @@ -276,7 +275,6 @@ class Search extends React.Component<RouteProps, IState> {
<Pagination
params={params}
updateParams={updateParams}
perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
count={count}
/>
</section>
Expand Down

0 comments on commit f707759

Please sign in to comment.