Skip to content

Commit

Permalink
Merge branch 'ansible:master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@MilanPospisil
MilanPospisil authored Feb 21, 2023
2 parents 8c766d9 + da3f2d2 commit 9617c5f
Show file tree
Hide file tree
Showing 12 changed files with 472 additions and 526 deletions.
136 changes: 61 additions & 75 deletions src/components/collection-list/collection-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import {
ToolbarItem,
} from '@patternfly/react-core';
import * as React from 'react';
import { useEffect, useState } from 'react';
import { AppliedFilters, CompoundFilter } from 'src/components';
import { Constants } from 'src/constants';
import { AppContext } from 'src/loaders/app-context';
import { useContext } from 'src/loaders/app-context';
import './collection-filter.scss';

interface IProps {
Expand All @@ -23,86 +24,71 @@ interface IProps {
updateParams: (p) => void;
}

interface IState {
inputText: string;
}

export class CollectionFilter extends React.Component<IProps, IState> {
static contextType = AppContext;

constructor(props) {
super(props);
export const CollectionFilter = (props: IProps) => {
const context = useContext();
const [inputText, setInputText] = useState(props.params.keywords || '');

this.state = {
inputText: props.params.keywords || '',
};
}
useEffect(() => {
setInputText(props.params['keywords'] || '');
}, [props.params.keywords]);

componentDidUpdate(prevProps) {
if (prevProps.params.keywords !== this.props.params['keywords']) {
this.setState({ inputText: this.props.params['keywords'] || '' });
}
}
const { ignoredParams, params, updateParams } = props;
const { display_signatures } = context.featureFlags;
const display_tags = ignoredParams.includes('tags') === false;

render() {
const { ignoredParams, params, updateParams } = this.props;
const { display_signatures } = this.context.featureFlags;
const display_tags = ignoredParams.includes('tags') === false;
const filterConfig = [
{
id: 'keywords',
title: t`Keywords`,
},
display_tags && {
id: 'tags',
title: t`Tag`,
inputType: 'multiple' as const,
options: Constants.COLLECTION_FILTER_TAGS.map((tag) => ({
id: tag,
title: tag,
})),
},
display_signatures && {
id: 'sign_state',
title: t`Sign state`,
inputType: 'select' as const,
options: [
{ id: 'signed', title: t`Signed` },
{ id: 'unsigned', title: t`Unsigned` },
],
},
].filter(Boolean);

const filterConfig = [
{
id: 'keywords',
title: t`Keywords`,
},
display_tags && {
id: 'tags',
title: t`Tag`,
inputType: 'multiple' as const,
options: Constants.COLLECTION_FILTER_TAGS.map((tag) => ({
id: tag,
title: tag,
})),
},
display_signatures && {
id: 'sign_state',
title: t`Sign state`,
inputType: 'select' as const,
options: [
{ id: 'signed', title: t`Signed` },
{ id: 'unsigned', title: t`Unsigned` },
],
},
].filter(Boolean);

return (
<Toolbar>
<ToolbarContent>
<ToolbarGroup style={{ marginLeft: 0 }}>
return (
<Toolbar>
<ToolbarContent>
<ToolbarGroup style={{ marginLeft: 0 }}>
<ToolbarItem>
<CompoundFilter
inputText={inputText}
onChange={(text) => setInputText(text)}
updateParams={updateParams}
params={params}
filterConfig={filterConfig}
/>
<ToolbarItem>
<CompoundFilter
inputText={this.state.inputText}
onChange={(text) => this.setState({ inputText: text })}
<AppliedFilters
niceNames={{
sign_state: t`sign state`,
tags: t`tags`,
keywords: t`keywords`,
}}
style={{ marginTop: '16px' }}
updateParams={updateParams}
params={params}
filterConfig={filterConfig}
ignoredParams={ignoredParams}
/>
<ToolbarItem>
<AppliedFilters
niceNames={{
sign_state: t`sign state`,
tags: t`tags`,
keywords: t`keywords`,
}}
style={{ marginTop: '16px' }}
updateParams={updateParams}
params={params}
ignoredParams={ignoredParams}
/>
</ToolbarItem>
</ToolbarItem>
</ToolbarGroup>
</ToolbarContent>
</Toolbar>
);
}
}
</ToolbarItem>
</ToolbarGroup>
</ToolbarContent>
</Toolbar>
);
};
184 changes: 91 additions & 93 deletions src/components/collection-list/collection-list-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,105 +31,103 @@ interface IProps extends CollectionListType {
repo?: string;
}

export class CollectionListItem extends React.Component<IProps> {
render() {
const {
name,
latest_version,
namespace,
showNamespace,
controls,
deprecated,
displaySignatures,
repo,
sign_state,
} = this.props;
export const CollectionListItem = (props: IProps) => {
const {
name,
latest_version,
namespace,
showNamespace,
controls,
deprecated,
displaySignatures,
repo,
sign_state,
} = props;

const cells = [];
const cells = [];

const company = namespace.company || namespace.name;

if (showNamespace) {
cells.push(
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt={t`${company} logo`}
fallbackToDefault
image={namespace.avatar_url}
size='40px'
unlockWidth
width='97px'
/>
</DataListCell>,
);
}

const contentSummary = convertContentSummaryCounts(latest_version.metadata);
const company = namespace.company || namespace.name;

if (showNamespace) {
cells.push(
<DataListCell key='content'>
<div>
<Link
to={formatPath(Paths.collectionByRepo, {
collection: name,
namespace: namespace.name,
repo: repo,
})}
data-cy='CollectionList-name'
>
{name}
</Link>
{deprecated && <DeprecatedTag />}
{showNamespace ? (
<TextContent>
<Text component={TextVariants.small}>
<Trans>Provided by {company}</Trans>
</Text>
</TextContent>
) : null}
</div>
<div className='hub-entry'>{latest_version.metadata.description}</div>
<div className='hub-entry pf-l-flex pf-m-wrap'>
{Object.keys(contentSummary.contents).map((type) => (
<div key={type}>
<CollectionNumericLabel
count={contentSummary.contents[type]}
type={type}
/>
</div>
))}
</div>
<div className='hub-entry pf-l-flex pf-m-wrap'>
<LabelGroup {...chipGroupProps()}>
{latest_version.metadata.tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</LabelGroup>
</div>
<DataListCell isFilled={false} alignRight={false} key='ns'>
<Logo
alt={t`${company} logo`}
fallbackToDefault
image={namespace.avatar_url}
size='40px'
unlockWidth
width='97px'
/>
</DataListCell>,
);
}

cells.push(
<DataListCell isFilled={false} alignRight key='stats'>
{controls ? <div className='hub-entry'>{controls}</div> : null}
<div className='hub-right-col hub-entry'>
<Trans>
Updated <DateComponent date={latest_version.created_at} />
</Trans>
</div>
<div className='hub-entry'>v{latest_version.version}</div>
{displaySignatures ? (
<SignatureBadge className='hub-entry' signState={sign_state} />
const contentSummary = convertContentSummaryCounts(latest_version.metadata);

cells.push(
<DataListCell key='content'>
<div>
<Link
to={formatPath(Paths.collectionByRepo, {
collection: name,
namespace: namespace.name,
repo: repo,
})}
data-cy='CollectionList-name'
>
{name}
</Link>
{deprecated && <DeprecatedTag />}
{showNamespace ? (
<TextContent>
<Text component={TextVariants.small}>
<Trans>Provided by {company}</Trans>
</Text>
</TextContent>
) : null}
</DataListCell>,
);
</div>
<div className='hub-entry'>{latest_version.metadata.description}</div>
<div className='hub-entry pf-l-flex pf-m-wrap'>
{Object.keys(contentSummary.contents).map((type) => (
<div key={type}>
<CollectionNumericLabel
count={contentSummary.contents[type]}
type={type}
/>
</div>
))}
</div>
<div className='hub-entry pf-l-flex pf-m-wrap'>
<LabelGroup {...chipGroupProps()}>
{latest_version.metadata.tags.map((tag, index) => (
<Tag key={index}>{tag}</Tag>
))}
</LabelGroup>
</div>
</DataListCell>,
);

return (
<DataListItem data-cy='CollectionListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
);
}
}
cells.push(
<DataListCell isFilled={false} alignRight key='stats'>
{controls ? <div className='hub-entry'>{controls}</div> : null}
<div className='hub-right-col hub-entry'>
<Trans>
Updated <DateComponent date={latest_version.created_at} />
</Trans>
</div>
<div className='hub-entry'>v{latest_version.version}</div>
{displaySignatures ? (
<SignatureBadge className='hub-entry' signState={sign_state} />
) : null}
</DataListCell>,
);

return (
<DataListItem data-cy='CollectionListItem'>
<DataListItemRow>
<DataListItemCells dataListCells={cells} />
</DataListItemRow>
</DataListItem>
);
};
Loading

0 comments on commit 9617c5f

Please sign in to comment.