chore(storage-browser): add 'folder' column to uploads controls table (#5643)

* chore(storage-browser): use humanFileSize util to pretty print the size

* add default cases

* chore(storage-browser): add file extension as column type

* chore(storage-browser): add 'folder' column to uploads controls table

* revert useHandleUpload

* use custom column for upload controls table

* remove toUpperCase

* update file type after merge

* update tests

Author: timngyn

packages/react-storage/src/components/StorageBrowser/Views/LocationActionView/UploadControls.tsx

@@ -29,13 +29,18 @@ const { Cancel, Exit, Primary, Summary, Table } = Controls;
 
 interface LocationActionViewColumns extends CancelableTask {
   type: string;
+  folder: string;
 }
 
 const LOCATION_ACTION_VIEW_COLUMNS: Column<LocationActionViewColumns>[] = [
   {
     key: 'key',
     header: 'Name',
   },
+  {
+    key: 'folder',
+    header: 'Folder',
+  },
   {
     key: 'type',
     header: 'Type',
@@ -114,6 +119,7 @@ const LocationActionViewColumnSortMap = {
   status: compareStrings,
   progress: compareNumbers,
   type: compareStrings,
+  folder: compareStrings,
 };
 
 const renderRowItem: RenderRowItem<LocationActionViewColumns> = (
@@ -125,13 +131,20 @@ const renderRowItem: RenderRowItem<LocationActionViewColumns> = (
     row: LocationActionViewColumns
   ) => {
     switch (columnKey) {
-      case 'key':
+      case 'key': {
+        // Render the key without the parent folders
+        const folder = row.key.lastIndexOf('/') + 1;
+
         return (
           <TableDataText>
             <ActionIcon status={row.status} />
-            {row.key}
+            {row.key.slice(folder, row.key.length)}
           </TableDataText>
         );
+      }
+      case 'folder': {
+        return <TableDataText>{row.folder}</TableDataText>;
+      }
       case 'type': {
         return <TableDataText>{row.type}</TableDataText>;
       }
@@ -198,10 +211,15 @@ export const UploadControls = (): JSX.Element => {
     files,
   });
 
-  let tableData = tasks.map((task) => ({
-    ...task,
-    type: task.data.type ?? '-',
-  }));
+  let tableData = tasks.map((task) => {
+    const folder = task.data.webkitRelativePath.lastIndexOf('/') + 1;
+
+    return {
+      ...task,
+      type: task.data.type ?? '-',
+      folder: folder > -1 ? task.data.webkitRelativePath.slice(0, folder) : '/',
+    };
+  });
 
   const { options } = actions[selected.type!];
   const { selectionData } = options ?? {};