eslint - use no-restricted-imports to dedup patternfly wrappers

.eslintrc

@@ -33,6 +33,21 @@
     "curly": ["error", "all"],
     "eol-last": ["error", "always"],
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "no-restricted-imports": ["error", {
+      "paths": [{
+        "importNames": [
+          "ClipboardCopy",
+          "FileUpload",
+          "LabelGroup",
+          "LoginForm",
+          "Pagination",
+          "Tabs",
+          "Tooltip",
+        ],
+        "message": "Import from src/components instead.",
+        "name": "@patternfly/react-core",
+      }],
+    }],
 
     /// FIXME: Rules to add from previous config (see #860)
     // 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

@@ -9,13 +9,17 @@ import {
   Text,
   TextContent,
   TextVariants,
-  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 { CollectionVersionSearch } from 'src/api';
-import { CollectionNumericLabel, Logo, SignatureBadge } from 'src/components';
+import {
+  CollectionNumericLabel,
+  Logo,
+  SignatureBadge,
+  Tooltip,
+} from 'src/components';
 import { Constants } from 'src/constants';
 import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';

src/components/cards/namespace-card.tsx

@@ -7,12 +7,11 @@ import {
   CardHeader,
   CardHeaderMain,
   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 { Logo, Tooltip } from 'src/components';
 import { Constants } from 'src/constants';
 import { namespaceTitle } from 'src/utilities';
 import './cards.scss';
@@ -71,11 +70,11 @@ export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
           />
         </CardHeaderMain>
       </CardHeader>
-      <Tooltip content={title}>
+      <Tooltip content={title} noSpan>
         <CardTitle>{getDescription(title, MAX_DESCRIPTION_LENGTH)}</CardTitle>
       </Tooltip>
       {title !== name ? (
-        <Tooltip content={name}>
+        <Tooltip content={name} noSpan>
           <CardBody>{getDescription(name, MAX_DESCRIPTION_LENGTH)}</CardBody>
         </Tooltip>
       ) : null}
@@ -89,6 +88,7 @@ export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
   );
 };
 
+// FIXME: pf-m-truncate / hub-m-truncated
 function getDescription(d: string, MAX_DESCRIPTION_LENGTH) {
   if (!d) {
     return '';

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

@@ -1,8 +1,13 @@
 import { Trans, t } from '@lingui/macro';
-import { Tooltip } from '@patternfly/react-core';
 import React from 'react';
 import { ContainerRepositoryType } from 'src/api';
-import { BaseHeader, Breadcrumbs, SignatureBadge, Tabs } from 'src/components';
+import {
+  BaseHeader,
+  Breadcrumbs,
+  SignatureBadge,
+  Tabs,
+  Tooltip,
+} from 'src/components';
 import { Paths, formatEEPath, formatPath } from 'src/paths';
 import { lastSyncStatus, lastSynced } from 'src/utilities';
 

src/components/headers/collection-header.tsx

@@ -15,7 +15,6 @@ import {
   Text,
 } from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import * as moment from 'moment';
 import React from 'react';
 import { Navigate } from 'react-router-dom';
 import {
@@ -203,33 +202,37 @@ export class CollectionHeader extends React.Component<IProps, IState> {
       { key: 'origin_repository', name: t`Repo` },
     ];
 
-    const latestVersion = collection.collection_version.pulp_created;
-
     const {
       display_signatures,
       can_upload_signatures,
       display_repositories,
       ai_deny_index,
     } = this.context.featureFlags;
 
-    const signedString = () => {
-      if (!display_signatures) {
-        return '';
-      }
-
-      return collection.is_signed ? t`(signed)` : t`(unsigned)`;
-    };
+    const {
+      collection_version,
+      is_signed,
+      namespace_metadata: namespace,
+    } = collection;
 
-    const isLatestVersion = (v) => {
-      return `${moment(v.pulp_created).fromNow()} ${signedString()}
-      ${
-        v.version === collections[0].collection_version.version
-          ? t`(latest)`
-          : ''
-      }`;
-    };
-    const { collection_version, namespace_metadata: namespace } = collection;
-    const { name: collectionName, version } = collection_version;
+    const {
+      name: collectionName,
+      pulp_created: lastUpdated,
+      version,
+    } = collection_version;
+
+    const latestVersion = collections[0].collection_version.version;
+
+    const versionBadge = ({ pulp_created, version }) =>
+      [
+        <Trans key={pulp_created}>
+          updated <DateComponent date={pulp_created} />
+        </Trans>,
+        display_signatures ? (is_signed ? t`(signed)` : t`(unsigned)`) : '',
+        version === latestVersion ? t`(latest)` : '',
+      ]
+        .filter(Boolean)
+        .map((b, i) => (i ? <> {b}</> : b)); // join with spaces
 
     const nsTitle = namespaceTitle(
       namespace || { name: collection_version.namespace },
@@ -432,7 +435,7 @@ export class CollectionHeader extends React.Component<IProps, IState> {
                   >
                     v{collection_version.version}
                   </Button>{' '}
-                  {t`updated ${isLatestVersion(collection_version)}`}
+                  {versionBadge(collection_version)}
                 </ListItem>
               ))
             ) : (
@@ -544,24 +547,22 @@ export class CollectionHeader extends React.Component<IProps, IState> {
                             )
                           }
                         >
-                          <Trans>
-                            {v.version} updated {isLatestVersion(v)}
-                          </Trans>
+                          {v.version} {versionBadge(v)}
                         </SelectOption>
                       ))}
                   </Select>
                 </div>
