show sync status as 'in progress' on page reload

apps/app/src/features/external-user-group/client/components/ExternalUserGroup/SyncExecution.tsx

@@ -5,6 +5,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
+import { apiv3Get } from '~/client/util/apiv3-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import LabeledProgressBar from '~/components/Admin/Common/LabeledProgressBar';
 import { ExternalGroupProviderType } from '~/features/external-user-group/interfaces/external-user-group';
@@ -43,6 +44,16 @@ export const SyncExecution = ({
   // value to propagate the submit event of form to submit confirm modal
   const [currentSubmitEvent, setCurrentSubmitEvent] = useState<React.FormEvent<HTMLFormElement>>();
 
+  useEffect(() => {
+    const getSyncStatus = async() => {
+      const res = await apiv3Get(`/external-user-groups/${provider}/sync-status`);
+      if (res.data.isExecutingSync) {
+        setSyncStatus(SyncStatus.syncExecuting);
+      }
+    };
+    getSyncStatus();
+  }, [provider]);
+
   useEffect(() => {
     if (socket == null) return;
 

apps/app/src/features/external-user-group/server/routes/apiv3/external-user-group.ts

@@ -378,6 +378,16 @@ module.exports = (crowi: Crowi): Router => {
     return res.apiv3({}, 202);
   });
 
+  router.get('/ldap/sync-status', loginRequiredStrictly, adminRequired, (req: AuthorizedRequest, res: ApiV3Response) => {
+    const isExecutingSync = crowi.ldapUserGroupSyncService?.isExecutingSync || false;
+    return res.apiv3({ isExecutingSync });
+  });
+
+  router.get('/keycloak/sync-status', loginRequiredStrictly, adminRequired, (req: AuthorizedRequest, res: ApiV3Response) => {
+    const isExecutingSync = crowi.keycloakUserGroupSyncService?.isExecutingSync || false;
+    return res.apiv3({ isExecutingSync });
+  });
+
   return router;
 
 };