fix: importers progress bar (#30141)

Co-authored-by: Hugo Costa <20212776+hugocostadev@users.noreply.github.com>
RocketChat · Sep 8, 2023 · d6f0c6a · d6f0c6a
1 parent 839789c
commit d6f0c6a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/.changeset/importer-progress-bar.md b/.changeset/importer-progress-bar.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed Importer Progress Bar progress indicator
+
diff --git a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx
@@ -1,5 +1,5 @@
 import type { ProgressStep } from '@rocket.chat/core-typings';
-import { Box, Margins, Throbber } from '@rocket.chat/fuselage';
+import { Box, Margins, ProgressBar, Throbber } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useEndpoint, useTranslation, useStream, useRouter } from '@rocket.chat/ui-contexts';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -137,16 +137,14 @@ const ImportProgressPage = function ImportProgressPage() {
 	useEffect(() => {
 		return streamer('progress', (progress) => {
 			// There shouldn't be any progress update sending only the rate at this point of the process
-			if ('rate' in progress) {
-				return;
+			if (!('rate' in progress)) {
+				handleProgressUpdated({
+					key: progress.key,
+					step: progress.step,
+					completed: progress.count.completed,
+					total: progress.count.total,
+				});
 			}
-
-			handleProgressUpdated({
-				key: progress.key,
-				step: progress.step,
-				completed: progress.count.completed,
-				total: progress.count.total,
-			});
 		});
 	}, [handleProgressUpdated, streamer]);
 
@@ -167,11 +165,9 @@ const ImportProgressPage = function ImportProgressPage() {
 									{t((progress.data.step[0].toUpperCase() + progress.data.step.slice(1)) as any)}
 								</Box>
 								<Box display='flex' justifyContent='center'>
-									<Box is='progress' value={progress.data.completed} max={progress.data.total} marginInlineEnd={24} />
-									<Box is='span' fontScale='p2'>
-										{progress.data.completed}/{progress.data.total} (
-										{numberFormat((progress.data.completed / progress.data.total) * 100, 0)}
-										%)
+									<ProgressBar percentage={(progress.data.completed / progress.data.total) * 100} />
+									<Box is='span' fontScale='p2' mis={24}>
+										{numberFormat((progress.data.completed / progress.data.total) * 100, 0)}%
 									</Box>
 								</Box>
 							</>

diff --git a/apps/meteor/client/views/admin/import/PrepareImportPage.js b/apps/meteor/client/views/admin/import/PrepareImportPage.js
@@ -1,4 +1,4 @@
-import { Badge, Box, Button, ButtonGroup, Margins, Throbber, Tabs } from '@rocket.chat/fuselage';
+import { Badge, Box, Button, ButtonGroup, Margins, ProgressBar, Throbber, Tabs } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useSafely } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useTranslation, useStream, useRouter } from '@rocket.chat/ui-contexts';
 import React, { useEffect, useState, useMemo } from 'react';
@@ -204,8 +204,10 @@ function PrepareImportPage() {
 							<>
 								{progressRate ? (
 									<Box display='flex' justifyContent='center' fontScale='p2'>
-										<Box is='progress' value={(progressRate * 10).toFixed(0)} max='1000' marginInlineEnd='x24' />
-										<Box is='span'>{numberFormat(progressRate, 0)}%</Box>
+										<ProgressBar percentage={progressRate.toFixed(0)} />
+										<Box is='span' mis='x24'>
+											{numberFormat(progressRate, 0)}%
+										</Box>
 									</Box>
 								) : (
 									<Throbber justifyContent='center' />