diff --git a/resources/scripts/components/server/files/FileManagerStatus.tsx b/resources/scripts/components/server/files/FileManagerStatus.tsx
index 2f2a45462..28ced9bd3 100644
--- a/resources/scripts/components/server/files/FileManagerStatus.tsx
+++ b/resources/scripts/components/server/files/FileManagerStatus.tsx
@@ -1,8 +1,6 @@
-// FIXME: replace with radix tooltip
-// import Tooltip from '@/components/elements/tooltip/Tooltip';
-// FIXME: add icons back
-import { useSignal } from '@preact/signals-react';
-import { useContext, useEffect } from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useContext, useEffect, useState } from 'react';
import ActionButton from '@/components/elements/ActionButton';
import Code from '@/components/elements/Code';
@@ -12,27 +10,39 @@ import asDialog from '@/hoc/asDialog';
import { ServerContext } from '@/state/server';
-const svgProps = {
- cx: 16,
- cy: 16,
- r: 14,
- strokeWidth: 3,
- fill: 'none',
- stroke: 'currentColor',
-};
+// TODO: Make it more pretty
+const CircleProgress = ({ progress, className }: { progress: number; className?: string }) => {
+ const radius = 12;
+ const circumference = 2 * Math.PI * radius;
+ const offset = circumference - (progress / 100) * circumference;
-const Spinner = ({ progress, className }: { progress: number; className?: string }) => (
-
-);
+ return (
+
+ );
+};
const FileUploadList = () => {
const { close } = useContext(DialogWrapperContext);
@@ -43,34 +53,62 @@ const FileUploadList = () => {
);
return (
-
- {uploads.map(([name, file]) => (
-
- {/*
*/}
-
-
+
+
+ {uploads.map(([name, file]) => (
+
+
+
+
+
+
+
+
+
+ {`${Math.floor((file.loaded / file.total) * 100)}%`}
+
+
+
+
+
{name}
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
- {/* */}
-
{name}
-
- Cancel
+ ))}
+
+ clearFileUploads()}>
+ Cancel Uploads
-
- ))}
-
- clearFileUploads()}>
- Cancel Uploads
-
-
- Close
-
-
-
+
+ Close
+
+
+
+
);
};
@@ -80,50 +118,65 @@ const FileUploadListDialog = asDialog({
})(FileUploadList);
const FileManagerStatus = () => {
- const open = useSignal(false);
+ const [open, setOpen] = useState(false);
const count = ServerContext.useStoreState((state) => Object.keys(state.files.uploads).length);
useEffect(() => {
if (count === 0) {
- open.value = false;
+ setOpen(false);
}
}, [count]);
return (
<>
- {count > 0 && (
- //
- (open.value = true)}
- >
-
-
- //
- )}
-
(open.value = false)} />
+
+ {count > 0 && (
+
+
+ {
+ setOpen(true);
+ }}
+ >
+
+
+
+
+
+ {`${count} files are uploading, click to view`}
+
+
+
+ )}
+ setOpen(false)} />
+
>
);
};
diff --git a/resources/scripts/components/server/files/FileUploadRow.tsx b/resources/scripts/components/server/files/FileUploadRow.tsx
deleted file mode 100644
index 1b6f03617..000000000
--- a/resources/scripts/components/server/files/FileUploadRow.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Progress } from '@radix-ui/react-progress';
-import { X } from 'lucide-react';
-
-import Code from '@/components/elements/Code';
-
-import { cn } from '@/lib/utils';
-
-import { useStoreActions } from '@/state/hooks';
-import { ServerContext } from '@/state/server';
-
-// Assuming you use a utility like this for conditional classnames
-
-interface FileUploadRowProps {
- name: string;
- loaded: number;
- total: number;
-}
-
-export default function FileUploadRow({ name, loaded, total }: FileUploadRowProps) {
- const cancel = ServerContext.useStoreActions((actions) => actions.files.cancelFileUpload);
-
- const percent = Math.floor((loaded / total) * 100);
-
- return (
-
-
- {name}
-
-
-
-
-
-
- );
-}
diff --git a/resources/scripts/components/server/operations/OperationProgressModal.tsx b/resources/scripts/components/server/operations/OperationProgressModal.tsx
index bcbcd0c95..2510372cd 100644
--- a/resources/scripts/components/server/operations/OperationProgressModal.tsx
+++ b/resources/scripts/components/server/operations/OperationProgressModal.tsx
@@ -133,7 +133,7 @@ const OperationProgressModal: React.FC = ({
return (