RPM list (#72)

* fix collection detail vs list path mixup

* RPM: create a package list screen

LazyRPMRepository - show repo in package list

src/api/index.ts

@@ -67,6 +67,8 @@ export {
 } from './response-types/user';
 export { WriteOnlyFieldType } from './response-types/write-only-field';
 export { RoleAPI } from './role';
+export { RPMPackageAPI } from './rpm-package';
+export { RPMRepositoryAPI } from './rpm-repository';
 export { SettingsAPI } from './settings';
 export { SignCollectionAPI } from './sign-collections';
 export { SignContainersAPI } from './sign-containers';

src/api/rpm-package.ts

@@ -0,0 +1,9 @@
+import { PulpAPI } from './pulp';
+
+class API extends PulpAPI {
+  apiPath = 'content/rpm/packages/';
+
+  // list(params?)
+}
+
+export const RPMPackageAPI = new API();

src/api/rpm-repository.ts

@@ -0,0 +1,9 @@
+import { PulpAPI } from './pulp';
+
+class API extends PulpAPI {
+  apiPath = 'repositories/rpm/rpm/';
+
+  // list(params?)
+}
+
+export const RPMRepositoryAPI = new API();

src/app-routes.tsx

@@ -35,6 +35,7 @@ import {
   NotFound,
   Partners,
   PulpStatus,
+  RPMPackageList,
   RoleCreate,
   RoleList,
   Search,
@@ -189,13 +190,13 @@ export class AppRoutes extends Component {
         path: Paths.ansible.collection.dependencies,
       },
       { component: CollectionDetail, path: Paths.ansible.collection.detail },
-      { component: Search, path: Paths.ansible.collection.detail },
+      { component: Search, path: Paths.ansible.collection.list },
       { component: MyImports, path: Paths.ansible.imports },
       { component: NamespaceDetail, path: Paths.ansible.namespace.detail },
-      { component: Search, path: Paths.ansible.collection.detail },
       { component: PulpStatus, path: Paths.core.status, noAuth: true },
       { component: MultiSearch, path: Paths.meta.search },
       { component: AboutProject, path: Paths.meta.about, noAuth: true },
+      { component: RPMPackageList, path: Paths.rpm.package.list },
     ];
   }
 

src/components/index.ts

@@ -53,6 +53,7 @@ export { ImportModal } from './import-modal';
 export { LanguageSwitcher } from './language-switcher';
 export { LazyDistributions } from './lazy-distributions';
 export { LazyRepositories } from './lazy-repositories';
