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}