Show correct progress bar count

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

@@ -10,14 +10,17 @@ import LabeledProgressBar from '~/components/Admin/Common/LabeledProgressBar';
 import { SocketEventName } from '~/interfaces/websocket';
 import { useAdminSocket } from '~/stores/socket-io';
 
+import { useSWRxExternalUserGroupList } from '../../stores/external-user-group';
+
 import { LdapGroupSyncSettingsForm } from './LdapGroupSyncSettingsForm';
 
 export const LdapGroupManagement: FC = () => {
   const [isUserBind, setIsUserBind] = useState(false);
   const { t } = useTranslation('admin');
   const { data: socket } = useAdminSocket();
+  const { mutate: mutateExternalUserGroups } = useSWRxExternalUserGroupList();
 
-  const [isSyncExecuting, setIsSyncExecuting] = useState(false);
+  const [syncStatus, setSyncStatus] = useState<'beforeSync' | 'syncExecuting' | 'syncFinished'>('beforeSync');
   const [progress, setProgress] = useState({
     total: 0,
     current: 0,
@@ -40,7 +43,7 @@ export const LdapGroupManagement: FC = () => {
   useEffect(() => {
     if (socket != null) {
       socket.on(SocketEventName.GroupSyncProgress, (data) => {
-        setIsSyncExecuting(true);
+        setSyncStatus('syncExecuting');
         setProgress({
           total: data.totalCount,
           current: data.count,
@@ -48,15 +51,15 @@ export const LdapGroupManagement: FC = () => {
       });
 
       socket.on(SocketEventName.FinishGroupSync, () => {
-        setIsSyncExecuting(false);
+        setSyncStatus('syncFinished');
       });
     }
   }, [socket]);
 
   const onSyncBtnClick = useCallback(async(e) => {
     e.preventDefault();
-    setIsSyncExecuting(true);
     setProgress({ total: 0, current: 0 });
+    setSyncStatus('syncExecuting');
     try {
       if (isUserBind) {
         const password = e.target.password.value;
@@ -66,15 +69,17 @@ export const LdapGroupManagement: FC = () => {
         await apiv3Put('/external-user-groups/ldap/sync');
       }
       toastSuccess(t('external_user_group.ldap.sync_succeeded'));
+      mutateExternalUserGroups();
     }
     catch (errs) {
       toastError(t(errs[0]?.message));
     }
-  }, [t, isUserBind]);
+  }, [t, isUserBind, mutateExternalUserGroups]);
 
   const renderProgressBar = () => {
-    if (!isSyncExecuting) return null;
-    const header = 'Processing..';
+    if (syncStatus === 'beforeSync') return null;
+
+    const header = syncStatus === 'syncExecuting' ? 'Processing..' : 'Completed';
 
     return (
       <LabeledProgressBar

apps/app/src/features/external-user-group/server/service/external-user-group-sync.ts

@@ -30,6 +30,7 @@ abstract class ExternalUserGroupSyncService<SyncParamsType = any> {
 
   isExecutingSync = false;
 
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   constructor(groupProviderType: ExternalGroupProviderType, authProviderType: string, socketIoService) {
     this.groupProviderType = groupProviderType;
     this.authProviderType = authProviderType;
@@ -66,10 +67,10 @@ abstract class ExternalUserGroupSyncService<SyncParamsType = any> {
         .reduce((sum, current) => sum + current);
       let count = 0;
 
-      await batchProcessPromiseAll(trees, TREES_BATCH_SIZE, (root) => {
-        count += 1;
+      await batchProcessPromiseAll(trees, TREES_BATCH_SIZE, async(tree) => {
+        await syncNode(tree);
+        count += this.getGroupCountOfTree(tree);
         socket.emit(SocketEventName.GroupSyncProgress, { totalCount, count });
-        return syncNode(root);
       });
 
       if (!preserveDeletedLdapGroups) {

apps/app/src/features/external-user-group/server/service/ldap-user-group-sync.ts

@@ -157,6 +157,7 @@ class LdapUserGroupSyncService extends ExternalUserGroupSyncService<SyncParamsTy
 
 // eslint-disable-next-line import/no-mutable-exports
 export let ldapUserGroupSyncService: LdapUserGroupSyncService | undefined; // singleton instance
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function instanciate(passportService: PassportService, socketIoService): void {
   ldapUserGroupSyncService = new LdapUserGroupSyncService(passportService, socketIoService);
 }