From 8f75897f5bfac4c4d66d9466160257a3e0c99c8e Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 21 Jun 2023 01:05:15 +0000
Subject: [PATCH 1/6] Expose download counts

for collections and legacy roles

Issue: AAH-2237
Issue: AAH-2241
---
 CHANGES/2237.feature | 1 +
 CHANGES/2241.feature | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 CHANGES/2237.feature
 create mode 100644 CHANGES/2241.feature

diff --git a/CHANGES/2237.feature b/CHANGES/2237.feature
new file mode 100644
index 0000000000..a5279272f1
--- /dev/null
+++ b/CHANGES/2237.feature
@@ -0,0 +1 @@
+Expose collection download count in the UI
diff --git a/CHANGES/2241.feature b/CHANGES/2241.feature
new file mode 100644
index 0000000000..a9ba78be15
--- /dev/null
+++ b/CHANGES/2241.feature
@@ -0,0 +1 @@
+Expose legacy role download count in the UI

From ca3576662e66b6c2f8d7d8eebc7c68766f6ec94b Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 21 Jun 2023 01:43:42 +0000
Subject: [PATCH 2/6] DownloadCount - show number of downloads, use for legacy
 roles

---
 src/api/response-types/legacy-role.ts         |  2 ++
 src/components/index.ts                       |  1 +
 .../legacy-role-list/legacy-role-item.tsx     |  5 +++-
 src/components/shared/download-count.tsx      | 24 +++++++++++++++++++
 src/containers/legacy-roles/legacy-role.tsx   |  4 ++++
 src/l10n.ts                                   |  2 +-
 6 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/shared/download-count.tsx

diff --git a/src/api/response-types/legacy-role.ts b/src/api/response-types/legacy-role.ts
index e4289826dc..40ad6af321 100644
--- a/src/api/response-types/legacy-role.ts
+++ b/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: {
diff --git a/src/components/index.ts b/src/components/index.ts
index 4a197b2b42..2726f724a6 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -112,6 +112,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 {
diff --git a/src/components/legacy-role-list/legacy-role-item.tsx b/src/components/legacy-role-list/legacy-role-item.tsx
index c88b841259..cdea6173cd 100644
--- a/src/components/legacy-role-list/legacy-role-item.tsx
+++ b/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';
-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>,
     );
 
diff --git a/src/components/shared/download-count.tsx b/src/components/shared/download-count.tsx
new file mode 100644
index 0000000000..f33d44d1f0
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/src/containers/legacy-roles/legacy-role.tsx b/src/containers/legacy-roles/legacy-role.tsx
index ee91ea6699..54c3c64a08 100644
--- a/src/containers/legacy-roles/legacy-role.tsx
+++ b/src/containers/legacy-roles/legacy-role.tsx
@@ -27,6 +27,7 @@ import {
   Breadcrumbs,
   ClipboardCopy,
   DateComponent,
+  DownloadCount,
   LoadingPageWithHeader,
   Logo,
   Main,
@@ -317,6 +318,9 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
               Github Repository <ExternalLinkAltIcon />
             </a>
           </div>
+          <div className='hub-entry'>
+            <DownloadCount item={role} />
+          </div>
         </DataListCell>,
       );
     }
diff --git a/src/l10n.ts b/src/l10n.ts
index fe8dd159f1..86542b32b6 100644
--- a/src/l10n.ts
+++ b/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) {

From 0f1aa2bf92c7a50d46396d6a14f484fed1dfe39f Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 21 Jun 2023 01:59:38 +0000
Subject: [PATCH 3/6] 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                         |  6 +++
 src/api/response-types/collection.ts          |  2 +
 src/components/headers/collection-header.tsx  | 48 ++++++++++-------
 src/components/shared/download-count.tsx      | 15 ++++--
 src/containers/collection-detail/base.ts      | 44 ++++++++++++----
 .../collection-detail/collection-content.tsx  | 40 +++++++++++----
 .../collection-dependencies.tsx               | 39 +++++++++-----
 .../collection-detail/collection-detail.tsx   | 32 ++++++++----
 .../collection-distributions.tsx              | 30 +++++++----
 .../collection-detail/collection-docs.tsx     | 51 +++++++++++--------
 .../collection-import-log.tsx                 | 41 ++++++++++-----
 11 files changed, 239 insertions(+), 109 deletions(-)

diff --git a/src/api/collection.ts b/src/api/collection.ts
index bed01436b0..425807a622 100644
--- a/src/api/collection.ts
+++ b/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();
diff --git a/src/api/response-types/collection.ts b/src/api/response-types/collection.ts
index df70785052..3dbe5096d7 100644
--- a/src/api/response-types/collection.ts
+++ b/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 {
diff --git a/src/components/headers/collection-header.tsx b/src/components/headers/collection-header.tsx
index e183b4ce73..f14bd289b0 100644
--- a/src/components/headers/collection-header.tsx
+++ b/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>
           }
         >
diff --git a/src/components/shared/download-count.tsx b/src/components/shared/download-count.tsx
index f33d44d1f0..1b1f537415 100644
--- a/src/components/shared/download-count.tsx
+++ b/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>
   );
 };
