adding progress component

metabase · May 14, 2024 · 6e0b2a2 · 6e0b2a2
1 parent 461c3b9
commit 6e0b2a2
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 1 deletion.
diff --git a/frontend/src/metabase/admin/settings/components/CloudPanel/MigrationInProgress.tsx b/frontend/src/metabase/admin/settings/components/CloudPanel/MigrationInProgress.tsx
@@ -7,7 +7,7 @@ import { useToggle } from "metabase/hooks/use-toggle";
 import { color } from "metabase/lib/colors";
 import { useDispatch } from "metabase/lib/redux";
 import { addUndo } from "metabase/redux/undo";
-import { Flex, Text, List, Button, Box, Modal } from "metabase/ui";
+import { Flex, Text, List, Button, Box, Modal, Progress } from "metabase/ui";
 
 import { MigrationCard } from "./CloudPanel.styled";
 import type { InProgressCloudMigration, InProgressStates } from "./utils";
@@ -72,6 +72,7 @@ export const MigrationInProgress = ({
           <Text size="md" c="text-medium">
             {progressMessage[migration.state]}
           </Text>
+          <Progress value={migration.progress} />
           <Text size="md" fw="bold" color={color("brand")}>
             {t`Progress`} - {migration.progress} / 100%
           </Text>

diff --git a/frontend/src/metabase/ui/components/feedback/Progress/Progress.styled.tsx b/frontend/src/metabase/ui/components/feedback/Progress/Progress.styled.tsx
@@ -0,0 +1,9 @@
+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getProgressOverrides = (): MantineThemeOverride["components"] => ({
+  Progress: {
+    defaultProps: {
+      animate: true,
+    },
+  },
+});
diff --git a/frontend/src/metabase/ui/components/feedback/Progress/index.ts b/frontend/src/metabase/ui/components/feedback/Progress/index.ts
@@ -0,0 +1,2 @@
+export { Progress } from "@mantine/core";
+export * from "./Progress.styled";
diff --git a/frontend/src/metabase/ui/components/feedback/index.ts b/frontend/src/metabase/ui/components/feedback/index.ts
@@ -1,2 +1,3 @@
 export * from "./Loader";
 export * from "./Alert";
+export * from "./Progress";
diff --git a/frontend/src/metabase/ui/theme.ts b/frontend/src/metabase/ui/theme.ts
@@ -23,6 +23,7 @@ import {
   getMultiSelectOverrides,
   getRadioOverrides,
   getPaperOverrides,
+  getProgressOverrides,
   getPopoverOverrides,
   getSegmentedControlOverrides,
   getSelectOverrides,
@@ -128,6 +129,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getRadioOverrides(),
     ...getPaperOverrides(),
     ...getPopoverOverrides(),
+    ...getProgressOverrides(),
     ...getScrollAreaOverrides(),
     ...getSegmentedControlOverrides(),
     ...getSelectOverrides(),