Collections - use DownloadCount, check insights mode

and reorganize the CollectionHeader page controls to look the same but allow for an extra row
and start pulling the collection api in loadCollection
and warn about collection count applying to all versions

(won't do anything without pulp_ansible#1477)

src/api/collection.ts

@@ -232,6 +232,12 @@ export class API extends HubAPI {
       `pulp/api/v3/content/ansible/collection_versions/`,
     );
   }
+
+  getDetail(distroBasePath, namespace, name) {
+    return this.http.get(
+      `v3/plugin/ansible/content/${distroBasePath}/collections/index/${namespace}/${name}/`,
+    );
+  }
 }
 
 export const CollectionAPI = new API();

src/api/response-types/collection.ts

@@ -222,6 +222,8 @@ export class CollectionDetailType {
     company: string;
     related_fields: { my_permissions?: string[] };
   };
+
+  download_count: number;
 }
 
 export class CollectionUsedByDependencies extends CollectionDetailType {

src/components/headers/collection-header.tsx

@@ -21,6 +21,7 @@ import { Navigate } from 'react-router-dom';
 import {
   CertificateUploadAPI,
   CollectionAPI,
+  CollectionDetailType,
   CollectionVersionAPI,
   CollectionVersionContentType,
   CollectionVersionSearch,
@@ -37,6 +38,7 @@ import {
   Breadcrumbs,
   CopyCollectionToRepositoryModal,
   DeleteCollectionModal,
+  DownloadCount,
   ImportModal,
   LinkTabs,
   Logo,
@@ -68,6 +70,7 @@ interface IProps {
   collections: CollectionVersionSearch[];
   collectionsCount: number;
   collection: CollectionVersionSearch;
+  actuallyCollection: CollectionDetailType;
   content: CollectionVersionContentType;
   params: {
     version?: string;
@@ -164,15 +167,16 @@ export class CollectionHeader extends React.Component<IProps, IState> {
 
   render() {
     const {
+      activeTab,
+      actuallyCollection,
+      breadcrumbs,
+      className,
+      collection,
       collections,
       collectionsCount,
-      collection,
       content,
       params,
       updateParams,
-      breadcrumbs,
-      activeTab,
-      className,
     } = this.props;
 
     const {
@@ -545,20 +549,28 @@ export class CollectionHeader extends React.Component<IProps, IState> {
             </div>
           }
           pageControls={
-            <Flex>
-              {DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE ? (
-                <FlexItem>
-                  <a href={issueUrl} target='_blank' rel='noreferrer'>
-                    {t`Create issue`}
-                  </a>{' '}
-                  <ExternalLinkAltIcon />
-                </FlexItem>
-              ) : null}
-              {dropdownItems.length > 0 ? (
-                <FlexItem data-cy='kebab-toggle'>
-                  <StatefulDropdown items={dropdownItems} />
-                </FlexItem>
-              ) : null}
+            <Flex
+              direction={{ default: 'column' }}
+              alignItems={{ default: 'alignItemsFlexEnd' }}
+            >
+              <Flex direction={{ default: 'row' }}>
+                {DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE ? (
+                  <FlexItem>
+                    <a href={issueUrl} target='_blank' rel='noreferrer'>
+                      {t`Create issue`}
+                    </a>{' '}
+                    <ExternalLinkAltIcon />
+                  </FlexItem>
+                ) : null}
+                {dropdownItems.length > 0 ? (
+                  <FlexItem data-cy='kebab-toggle'>
+                    <StatefulDropdown items={dropdownItems} />
+                  </FlexItem>
+                ) : null}
+              </Flex>
+              <FlexItem>
+                <DownloadCount item={actuallyCollection} />
+              </FlexItem>
             </Flex>
           }
         >

src/components/shared/download-count.tsx

@@ -1,13 +1,18 @@
-import { Trans } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
 import { DownloadIcon } from '@patternfly/react-icons';
 import React from 'react';
+import { Tooltip } from 'src/components';
+import { Constants } from 'src/constants';
 import { language } from 'src/l10n';
 
 interface IProps {
   item?: { download_count?: number };
 }
 
-export const DownloadCount = ({ item }) => {
+export const DownloadCount = ({ item }: IProps) => {
+  if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
+    return null;
+  }
   if (!item?.download_count) {
     return null;
   }
@@ -17,8 +22,10 @@ export const DownloadCount = ({ item }) => {
   );
 
   return (
-    <>
+    <Tooltip
+      content={t`Download count is the sum of all versions' download counts`}
+    >
       <DownloadIcon /> <Trans>{downloadCount} Downloads</Trans>
-    </>
+    </Tooltip>
   );
 };

src/containers/collection-detail/base.ts

@@ -1,5 +1,6 @@
 import {
   CollectionAPI,
+  CollectionDetailType,
   CollectionVersionAPI,
   CollectionVersionContentType,
   CollectionVersionSearch,
@@ -8,17 +9,18 @@ import { AlertType } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 
 export interface IBaseCollectionState {
+  actuallyCollection?: CollectionDetailType;
+  alerts?: AlertType[];
+  collection?: CollectionVersionSearch;
+  collections?: CollectionVersionSearch[];
+  collectionsCount?: number;
+  content?: CollectionVersionContentType;
+  distroBasePath?: string;
   params: {
     version?: string;
     showing?: string;
     keywords?: string;
   };
-  collections?: CollectionVersionSearch[];
-  collectionsCount?: number;
-  collection?: CollectionVersionSearch;
-  content?: CollectionVersionContentType;
-  alerts?: AlertType[];
-  distroBasePath?: string;
 }
 
 // Caches the collection data when matching, prevents redundant fetches between collection detail tabs
@@ -28,9 +30,10 @@ const cache = {
   name: null,
   version: null,
 
+  actuallyCollection: null,
+  collection: null,
   collections: [],
   collectionsCount: 0,
-  collection: null,
   content: null,
 };
 
@@ -57,6 +60,7 @@ export function loadCollection({
       cache.collection,
       cache.content,
       cache.collectionsCount,
+      cache.actuallyCollection,
     );
     return;
   }
@@ -94,25 +98,45 @@ export function loadCollection({
     .then(({ data }) => data)
     .catch(() => ({ data: [], meta: { count: 0 } }));
 
-  return Promise.all([versions, currentVersion, content]).then(
+  // FIXME: repo -> base_path
+  const actuallyCollection = CollectionAPI.getDetail(
+    repo,
+    namespace,
+    name,
+  ).then(({ data }) => data);
+
+  return Promise.all([
+    versions,
+    currentVersion,
+    content,
+    actuallyCollection,
+  ]).then(
     ([
       {
         data: collections,
         meta: { count: collectionsCount },
       },
       collection,
       content,
+      actuallyCollection,
     ]) => {
-      setCollection(collections, collection, content, collectionsCount);
+      setCollection(
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      );
 
       cache.repository = repo;
       cache.namespace = namespace;
       cache.name = name;
       cache.version = version;
 
+      cache.actuallyCollection = actuallyCollection;
+      cache.collection = collection;
       cache.collections = collections;
       cache.collectionsCount = collectionsCount;
-      cache.collection = collection;
       cache.content = content;
     },
   );

src/containers/collection-detail/collection-content.tsx

@@ -23,11 +23,12 @@ class CollectionContent extends React.Component<
     const params = ParamHelper.parseParamString(props.location.search);
 
     this.state = {
+      actuallyCollection: null,
+      collection: null,
       collections: [],
       collectionsCount: 0,
-      collection: null,
       content: null,
-      params: params,
+      params,
     };
   }
 
@@ -36,8 +37,14 @@ class CollectionContent extends React.Component<
   }
 
   render() {
-    const { collections, collectionsCount, collection, params, content } =
-      this.state;
+    const {
+      actuallyCollection,
+      collection,
+      collections,
+      collectionsCount,
+      content,
+      params,
+    } = this.state;
 
     if (collections.length <= 0) {
       return <LoadingPageWithHeader />;
@@ -67,17 +74,18 @@ class CollectionContent extends React.Component<
     return (
       <React.Fragment>
         <CollectionHeader
-          reload={() => this.loadCollections(true)}
+          activeTab='contents'
+          actuallyCollection={actuallyCollection}
+          breadcrumbs={breadcrumbs}
+          collection={collection}
           collections={collections}
           collectionsCount={collectionsCount}
-          collection={collection}
           content={content}
           params={params}
+          reload={() => this.loadCollections(true)}
           updateParams={(params) =>
             this.updateParams(params, () => this.loadCollections(true))
           }
-          breadcrumbs={breadcrumbs}
-          activeTab='contents'
         />
         <Main>
           <section className='body'>
@@ -98,8 +106,20 @@ class CollectionContent extends React.Component<
       forceReload,
       matchParams: this.props.routeParams,
       navigate: this.props.navigate,
-      setCollection: (collections, collection, content, collectionsCount) =>
-        this.setState({ collections, collection, content, collectionsCount }),
+      setCollection: (
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      ) =>
+        this.setState({
+          collections,
+          collection,
+          content,
+          collectionsCount,
+          actuallyCollection,
+        }),
       stateParams: this.state.params,
     });
   }