Skip to content

Commit f25fdfd

Browse files
himdelhimdel
authored
eslint - use no-restricted-imports to dedup patternfly wrappers (#4466)
* eslintrc - use no-restricted-imports - prevent patternfly imports we have wrappers for No-Issue * fileupload -> file-upload * collection-header: use DateComponent instead of direct moment * alert-list: use ReactNode over JSX.Element * copy-url -> shared * alert-list -> shared * namespace-detail: use AlertList instead of custom Alert * move non-wrappers outside patternfly-wrappers * list-item-actions: functional, fix import * Tooltip, FileUpload - import from compoents * Pagination - import from components * linter fixups * undebug * namespace_delete - allow deeper title nesting * namespace card - add noSpan option to Tooltip the span makes the title too big, and is not needed here
1 parent 9edf37d commit f25fdfd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+226
-249
lines changed

‎.eslintrc

+15
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@
3333
"curly": ["error", "all"],
3434
"eol-last": ["error", "always"],
3535
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
36+
"no-restricted-imports": ["error", {
37+
"paths": [{
38+
"importNames": [
39+
"ClipboardCopy",
40+
"FileUpload",
41+
"LabelGroup",
42+
"LoginForm",
43+
"Pagination",
44+
"Tabs",
45+
"Tooltip",
46+
],
47+
"message": "Import from src/components instead.",
48+
"name": "@patternfly/react-core",
49+
}],
50+
}],
3651

3752
/// FIXME: Rules to add from previous config (see #860)
3853
// array-bracket-spacing camelcase comma-dangle comma-spacing comma-style curly dot-notation eol-last eqeqeq func-names indent key-spacing keyword-spacing linebreak-style max-len new-cap no-bitwise no-caller no-mixed-spaces-and-tabs no-multiple-empty-lines no-trailing-spaces no-undef no-unused-vars no-use-before-define no-var no-with object-curly-spacing object-shorthand one-var padding-line-between-statements quote-props quotes react/jsx-curly-spacing semi space-before-blocks space-in-parens space-infix-ops space-unary-ops vars-on-top wrap-iife yoda

‎src/components/cards/collection-card.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,17 @@ import {
99
Text,
1010
TextContent,
1111
TextVariants,
12-
Tooltip,
1312
} from '@patternfly/react-core';
1413
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
1514
import React from 'react';
1615
import { Link } from 'react-router-dom';
1716
import { CollectionVersionSearch } from 'src/api';
18-
import { CollectionNumericLabel, Logo, SignatureBadge } from 'src/components';
17+
import {
18+
CollectionNumericLabel,
19+
Logo,
20+
SignatureBadge,
21+
Tooltip,
22+
} from 'src/components';
1923
import { Constants } from 'src/constants';
2024
import { useContext } from 'src/loaders/app-context';
2125
import { Paths, formatPath } from 'src/paths';

‎src/components/cards/namespace-card.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ import {
77
CardHeader,
88
CardHeaderMain,
99
CardTitle,
10-
Tooltip,
1110
} from '@patternfly/react-core';
1211
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
1312
import React from 'react';
1413
import { Link } from 'react-router-dom';
15-
import { Logo } from 'src/components';
14+
import { Logo, Tooltip } from 'src/components';
1615
import { Constants } from 'src/constants';
1716
import { namespaceTitle } from 'src/utilities';
1817
import './cards.scss';
@@ -71,11 +70,11 @@ export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
7170
/>
7271
</CardHeaderMain>
7372
</CardHeader>
74-
<Tooltip content={title}>
73+
<Tooltip content={title} noSpan>
7574
<CardTitle>{getDescription(title, MAX_DESCRIPTION_LENGTH)}</CardTitle>
7675
</Tooltip>
7776
{title !== name ? (
78-
<Tooltip content={name}>
77+
<Tooltip content={name} noSpan>
7978
<CardBody>{getDescription(name, MAX_DESCRIPTION_LENGTH)}</CardBody>
8079
</Tooltip>
8180
) : null}
@@ -89,6 +88,7 @@ export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
8988
);
9089
};
9190