+export { LazyRPMRepository } from './lazy-rpm-repository';
 export { LinkTabs, type LinkTabsProps } from './link-tabs';
 export { ListItemActions } from './list-item-actions';
 export {

src/components/lazy-rpm-repository.tsx

@@ -0,0 +1,106 @@
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import React, { useEffect, useState } from 'react';
+// import { Link } from 'react-router-dom';
+import { RPMRepositoryAPI } from 'src/api';
+import { Spinner, Tooltip } from 'src/components';
+// import { Paths, formatPath } from 'src/paths';
+import { errorMessage } from 'src/utilities';
+
+// FIXME: merge with LazyRepositories, parametrize api, query, link
+export const LazyRPMRepository = ({
+  content_href,
+}: {
+  content_href: string;
+}) => {
+  const [repositories, setRepositories] = useState([]);
+  const [count, setCount] = useState(null);
+  const [page, setPage] = useState(1);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const query = (prepend?) => {
+    RPMRepositoryAPI.list({ with_content: content_href, page, page_size: 10 })
+      .then(({ data: { count, results } }) => {
+        setRepositories(prepend ? [...prepend, ...results] : results);
+        setCount(count);
+        setError(null);
+        setLoading(false);
+      })
+      .catch((e) => {
+        const { status, statusText } = e.response;
+        setRepositories(prepend || []);
+        setCount(null);
+        setError(errorMessage(status, statusText));
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (!content_href) {
+      setRepositories([]);
+      setCount(null);
+      setPage(1);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    setRepositories([]);
+    setCount(null);
+    setPage(1);
+    setError(null);
+    setLoading(true);
+
+    query();
+  }, [content_href]);
+
+  // support pagination, but page == 1 is handled above
+  useEffect(() => {
+    if (page === 1) {
+      return;
+    }
+
+    query(repositories);
+  }, [page]);
+
+  const errorElement = error && (
+    <Tooltip content={t`Failed to load repositories: ${error}`} key='empty'>
+      <Button variant='plain'>
+        <ExclamationCircleIcon />
+      </Button>
+    </Tooltip>
+  );
+
+  const loadMore = () => {
+    setPage((page) => page + 1);
+  };
+
+  return loading ? (
+    <Spinner size='sm' />
+  ) : error ? (
+    errorElement
+  ) : (
+    <>
+      {repositories?.map?.(({ name }, index) => (
+        <>
+          {index ? ', ' : ''}
+          {name}
+          {/* FIXME: ansible -> rpm
+          <Link to={formatPath(Paths.ansible.repository.detail, { name })}>
+            {name}
+          </Link>
+          */}
+        </>
+      ))}
+      {!repositories?.length ? '?' : null}
+      {count > repositories?.length ? (
+        <>
+          {' '}
+          <a onClick={loadMore}>{t`(more)`}</a>
+        </>
+      ) : null}
+    </>
+  );
+};

src/containers/ansible-repository/detail.tsx

@@ -123,7 +123,7 @@ const AnsibleRepositoryDetail = PageWithTabs<
       collections: (
         <Navigate
           to={formatPath(
-            Paths.ansible.collection.detail,
+            Paths.ansible.collection.list,
             {},
             { repository_name: item?.name },
           )}
@@ -181,7 +181,7 @@ const AnsibleRepositoryDetail = PageWithTabs<
       title: t`Collections`,
       icon: <ArrowRightIcon />,
       link: formatPath(
-        Paths.ansible.collection.detail,
+        Paths.ansible.collection.list,
         {},
         { repository_name: name },
       ),

src/containers/index.ts

@@ -32,6 +32,7 @@ export { default as PulpStatus } from './pulp-status';
 export { default as RoleCreate } from './role-management/role-create';
 export { default as EditRole } from './role-management/role-edit';
 export { default as RoleList } from './role-management/role-list';
+export { default as RPMPackageList } from './rpm/package-list';
 export { default as MultiSearch } from './search/multi-search';
 export { default as Search } from './search/search';
 export { default as UserProfile } from './settings/user-profile';

src/containers/rpm/package-list.tsx

@@ -0,0 +1,77 @@
+import { msg, t } from '@lingui/macro';
+import { Td, Tr } from '@patternfly/react-table';
+import React from 'react';
+import { RPMPackageAPI } from 'src/api';
+import { LazyRPMRepository, ListItemActions, ListPage } from 'src/components';
+
+interface RPMPackage {
+  name: string;
+  version;
+  arch;
+  pulp_href;
+}
+
+const listItemActions = [];
+
+const RPMPackageList = ListPage<RPMPackage>({
+  defaultPageSize: 10,
+  defaultSort: '-name',
+  displayName: 'RPMPackageList',
+  errorTitle: msg`Packages could not be displayed.`,
+  filterConfig: (_) => [
+    {
+      id: 'name__contains',
+      title: t`Package name`,
+    },
+  ],
+  headerActions: [],
+  listItemActions,
+  noDataDescription: msg`Packages will appear once created.`,
+  noDataTitle: msg`No packages yet`,
+  query: ({ params }) => RPMPackageAPI.list(params),
+  renderTableRow(item: RPMPackage, index: number, _actionContext) {
+    const { name, version, arch, pulp_href } = item;
+
+    // TODO download rpm
+    const kebabItems = []; /* listItemActions.map((action) =>
+      action.dropdownItem({ ...item, id }, actionContext),
+    ); */
+
+    return (
+      <Tr key={index}>
+        <Td>{name}</Td>
+        <Td>{version}</Td>
+        <Td>{arch}</Td>
+        <Td>
+          <LazyRPMRepository content_href={pulp_href} />
+        </Td>
+        <ListItemActions kebabItems={kebabItems} />
+      </Tr>
+    );
+  },
+  sortHeaders: [
+    {
+      title: msg`Package name`,
+      type: 'alpha',
+      id: 'name',
+    },
+    {
+      title: msg`Version`,
+      type: 'none',
+      id: 'version',
+    },
+    {
+      title: msg`Arch`,
+      type: 'none',
+      id: 'arch',
+    },
+    {
+      title: msg`Repository`,
+      type: 'none',
+      id: 'repository',
+    },
+  ],
+  title: msg`Packages`,
+});
+
+export default RPMPackageList;

src/containers/search/multi-search.tsx

@@ -204,12 +204,12 @@ const MultiSearch = (props: RouteProps) => {
           title={t`Collections`}
           showAllLink={
             <Link
-              to={formatPath(Paths.ansible.collection.detail)}
+              to={formatPath(Paths.ansible.collection.list)}
             >{t`Show all collections`}</Link>
           }
           showMoreLink={
             <Link
-              to={formatPath(Paths.ansible.collection.detail, {}, { keywords })}
+              to={formatPath(Paths.ansible.collection.list, {}, { keywords })}
             >{t`Show more collections`}</Link>
           }
         >

src/menu.tsx

@@ -99,6 +99,11 @@ function standaloneMenu() {
         }),
       ],
     ),
+    menuSection('Pulp RPM', { condition: and(loggedIn, hasPlugin('rpm')) }, [
+      menuItem(t`RPMs`, {
+        url: formatPath(Paths.rpm.package.list),
+      }),
+    ]),
     menuItem(t`Task Management`, {
       url: formatPath(Paths.core.task.list),
       alternativeUrls: [altPath(Paths.core.task.detail)],

src/paths.ts

@@ -126,4 +126,7 @@ export const Paths = {
     not_found: '/not-found', // FIXME: don't redirect
     search: '/search',
   },
+  rpm: {
+    package: { list: '/rpm/rpms' },
+  },
 };