Replace custom progress bar with ProgressBar in ClearTableConfirmatio…

…n (#34577) Replace custom progress bar with ProgressBar component in ClearTableConfirmation GitOrigin-RevId: a4ed51d6baa774023086f1e9e656570009b18447
get-convex · Feb 22, 2025 · b12d9c8 · b12d9c8
1 parent 0934a47
commit b12d9c8
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/...es/dashboard/src/elements/ProgressBar.tsx → ...board-common/src/elements/ProgressBar.tsx b/...es/dashboard/src/elements/ProgressBar.tsx → ...board-common/src/elements/ProgressBar.tsx
diff --git a/...ages/dashboard-common/src/features/data/components/DataToolbar/ClearTableConfirmation.tsx b/...ages/dashboard-common/src/features/data/components/DataToolbar/ClearTableConfirmation.tsx
@@ -5,6 +5,7 @@ import { useInvalidateShapes } from "@common/features/data/lib/api";
 import { ConfirmationDialog } from "@common/elements/ConfirmationDialog";
 import { toast } from "@common/lib/utils";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { ProgressBar } from "@common/elements/ProgressBar";
 
 export function ClearTableConfirmation({
   numRows,
@@ -101,12 +102,10 @@ export function ClearTableConfirmation({
         isClearing ? (
           <div className="flex flex-col gap-2">
             <span className="text-xs font-semibold">{progressPct}% done</span>
-            <div className="mb-4 h-2.5 w-full rounded-full bg-background-tertiary">
-              <div
-                className="h-2.5 animate-pulse rounded-l-full bg-util-accent transition-[width]"
-                style={{ width: `${progressPct}%` }}
-              />
-            </div>
+            <ProgressBar
+              fraction={progressPct / 100}
+              ariaLabel="Clear table progress"
+            />
           </div>
         ) : (
           <div className="flex flex-col gap-2">

diff --git a/npm-packages/dashboard/src/components/deploymentSettings/BackupRestoreStatus.tsx b/npm-packages/dashboard/src/components/deploymentSettings/BackupRestoreStatus.tsx
@@ -10,7 +10,7 @@ import { Doc } from "system-udfs/convex/_generated/dataModel";
 import { DeploymentResponse, Team } from "generatedApi";
 import udfs from "dashboard-common/udfs";
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
-import { ProgressBar } from "elements/ProgressBar";
+import { ProgressBar } from "@common/elements/ProgressBar";
 import { useListCloudBackups, BackupResponse } from "api/backups";
 import { TransferSummary } from "./BackupListItem";
 import { ImportSummary } from "./SnapshotImport";

diff --git a/npm-packages/dashboard/src/elements/ProgressBar.stories.tsx b/npm-packages/dashboard/src/elements/ProgressBar.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import { useEffect, useState } from "react";
-import { ProgressBar } from "./ProgressBar";
+import { ProgressBar } from "@common/elements/ProgressBar";
 
 export default {
   component: ProgressBar,