From e6735b595c92f98ac7159d9ba828df04ab60182f Mon Sep 17 00:00:00 2001
From: seiwailai <laiseiwai@gmail.com>
Date: Sat, 24 Apr 2021 01:17:32 +0800
Subject: [PATCH] project: Add disable sync button feature.

Disable sync button if there is any pending, waiting or running job
---
 .../Project/ProjectDetail/ProjectDetail.jsx   |  5 ++-
 .../Project/shared/ProjectSyncButton.jsx      | 43 ++++++++++++++-----
 .../src/screens/Project/useWsProject.js       |  2 +-
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
index 0e82027ba7..6418d253e4 100644
--- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx
+++ b/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
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
index 2d316d5fa7..e8569620b6 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSyncButton.jsx
+++ b/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
-        ouiaId={`${projectId}-sync-button`}
-        aria-label={i18n._(t`Sync Project`)}
-        variant={isDetailsView ? 'secondary' : 'plain'}
-        onClick={handleSync}
-      >
-        {match.url.endsWith('/details') ? i18n._(t`Sync`) : <SyncIcon />}
-      </Button>
+      {isDisabled ? (
+        <Tooltip
+          content={i18n._(
+            t`This project is currently on sync and cannot be clicked until sync process completed`
+          )}
+          position="top"
+        >
+          <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}
diff --git a/awx/ui_next/src/screens/Project/useWsProject.js b/awx/ui_next/src/screens/Project/useWsProject.js
index 9352c2789f..74c03fd61b 100644
--- a/awx/ui_next/src/screens/Project/useWsProject.js
+++ b/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.