add file param to download package

quiltdata · Oct 8, 2024 · 4364963 · 4364963
1 parent fbb608f
commit 4364963
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 13 deletions.
diff --git a/.github/workflows/deploy-catalog.yaml b/.github/workflows/deploy-catalog.yaml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - selective-package-download
     paths:
       - '.github/workflows/deploy-catalog.yaml'
       - 'catalog/**'

diff --git a/catalog/app/containers/Bucket/FileView.js b/catalog/app/containers/Bucket/FileView.js
@@ -49,7 +49,13 @@ export function ViewModeSelector({ className, ...props }) {
 }
 
 /** Child button must have `type="submit"` */
-export function ZipDownloadForm({ className = '', suffix, children, newTab = false }) {
+export function ZipDownloadForm({
+  className = '',
+  suffix,
+  children,
+  newTab = false,
+  files = [],
+}) {
   const { token } = redux.useSelector(tokensSelector) || {}
   if (!token || cfg.noDownload) return null
   const action = `${cfg.s3Proxy}/zip/${suffix}`
@@ -62,6 +68,9 @@ export function ZipDownloadForm({ className = '', suffix, children, newTab = fal
       style={{ flexShrink: 0 }}
     >
       <input type="hidden" name="token" value={token} />
+      {files.map((file) => (
+        <input type="hidden" name="file" value={file} key={file} />
+      ))}
       {children}
     </form>
   )

diff --git a/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx b/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx
@@ -26,6 +26,7 @@ import MetaTitle from 'utils/MetaTitle'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import assertNever from 'utils/assertNever'
 import parseSearch from 'utils/parseSearch'
+import type { PackageHandle } from 'utils/packageHandle'
 import * as s3paths from 'utils/s3paths'
 import usePrevious from 'utils/usePrevious'
 import * as workflows from 'utils/workflows'
@@ -115,11 +116,17 @@ const useSelectionWidgetStyles = M.makeStyles({
 
 interface SelectionWidgetProps {
   className: string
-  selection: Selection.ListingSelection
   onSelection: (changed: Selection.ListingSelection) => void
+  packageHandle: PackageHandle
+  selection: Selection.ListingSelection
 }
 
-function SelectionWidget({ className, selection, onSelection }: SelectionWidgetProps) {
+function SelectionWidget({
+  className,
+  packageHandle,
+  selection,
+  onSelection,
+}: SelectionWidgetProps) {
   const classes = useSelectionWidgetStyles()
   const location = RRDom.useLocation()
   const count = Object.values(selection).reduce((memo, ids) => memo + ids.length, 0)
@@ -156,7 +163,7 @@ function SelectionWidget({ className, selection, onSelection }: SelectionWidgetP
           <Selection.Dashboard
             onDone={close}
             onSelection={onSelection}
-            packages
+            packageHandle={packageHandle}
             selection={selection}
           />
         </M.DialogContent>
@@ -411,8 +418,9 @@ function DirDisplay({
                       <>
                         <SelectionWidget
                           className={classes.button}
-                          selection={selection}
                           onSelection={onSelection}
+                          packageHandle={packageHandle}
+                          selection={selection}
                         />
                         {actions.revisePackage && (
                           <M.Button

diff --git a/catalog/app/containers/Bucket/Selection/Dashboard.tsx b/catalog/app/containers/Bucket/Selection/Dashboard.tsx
@@ -5,13 +5,17 @@ import * as R from 'ramda'
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
+import * as Buttons from 'components/Buttons'
 import * as Bookmarks from 'containers/Bookmarks/Provider'
 import type * as Model from 'model'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import StyledLink from 'utils/StyledLink'
+import type { PackageHandle } from 'utils/packageHandle'
 import * as s3paths from 'utils/s3paths'
 
-import { EMPTY_MAP, ListingSelection, toHandlesMap } from './utils'
+import * as FileView from '../FileView'
+
+import { EMPTY_MAP, ListingSelection, toHandlesMap, toHandlesList } from './utils'
 
 const useEmptyStateStyles = M.makeStyles((t) => ({
   root: {
@@ -100,11 +104,17 @@ const useStyles = M.makeStyles((t) => ({
   root: {
     background: t.palette.background.paper,
   },
+  buttons: {
+    display: 'flex',
+  },
   button: {
     '& + &': {
       marginLeft: t.spacing(1),
     },
   },
+  divider: {
+    marginTop: t.spacing(2),
+  },
   list: {
     background: t.palette.background.paper,
     maxHeight: '50vh',
@@ -128,23 +138,25 @@ interface DashboardProps {
   onDone: () => void
   onSelection: (changed: ListingSelection) => void
   selection: ListingSelection
-  packages?: boolean
+  packageHandle?: PackageHandle
 }
 
+// TODO: BucketPreferences
+
 export default function Dashboard({
   onDone,
   onSelection,
   selection,
-  packages = false,
+  packageHandle,
 }: DashboardProps) {
   const classes = useStyles()
   const lists = React.useMemo(() => toHandlesMap(selection), [selection])
   const hasSelection = Object.values(selection).some((ids) => !!ids.length)
 
   const bookmarksCtx = Bookmarks.use()
   const bookmarks = React.useMemo(
-    () => !packages && bookmarksCtx,
-    [packages, bookmarksCtx],
+    () => !packageHandle && bookmarksCtx,
+    [packageHandle, bookmarksCtx],
   )
   const hasSomethingToBookmark = React.useMemo(
     () =>
@@ -182,7 +194,7 @@ export default function Dashboard({
 
   return (
     <div className={classes.root}>
-      <>
+      <div className={classes.buttons}>
         {bookmarks && (
           <M.Button
             className={classes.button}
@@ -195,6 +207,15 @@ export default function Dashboard({
             {hasSomethingToBookmark ? 'Add to bookmarks' : 'Remove from bookmarks'}
           </M.Button>
         )}
+        {!!packageHandle && (
+          <FileView.ZipDownloadForm
+            suffix={`package/${packageHandle.bucket}/${packageHandle.name}/${packageHandle.hash}`}
+            className={classes.button}
+            files={toHandlesList(selection).map(({ key }) => key)}
+          >
+            <Buttons.Iconized label="Download selected" icon="archive" type="submit" />
+          </FileView.ZipDownloadForm>
+        )}
         <M.Button
           className={classes.button}
           color="primary"
@@ -205,8 +226,8 @@ export default function Dashboard({
         >
           Clear selection
         </M.Button>
-        <M.Divider style={{ marginTop: '16px' }} />
-      </>
+      </div>
+      <M.Divider style={{ marginTop: '16px' }} />
       {hasSelection ? (
         <M.List dense disablePadding className={classes.list}>
           {Object.entries(lists).map(([prefixUrl, handles]) =>