diff --git a/src/containers/collection-detail/base.ts b/src/containers/collection-detail/base.ts
index 412d1d5b35..a5a8dd243f 100644
--- a/src/containers/collection-detail/base.ts
+++ b/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,7 +98,19 @@ 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,
@@ -102,17 +118,25 @@ export function loadCollection({
       },
       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;
     },
   );
diff --git a/src/containers/collection-detail/collection-content.tsx b/src/containers/collection-detail/collection-content.tsx
index 93dcda6194..45830f69b4 100644
--- a/src/containers/collection-detail/collection-content.tsx
+++ b/src/containers/collection-detail/collection-content.tsx
@@ -22,11 +22,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,
     };
   }
 
@@ -35,8 +36,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 />;
@@ -66,17 +73,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'>
@@ -97,8 +105,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,
     });
   }
diff --git a/src/containers/collection-detail/collection-dependencies.tsx b/src/containers/collection-detail/collection-dependencies.tsx
index 83f0cdcff6..0c851d003e 100644
--- a/src/containers/collection-detail/collection-dependencies.tsx
+++ b/src/containers/collection-detail/collection-dependencies.tsx
@@ -52,16 +52,17 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
     params['sort'] = !params['sort'] ? '-collection' : 'collection';
 
     this.state = {
+      actuallyCollection: null,
+      alerts: [],
+      collection: null,
       collections: [],
       collectionsCount: 0,
-      collection: null,
       content: null,
       dependencies_repos: [],
-      params: params,
+      params,
       usedByDependencies: [],
       usedByDependenciesCount: 0,
       usedByDependenciesLoading: true,
-      alerts: [],
     };
   }
 
