Fix embed listing (#4236)

catalog/CHANGELOG.md

@@ -17,6 +17,7 @@ where verb is one of
 
 ## Changes
 
+- [Fixed] Fix embed files listing ([#4236](https://github.com/quiltdata/quilt/pull/4236))
 - [Changed] Qurator: switch to Claude 3.5 Sonnet **v2** ([#4234](https://github.com/quiltdata/quilt/pull/4234))
 - [Changed] Add `catalog` fragment to Quilt+ URIs (and to documentation) ([#4213](https://github.com/quiltdata/quilt/pull/4213))
 - [Fixed] Athena: fix minor UI bugs ([#4232](https://github.com/quiltdata/quilt/pull/4232))

catalog/app/containers/Bucket/Dir.tsx

@@ -214,6 +214,7 @@ export default function Dir() {
   }, [data.result])
 
   const slt = Selection.use()
+  invariant(slt.inited, 'Selection must be used within a Selection.Provider')
   const handleSelection = React.useCallback(
     (ids) => slt.merge(ids, bucket, path, prefix),
     [bucket, path, prefix, slt],

catalog/app/containers/Bucket/Listing.tsx

@@ -1038,8 +1038,8 @@ interface ListingProps {
   prefixFilter?: string
   toolbarContents?: React.ReactNode
   loadMore?: () => void
-  selection: Selection.SelectionItem[]
-  onSelectionChange: (newSelection: Selection.SelectionItem[]) => void
+  selection?: Selection.SelectionItem[]
+  onSelectionChange?: (newSelection: Selection.SelectionItem[]) => void
   CellComponent?: React.ComponentType<CellProps>
   RootComponent?: React.ElementType<{ className: string }>
   className?: string
@@ -1233,7 +1233,7 @@ export function Listing({
   )
 
   const selectionModel = React.useMemo(
-    () => selection.map(({ logicalKey }) => s3paths.ensureNoSlash(logicalKey)),
+    () => selection?.map(({ logicalKey }) => s3paths.ensureNoSlash(logicalKey)),
     [selection],
   )
 
@@ -1267,7 +1267,7 @@ export function Listing({
         disableMultipleSelection
         disableMultipleColumnsSorting
         localeText={{ noRowsLabel, ...localeText }}
-        checkboxSelection
+        checkboxSelection={!!selectionModel}
         selectionModel={selectionModel}
         onSelectionModelChange={handleSelectionModelChange}
         {...dataGridProps}

catalog/app/containers/Bucket/PackageDialog/S3FilePicker.tsx

@@ -1,3 +1,4 @@
+import invariant from 'invariant'
 import cx from 'classnames'
 import * as R from 'ramda'
 import * as React from 'react'
@@ -174,6 +175,7 @@ export function Dialog({ bucket, buckets, selectBucket, open, onClose }: DialogP
   const [prefix, setPrefix] = React.useState('')
   const [prev, setPrev] = React.useState<requests.BucketListingResult | null>(null)
   const slt = Selection.use()
+  invariant(slt.inited, 'Selection must be used within an Selection.Provider')
 
   const [locked, setLocked] = React.useState(false)
 

catalog/app/containers/Bucket/PackageTree/PackageTree.tsx

@@ -282,6 +282,7 @@ function DirDisplay({
 
   const prompt = FileEditor.useCreateFileInPackage(packageHandle, path)
   const slt = Selection.use()
+  invariant(slt.inited, 'Selection must be used within a Selection.Provider')
   const handleSelection = React.useCallback(
     (ids) => slt.merge(ids, bucket, path),
     [bucket, path, slt],
@@ -960,6 +961,7 @@ function PackageTree({
   })
 
   const slt = Selection.use()
+  invariant(slt.inited, 'Selection must be used within a Selection.Provider')
   const guardNavigation = React.useCallback(
     (location) =>
       isStillBrowsingPackage(urls, location.pathname, {

catalog/app/containers/Bucket/Selection/Provider.tsx

@@ -1,10 +1,10 @@
-import invariant from 'invariant'
 import * as R from 'ramda'
 import * as React from 'react'
 
 import { EMPTY_MAP, ListingSelection, SelectionItem, merge } from './utils'
 
 interface State {
+  inited: boolean
   clear: () => void
   isEmpty: boolean
   merge: (items: SelectionItem[], bucket: string, path: string, filter?: string) => void
@@ -13,7 +13,22 @@ interface State {
   totalCount: number
 }
 
-const Ctx = React.createContext<State | null>(null)
+const dummy = () => {
+  new Error('Selection provider not initialized')
+}
+
+const Ctx = React.createContext<State>({
+  inited: false,
+  clear: dummy,
+  isEmpty: true,
+  merge: dummy,
+  remove: () => {
+    dummy()
+    return { isEmpty: true }
+  },
+  selection: EMPTY_MAP,
+  totalCount: 0,
+})
 
 interface ProviderProps {
   children: React.ReactNode
@@ -42,6 +57,7 @@ export function Provider({ children }: ProviderProps) {
   )
   const state = React.useMemo(
     () => ({
+      inited: true,
       clear,
       isEmpty: totalCount === 0,
       merge: handleMerge,
@@ -54,10 +70,6 @@ export function Provider({ children }: ProviderProps) {
   return <Ctx.Provider value={state}>{children}</Ctx.Provider>
 }
 
-export const useSelection = () => {
-  const state = React.useContext(Ctx)
-  invariant(state, 'Selection must be used within an Selection.Provider')
-  return state
-}
+export const useSelection = () => React.useContext(Ctx)
 
 export const use = useSelection