91+
// FIXME: pf-m-truncate / hub-m-truncated
9292
function getDescription(d: string, MAX_DESCRIPTION_LENGTH) {
9393
if (!d) {
9494
return '';

‎src/components/execution-environment-header/execution-environment-header.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { Trans, t } from '@lingui/macro';
2-
import { Tooltip } from '@patternfly/react-core';
32
import React from 'react';
43
import { ContainerRepositoryType } from 'src/api';
5-
import { BaseHeader, Breadcrumbs, SignatureBadge, Tabs } from 'src/components';
4+
import {
5+
BaseHeader,
6+
Breadcrumbs,
7+
SignatureBadge,
8+
Tabs,
9+
Tooltip,
10+
} from 'src/components';
611
import { Paths, formatEEPath, formatPath } from 'src/paths';
712
import { lastSyncStatus, lastSynced } from 'src/utilities';
813

‎src/components/headers/collection-header.tsx

+28-27
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
Text,
1616
} from '@patternfly/react-core';
1717
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
18-
import * as moment from 'moment';
1918
import React from 'react';
2019
import { Navigate } from 'react-router-dom';
2120
import {
@@ -203,33 +202,37 @@ export class CollectionHeader extends React.Component<IProps, IState> {
203202
{ key: 'origin_repository', name: t`Repo` },
204203
];
205204

206-
const latestVersion = collection.collection_version.pulp_created;
207-
208205
const {
209206
display_signatures,
210207
can_upload_signatures,
211208
display_repositories,
212209
ai_deny_index,
213210
} = this.context.featureFlags;
214211

215-
const signedString = () => {
216-
if (!display_signatures) {
217-
return '';
218-
}
219-
220-
return collection.is_signed ? t`(signed)` : t`(unsigned)`;
221-
};
212+
const {
213+
collection_version,
214+
is_signed,
215+
namespace_metadata: namespace,
216+
} = collection;
222217

223-
const isLatestVersion = (v) => {
224-
return `${moment(v.pulp_created).fromNow()} ${signedString()}
225-
${
226-
v.version === collections[0].collection_version.version
227-
? t`(latest)`
228-
: ''
229-
}`;
230-
};
231-
const { collection_version, namespace_metadata: namespace } = collection;
232-
const { name: collectionName, version } = collection_version;
218+
const {
219+
name: collectionName,
220+
pulp_created: lastUpdated,
221+
version,
222+
} = collection_version;
223+
224+
const latestVersion = collections[0].collection_version.version;
225+
226+
const versionBadge = ({ pulp_created, version }) =>
227+
[
228+
<Trans key={pulp_created}>
229+
updated <DateComponent date={pulp_created} />
230+
</Trans>,
231+
display_signatures ? (is_signed ? t`(signed)` : t`(unsigned)`) : '',
232+
version === latestVersion ? t`(latest)` : '',
233+
]
234+
.filter(Boolean)
235+
.map((b, i) => (i ? <> {b}</> : b)); // join with spaces
233236

234237
const nsTitle = namespaceTitle(
235238
namespace || { name: collection_version.namespace },
@@ -432,7 +435,7 @@ export class CollectionHeader extends React.Component<IProps, IState> {
432435
>
433436
v{collection_version.version}
434437
</Button>{' '}
435-
{t`updated ${isLatestVersion(collection_version)}`}
438+
{versionBadge(collection_version)}
436439
</ListItem>
437440
))
438441
) : (
@@ -544,24 +547,22 @@ export class CollectionHeader extends React.Component<IProps, IState> {
544547
)
545548
}
546549
>
547-
<Trans>
548-
{v.version} updated {isLatestVersion(v)}
549-
</Trans>
550+
{v.version} {versionBadge(v)}
550551
</SelectOption>
551552
))}
552553
</Select>
553554
</div>
554-
{latestVersion ? (
555+
{lastUpdated ? (
555556
<span className='last-updated'>
556557
<Trans>
557-
Last updated <DateComponent date={latestVersion} />
558+
Last updated <DateComponent date={lastUpdated} />
558559
</Trans>
559560
</span>
560561
) : null}
561562
{display_signatures ? (
562563
<SignatureBadge
563564
isCompact
564-
signState={collection.is_signed ? 'signed' : 'unsigned'}
565+
signState={is_signed ? 'signed' : 'unsigned'}
565566
/>
566567
) : null}
567568
</div>

‎src/components/index.ts

+17-20
Original file line numberDiff line numberDiff line change
@@ -61,32 +61,13 @@ export {
6161
} from './page/list-page';
6262
export { Page } from './page/page';
6363
export { PageWithTabs } from './page/page-with-tabs';
64-
export {
65-
AlertList,
66-
AlertType,
67-
closeAlert,
68-
closeAlertMixin,
69-
} from './patternfly-wrappers/alert-list';
70-
export { AppliedFilters } from './patternfly-wrappers/applied-filters';
71-
export { BreadcrumbType, Breadcrumbs } from './patternfly-wrappers/breadcrumbs';
7264
export { ClipboardCopy } from './patternfly-wrappers/clipboard-copy';
73-
export {
74-
CompoundFilter,
75-
FilterOption,
76-
} from './patternfly-wrappers/compound-filter';
77-
export { CopyURL } from './patternfly-wrappers/copy-url';
78-
export { FileUpload } from './patternfly-wrappers/fileupload';
65+
export { FileUpload } from './patternfly-wrappers/file-upload';
7966
export { LabelGroup } from './patternfly-wrappers/label-group';
80-
export { LinkTabs } from './patternfly-wrappers/link-tabs';
8167
export { LoginForm } from './patternfly-wrappers/login-form';
82-
export { Main } from './patternfly-wrappers/main';
8368
export { Pagination } from './patternfly-wrappers/pagination';
84-
export { Sort, SortFieldType } from './patternfly-wrappers/sort';
85-
export { StatefulDropdown } from './patternfly-wrappers/stateful-dropdown';
8669
export { Tabs, TabsType } from './patternfly-wrappers/tabs';
8770
export { Tooltip } from './patternfly-wrappers/tooltip';
88-
export { WizardModal } from './patternfly-wrappers/wizard-modal';
89-
export { WriteOnlyField } from './patternfly-wrappers/write-only-field';
9071
export { AccessTab } from './rbac/access-tab';
9172
export { DeleteGroupModal } from './rbac/delete-group-modal';
9273
export { DeleteUserModal } from './rbac/delete-user-modal';
@@ -117,19 +98,35 @@ export { LazyRepositories } from './repositories/lazy-repositories';
11798
export { PulpLabels } from './repositories/pulp-labels';
11899
export { RemoteForm } from './repositories/remote-form';
119100
export { ShaLabel } from './sha-label/sha-label';
101+
export {
102+
AlertList,
103+
AlertType,
104+
closeAlert,
105+
closeAlertMixin,
106+
} from './shared/alert-list';
107+
export { AppliedFilters } from './shared/applied-filters';
108+
export { BreadcrumbType, Breadcrumbs } from './shared/breadcrumbs';
109+
export { CompoundFilter, FilterOption } from './shared/compound-filter';
110+
export { CopyURL } from './shared/copy-url';
120111
export { DataForm } from './shared/data-form';
121112
export { DetailList } from './shared/detail-list';
122113
export { Details } from './shared/details';
123114
export { DownloadCount } from './shared/download-count';
124115
export { ExternalLink } from './shared/external-link';
125116
export { HubListToolbar } from './shared/hub-list-toolbar';
126117
export { LanguageSwitcher } from './shared/language-switcher';
118+
export { LinkTabs } from './shared/link-tabs';
127119
export { LoginLink } from './shared/login-link';
120+
export { Main } from './shared/main';
128121
export { MultiRepoModal } from './shared/multi-repo-modal';
129122
export { MultiSearchSearch } from './shared/multi-search-search';
130123
export { NamespaceListItem } from './shared/namespace-list-item';
131124
export { CollectionRatings, RoleRatings } from './shared/ratings';
125+
export { Sort, SortFieldType } from './shared/sort';
126+
export { StatefulDropdown } from './shared/stateful-dropdown';
132127
export { UIVersion } from './shared/ui-version';
128+
export { WizardModal } from './shared/wizard-modal';
129+
export { WriteOnlyField } from './shared/write-only-field';
133130
export {
134131
SignAllCertificatesModal,
135132
SignSingleCertificateModal,

‎src/components/list-item-actions/list-item-actions.tsx

+28-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,37 @@
11
import { List } from '@patternfly/react-core';
22
import React from 'react';
3-
import { StatefulDropdown } from '../patternfly-wrappers/stateful-dropdown';
3+
import { StatefulDropdown } from '../shared/stateful-dropdown';
44

55
interface IProps {
66
kebabItems?: React.ReactNode[];
77
buttons?: React.ReactNode[];
88
}
9-
export class ListItemActions extends React.Component<IProps> {
10-
render() {
11-
const buttons = this.props.buttons?.filter(Boolean);
12-
const kebabItems = this.props.kebabItems?.filter(Boolean);
13-
const anyButtons = buttons?.length;
14-
const anyKebab = kebabItems?.length;
159

16-
return (
17-
<td
18-
style={{
19-
paddingRight: anyKebab ? '0px' : '16px',
20-
textAlign: 'right',
21-
display: 'flex',
22-
justifyContent: 'flex-end',
23-
}}
24-
>
25-
{anyButtons ? (
26-
<>
27-
<List>{buttons}</List>{' '}
28-
</>
29-
) : null}
30-
{anyKebab ? (
31-
<div data-cy='kebab-toggle'>
32-
<StatefulDropdown items={kebabItems} />{' '}
33-
</div>
34-
) : null}
35-
</td>
36-
);
37-
}
10+
export function ListItemActions(props: IProps) {
11+
const buttons = props.buttons?.filter(Boolean);
12+
const kebabItems = props.kebabItems?.filter(Boolean);
13+
const anyButtons = buttons?.length;
14+
const anyKebab = kebabItems?.length;
15+
16+
return (
17+
<td
18+
style={{
19+
paddingRight: anyKebab ? '0px' : '16px',
20+
textAlign: 'right',
21+
display: 'flex',
22+
justifyContent: 'flex-end',
23+
}}
24+
>
25+
{anyButtons ? (
26+
<>
27+
<List>{buttons}</List>{' '}
28+
</>
29+
) : null}
30+
{anyKebab ? (
31+
<div data-cy='kebab-toggle'>
32+
<StatefulDropdown items={kebabItems} />{' '}
33+
</div>
34+
) : null}
35+
</td>
36+
);
3837
}

‎src/components/my-imports/import-console.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { t } from '@lingui/macro';
2-
import { Spinner, Tooltip } from '@patternfly/react-core';
2+
import { Spinner } from '@patternfly/react-core';
33
import cx from 'classnames';
44
import React from 'react';
55
import { Link } from 'react-router-dom';
@@ -9,7 +9,7 @@ import {
99
ImportListType,
1010
PulpStatus,
1111
} from 'src/api';
12-
import { StatusIndicator } from 'src/components';
12+
import { StatusIndicator, Tooltip } from 'src/components';
1313
import { Paths, formatPath } from 'src/paths';
1414
import './my-imports.scss';
1515

‎src/components/my-imports/import-list.tsx

+6-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { t } from '@lingui/macro';
2-
import { Pagination, Toolbar } from '@patternfly/react-core';
2+
import { Toolbar } from '@patternfly/react-core';
33
import cx from 'classnames';
44
import React from 'react';
55
import {
@@ -16,8 +16,8 @@ import {
1616
EmptyStateFilter,
1717
EmptyStateNoData,
1818
LoadingPageSpinner,
19+
Pagination,
1920
} from 'src/components';
20-
import { Constants } from 'src/constants';
2121
import { ParamHelper, errorMessage, filterIsSet } from 'src/utilities';
2222
import './my-imports.scss';
2323

@@ -129,16 +129,10 @@ export class ImportList extends React.Component<IProps, IState> {
129129
</div>
130130
{this.props.params.namespace && (
131131
<Pagination
132-
itemCount={numberOfResults}
133-
perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
134-
page={params.page || 1}
135-
onSetPage={(_, p) =>
136-
updateParams(ParamHelper.setParam(params, 'page', p))
137-
}
138-
onPerPageSelect={(_, p) => {
139-
updateParams({ ...params, page: 1, page_size: p });
140-
}}
141-
isCompact={true}
132+
count={numberOfResults}
133+
isCompact
134+
params={params}
135+
updateParams={updateParams}
142136
/>
143137
)}
144138
</div>

‎src/components/patternfly-wrappers/.eslintrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"no-restricted-imports": "off"
4+
}
5+
}

0 commit comments

Comments
 (0)