[stable-4.7] Repository URL - always use distro base_path, show in detail screen (#3737)

src/actions/ansible-repository-copy.tsx

@@ -1,25 +1,60 @@
 import { t } from '@lingui/macro';
 import React from 'react';
-import { getRepoUrl } from 'src/utilities';
+import { AnsibleDistributionAPI } from 'src/api';
+import { getRepoURL } from 'src/utilities';
 import { Action } from './action';
 
 export const ansibleRepositoryCopyAction = Action({
   title: t`Copy CLI configuration`,
-  onClick: (item, { addAlert }) => {
+  onClick: async (item, { addAlert }) => {
+    let distribution = null;
+    if (!item.distributions) {
+      addAlert({
+        id: 'copy-cli-config',
+        title: t`Loading distribution...`,
+        variant: 'info',
+      });
+
+      distribution = (
+        await AnsibleDistributionAPI.list({
+          repository: item.pulp_href,
+        })
+      )?.data?.results?.[0];
+    } else {
+      distribution = item.distributions?.[0];
+    }
+
+    if (!distribution) {
+      addAlert({
+        id: 'copy-cli-config',
+        title: t`There are no distributions associated with this repository.`,
+        variant: 'danger',
+      });
+      return;
+    }
+
     const cliConfig = [
       '[galaxy]',
-      `server_list = ${item.name}_repo`,
+      `server_list = ${distribution.base_path}`,
       '',
-      `[galaxy_server.${item.name}_repo]`,
-      `url=${getRepoUrl()}`,
+      `[galaxy_server.${distribution.base_path}]`,
+      `url=${getRepoURL(distribution.base_path)}`,
       'token=<put your token here>',
     ].join('\n');
 
     navigator.clipboard.writeText(cliConfig);
     addAlert({
+      description: <pre>{cliConfig}</pre>,
+      id: 'copy-cli-config',
       title: t`Successfully copied to clipboard`,
       variant: 'success',
-      description: <pre>{cliConfig}</pre>,
     });
   },
+  disabled: ({ distributions }) => {
+    if (distributions && !distributions.length) {
+      return t`There are no distributions associated with this repository.`;
+    }
+
+    return null;
+  },
 });

src/components/index.ts

@@ -54,7 +54,10 @@ export {
 export { PageWithTabs } from './page/page-with-tabs';
 export { Page } from './page/page';
 export { PulpLabels } from './repositories/pulp-labels';
-export { LazyDistributions } from './repositories/lazy-distributions';
+export {
+  NonLazyDistributions,
+  LazyDistributions,
+} from './repositories/lazy-distributions';
 export { LazyRepositories } from './repositories/lazy-repositories';
 export { LinkTabs } from './patternfly-wrappers/link-tabs';
 export { LoadingPageSpinner } from './loading/loading-page-spinner';

src/components/page/list-page.tsx

@@ -358,8 +358,13 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
     }
 
     private addAlert(alert: AlertType) {
+      let alerts = this.state.alerts;
+      if (alert.id) {
+        alerts = alerts.filter(({ id }) => id !== alert.id);
+      }
+
       this.setState({
-        alerts: [...this.state.alerts, alert],
+        alerts: [...alerts, alert],
       });
     }
 

src/components/page/page-with-tabs.tsx

@@ -283,8 +283,13 @@ export const PageWithTabs = function <
     }
 
     private addAlert(alert: AlertType) {
+      let alerts = this.state.alerts;
+      if (alert.id) {
+        alerts = alerts.filter(({ id }) => id !== alert.id);
+      }
+
       this.setState({
-        alerts: [...this.state.alerts, alert],
+        alerts: [...alerts, alert],
       });
     }
 

src/components/page/page.tsx

@@ -230,8 +230,13 @@ export const Page = function <
     }
 
     private addAlert(alert: AlertType) {
+      let alerts = this.state.alerts;
+      if (alert.id) {
+        alerts = alerts.filter(({ id }) => id !== alert.id);
+      }
+
       this.setState({
-        alerts: [...this.state.alerts, alert],
+        alerts: [...alerts, alert],
       });
     }
 

src/components/repositories/lazy-distributions.tsx

@@ -5,6 +5,19 @@ import React, { useEffect, useState } from 'react';
 import { AnsibleDistributionAPI } from 'src/api';
 import { errorMessage } from 'src/utilities';
 