@@ -71,15 +72,16 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
 
   render() {
     const {
+      actuallyCollection,
+      alerts,
+      collection,
       collections,
       collectionsCount,
-      collection,
       content,
       params,
       usedByDependencies,
       usedByDependenciesCount,
       usedByDependenciesLoading,
-      alerts,
     } = this.state;
 
     if (collections.length <= 0) {
@@ -117,20 +119,21 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
       <React.Fragment>
         <AlertList alerts={alerts} closeAlert={(i) => this.closeAlert(i)} />
         <CollectionHeader
-          reload={() => this.loadData(true)}
+          activeTab='dependencies'
+          actuallyCollection={actuallyCollection}
+          breadcrumbs={breadcrumbs}
+          collection={collection}
           collections={collections}
           collectionsCount={collectionsCount}
-          collection={collection}
           content={content}
           params={headerParams}
+          reload={() => this.loadData(true)}
+          repo={repository.name}
           updateParams={(p) => {
             this.updateParams(this.combineParams(this.state.params, p), () =>
               this.loadData(true),
             );
           }}
-          breadcrumbs={breadcrumbs}
-          activeTab='dependencies'
-          repo={repository.name}
         />
         <Main>
           <section className='body'>
@@ -291,9 +294,21 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
       forceReload,
       matchParams: this.props.routeParams,
       navigate: this.props.navigate,
-      setCollection: (collections, collection, content, collectionsCount) =>
+      setCollection: (
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      ) =>
         this.setState(
-          { collections, collection, content, collectionsCount },
+          {
+            collections,
+            collection,
+            content,
+            collectionsCount,
+            actuallyCollection,
+          },
           callback,
         ),
       stateParams: this.state.params.version
diff --git a/src/containers/collection-detail/collection-detail.tsx b/src/containers/collection-detail/collection-detail.tsx
index 294645c7b9..9247f8d765 100644
--- a/src/containers/collection-detail/collection-detail.tsx
+++ b/src/containers/collection-detail/collection-detail.tsx
@@ -24,13 +24,14 @@ class CollectionDetail extends React.Component<
     const params = ParamHelper.parseParamString(props.location.search);
 
     this.state = {
+      actuallyCollection: null,
+      alerts: [],
+      collection: null,
       collections: [],
       collectionsCount: 0,
-      collection: null,
       content: null,
       distroBasePath: null,
-      params: params,
-      alerts: [],
+      params,
     };
   }
 
@@ -46,12 +47,13 @@ class CollectionDetail extends React.Component<
 
   render() {
     const {
+      actuallyCollection,
+      alerts,
+      collection,
       collections,
       collectionsCount,
-      collection,
       content,
       params,
-      alerts,
     } = this.state;
 
     if (collections.length <= 0) {
@@ -77,18 +79,19 @@ class CollectionDetail extends React.Component<
       <React.Fragment>
         <AlertList alerts={alerts} closeAlert={(i) => this.closeAlert(i)} />
         <CollectionHeader
-          reload={() => this.loadCollections(true)}
+          activeTab='install'
+          actuallyCollection={actuallyCollection}
+          breadcrumbs={breadcrumbs}
+          collection={collection}
           collections={collections}
           collectionsCount={collectionsCount}
-          collection={collection}
           content={content}
           params={params}
+          reload={() => this.loadCollections(true)}
+          repo={this.props.routeParams.repo}
           updateParams={(p) =>
             this.updateParams(p, () => this.loadCollections(true))
           }
-          breadcrumbs={breadcrumbs}
-          activeTab='install'
-          repo={this.props.routeParams.repo}
         />
         <Main>
           <section className='body'>
@@ -121,12 +124,19 @@ class CollectionDetail extends React.Component<
       forceReload,
       matchParams: this.props.routeParams,
       navigate: this.props.navigate,
-      setCollection: (collections, collection, content, collectionsCount) =>
+      setCollection: (
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      ) =>
         this.setState({
           collections,
           collection,
           content,
           collectionsCount,
+          actuallyCollection,
         }),
       stateParams: this.state.params,
     });
diff --git a/src/containers/collection-detail/collection-distributions.tsx b/src/containers/collection-detail/collection-distributions.tsx
index bd7e1d19cb..8e8520c94a 100644
--- a/src/containers/collection-detail/collection-distributions.tsx
+++ b/src/containers/collection-detail/collection-distributions.tsx
@@ -29,16 +29,15 @@ import { loadCollection } from './base';
 const CollectionDistributions = (props: RouteProps) => {
   const routeParams = ParamHelper.parseParamString(props.location.search);
 
+  const [actuallyCollection, setActuallyCollection] = useState(null);
+  const [collection, setCollection] = useState(null);
   const [collections, setCollections] = useState([]);
   const [collectionsCount, setCollectionsCount] = useState(0);
-  const [collection, setCollection] = useState(null);
   const [content, setContent] = useState(null);
-  const [inputText, setInputText] = useState('');
-
-  const [distributions, setDistributions] = useState(null);
   const [count, setCount] = useState(0);
+  const [distributions, setDistributions] = useState(null);
+  const [inputText, setInputText] = useState('');
   const [loading, setLoading] = useState(true);
-
   const [params, setParams] = useState(
     Object.keys(routeParams).length
       ? routeParams
@@ -46,15 +45,23 @@ const CollectionDistributions = (props: RouteProps) => {
           sort: '-pulp_created',
         },
   );
+
   const loadCollections = (forceReload) => {
     loadCollection({
       forceReload,
       matchParams: props.routeParams,
       navigate: props.navigate,
-      setCollection: (collections, collection, content, collectionsCount) => {
+      setCollection: (
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      ) => {
+        setActuallyCollection(actuallyCollection);
+        setCollection(collection);
         setCollections(collections);
         setCollectionsCount(collectionsCount);
-        setCollection(collection);
         setContent(content);
 
         loadDistributions(collection.repository.pulp_href);
@@ -201,19 +208,20 @@ const CollectionDistributions = (props: RouteProps) => {
   return (
     <React.Fragment>
       <CollectionHeader
-        reload={() => loadCollections(true)}
+        activeTab='distributions'
+        actuallyCollection={actuallyCollection}
+        breadcrumbs={breadcrumbs}
+        collection={collection}
         collections={collections}
         collectionsCount={collectionsCount}
-        collection={collection}
         content={content}
         params={params}
+        reload={() => loadCollections(true)}
         updateParams={(params) => {
           updateParamsMixin(
             ParamHelper.setParam(params, 'version', params.version),
           );
         }}
-        breadcrumbs={breadcrumbs}
-        activeTab='distributions'
       />
       <Main>
         <section className='body'>
diff --git a/src/containers/collection-detail/collection-docs.tsx b/src/containers/collection-detail/collection-docs.tsx
index 6fb36e6dc0..549e0bc113 100644
--- a/src/containers/collection-detail/collection-docs.tsx
+++ b/src/containers/collection-detail/collection-docs.tsx
@@ -33,11 +33,12 @@ class CollectionDocs extends React.Component<RouteProps, IBaseCollectionState> {
     const params = ParamHelper.parseParamString(props.location.search);
 
     this.state = {
+      actuallyCollection: null,
+      collection: null,
       collections: [],
       collectionsCount: 0,
-      collection: null,
       content: null,
-      params: params,
+      params,
     };
     this.docsRef = React.createRef();
     this.searchBarRef = React.createRef();
@@ -48,8 +49,14 @@ class CollectionDocs extends React.Component<RouteProps, IBaseCollectionState> {
   }
 
   render() {
-    const { params, collection, collections, collectionsCount, content } =
-      this.state;
+    const {
+      actuallyCollection,
+      collection,
+      collections,
+      collectionsCount,
+      content,
+      params,
+    } = this.state;
     const urlFields = this.props.routeParams;
 
     if (!collection || !content) {
@@ -117,30 +124,22 @@ class CollectionDocs extends React.Component<RouteProps, IBaseCollectionState> {
       { name: t`Documentation` },
     ];
 
-    // scroll to top of page
-
-    // if (
-    //   this.docsRef.current &&
-    //   this.searchBarRef.current !== window.document.activeElement
-    // ) {
-    //   this.docsRef.current.scrollIntoView();
-    // }
-
     return (
       <React.Fragment>
         <CollectionHeader
-          reload={() => this.loadCollection(true)}
+          activeTab='documentation'
+          actuallyCollection={actuallyCollection}
+          breadcrumbs={breadcrumbs}
+          className='header'
+          collection={collection}
           collections={collections}
           collectionsCount={collectionsCount}
-          collection={collection}
           content={content}
           params={params}
+          reload={() => this.loadCollection(true)}
           updateParams={(p) =>
             this.updateParams(p, () => this.loadCollection(true))
           }
-          breadcrumbs={breadcrumbs}
-          activeTab='documentation'
-          className='header'
         />
         <Main className='main'>
           <section className='docs-container'>
@@ -305,8 +304,20 @@ class CollectionDocs extends React.Component<RouteProps, IBaseCollectionState> {
       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,
     });
   }
diff --git a/src/containers/collection-detail/collection-import-log.tsx b/src/containers/collection-detail/collection-import-log.tsx
index 40b5914e5a..6d64ac41f7 100644
--- a/src/containers/collection-detail/collection-import-log.tsx
+++ b/src/containers/collection-detail/collection-import-log.tsx
@@ -26,15 +26,16 @@ class CollectionImportLog extends React.Component<RouteProps, IState> {
     const params = ParamHelper.parseParamString(props.location.search);
 
     this.state = {
+      actuallyCollection: null,
+      apiError: undefined,
       collection: null,
       collections: [],
       collectionsCount: 0,
       content: null,
-      params: params,
       loadingImports: true,
-      selectedImportDetail: undefined,
+      params,
       selectedImport: undefined,
-      apiError: undefined,
+      selectedImportDetail: undefined,
     };
   }
 
@@ -44,15 +45,16 @@ class CollectionImportLog extends React.Component<RouteProps, IState> {
 
   render() {
     const {
+      actuallyCollection,
+      apiError,
       collection,
       collections,
       collectionsCount,
-      params,
+      content,
       loadingImports,
-      selectedImportDetail,
+      params,
       selectedImport,
-      apiError,
-      content,
+      selectedImportDetail,
     } = this.state;
 
     if (!collection) {
@@ -83,17 +85,18 @@ class CollectionImportLog extends React.Component<RouteProps, IState> {
     return (
       <React.Fragment>
         <CollectionHeader
-          reload={() => this.loadData(true)}
+          activeTab='import-log'
+          actuallyCollection={actuallyCollection}
+          breadcrumbs={breadcrumbs}
+          collection={collection}
           collections={collections}
           collectionsCount={collectionsCount}
-          collection={collection}
           content={content}
           params={params}
+          reload={() => this.loadData(true)}
           updateParams={(params) =>
             this.updateParams(params, () => this.loadData(true))
           }
-          breadcrumbs={breadcrumbs}
-          activeTab='import-log'
         />
         <Main>
           <section className='body'>
@@ -156,9 +159,21 @@ class CollectionImportLog extends React.Component<RouteProps, IState> {
       forceReload,
       matchParams: this.props.routeParams,
       navigate: this.props.navigate,
-      setCollection: (collections, collection, content, collectionsCount) =>
+      setCollection: (
+        collections,
+        collection,
+        content,
+        collectionsCount,
+        actuallyCollection,
+      ) =>
         this.setState(
-          { collections, collection, content, collectionsCount },
+          {
+            collections,
+            collection,
+            content,
+            collectionsCount,
+            actuallyCollection,
+          },
           callback,
         ),
       stateParams: this.state.params,

From 22c20059170c279dd7e9098dc13dbc97e6008105 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 2 Aug 2023 23:00:14 +0000
Subject: [PATCH 4/6] fix title .. show be on the top even if the line gets
 larger

---
 src/components/headers/header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/headers/header.scss b/src/components/headers/header.scss
index 49d10f9972..2d058c464b 100644
--- a/src/components/headers/header.scss
+++ b/src/components/headers/header.scss
@@ -6,7 +6,7 @@ $breakpoint-md: 1000px;
 
 .title-box {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .column-section {

From ea62bd3a2ae8f713b5cbe842d40732c28591cdc8 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Sun, 6 Aug 2023 22:17:43 +0000
Subject: [PATCH 5/6] repositoryBasePath for querying collection api

---
 src/containers/collection-detail/base.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/containers/collection-detail/base.ts b/src/containers/collection-detail/base.ts
index a5a8dd243f..e928c86fc7 100644
--- a/src/containers/collection-detail/base.ts
+++ b/src/containers/collection-detail/base.ts
@@ -7,6 +7,7 @@ import {
 } from 'src/api';
 import { AlertType } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
+import { repositoryBasePath } from 'src/utilities';
 
 export interface IBaseCollectionState {
   actuallyCollection?: CollectionDetailType;
@@ -98,12 +99,9 @@ export function loadCollection({
     .then(({ data }) => data)
     .catch(() => ({ data: [], meta: { count: 0 } }));
 
-  // FIXME: repo -> base_path
-  const actuallyCollection = CollectionAPI.getDetail(
-    repo,
-    namespace,
-    name,
-  ).then(({ data }) => data);
+  const actuallyCollection = repositoryBasePath(repo)
+    .then((basePath) => CollectionAPI.getDetail(basePath, namespace, name))
+    .then(({ data }) => data);
 
   return Promise.all([
     versions,

From 0c3f887553188729319e5fadb860b9619912d536 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Fri, 11 Aug 2023 19:06:03 +0000
Subject: [PATCH 6/6] move collection count to right side of version header

---
 src/components/headers/base-header.tsx       |   6 +-
 src/components/headers/collection-header.tsx | 165 +++++++++----------
 src/components/headers/header.scss           |   6 +-
 3 files changed, 84 insertions(+), 93 deletions(-)

diff --git a/src/components/headers/base-header.tsx b/src/components/headers/base-header.tsx
index 103ca5752f..6386e553ac 100644
--- a/src/components/headers/base-header.tsx
+++ b/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>
diff --git a/src/components/headers/collection-header.tsx b/src/components/headers/collection-header.tsx
index f14bd289b0..733a8ae357 100644
--- a/src/components/headers/collection-header.tsx
+++ b/src/components/headers/collection-header.tsx
@@ -483,94 +483,91 @@ 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>
+              <div style={{ alignSelf: 'center' }}>
+                <DownloadCount item={actuallyCollection} />
               </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={
-            <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>
+              {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>
           }
         >
diff --git a/src/components/headers/header.scss b/src/components/headers/header.scss
index 2d058c464b..06007cb791 100644
--- a/src/components/headers/header.scss
+++ b/src/components/headers/header.scss
@@ -6,16 +6,12 @@ $breakpoint-md: 1000px;
 
 .title-box {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .column-section {
   display: flex;
   justify-content: space-between;
-
-  .header-right {
-    align-items: right;
-  }
 }
 
 .install-version-column {