-                {latestVersion ? (
+                {lastUpdated ? (
                   <span className='last-updated'>
                     <Trans>
-                      Last updated <DateComponent date={latestVersion} />
+                      Last updated <DateComponent date={lastUpdated} />
                     </Trans>
                   </span>
                 ) : null}
                 {display_signatures ? (
                   <SignatureBadge
                     isCompact
-                    signState={collection.is_signed ? 'signed' : 'unsigned'}
+                    signState={is_signed ? 'signed' : 'unsigned'}
                   />
                 ) : null}
               </div>

src/components/index.ts

@@ -61,32 +61,13 @@ export {
 } from './page/list-page';
 export { Page } from './page/page';
 export { PageWithTabs } from './page/page-with-tabs';
-export {
-  AlertList,
-  AlertType,
-  closeAlert,
-  closeAlertMixin,
-} from './patternfly-wrappers/alert-list';
-export { AppliedFilters } from './patternfly-wrappers/applied-filters';
-export { BreadcrumbType, Breadcrumbs } from './patternfly-wrappers/breadcrumbs';
 export { ClipboardCopy } from './patternfly-wrappers/clipboard-copy';
-export {
-  CompoundFilter,
-  FilterOption,
-} from './patternfly-wrappers/compound-filter';
-export { CopyURL } from './patternfly-wrappers/copy-url';
-export { FileUpload } from './patternfly-wrappers/fileupload';
+export { FileUpload } from './patternfly-wrappers/file-upload';
 export { LabelGroup } from './patternfly-wrappers/label-group';
-export { LinkTabs } from './patternfly-wrappers/link-tabs';
 export { LoginForm } from './patternfly-wrappers/login-form';
-export { Main } from './patternfly-wrappers/main';
 export { Pagination } from './patternfly-wrappers/pagination';
-export { Sort, SortFieldType } from './patternfly-wrappers/sort';
-export { StatefulDropdown } from './patternfly-wrappers/stateful-dropdown';
 export { Tabs, TabsType } from './patternfly-wrappers/tabs';
 export { Tooltip } from './patternfly-wrappers/tooltip';
-export { WizardModal } from './patternfly-wrappers/wizard-modal';
-export { WriteOnlyField } from './patternfly-wrappers/write-only-field';
 export { AccessTab } from './rbac/access-tab';
 export { DeleteGroupModal } from './rbac/delete-group-modal';
 export { DeleteUserModal } from './rbac/delete-user-modal';
@@ -117,19 +98,35 @@ export { LazyRepositories } from './repositories/lazy-repositories';
 export { PulpLabels } from './repositories/pulp-labels';
 export { RemoteForm } from './repositories/remote-form';
 export { ShaLabel } from './sha-label/sha-label';
+export {
+  AlertList,
+  AlertType,
+  closeAlert,
+  closeAlertMixin,
+} from './shared/alert-list';
+export { AppliedFilters } from './shared/applied-filters';
+export { BreadcrumbType, Breadcrumbs } from './shared/breadcrumbs';
+export { CompoundFilter, FilterOption } from './shared/compound-filter';
+export { CopyURL } from './shared/copy-url';
 export { DataForm } from './shared/data-form';
 export { DetailList } from './shared/detail-list';
 export { Details } from './shared/details';
 export { DownloadCount } from './shared/download-count';
 export { ExternalLink } from './shared/external-link';
 export { HubListToolbar } from './shared/hub-list-toolbar';
 export { LanguageSwitcher } from './shared/language-switcher';
+export { LinkTabs } from './shared/link-tabs';
 export { LoginLink } from './shared/login-link';
+export { Main } from './shared/main';
 export { MultiRepoModal } from './shared/multi-repo-modal';
 export { MultiSearchSearch } from './shared/multi-search-search';
 export { NamespaceListItem } from './shared/namespace-list-item';
 export { CollectionRatings, RoleRatings } from './shared/ratings';
+export { Sort, SortFieldType } from './shared/sort';
+export { StatefulDropdown } from './shared/stateful-dropdown';
 export { UIVersion } from './shared/ui-version';
+export { WizardModal } from './shared/wizard-modal';
+export { WriteOnlyField } from './shared/write-only-field';
 export {
   SignAllCertificatesModal,
   SignSingleCertificateModal,

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

@@ -1,38 +1,37 @@
 import { List } from '@patternfly/react-core';
 import React from 'react';
-import { StatefulDropdown } from '../patternfly-wrappers/stateful-dropdown';
+import { StatefulDropdown } from '../shared/stateful-dropdown';
 
 interface IProps {
   kebabItems?: React.ReactNode[];
   buttons?: React.ReactNode[];
 }
-export class ListItemActions extends React.Component<IProps> {
-  render() {
-    const buttons = this.props.buttons?.filter(Boolean);
-    const kebabItems = this.props.kebabItems?.filter(Boolean);
-    const anyButtons = buttons?.length;
-    const anyKebab = kebabItems?.length;
 
-    return (
-      <td
-        style={{
-          paddingRight: anyKebab ? '0px' : '16px',
-          textAlign: 'right',
-          display: 'flex',
-          justifyContent: 'flex-end',
-        }}
-      >
-        {anyButtons ? (
-          <>
-            <List>{buttons}</List>{' '}
-          </>
-        ) : null}
-        {anyKebab ? (
-          <div data-cy='kebab-toggle'>
-            <StatefulDropdown items={kebabItems} />{' '}
-          </div>
-        ) : null}
-      </td>
-    );
-  }
+export function ListItemActions(props: IProps) {
+  const buttons = props.buttons?.filter(Boolean);
+  const kebabItems = props.kebabItems?.filter(Boolean);
+  const anyButtons = buttons?.length;
+  const anyKebab = kebabItems?.length;
+
+  return (
+    <td
+      style={{
+        paddingRight: anyKebab ? '0px' : '16px',
+        textAlign: 'right',
+        display: 'flex',
+        justifyContent: 'flex-end',
+      }}
+    >
+      {anyButtons ? (
+        <>
+          <List>{buttons}</List>{' '}
+        </>
+      ) : null}
+      {anyKebab ? (
+        <div data-cy='kebab-toggle'>
+          <StatefulDropdown items={kebabItems} />{' '}
+        </div>
+      ) : null}
+    </td>
+  );
 }

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

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Spinner, Tooltip } from '@patternfly/react-core';
+import { Spinner } from '@patternfly/react-core';
 import cx from 'classnames';
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -9,7 +9,7 @@ import {
   ImportListType,
   PulpStatus,
 } from 'src/api';
-import { StatusIndicator } from 'src/components';
+import { StatusIndicator, Tooltip } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import './my-imports.scss';
 

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

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Pagination, Toolbar } from '@patternfly/react-core';
+import { Toolbar } from '@patternfly/react-core';
 import cx from 'classnames';
 import React from 'react';
 import {
@@ -16,8 +16,8 @@ import {
   EmptyStateFilter,
   EmptyStateNoData,
   LoadingPageSpinner,
+  Pagination,
 } from 'src/components';
-import { Constants } from 'src/constants';
 import { ParamHelper, errorMessage, filterIsSet } from 'src/utilities';
 import './my-imports.scss';
 
@@ -129,16 +129,10 @@ export class ImportList extends React.Component<IProps, IState> {
         </div>
         {this.props.params.namespace && (
           <Pagination
-            itemCount={numberOfResults}
-            perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
-            page={params.page || 1}
-            onSetPage={(_, p) =>
-              updateParams(ParamHelper.setParam(params, 'page', p))
-            }
-            onPerPageSelect={(_, p) => {
-              updateParams({ ...params, page: 1, page_size: p });
-            }}
-            isCompact={true}
+            count={numberOfResults}
+            isCompact
+            params={params}
+            updateParams={updateParams}
           />
         )}
       </div>

src/components/patternfly-wrappers/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-restricted-imports": "off"
+  }
+}