[PR #3880/18dfe82d backport][stable-4.7] Expose download counts

CHANGES/2241.feature

@@ -0,0 +1 @@
+Expose legacy role download count in the UI

src/api/collection.ts

@@ -179,6 +179,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/legacy-role.ts

@@ -44,6 +44,7 @@ export class LegacyRoleListType {
   commit: string;
   name: string;
   description: string;
+  download_count: number;
   summary_fields: {
     dependencies: string[];
     namespace: {
@@ -77,6 +78,7 @@ export class LegacyRoleDetailType {
   commit: string;
   name: string;
   description: string;
+  download_count: number;
   summary_fields: {
     dependencies: string[];
     namespace: {

src/components/headers/base-header.tsx

@@ -47,11 +47,9 @@ export class BaseHeader extends React.Component<IProps> {
               </Title>
             </div>
           </div>
-          {pageControls ? (
-            <div className='header-right'>{pageControls}</div>
-          ) : null}
+          {pageControls || null}
         </div>
-        {versionControl ? <>{versionControl}</> : null}
+        {versionControl || null}
 
         {children ? (
           <div className='header-bottom'>{children}</div>

src/components/headers/collection-header.tsx

@@ -164,15 +164,15 @@ export class CollectionHeader extends React.Component<IProps, IState> {
 
   render() {
     const {
+      activeTab,
+      breadcrumbs,
+      className,
+      collection,
       collections,
       collectionsCount,
-      collection,
       content,
       params,
       updateParams,
-      breadcrumbs,
-      activeTab,
-      className,
     } = this.props;
 
     const {
@@ -474,69 +474,71 @@ export class CollectionHeader extends React.Component<IProps, IState> {
           }
           breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
           versionControl={
-            <div className='install-version-column'>
-              <span>{t`Version`}</span>
-              <div className='install-version-dropdown'>
-                <Select
-                  isOpen={isOpenVersionsSelect}
-                  onToggle={(isOpenVersionsSelect) =>
-                    this.setState({ isOpenVersionsSelect })
-                  }
-                  variant={SelectVariant.single}
-                  onSelect={() =>
-                    this.setState({ isOpenVersionsSelect: false })
-                  }
-                  selections={`v${version}`}
-                  aria-label={t`Select collection version`}
-                  loadingVariant={
-                    collections.length < collectionsCount
-                      ? {
-                          text: t`View more`,
-                          onClick: () =>
-                            this.setState({
-                              isOpenVersionsModal: true,
-                              isOpenVersionsSelect: false,
-                            }),
-                        }
-                      : null
-                  }
-                >
-                  {collections
-                    .map((c) => c.collection_version)
-                    .map((v) => (
-                      <SelectOption
-                        key={v.version}
-                        value={`v${v.version}`}
-                        onClick={() =>
-                          updateParams(
-                            ParamHelper.setParam(
-                              params,
-                              'version',
-                              v.version.toString(),
-                            ),
-                          )
-                        }
-                      >
-                        <Trans>
-                          {v.version} updated {isLatestVersion(v)}
-                        </Trans>
-                      </SelectOption>
-                    ))}
-                </Select>
+            <div className='column-section'>
+              <div className='install-version-column'>
+                <span>{t`Version`}</span>
+                <div className='install-version-dropdown'>
+                  <Select
+                    isOpen={isOpenVersionsSelect}
+                    onToggle={(isOpenVersionsSelect) =>
+                      this.setState({ isOpenVersionsSelect })
+                    }
+                    variant={SelectVariant.single}
+                    onSelect={() =>
+                      this.setState({ isOpenVersionsSelect: false })
+                    }
+                    selections={`v${version}`}
+                    aria-label={t`Select collection version`}
+                    loadingVariant={
+                      collections.length < collectionsCount
+                        ? {
+                            text: t`View more`,
+                            onClick: () =>
+                              this.setState({
+                                isOpenVersionsModal: true,
+                                isOpenVersionsSelect: false,
+                              }),
+                          }
+                        : null
+                    }
+                  >
+                    {collections
+                      .map((c) => c.collection_version)
+                      .map((v) => (
+                        <SelectOption
+                          key={v.version}
+                          value={`v${v.version}`}
+                          onClick={() =>
+                            updateParams(
+                              ParamHelper.setParam(
+                                params,
+                                'version',
+                                v.version.toString(),
+                              ),
+                            )
+                          }
+                        >
+                          <Trans>
+                            {v.version} updated {isLatestVersion(v)}
+                          </Trans>
+                        </SelectOption>
+                      ))}
+                  </Select>
+                </div>
+                {latestVersion ? (
+                  <span className='last-updated'>
+                    <Trans>
+                      Last updated <DateComponent date={latestVersion} />
+                    </Trans>
+                  </span>
+                ) : null}
+                {display_signatures ? (
+                  <SignatureBadge
+                    isCompact
+                    signState={collection.is_signed ? 'signed' : 'unsigned'}
+                  />
+                ) : null}
               </div>
-              {latestVersion ? (
-                <span className='last-updated'>
-                  <Trans>
-                    Last updated <DateComponent date={latestVersion} />
-                  </Trans>
-                </span>
-              ) : null}
-              {display_signatures ? (
-                <SignatureBadge
-                  isCompact
-                  signState={collection.is_signed ? 'signed' : 'unsigned'}
-                />
-              ) : null}
             </div>
           }
           pageControls={

src/components/headers/header.scss

@@ -12,10 +12,6 @@ $breakpoint-md: 1000px;
 .column-section {
   display: flex;
   justify-content: space-between;
-
-  .header-right {
-    align-items: right;
-  }
 }
 
 .install-version-column {

src/components/index.ts

@@ -111,6 +111,7 @@ export { ShaLabel } from './sha-label/sha-label';
 export { DataForm } from './shared/data-form';
 export { DetailList } from './shared/detail-list';
 export { Details } from './shared/details';
+export { DownloadCount } from './shared/download-count';
 export { LoginLink } from './shared/login-link';
 export { UIVersion } from './shared/ui-version';
 export {

src/components/legacy-role-list/legacy-role-item.tsx

@@ -12,7 +12,7 @@ import {
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { LegacyRoleDetailType } from 'src/api';
-import { DateComponent, Logo, Tag } from 'src/components';
+import { DateComponent, DownloadCount, Logo, Tag } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { chipGroupProps } from 'src/utilities';
 import './legacy-role-item.scss';
@@ -105,6 +105,9 @@ export class LegacyRoleListItem extends React.Component<LegacyRoleProps> {
           </Trans>
         </div>
         <div className='hub-entry'>{release_name}</div>
+        <div className='hub-entry'>
+          <DownloadCount item={role} />
+        </div>
       </DataListCell>,
     );
 

src/components/shared/download-count.tsx

@@ -0,0 +1,27 @@
+import { Trans, t } from '@lingui/macro';
+import { DownloadIcon } from '@patternfly/react-icons';
+import React from 'react';
+import { Tooltip } from 'src/components';
+import { language } from 'src/l10n';
+
+interface IProps {
+  item?: { download_count?: number };
+}
+
+export const DownloadCount = ({ item }: IProps) => {
+  if (!item?.download_count) {
+    return null;
+  }
+
+  const downloadCount = new Intl.NumberFormat(language).format(
+    item.download_count,
+  );
+
+  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

@@ -8,17 +8,17 @@ import { AlertType } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 
 export interface IBaseCollectionState {
+  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 +28,9 @@ const cache = {
   name: null,
   version: null,
 
+  collection: null,
   collections: [],
   collectionsCount: 0,
-  collection: null,
   content: null,
 };
 
@@ -110,9 +110,9 @@ export function loadCollection({
       cache.name = name;
       cache.version = version;
 
+      cache.collection = collection;
       cache.collections = collections;
       cache.collectionsCount = collectionsCount;
-      cache.collection = collection;
       cache.content = content;
     },
   );

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

@@ -22,11 +22,11 @@ class CollectionContent extends React.Component<
     const params = ParamHelper.parseParamString(props.location.search);
 
     this.state = {
+      collection: null,
       collections: [],
       collectionsCount: 0,
-      collection: null,
       content: null,
-      params: params,
+      params,
     };
   }
 
@@ -35,7 +35,7 @@ class CollectionContent extends React.Component<
   }
 
   render() {
-    const { collections, collectionsCount, collection, params, content } =
+    const { collection, collections, collectionsCount, content, params } =
       this.state;
 
     if (collections.length <= 0) {
@@ -66,17 +66,17 @@ class CollectionContent extends React.Component<
     return (
       <React.Fragment>
         <CollectionHeader
-          reload={() => this.loadCollections(true)}
+          activeTab='contents'
+          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,7 +98,12 @@ class CollectionContent extends React.Component<
       matchParams: this.props.routeParams,
       navigate: this.props.navigate,
       setCollection: (collections, collection, content, collectionsCount) =>
-        this.setState({ collections, collection, content, collectionsCount }),
+        this.setState({
+          collections,
+          collection,
+          content,
+          collectionsCount,
+        }),
       stateParams: this.state.params,
     });
   }