DownloadCount - show number of downloads, use for legacy roles

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/index.ts

@@ -122,7 +122,7 @@ export { WizardModal } from './patternfly-wrappers/wizard-modal';
 export { PreviewRoles } from './rbac/preview-roles';
 export { SelectRoles } from './rbac/select-roles';
 export { SelectGroup } from './rbac/select-group';
-
+export { DownloadCount } from './shared/download-count';
 export { LegacyRoleListItem } from './legacy-role-list/legacy-role-item';
 export { LegacyNamespaceListItem } from './legacy-namespace-list/legacy-namespace-item';
 export { WisdomModal } from './wisdom-modal/wisdom-modal';

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

@@ -12,7 +12,7 @@ import {
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { LegacyRoleDetailType } from 'src/api/response-types/legacy-role';
-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,24 @@
+import { Trans } from '@lingui/macro';
+import { DownloadIcon } from '@patternfly/react-icons';
+import React from 'react';
+import { language } from 'src/l10n';
+
+interface IProps {
+  item?: { download_count?: number };
+}
+
+export const DownloadCount = ({ item }) => {
+  if (!item?.download_count) {
+    return null;
+  }
+
+  const downloadCount = new Intl.NumberFormat(language).format(
+    item.download_count,
+  );
+
+  return (
+    <>
+      <DownloadIcon /> <Trans>{downloadCount} Downloads</Trans>
+    </>
+  );
+};

src/containers/legacy-roles/legacy-role.tsx

@@ -25,6 +25,7 @@ import {
   Breadcrumbs,
   ClipboardCopy,
   DateComponent,
+  DownloadCount,
   LoadingPageWithHeader,
   Logo,
   Main,
@@ -315,6 +316,9 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
               Github Repository <ExternalLinkAltIcon />
             </a>
           </div>
+          <div className='hub-entry'>
+            <DownloadCount item={role} />
+          </div>
         </DataListCell>,
       );
     }

src/l10n.ts

@@ -57,7 +57,7 @@ const overrideLanguage =
   window.localStorage.override_l10n &&
   availableLanguages.includes(window.localStorage.override_l10n) &&
   window.localStorage.override_l10n;
-const language = overrideLanguage || userLanguage || 'en';
+export const language = overrideLanguage || userLanguage || 'en';
 const pseudolocalization = window.localStorage.test_l10n === 'true';
 
 if (overrideLanguage) {