Move circular-progress to dataset-import folder

Author: jpggvilaca

web_ui/src/shared/components/circular-progress/circular-progress.component.test.tsx renamed to web_ui/src/shared/components/dataset-import-progress/circular-progress/circular-progress.component.test.tsx

@@ -0,0 +1,105 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { useMemo } from 'react';
+
+import { ColorValue } from '@react-types/shared/src/dna';
+
+interface CircularProgressProps {
+    percentage: number;
+    size?: number;
+    labelFontSize?: number;
+    strokeWidth?: number;
+    labelFontColor?: ColorValue;
+    backStrokeColor?: ColorValue;
+    color?: ColorValue;
+    hasError?: boolean;
+    checkMarkOnComplete?: boolean;
+    checkMarkSize?: number;
+    checkMarkColor?: ColorValue | string;
+}
+
+export const CircularProgress = ({
+    percentage,
+    size = 50,
+    strokeWidth = 4,
+    labelFontSize = 10,
+    labelFontColor = 'gray-600',
+    backStrokeColor = 'gray-100',
+    color = 'blue-400',
+    hasError = false,
+    checkMarkSize = 50,
+    checkMarkOnComplete = true,
+    checkMarkColor = '--energy-blue-shade',
+}: CircularProgressProps): JSX.Element => {
+    const progress = Math.max(0, Math.min(100, percentage)) | 0;
+
+    const viewBox = useMemo<string>((): string => `0 0 ${size} ${size}`, [size]);
+    const radius = useMemo<number>((): number => (size - strokeWidth) / 2, [size, strokeWidth]);
+    const circumference = useMemo<number>((): number => radius * Math.PI * 2, [radius]);
+    const dash = useMemo<number>((): number => (progress * circumference) / 100, [progress, circumference]);
+    const getCheckMarkColor = useMemo<string>(
+        (): string =>
+            checkMarkColor.startsWith('--') ? `var(${checkMarkColor})` : `var(--spectrum-global-color-${color})`,
+        [checkMarkColor, color]
+    );
+
+    return (
+        <svg width={size} height={size} viewBox={viewBox} aria-label='progress-circular-loader'>
+            <circle
+                fill='none'
+                stroke={`var(--spectrum-global-color-${backStrokeColor})`}
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                strokeWidth={`${strokeWidth}px`}
+            />
+            <circle
+                fill='none'
+                stroke={
+                    checkMarkOnComplete
+                        ? progress < 100
+                            ? `var(--spectrum-global-color-${color})`
+                            : getCheckMarkColor
+                        : `var(--spectrum-global-color-${color})`
+                }
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                strokeWidth={`${strokeWidth}px`}
+                transform={`rotate(-90 ${size / 2} ${size / 2})`}
+                strokeDasharray={`${[dash, circumference - dash]}`}
+                strokeLinecap='square'
+                style={{ transition: 'all 0.5s' }}
+            />
+            <text
+                fill={
+                    checkMarkOnComplete
+                        ? progress < 100
+                            ? `var(--spectrum-global-color-${labelFontColor})`
+                            : getCheckMarkColor
+                        : `var(--spectrum-global-color-${labelFontColor})`
+                }
+                fontSize={
+                    checkMarkOnComplete
+                        ? progress < 100
+                            ? `${labelFontSize}px`
+                            : `${checkMarkSize}px`
+                        : `${labelFontSize}px`
+                }
+                dy={
+                    checkMarkOnComplete
+                        ? progress < 100
+                            ? `${labelFontSize / 2}px`
+                            : `${checkMarkSize / 2.5}px`
+                        : `${labelFontSize / 2}px`
+                }
+                textAnchor='middle'
+                x='50%'
+                y='50%'
+            >
+                {hasError ? 'N/A' : checkMarkOnComplete ? (progress < 100 ? `${progress}%` : '✓') : `${progress}%`}
+            </text>
+        </svg>
+    );
+};

web_ui/src/shared/components/dataset-import-progress/circular-progress/circular-progress.component.tsx

@@ -14,7 +14,7 @@ import { DatasetImportItem } from '../../../core/datasets/dataset.interface';
 import { useDatasetImportQueries } from '../../../core/datasets/hooks/use-dataset-import-queries.hook';
 import { getJobInfo, isPreparingJob } from '../../../core/datasets/utils';
 import { useWorkspaceIdentifier } from '../../../providers/workspaces-provider/use-workspace-identifier.hook';
-import { CircularProgress } from '../circular-progress/circular-progress.component';
+import { CircularProgress } from './circular-progress/circular-progress.component';
 
 import classes from './dataset-import-progress.module.scss';