Ability to add S3 folders / files to package

catalog/app/components/BreadCrumbs/BreadCrumbs.js

@@ -1,3 +1,4 @@
+import * as R from 'ramda'
 import * as React from 'react'
 
 import Link from 'utils/StyledLink'
@@ -10,13 +11,15 @@ export const Crumb = tagged([
   'Sep', // value
 ])
 
-export const Segment = ({ label, to }) =>
-  to ? <Link to={to}>{label || EMPTY}</Link> : label || EMPTY
+export const Segment = ({ label, to, getLinkProps = R.identity }) =>
+  to != null ? <Link {...getLinkProps({ to })}>{label || EMPTY}</Link> : label || EMPTY
 
-export const render = (items) =>
+export const render = (items, { getLinkProps = undefined } = {}) =>
   items.map(
     Crumb.case({
-      Segment: (s, i) => <Segment key={`${i}:${s.label}`} {...s} />,
+      Segment: (s, i) => (
+        <Segment key={`${i}:${s.label}`} getLinkProps={getLinkProps} {...s} />
+      ),
       Sep: (s, i) => <React.Fragment key={`__sep${i}`}>{s}</React.Fragment>,
     }),
   )

catalog/app/containers/Bucket/Dir.tsx

@@ -33,24 +33,6 @@ interface RouteMap {
 
 type Urls = NamedRoutes.Urls<RouteMap>
 
-interface ListingFile {
-  bucket: string
-  key: string
-  modified: Date
-  size: number
-  etag: string
-  archived: boolean
-}
-
-interface ListingResponse {
-  dirs: string[]
-  files: ListingFile[]
-  truncated: boolean
-  bucket: string
-  path: string
-  prefix: string
-}
-
 const getCrumbs = R.compose(
   R.intersperse(Crumb.Sep(<>&nbsp;/ </>)),
   ({ bucket, path, urls }: { bucket: string; path: string; urls: Urls }) =>
@@ -63,39 +45,42 @@ const getCrumbs = R.compose(
     ),
 )
 
-const formatListing = ({ urls }: { urls: Urls }, r: ListingResponse) => {
-  const dirs = r.dirs.map((name) => ({
-    type: 'dir' as const,
-    name: ensureNoSlash(withoutPrefix(r.path, name)),
-    to: urls.bucketDir(r.bucket, name),
-  }))
-  const files = r.files.map(({ key, size, modified, archived }) => ({
-    type: 'file' as const,
-    name: withoutPrefix(r.path, key),
-    to: urls.bucketFile(r.bucket, key),
-    size,
-    modified,
-    archived,
-  }))
-  const items = [
-    ...(r.path !== '' && !r.prefix
-      ? [
-          {
-            type: 'dir' as const,
-            name: '..',
-            to: urls.bucketDir(r.bucket, up(r.path)),
-          },
-        ]
-      : []),
-    ...dirs,
-    ...files,
-  ]
-  // filter-out files with same name as one of dirs
-  return R.uniqBy(R.prop('name'), items)
+function useFormattedListing(r: requests.BucketListingResult) {
+  const { urls } = NamedRoutes.use<RouteMap>()
+  return React.useMemo(() => {
+    const dirs = r.dirs.map((name) => ({
+      type: 'dir' as const,
+      name: ensureNoSlash(withoutPrefix(r.path, name)),
+      to: urls.bucketDir(r.bucket, name),
+    }))
+    const files = r.files.map(({ key, size, modified, archived }) => ({
+      type: 'file' as const,
+      name: withoutPrefix(r.path, key),
+      to: urls.bucketFile(r.bucket, key),
+      size,
+      modified,
+      archived,
+    }))
+    const items = [
+      ...(r.path !== '' && !r.prefix
+        ? [
+            {
+              type: 'dir' as const,
+              name: '..',
+              to: urls.bucketDir(r.bucket, up(r.path)),
+            },
+          ]
+        : []),
+      ...dirs,
+      ...files,
+    ]
+    // filter-out files with same name as one of dirs
+    return R.uniqBy(R.prop('name'), items)
+  }, [r, urls])
 }
 
 interface DirContentsProps {
-  response: ListingResponse
+  response: requests.BucketListingResult
   locked: boolean
   bucket: string
   path: string
@@ -127,7 +112,7 @@ function DirContents({
     [history, urls, bucket, path],
   )
 
-  const items = React.useMemo(() => formatListing({ urls }, response), [urls, response])
+  const items = useFormattedListing(response)
 
   // TODO: should prefix filtering affect summary?
   return (
@@ -277,7 +262,7 @@ export default function Dir({
         Err: displayError(),
         Init: () => null,
         _: (x: $TSFixMe) => {
-          const res: ListingResponse | null = AsyncResult.getPrevResult(x)
+          const res: requests.BucketListingResult | null = AsyncResult.getPrevResult(x)
           return res ? (
             <DirContents
               response={res}

catalog/app/containers/Bucket/Listing.tsx

@@ -17,6 +17,9 @@ const TIP_DELAY = 1000
 
 const TOOLBAR_INNER_HEIGHT = 28
 
+// monkey-patch MUI built-in colDef to better align checkboxes
+DG.gridCheckboxSelectionColDef.width = 32
+
 export interface Item {
   type: 'dir' | 'file'
   name: string
@@ -465,6 +468,9 @@ function Toolbar({
 const usePanelStyles = M.makeStyles((t) => ({
   root: {
     zIndex: 1,
+    '& select, & input': {
+      boxSizing: 'content-box',
+    },
   },
   paper: {
     backgroundColor: t.palette.background.paper,
@@ -504,6 +510,7 @@ function Panel({ children, open }: DG.GridPanelProps) {
       anchorEl={anchorEl}
       modifiers={getPopperModifiers()}
       className={classes.root}
+      disablePortal
     >
       <M.ClickAwayListener onClickAway={handleClickAway}>
         <M.Paper className={classes.paper} elevation={8} onKeyDown={handleKeyDown}>
@@ -717,6 +724,16 @@ function FilteredOverlay() {
   )
 }
 
+export type CellProps = React.PropsWithChildren<{
+  item: Item
+  title?: string
+  className?: string
+}>
+
+function Cell({ item, ...props }: CellProps) {
+  return <Link to={item.to} {...props} />
+}
+
 function compareBy<T, V extends R.Ord>(a: T, b: T, getValue: (arg: T) => V) {
   const va = getValue(a)
   const vb = getValue(b)
@@ -760,7 +777,7 @@ const COL_MODIFIED_W = 176
 const useStyles = M.makeStyles((t) => ({
   '@global': {
     '.MuiDataGridMenu-root': {
-      zIndex: 1,
+      zIndex: t.zIndex.modal + 1, // show it over modals
     },
   },
   root: {
@@ -774,8 +791,15 @@ const useStyles = M.makeStyles((t) => ({
       background: fade(t.palette.background.paper, 0.5),
       zIndex: 1,
     },
+    '& .MuiDataGrid-checkboxInput': {
+      padding: '7px !important',
+      '& svg': {
+        fontSize: 18,
+      },
+    },
     '& .MuiDataGrid-cell': {
       border: 'none',
+      outline: 'none !important',
       padding: 0,
     },
     '& .MuiDataGrid-colCell': {
@@ -801,11 +825,11 @@ const useStyles = M.makeStyles((t) => ({
         pointerEvents: 'none',
       },
       // "Size" column
-      '&:nth-child(2)': {
+      '&:nth-last-child(2)': {
         justifyContent: 'flex-end',
       },
       // "Last modified" column
-      '&:nth-child(3)': {
+      '&:last-child': {
         justifyContent: 'flex-end',
         '& .MuiDataGrid-colCellTitleContainer': {
           order: 1,
@@ -842,6 +866,10 @@ const useStyles = M.makeStyles((t) => ({
     alignItems: 'center',
     display: 'flex',
   },
+  ellipsis: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
   icon: {
     fontSize: t.typography.body1.fontSize,
     marginRight: t.spacing(0.5),
@@ -858,6 +886,11 @@ interface ListingProps {
   prefixFilter?: string
   toolbarContents?: React.ReactNode
   loadMore?: () => void
+  selection?: DG.GridRowId[]
+  onSelectionChange?: (newSelection: DG.GridRowId[]) => void
+  CellComponent?: React.ComponentType<CellProps>
+  RootComponent?: React.ElementType<{ className: string }>
+  className?: string
 }
 
 export function Listing({
@@ -867,6 +900,11 @@ export function Listing({
   toolbarContents,
   prefixFilter,
   loadMore,
+  selection,
+  onSelectionChange,
+  CellComponent = Cell,
+  RootComponent = M.Paper,
+  className,
 }: ListingProps) {
   const classes = useStyles()
 
@@ -879,6 +917,7 @@ export function Listing({
     [setFilteredToZero],
   )
 
+  // disableClickEventBubbling: true?
   const columns: DG.GridColumns = React.useMemo(
     () => [
       {
@@ -904,20 +943,20 @@ export function Listing({
         renderCell: (params: DG.GridCellParams) => {
           const i = (params.row as unknown) as Item
           return (
-            <Link
-              to={i.to}
+            <CellComponent
+              item={i}
+              title={i.archived ? 'Object archived' : undefined}
               className={cx(
                 classes.link,
                 classes.linkFlex,
                 i.archived && classes.archived,
               )}
-              title={i.archived ? 'Object archived' : undefined}
             >
               <M.Icon className={classes.icon}>
                 {i.type === 'file' ? 'insert_drive_file' : 'folder_open'}
               </M.Icon>
-              {i.name || EMPTY}
-            </Link>
+              <span className={classes.ellipsis}>{i.name || EMPTY}</span>
+            </CellComponent>
           )
         },
       },
@@ -938,13 +977,13 @@ export function Listing({
         renderCell: (params: DG.GridCellParams) => {
           const i = (params.row as unknown) as Item
           return (
-            <Link
-              to={i.to}
+            <CellComponent
+              item={i}
               className={cx(classes.link, i.archived && classes.archived)}
               title={i.archived ? 'Object archived' : undefined}
             >
               {i.size == null ? <>&nbsp;</> : readableBytes(i.size)}
-            </Link>
+            </CellComponent>
           )
         },
       },
@@ -957,18 +996,18 @@ export function Listing({
         renderCell: (params: DG.GridCellParams) => {
           const i = (params.row as unknown) as Item
           return (
-            <Link
-              to={i.to}
+            <CellComponent
+              item={i}
               className={cx(classes.link, i.archived && classes.archived)}
               title={i.archived ? 'Object archived' : undefined}
             >
               {i.modified == null ? <>&nbsp;</> : i.modified.toLocaleString()}
-            </Link>
+            </CellComponent>
           )
         },
       },
     ],
-    [classes],
+    [classes, CellComponent],
   )
 
   const noRowsLabel = `No files / directories${
@@ -978,9 +1017,16 @@ export function Listing({
   // abuse loading overlay to show warning when all the items are filtered-out
   const LoadingOverlay = !locked && filteredToZero ? FilteredOverlay : undefined
 
+  const handleSelectionModelChange = React.useCallback(
+    (newSelection: DG.GridSelectionModelChangeParams) => {
+      if (onSelectionChange) onSelectionChange(newSelection.selectionModel)
+    },
+    [onSelectionChange],
+  )
+
   // TODO: control page, pageSize, filtering and sorting via props
   return (
-    <M.Paper className={classes.root}>
+    <RootComponent className={cx(classes.root, className)}>
       <DataGrid
         onFilterModelChange={handleFilterModelChange}
         className={cx(classes.grid, locked && classes.locked)}
@@ -1001,15 +1047,20 @@ export function Listing({
         loading={locked || filteredToZero}
         headerHeight={36}
         rowHeight={36}
+        // TODO: re-enable?
         disableSelectionOnClick
         disableColumnSelector
         disableColumnResize
         disableColumnReorder
         disableMultipleSelection
         disableMultipleColumnsSorting
         localeText={{ noRowsLabel, ...localeText }}
+        // selection-related props
+        checkboxSelection={!!onSelectionChange}
+        selectionModel={selection}
+        onSelectionModelChange={handleSelectionModelChange}
       />
-    </M.Paper>
+    </RootComponent>
   )
 }