Merge pull request #1538 from lakikowolfe/SWC-6543

Sage-Bionetworks · Feb 4, 2025 · ba70c4a · ba70c4a
2 parents 9c192af + 12aa69d
commit ba70c4a
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 70 deletions.
diff --git a/packages/synapse-react-client/src/components/DownloadCart/DownloadCartPage.tsx b/packages/synapse-react-client/src/components/DownloadCart/DownloadCartPage.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 import AvailableForDownloadTable from './AvailableForDownloadTable'
-import DownloadListStats from './DownloadListStats'
 import { useGetDownloadListStatistics } from '../../synapse-queries/download/useDownloadList'
 import {
   DownloadListActionsRequired,
@@ -299,17 +298,15 @@ export function DownloadCartPage(props: DownloadListActionsRequiredProps) {
                     }}
                   />
                 )}
-                <DownloadListStats
+                <AvailableForDownloadTable
+                  filesStatistics={data}
+                  refetchStatistics={refetch}
                   numBytes={data.sumOfFileSizesAvailableForDownload}
                   numPackagableFiles={
                     data.numberOfFilesAvailableForDownloadAndEligibleForPackaging
                   }
                   numFiles={data.numberOfFilesAvailableForDownload}
                 />
-                <AvailableForDownloadTable
-                  filesStatistics={data}
-                  refetchStatistics={refetch}
-                />
               </div>
             </div>
           )}

diff --git a/packages/synapse-react-client/src/components/DownloadCart/DownloadDetails.tsx b/packages/synapse-react-client/src/components/DownloadCart/DownloadDetails.tsx
@@ -1,7 +1,7 @@
 import { calculateFriendlyFileSize } from '../../utils/functions/calculateFriendlyFileSize'
 import { TOOLTIP_DELAY_SHOW } from '../SynapseTable/SynapseTableConstants'
 import IconSvg from '../IconSvg/IconSvg'
-import { Tooltip } from '@mui/material'
+import { Tooltip, Box } from '@mui/material'
 import pluralize from 'pluralize'
 
 export type DownloadDetailsProps = {
@@ -16,15 +16,26 @@ export default function DownloadDetails(props: DownloadDetailsProps) {
   const isInactive = numFiles === 0
   const iconClassName = isInactive ? 'SRC-inactive' : 'SRC-primary-text-color'
   return (
-    <span className="DownloadDetailsV2">
-      <span className="item">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'start ',
+        gap: '25px',
+        fontWeight: 'bold',
+        svg: {
+          mr: '5px',
+        },
+      }}
+    >
+      <span>
         {!isInactive && (
           <>
             {numFiles.toLocaleString()} {pluralize('File', numFiles)}
           </>
         )}
       </span>
-      <span className="item">
+      <span>
         <span className={iconClassName}>
           <IconSvg wrap={false} icon="packagableFile" />
         </span>
@@ -57,6 +68,6 @@ export default function DownloadDetails(props: DownloadDetailsProps) {
           )}
         </span>
       )}
-    </span>
+    </Box>
   )
 }
diff --git a/packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.test.tsx b/packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.test.tsx
@@ -80,6 +80,9 @@ function renderComponent() {
       <DownloadListTableV2
         filesStatistics={mockFileStatistics}
         refetchStatistics={mockRefetchStatistics}
+        numBytes={100}
+        numPackagableFiles={5}
+        numFiles={6}
       />
     </SynapseTestContext>,
   )

diff --git a/packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx b/packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.tsx
@@ -24,11 +24,12 @@ import { SkeletonTable } from '../Skeleton'
 import { displayToast } from '../ToastMessage'
 import DirectProgrammaticDownload from './DirectProgrammaticDownload'
 import { BlockingLoader } from '../LoadingScreen/LoadingScreen'
-import { Tooltip } from '@mui/material'
+import { Tooltip, Box } from '@mui/material'
 import { InteractiveCopyIdsIcon } from '../InteractiveCopyIdsIcon'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import FileEntityDirectDownload from '../DirectDownload/FileEntityDirectDownload'
 import { UserBadge } from '../UserCard/UserBadge'
+import DownloadListStats from './DownloadListStats'
 
 export const TESTING_TRASH_BTN_CLASS = 'TESTING_TRASH_BTN_CLASS'
 
