community Sync - disable without a requirements file .. on the detail…

… screen (#4385)

make it possible to disable the Sync action based on the repository's remote
..only on the detail screen

Issue: AAH-2360
(cherry picked from commit 53130f2)

CHANGES/2360.bug

@@ -0,0 +1 @@
+community Sync - disable without a requirements file .. on the detail screen

src/actions/action.tsx

@@ -1,31 +1,25 @@
 import { MessageDescriptor, i18n } from '@lingui/core';
 import { Button, DropdownItem } from '@patternfly/react-core';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Tooltip } from 'src/components';
 import { type PermissionContextType } from 'src/permissions';
 
-type ModalType = ({
-  addAlert,
-  listQuery,
-  query,
-  setState,
-  state,
-}) => React.ReactNode;
+type ModalType = ({ addAlert, listQuery, query, setState, state }) => ReactNode;
 
 interface ActionParams {
   buttonVariant?: 'primary' | 'secondary';
   condition?: PermissionContextType;
-  disabled?: (item, actionContext) => string | null;
+  disabled?: (item, actionContext) => string | ReactNode | null;
   modal?: ModalType;
   onClick: (item, actionContext) => void;
   title: MessageDescriptor;
   visible?: (item, actionContext) => boolean;
 }
 
 export class ActionType {
-  button: (item, actionContext) => React.ReactNode | null;
-  disabled: (item, actionContext) => string | null;
-  dropdownItem: (item, actionContext) => React.ReactNode | null;
+  button: (item, actionContext) => ReactNode | null;
+  disabled: (item, actionContext) => string | ReactNode | null;
+  dropdownItem: (item, actionContext) => ReactNode | null;
   modal?: ModalType;
   title: string;
   visible: (item, actionContext) => boolean;

src/actions/ansible-repository-sync.tsx

@@ -1,4 +1,4 @@
-import { msg, t } from '@lingui/macro';
+import { Trans, msg, t } from '@lingui/macro';
 import {
   Button,
   FormGroup,
@@ -7,8 +7,10 @@ import {
   Switch,
 } from '@patternfly/react-core';
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { AnsibleRepositoryAPI } from 'src/api';
 import { HelperText } from 'src/components';
+import { Paths, formatPath } from 'src/paths';
 import { canSyncAnsibleRepository } from 'src/permissions';
 import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
 import { Action } from './action';
@@ -132,6 +134,23 @@ export const ansibleRepositorySyncAction = Action({
       return t`Sync task is already queued.`;
     }
 
+    // only available on detail screen; list will have remote: string, so no .url
+    if (
+      remote &&
+      remote.url === 'https://galaxy.ansible.com/api/' &&
+      !remote.requirements_file
+    ) {
+      const name = remote.name;
+      const url = formatPath(Paths.ansibleRemoteEdit, { name });
+
+      return (
+        <Trans>
+          YAML requirements are required to sync from Galaxy - you can{' '}
+          <Link to={url}>edit the {name} remote</Link> to add requirements.
+        </Trans>
+      );
+    }
+
     return null;
   },
 });

src/components/patternfly-wrappers/tooltip.tsx

@@ -1,9 +1,9 @@
 import { Tooltip as PFTooltip } from '@patternfly/react-core';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 interface IProps {
-  children: React.ReactNode;
-  content: string;
+  children: ReactNode;
+  content: string | ReactNode;
 }
 
 export const Tooltip = ({ content, children }: IProps) => (

src/containers/ansible-repository/detail.tsx

@@ -6,7 +6,12 @@ import {
   ansibleRepositoryEditAction,
   ansibleRepositorySyncAction,
 } from 'src/actions';
-import { AnsibleRepositoryAPI, AnsibleRepositoryType } from 'src/api';
+import {
+  AnsibleRemoteAPI,
+  AnsibleRemoteType,
+  AnsibleRepositoryAPI,
+  AnsibleRepositoryType,
+} from 'src/api';
 import { PageWithTabs } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
 import { canViewAnsibleRepositories } from 'src/permissions';
@@ -24,7 +29,9 @@ const tabs = [
   { id: 'repository-versions', name: msg`Versions` },
 ];
 
-const AnsibleRepositoryDetail = PageWithTabs<AnsibleRepositoryType>({
+const AnsibleRepositoryDetail = PageWithTabs<
+  AnsibleRepositoryType & { remote?: AnsibleRemoteType }
+>({
   breadcrumbs: ({ name, tab, params: { repositoryVersion, group } }) =>
     [
       { url: formatPath(Paths.ansibleRepositories), name: t`Repositories` },
@@ -89,10 +96,16 @@ const AnsibleRepositoryDetail = PageWithTabs<AnsibleRepositoryType>({
           )
             .then(({ data: { permissions } }) => permissions)
             .catch(err([])),
-        ]).then(([distroBasePath, my_permissions]) => ({
+          repository.remote
+            ? AnsibleRemoteAPI.get(parsePulpIDFromURL(repository.remote))
+                .then(({ data }) => data)
+                .catch(() => null)
+            : null,
+        ]).then(([distroBasePath, my_permissions, remote]) => ({
           ...repository,
           distroBasePath,
           my_permissions,
+          remote,
         }));
       });
   },

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

@@ -1,37 +1,25 @@
 import { t } from '@lingui/macro';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
-import {
-  AnsibleRemoteAPI,
-  AnsibleRemoteType,
-  AnsibleRepositoryType,
-} from 'src/api';
+import { AnsibleRemoteType, AnsibleRepositoryType } from 'src/api';
 import {
   CopyURL,
   Details,
   LazyDistributions,
   PulpLabels,
 } from 'src/components';
 import { Paths, formatPath } from 'src/paths';
-import { getRepoURL, parsePulpIDFromURL } from 'src/utilities';
+import { getRepoURL } from 'src/utilities';
 
 interface TabProps {
-  item: AnsibleRepositoryType & { distroBasePath?: string };
+  item: AnsibleRepositoryType & {
+    distroBasePath?: string;
+    remote?: AnsibleRemoteType;
+  };
   actionContext: { addAlert: (alert) => void; state: { params } };
 }
 
 export const DetailsTab = ({ item }: TabProps) => {
-  const [remote, setRemote] = useState<AnsibleRemoteType>(null);
-
-  useEffect(() => {
-    const pk = item.remote && parsePulpIDFromURL(item.remote);
-    if (pk) {
-      AnsibleRemoteAPI.get(pk).then(({ data }) => setRemote(data));
-    } else {
-      setRemote(null);
-    }
-  }, [item.remote]);
-
   return (
     <Details
       fields={[
@@ -63,11 +51,13 @@ export const DetailsTab = ({ item }: TabProps) => {
         },
         {
           label: t`Remote`,
-          value: remote ? (
+          value: item?.remote ? (
             <Link
-              to={formatPath(Paths.ansibleRemoteDetail, { name: remote.name })}
+              to={formatPath(Paths.ansibleRemoteDetail, {
+                name: item?.remote.name,
+              })}
             >
-              {remote.name}
+              {item?.remote.name}
             </Link>
           ) : (
             t`None`