project: Add disable sync button feature.

Disable sync button if there is any pending, waiting or running job

awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx

@@ -208,7 +208,10 @@ function ProjectDetail({ project, i18n }) {
           </Button>
         )}
         {summary_fields.user_capabilities?.start && (
-          <ProjectSyncButton projectId={project.id} />
+          <ProjectSyncButton
+            projectId={project.id}
+            lastJobStatus={summary_fields.last_job.status}
+          />
         )}
         {summary_fields.user_capabilities?.delete && (
           <DeleteButton

awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useRouteMatch } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
 import { SyncIcon } from '@patternfly/react-icons';
 
 import { number } from 'prop-types';
@@ -12,7 +12,7 @@ import AlertModal from '../../../components/AlertModal';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { ProjectsAPI } from '../../../api';
 
-function ProjectSyncButton({ i18n, projectId }) {
+function ProjectSyncButton({ i18n, projectId, lastJobStatus = null }) {
   const match = useRouteMatch();
 
   const { request: handleSync, error: syncError } = useRequest(
@@ -24,16 +24,39 @@ function ProjectSyncButton({ i18n, projectId }) {
 
   const { error, dismissError } = useDismissableError(syncError);
   const isDetailsView = match.url.endsWith('/details');
+  const isDisabled = ['pending', 'waiting', 'running'].includes(lastJobStatus);
+
   return (
     <>
-      <Button
+      {isDisabled ? (
-        ouiaId={`${projectId}-sync-button`}
+        <Tooltip
-        aria-label={i18n._(t`Sync Project`)}
+          content={i18n._(
-        variant={isDetailsView ? 'secondary' : 'plain'}
+            t`This project is currently on sync and cannot be clicked until sync process completed`
-        onClick={handleSync}
+          )}
-      >
+          position="top"
-        {match.url.endsWith('/details') ? i18n._(t`Sync`) : <SyncIcon />}
+        >
-      </Button>
+          <div>
+            <Button
+              ouiaId={`${projectId}-sync-button`}
+              aria-label={i18n._(t`Sync Project`)}
+              variant={isDetailsView ? 'secondary' : 'plain'}
+              isDisabled={isDisabled}
+            >
+              {match.url.endsWith('/details') ? i18n._(t`Sync`) : <SyncIcon />}
+            </Button>
+          </div>
+        </Tooltip>
+      ) : (
+        <Button
+          ouiaId={`${projectId}-sync-button`}
+          aria-label={i18n._(t`Sync Project`)}
+          variant={isDetailsView ? 'secondary' : 'plain'}
+          isDisabled={isDisabled}
+          onClick={handleSync}
+        >
+          {match.url.endsWith('/details') ? i18n._(t`Sync`) : <SyncIcon />}
+        </Button>
+      )}
       {error && (
         <AlertModal
           isOpen={error}

awx/ui_next/src/screens/Project/useWsProject.js

@@ -34,7 +34,7 @@ export default function useWsProjects(initialProject) {
       // to `Pending`, then `Waiting`, then `Running`, then result
       // (which are `successful`, `failed`, `error`, `cancelled`.
       // For second sync, if the status response is `pending` and we have
-      // running and waiting jobs, we should not update our UI to `Pending`,
+      // running or waiting jobs, we should not update our UI to `Pending`,
       // otherwise our most recent sync tooltip UI will lose our current running
       // job and we cannot navigate to the job link through the link provided
       // by most recent sync tooltip.