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} -
- -
- -
- -
{percent}%
-
- - -
- ); -} diff --git a/storage/app/private/.gitignore b/storage/app/private/.gitignore old mode 100644 new mode 100755 diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore old mode 100644 new mode 100755