Select collection screen - multi select, repository field, repo filter (#3581)

* add repo col and filter
* add multi select in select collection screen
* add source repo name to add alert
* fix alert plural translation
Issue: AAH-2274

Author: jerabekjiri

CHANGES/2274.misc

@@ -0,0 +1 @@
+Improved select collection screen: added repository field, multi select and repository filter

src/actions/ansible-repository-collection-version-add.tsx

@@ -1,5 +1,5 @@
-import { t } from '@lingui/macro';
-import { Button, Modal, Radio } from '@patternfly/react-core';
+import { plural, t } from '@lingui/macro';
+import { Button, Checkbox, Modal } from '@patternfly/react-core';
 import React, { useState } from 'react';
 import {
   AnsibleRepositoryAPI,
@@ -8,29 +8,44 @@ import {
 } from 'src/api';
 import { AlertList, AlertType, DetailList, closeAlert } from 'src/components';
 import { canEditAnsibleRepository } from 'src/permissions';
-import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
+import {
+  RepositoriesUtils,
+  handleHttpError,
+  parsePulpIDFromURL,
+  taskAlert,
+} from 'src/utilities';
 import { Action } from './action';
 
 const add = (
   { repositoryHref, repositoryName },
-  { namespace, name, version, pulp_href: collectionVersionHref },
+  collections,
   { addAlert, setState, query },
 ) => {
   const pulpId = parsePulpIDFromURL(repositoryHref);
-  return AnsibleRepositoryAPI.addContent(pulpId, collectionVersionHref)
+  const collectionVersionHrefs = collections.map(
+    (c) => c.collection_version.pulp_href,
+  );
+  return AnsibleRepositoryAPI.addContent(pulpId, collectionVersionHrefs)
     .then(({ data }) => {
-      addAlert(
-        taskAlert(
-          data.task,
-          t`Started adding ${namespace}.${name} v${version} to repository "${repositoryName}".`,
-        ),
+      collections.map(
+        ({ collection_version: { name, namespace, version }, repository }) => {
+          addAlert(
+            taskAlert(
+              data.task,
+              t`Started adding ${namespace}.${name} v${version} from "${repository.name}" to repository "${repositoryName}".`,
+            ),
+          );
+          setState((ms) => ({ ...ms, addCollectionVersionModal: null }));
+          query({});
+        },
       );
-      setState((ms) => ({ ...ms, addCollectionVersionModal: null }));
-      query({});
     })
     .catch(
       handleHttpError(
-        t`Failed to add ${namespace}.${name} v${version} to repository "${repositoryName}".`,
+        plural(collections.length, {
+          one: `Failed to add collection to repository "${repositoryName}".`,
+          other: `Failed to add collections to repository "${repositoryName}".`,
+        }),
         () => setState((ms) => ({ ...ms, addCollectionVersionModal: null })),
         addAlert,
       ),
@@ -45,7 +60,7 @@ const AddCollectionVersionModal = ({
   closeAction: () => void;
 }) => {
   const [alerts, setAlerts] = useState([]);
-  const [selected, setSelected] = useState(null);
+  const [selected, setSelected] = useState<CollectionVersionSearch[]>([]);
 
   const addAlert = (alert: AlertType) => {
     setAlerts([...alerts, alert]);
@@ -75,22 +90,31 @@ const AddCollectionVersionModal = ({
   const renderTableRow = (item: CollectionVersionSearch, index: number) => {
     const {
       collection_version: { name, namespace, version, description },
+      repository,
     } = item;
 
     return (
-      <tr onClick={() => setSelected(item)} key={index}>
+      <tr
+        onClick={() =>
+          setSelected(
+            RepositoriesUtils.pushToOrFilterOutCollections(item, selected),
+          )
+        }
+        key={index}
+      >
         <td>
-          <Radio
+          <Checkbox
             aria-label={`${namespace}.${name} v${version}`}
             id={`collection-${index}`}
-            isChecked={selected === item}
+            isChecked={selected.includes(item)}
             name={`collection-${index}`}
           />
         </td>
         <td>
           {namespace}.{name} v{version}
         </td>
         <td>{description}</td>
+        <td>{repository.name}</td>
       </tr>
     );
   };
@@ -138,6 +162,10 @@ const AddCollectionVersionModal = ({
               id: 'namespace',
               title: t`Namespace`,
             },
+            {
+              id: 'repository_name',
+              title: t`Repository`,
+            },
           ]}
           noDataDescription={t`Collection versions will appear once a collection is uploaded.`}
           noDataTitle={t`No collection versions yet`}
@@ -159,6 +187,11 @@ const AddCollectionVersionModal = ({
               type: 'none',
               id: 'col2',
             },
+            {
+              title: t`Repository`,
+              type: 'none',
+              id: 'col3',
+            },
           ]}
           title={t`Collection versions`}
         />
@@ -178,13 +211,13 @@ export const ansibleRepositoryCollectionVersionAddAction = Action({
   modal: ({ addAlert, state, setState, query }) =>
     state.addCollectionVersionModal ? (
       <AddCollectionVersionModal
-        addAction={(collection) =>
-          add(state.addCollectionVersionModal, collection.collection_version, {
+        addAction={(collections: CollectionVersionSearch[]) => {
+          add(state.addCollectionVersionModal, collections, {
             addAlert,
             setState,
             query,
-          })
-        }
+          });
+        }}
         closeAction={() =>
           setState((ms) => ({ ...ms, addCollectionVersionModal: null }))
         }

src/api/ansible-repository.ts

@@ -22,9 +22,9 @@ class API extends PulpAPI {
     });
   }
 
-  addContent(id, collection_version_href) {
+  addContent(id, collection_version_hrefs) {
     return this.http.post(this.apiPath + id + '/modify/', {
-      add_content_units: [collection_version_href],
+      add_content_units: collection_version_hrefs,
     });
   }
 

src/utilities/repositories.ts

@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro';
 import { Repositories } from 'src/api/repositories';
+import { CollectionVersionSearch } from 'src/api/response-types/collection';
 import { Repository } from 'src/api/response-types/repositories';
 import { waitForTaskUrl } from 'src/utilities';
 import { parsePulpIDFromURL } from 'src/utilities/parse-pulp-id';
@@ -82,4 +83,35 @@ export class RepositoriesUtils {
       true,
     );
   }
+
+  public static pushToOrFilterOutCollections(
+    selectedCollection: CollectionVersionSearch,
+    collections: CollectionVersionSearch[],
+  ): CollectionVersionSearch[] {
+    // check if collection is already selected
+    const selectedItem = collections.find(
+      ({ collection_version: { name, namespace, version }, repository }) =>
+        name === selectedCollection.collection_version.name &&
+        namespace === selectedCollection.collection_version.namespace &&
+        version === selectedCollection.collection_version.version &&
+        repository.name === selectedCollection.repository.name,
+    );
+
+    // if collection is not selected, add it to selected items
+    if (!selectedItem) {
+      return [...collections, selectedCollection];
+    }
+
+    // unselect collection
+    return collections.filter(
+      ({ collection_version, repository }) =>
+        collection_version.name !==
+          selectedCollection.collection_version.name ||
+        collection_version.namespace !==
+          selectedCollection.collection_version.namespace ||
+        collection_version.version !==
+          selectedCollection.collection_version.version ||
+        repository.name !== selectedCollection.repository.name,
+    );
+  }
 }