feat: use /stat to display file sizes in Transfer List.

fix: ensure the Transfer settings are reset after form submission.
globus · Oct 22, 2024 · 585a969 · 585a969
1 parent ea2f701
commit 585a969
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 34 deletions.
diff --git a/src/components/Transfer/Drawer.tsx b/src/components/Transfer/Drawer.tsx
@@ -27,16 +27,17 @@ import {
   AlertIcon,
   AlertTitle,
   AlertDescription,
-  Code,
 } from "@chakra-ui/react";
 import { usePathname } from "next/navigation";
 
 import { Item, useGlobusTransferStore } from "@/store/globus-transfer";
 import NextLink from "next/link";
 import { MinusCircleIcon } from "@heroicons/react/24/outline";
 import { CollectionName } from "@/globus/Collection";
-import { isTransferEnabled } from "../../../static";
 import { useStat } from "@/hooks/useGlobusAPI";
+import { readableBytes } from "@globus/sdk/services/transfer/utils";
+
+import { isTransferEnabled } from "../../../static";
 
 export const TransferListItem = ({
   item,
@@ -61,16 +62,16 @@ export const TransferListItem = ({
           >
             {item.label}
           </Link>
-          {stat.data?.size && (
-            <Text>
-              <Code>{stat.data?.size} Bytes</Code>
-            </Text>
-          )}
-          <Tooltip label={item.path}>
-            <Text noOfLines={1} fontSize="xs" maxWidth="90%">
-              {item.path}
-            </Text>
-          </Tooltip>
+          <HStack>
+            {stat.data?.type === "file" && stat.data?.size && (
+              <Text fontSize="xs">{readableBytes(stat.data?.size)}</Text>
+            )}
+            <Tooltip label={item.path}>
+              <Text noOfLines={1} fontSize="xs">
+                {item.path}
+              </Text>
+            </Tooltip>
+          </HStack>
         </Stack>
         <Spacer />
         <IconButton

diff --git a/src/globus/collection-browser/CollectionBrowser.tsx b/src/globus/collection-browser/CollectionBrowser.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Box,
   Input,
@@ -23,15 +23,22 @@ import { useGlobusAuth } from "@globus/react-auth-context";
 export type Endpoint = Record<string, any>;
 
 export function CollectionSearch({
-  defaultValue = null,
+  value = null,
   onSelect = () => {},
 }: {
-  defaultValue?: Endpoint | null;
+  value?: Endpoint | null;
   onSelect: (endpoint: Endpoint) => void;
 }) {
   const auth = useGlobusAuth();
   const [results, setResults] = useState<Endpoint[]>([]);
-  const [selection, setSelection] = useState(defaultValue);
+  const [selection, setSelection] = useState(value);
+
+  useEffect(() => {
+    setSelection(value);
+    if (value === null) {
+      setResults([]);
+    }
+  }, [value]);
 
   async function handleSearch(e: React.FormEvent<HTMLInputElement>) {
     const query = e.currentTarget.value;

diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx
@@ -10,9 +10,7 @@ import {
   CardHeader,
   CardBody,
   Box,
-  HStack,
   Icon,
-  IconButton,
   Spacer,
   Stack,
   Button,
@@ -22,18 +20,13 @@ import {
   Input,
   useToast,
   SimpleGrid,
-  Tooltip,
   Alert,
   AlertIcon,
   AlertTitle,
   FormHelperText,
   AlertDescription,
 } from "@chakra-ui/react";
-import {
-  XCircleIcon,
-  ArrowTopRightOnSquareIcon,
-} from "@heroicons/react/24/outline";
-import NextLink from "next/link";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { transfer, webapp } from "@globus/sdk";
 import { useGlobusAuth } from "@globus/react-auth-context";
 
@@ -48,9 +41,6 @@ export default function ResultPage() {
   const auth = useGlobusAuth();
   const toast = useToast();
   const transferStore = useGlobusTransferStore();
-  const removeItemBySubject = useGlobusTransferStore(
-    (state) => state.removeItemBySubject,
-  );
 
   if (isTransferEnabled === false) {
     return (
@@ -92,6 +82,7 @@ export default function ResultPage() {
         )
       ).json();
 
+      const basePath = path.endsWith("/") ? path : `${path}/`;
       const response = await transfer.taskSubmission.submitTransfer(
         {
           payload: {
@@ -106,7 +97,7 @@ export default function ResultPage() {
                 /**
                  * @todo Should we allow (or require) configuration of `item.name` and `item.type`?
                  */
-                destination_path: `${path}${item.path}`,
+                destination_path: `${basePath}${item.path}`,
                 recursive: item.type === "directory",
               };
             }),
@@ -216,9 +207,7 @@ export default function ResultPage() {
                     <FormControl>
                       <FormLabel>Destination</FormLabel>
                       <CollectionSearch
-                        defaultValue={
-                          transferStore.transfer?.destination ?? null
-                        }
+                        value={transferStore.transfer?.destination ?? null}
                         onSelect={(destination) => {
                           transferStore.setDestination(destination);
                         }}
@@ -227,7 +216,7 @@ export default function ResultPage() {
                     <FormControl>
                       <FormLabel>Path</FormLabel>
                       <Input
-                        defaultValue={transferStore.transfer?.path}
+                        value={transferStore.transfer?.path || ""}
                         required
                         disabled={!auth.isAuthenticated}
                         onChange={(e) => {
@@ -237,7 +226,7 @@ export default function ResultPage() {
                       <FormHelperText>
                         {transferStore.transfer?.path && (
                           <PathVerifier
-                            path={transferStore.transfer?.path}
+                            path={transferStore.transfer.path}
                             collectionId={
                               transferStore.transfer?.destination?.id
                             }
@@ -248,7 +237,7 @@ export default function ResultPage() {
                     <FormControl>
                       <FormLabel>Label</FormLabel>
                       <Input
-                        defaultValue={transferStore.transfer?.label}
+                        value={transferStore.transfer?.label || ""}
                         disabled={!auth.isAuthenticated}
                         onChange={(e) => {
                           transferStore.setLabel(e.currentTarget.value);