@@ -75,6 +76,9 @@ function InteractiveSortIcon(props: {
 export type DownloadListTableProps = {
   filesStatistics: FilesStatisticsResponse
   refetchStatistics: () => Promise<any>
+  numBytes: number
+  numPackagableFiles: number
+  numFiles: number
 }
 
 export default function DownloadListTable(props: DownloadListTableProps) {
@@ -185,27 +189,70 @@ export default function DownloadListTable(props: DownloadListTableProps) {
   return (
     <div className="bootstrap-4-backport">
       <BlockingLoader show={copyingAllSynapseIDs} />
-      <div className="filterFilesContainer">
-        <span className="filterFilesByText">Filter Files By</span>
-        <Dropdown>
-          <Dropdown.Toggle variant="gray-primary-500" id="dropdown-basic">
-            {getFilterDisplayText(filter)}
-          </Dropdown.Toggle>
-          <Dropdown.Menu role="menu">
-            {availableFiltersArray.map(availableFilter => (
-              <Dropdown.Item
-                role="menuitem"
-                key={`${getFilterDisplayText(availableFilter)}-filter-option`}
-                onClick={() => {
-                  setFilter(availableFilter)
-                }}
-              >
-                {getFilterDisplayText(availableFilter)}
-              </Dropdown.Item>
-            ))}
-          </Dropdown.Menu>
-        </Dropdown>
-      </div>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          py: '15px',
+          rowGap: '15px',
+        }}
+      >
+        <DownloadListStats
+          numBytes={props.numBytes}
+          numPackagableFiles={props.numPackagableFiles}
+          numFiles={props.numFiles}
+        />
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '10px',
+            alignItems: 'inherit',
+            justifyContent: 'end',
+          }}
+        >
+          <Box
+            sx={{
+              fontWeight: '700',
+              fontSize: '14px',
+            }}
+          >
+            Filter Files By
+          </Box>
+          <Box
+            sx={{
+              button: {
+                width: '144px',
+              },
+            }}
+          >
+            <Dropdown>
+              <Dropdown.Toggle variant="gray-primary-500" id="dropdown-basic">
+                {getFilterDisplayText(filter)}
+              </Dropdown.Toggle>
+              <Dropdown.Menu role="menu">
+                {availableFiltersArray.map(availableFilter => (
+                  <Dropdown.Item
+                    role="menuitem"
+                    key={`${getFilterDisplayText(
+                      availableFilter,
+                    )}-filter-option`}
+                    onClick={() => {
+                      setFilter(availableFilter)
+                    }}
+                  >
+                    {getFilterDisplayText(availableFilter)}
+                  </Dropdown.Item>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          </Box>
+        </Box>
+      </Box>
       {allRows.length > 0 && (
         <>
           <Table

diff --git a/packages/synapse-react-client/src/style/components/_download-cart-page.scss b/packages/synapse-react-client/src/style/components/_download-cart-page.scss
@@ -80,30 +80,6 @@
     }
   }
 
-  .availableForDownloadTableContainer {
-    padding-top: 20px;
-
-    .filterFilesContainer {
-      display: grid;
-      align-items: center;
-      grid-template-columns: auto 100px 148px;
-      padding-bottom: 15px;
-
-      .filterFilesByText {
-        grid-column-start: 2;
-        font-weight: 700;
-      }
-
-      .dropdown {
-        grid-column-start: 3;
-
-        button {
-          width: 144px;
-        }
-      }
-    }
-  }
-
   .subSectionContainer {
     display: flex;
 

diff --git a/packages/synapse-react-client/src/style/components/_download-list-v2.scss b/packages/synapse-react-client/src/style/components/_download-list-v2.scss
@@ -4,27 +4,34 @@
 
 table.DownloadListTableV2 {
   white-space: pre;
+
   .eligibileIcon {
     color: map.get(SRC.$colors, 'gray-800');
   }
+
   .ineligibileIcon {
     color: map.get(SRC.$colors, 'warning');
   }
+
   td.ineligibleForPackagingTd:first-child {
     background-color: #f9f5e7;
   }
+
   thead:first-child > tr:first-child {
     > th {
       min-width: 120px;
+
       &:first-child {
         border-right: none;
         min-width: unset;
       }
+
       &:nth-child(2) {
         border-left: none;
       }
     }
   }
+
   tbody tr > td:nth-child(2) {
     // file name column
     overflow-x: hidden;
@@ -40,44 +47,37 @@ table.DownloadListTableV2 {
     color: map.get(SRC.$colors, 'gray-700'); // make all icons gray-700
     display: grid;
     grid-template-columns: repeat(3, 40px);
+
     * {
       justify-self: center;
     }
+
     .downloadItem {
       grid-column: 1 / span 1;
     }
+
     .programmaticAccessItem {
       grid-column: 2 / span 1;
     }
+
     .removeItem {
       grid-column: 3 / span 1;
     }
   }
 
   @include SRCMixins.sortable-table();
 }
+
 .sort {
   padding-left: 5px;
 }
-.DownloadDetailsV2 {
-  font-weight: bold;
-  .item {
-    margin-right: 35px;
-    svg {
-      margin-right: 5px;
-      margin-top: -4px;
-    }
-    #icon-packagableFile svg {
-      margin-top: 0px;
-    }
-  }
-}
 
 .Download-Link {
   &.v2 {
     #SHOW_DOWNLOAD_TOOLTIP {
       text-transform: none;
     }
+
     .download-cart-size {
       background-color: SRC.$secondary-action-color;
       color: white;