+export const NonLazyDistributions = ({
+  distributions,
+  emptyText,
+}: {
+  distributions: { name: string }[];
+  emptyText?: string;
+}) => (
+  <>
+    {distributions?.map?.(({ name }) => name)?.join?.(', ') ||
+      (emptyText ?? '---')}
+  </>
+);
+
 export const LazyDistributions = ({
   emptyText,
   onLoad,
@@ -60,9 +73,6 @@ export const LazyDistributions = ({
   ) : error ? (
     errorElement
   ) : (
-    <>
-      {distributions?.map?.(({ name }) => name)?.join?.(', ') ||
-        (emptyText ?? '---')}
-    </>
+    <NonLazyDistributions distributions={distributions} emptyText={emptyText} />
   );
 };

src/containers/ansible-repository/detail.tsx

@@ -6,7 +6,11 @@ import {
   ansibleRepositoryEditAction,
   ansibleRepositorySyncAction,
 } from 'src/actions';
-import { AnsibleRepositoryAPI, AnsibleRepositoryType } from 'src/api';
+import {
+  AnsibleDistributionAPI,
+  AnsibleRepositoryAPI,
+  AnsibleRepositoryType,
+} from 'src/api';
 import { PageWithTabs } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { canViewAnsibleRepositories } from 'src/permissions';
@@ -74,15 +78,27 @@ const AnsibleRepositoryDetail = PageWithTabs<AnsibleRepositoryType>({
           return Promise.reject({ response: { status: 404 } });
         }
 
-        return AnsibleRepositoryAPI.myPermissions(
-          parsePulpIDFromURL(repository.pulp_href),
-        )
-          .then(({ data: { permissions } }) => permissions)
-          .catch((e) => {
-            console.error(e);
-            return [];
+        const err = (e) => {
+          console.error(e);
+          return [];
+        };
+
+        return Promise.all([
+          AnsibleDistributionAPI.list({
+            repository: repository.pulp_href,
           })
-          .then((my_permissions) => ({ ...repository, my_permissions }));
+            .then(({ data: { results } }) => results)
+            .catch(err),
+          AnsibleRepositoryAPI.myPermissions(
+            parsePulpIDFromURL(repository.pulp_href),
+          )
+            .then(({ data: { permissions } }) => permissions)
+            .catch(err),
+        ]).then(([distributions, my_permissions]) => ({
+          ...repository,
+          distributions,
+          my_permissions,
+        }));
       });
   },
   renderTab: (tab, item, actionContext) =>

src/containers/ansible-repository/tab-details.tsx

@@ -6,12 +6,19 @@ import {
   AnsibleRemoteType,
   AnsibleRepositoryType,
 } from 'src/api';
-import { Details, LazyDistributions, PulpLabels } from 'src/components';
+import {
+  CopyURL,
+  Details,
+  NonLazyDistributions,
+  PulpLabels,
+} from 'src/components';
 import { Paths, formatPath } from 'src/paths';
-import { parsePulpIDFromURL } from 'src/utilities';
+import { getRepoURL, parsePulpIDFromURL } from 'src/utilities';
 
 interface TabProps {
-  item: AnsibleRepositoryType;
+  item: AnsibleRepositoryType & {
+    distributions: { name: string; base_path: string }[];
+  };
   actionContext: { addAlert: (alert) => void; state: { params } };
 }
 
@@ -38,7 +45,15 @@ export const DetailsTab = ({ item }: TabProps) => {
         },
         {
           label: t`Distribution`,
-          value: <LazyDistributions repositoryHref={item.pulp_href} />,
+          value: <NonLazyDistributions distributions={item.distributions} />,
+        },
+        {
+          label: t`Repository URL`,
+          value: item.distributions?.length ? (
+            <CopyURL url={getRepoURL(item.distributions[0].base_path)} />
+          ) : (
+            '---'
+          ),
         },
         {
           label: t`Labels`,

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

@@ -21,7 +21,7 @@ import {
   ParamHelper,
   RouteProps,
   filterIsSet,
-  getRepoUrl,
+  getRepoURL,
   withRouter,
 } from 'src/utilities';
 import { loadCollection } from './base';
@@ -114,7 +114,7 @@ const CollectionDistributions = (props: RouteProps) => {
       `server_list = ${distribution.base_path}`,
       '',
       `[galaxy_server.${distribution.base_path}]`,
-      `url=${getRepoUrl()}`,
+      `url=${getRepoURL(distribution.base_path)}`,
       'token=<put your token here>',
     ].join('\n');
 

src/containers/namespace-detail/namespace-detail.tsx

@@ -52,7 +52,7 @@ import {
   canSignNamespace,
   errorMessage,
   filterIsSet,
-  getRepoUrl,
+  getRepoURL,
   waitForTask,
 } from 'src/utilities';
 import { parsePulpIDFromURL } from 'src/utilities/parse-pulp-id';
@@ -272,7 +272,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
         : null,
     ].filter(Boolean);
 
-    const repositoryUrl = getRepoUrl();
+    const repositoryUrl = getRepoURL('published');
 
     const noData =
       itemCount === 0 &&

src/utilities/get-repo-url.ts

@@ -1,10 +1,15 @@
 // Returns the API path for a specific repository
-export function getRepoUrl() {
+export function getRepoURL(distribution_base_path) {
   // If the api is hosted on another URL, use API_HOST as the host part of the URL.
   // Otherwise use the host that the UI is served from
   const host = API_HOST ? API_HOST : window.location.origin;
 
-  return `${host}${API_BASE_PATH}`;
+  // repo/distro "published" is special; not related to repo pipeline type
+  if (distribution_base_path === 'published') {
+    return `${host}${API_BASE_PATH}`;
+  }
+
+  return `${host}${API_BASE_PATH}content/${distribution_base_path}/`;
 }
 
 // returns the server name for (protocol-less) container urls

src/utilities/index.ts

@@ -10,7 +10,7 @@ export {
   isFormValid,
   mapErrorMessages,
 } from './map-error-messages';
-export { getContainersURL, getRepoUrl } from './get-repo-url';
+export { getContainersURL, getRepoURL } from './get-repo-url';
 export {
   clearSetFieldsFromRequest,
   isFieldSet,