SONAR-19347 Add synchronize now button for Github

5 files changed, 47 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/js/api/provisioning.ts b/server/sonar-web/src/main/js/api/provisioning.ts
index 10220bb92c2..fbadc9dee85 100644
--- a/server/sonar-web/src/main/js/api/provisioning.ts
+++ b/server/sonar-web/src/main/js/api/provisioning.ts
@@ -46,3 +46,7 @@ export function activateGithubProvisioning(): Promise<void> {
 export function deactivateGithubProvisioning(): Promise<void> {
   return post('/api/github_provisioning/disable').catch(throwGlobalError);
 }
+
+export function syncNowGithubProvisioning(): Promise<void> {
+  return post('/api/github_provisioning/sync').catch(throwGlobalError);
+}
diff --git a/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx b/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
index e011d74d7bb..5d7cb2544c7 100644
--- a/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
+++ b/server/sonar-web/src/main/js/app/components/GitHubSynchronisationWarning.tsx
@@ -19,18 +19,15 @@
  */
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from '../../components/common/Link';
 import CheckIcon from '../../components/icons/CheckIcon';
 import { Alert } from '../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { useSyncStatusQuery } from '../../queries/github-sync';
-import { Feature } from '../../types/features';
 import { GithubStatusEnabled } from '../../types/provisioning';
 import { TaskStatuses } from '../../types/tasks';
 import './SystemAnnouncement.css';
-import { AvailableFeaturesContext } from './available-features/AvailableFeaturesContext';
 
 interface LastSyncProps {
   short?: boolean;
@@ -100,10 +97,7 @@ function LastSyncAlert({ info, short }: LastSyncProps) {
 }
 
 function GitHubSynchronisationWarning({ short }: GitHubSynchronisationWarningProps) {
-  const hasGithubProvisioning = useContext(AvailableFeaturesContext).includes(
-    Feature.GithubProvisioning
-  );
-  const { data } = useSyncStatusQuery({ enabled: hasGithubProvisioning });
+  const { data } = useSyncStatusQuery();
 
   if (!data) {
     return null;
@@ -113,7 +107,7 @@ function GitHubSynchronisationWarning({ short }: GitHubSynchronisationWarningPro
     <>
       {!short && data?.nextSync && (
         <>
-          <Alert variant="loading">
+          <Alert variant="loading" className="spacer-bottom">
             {translate(
               data.nextSync.status === TaskStatuses.Pending
                 ? 'settings.authentication.github.synchronization_pending'
diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/GithubAuthenticationTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/authentication/GithubAuthenticationTab.tsx
index 5df3bcdc37d..1f2348a1f62 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/authentication/GithubAuthenticationTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/GithubAuthenticationTab.tsx
@@ -30,6 +30,7 @@ import DeleteIcon from '../../../../components/icons/DeleteIcon';
 import EditIcon from '../../../../components/icons/EditIcon';
 import { Alert } from '../../../../components/ui/Alert';
 import { translate, translateWithParameters } from '../../../../helpers/l10n';
+import { useSyncNow } from '../../../../queries/github-sync';
 import { AlmKeys } from '../../../../types/alm-settings';
 import { ExtendedSettingDefinition } from '../../../../types/settings';
 import { DOCUMENTATION_LINK_SUFFIXES } from './Authentication';
@@ -78,6 +79,7 @@ export default function GithubAuthenticationTab(props: GithubAuthenticationProps
   } = useGithubConfiguration(definitions);
 
   const hasDifferentProvider = data?.provider !== undefined && data.provider !== Provider.Github;
+  const { canSyncNow, synchronizeNow } = useSyncNow();
 
   const handleCreateConfiguration = () => {
     setShowEditModal(true);
@@ -220,6 +222,15 @@ export default function GithubAuthenticationTab(props: GithubAuthenticationProps
                             />
                           </p>
                           {githubProvisioningStatus && <GitHubSynchronisationWarning />}
+                          <div className="sw-flex sw-flex-1 sw-items-end">
+                            <Button
+                              className="spacer-top width-30"
+                              onClick={synchronizeNow}
+                              disabled={!canSyncNow}
+                            >
+                              {translate('settings.authentication.github.synchronize_now')}
+                            </Button>
+                          </div>
                         </>
                       ) : (
                         <p>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/authentication/queries/IdentityProvider.ts b/server/sonar-web/src/main/js/apps/settings/components/authentication/queries/IdentityProvider.ts
index d5b5858339a..1396ec4dc1f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/authentication/queries/IdentityProvider.ts
+++ b/server/sonar-web/src/main/js/apps/settings/components/authentication/queries/IdentityProvider.ts
@@ -52,11 +52,7 @@ export function useScimStatusQuery() {
 }
 
 export function useGithubStatusQuery() {
-  const hasGithubProvisioning = useContext(AvailableFeaturesContext).includes(
-    Feature.GithubProvisioning
-  );
-
-  const res = useSyncStatusQuery({ enabled: hasGithubProvisioning });
+  const res = useSyncStatusQuery();
 
   return { ...res, data: res.data?.enabled };
 }
diff --git a/server/sonar-web/src/main/js/queries/github-sync.ts b/server/sonar-web/src/main/js/queries/github-sync.ts
index d2be1351260..67f7e3c8edf 100644
--- a/server/sonar-web/src/main/js/queries/github-sync.ts
+++ b/server/sonar-web/src/main/js/queries/github-sync.ts
@@ -17,9 +17,33 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { useQuery } from '@tanstack/react-query';
-import { fetchGithubProvisioningStatus } from '../api/provisioning';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useContext } from 'react';
+import { fetchGithubProvisioningStatus, syncNowGithubProvisioning } from '../api/provisioning';
+import { AvailableFeaturesContext } from '../app/components/available-features/AvailableFeaturesContext';
+import { Feature } from '../types/features';
 
-export const useSyncStatusQuery = ({ enabled }: { enabled?: boolean }) => {
-  return useQuery(['github_sync', 'status'], fetchGithubProvisioningStatus, { enabled });
-};
+export function useSyncStatusQuery() {
+  const hasGithubProvisioning = useContext(AvailableFeaturesContext).includes(
+    Feature.GithubProvisioning
+  );
+  return useQuery(['github_sync', 'status'], fetchGithubProvisioningStatus, {
+    enabled: hasGithubProvisioning,
+    refetchInterval: 10_000,
+  });
+}
+
+export function useSyncNow() {
+  const queryClient = useQueryClient();
+  const { data } = useSyncStatusQuery();
+  const mutation = useMutation(syncNowGithubProvisioning, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['github_sync']);
+    },
+  });
+
+  return {
+    synchronizeNow: mutation.mutate,
+    canSyncNow: data && data.enabled && !data.nextSync && !mutation.isLoading,
+  };
+}