Show "Create package" button on List view (the same as on Table view)

catalog/CHANGELOG.md

@@ -18,6 +18,7 @@ where verb is one of
 
 ## Changes
 
+- [Changed] Improve handling of no results on packages tab ([#4539](https://github.com/quiltdata/quilt/pull/4539))
 - [Changed] Removed unnecessary blocks and buttons from deleted file page ([#4544](https://github.com/quiltdata/quilt/pull/4544))
 - [Added] File upload and deletion functionality to manage files directly in buckets ([#4455](https://github.com/quiltdata/quilt/pull/4455))
 - [Changed] Refactor toolbar layout in Bucket tab for improved consistency and maintainability ([#4455](https://github.com/quiltdata/quilt/pull/4455))

catalog/app/containers/Bucket/PackageList.tsx

@@ -86,18 +86,15 @@ function PackageList({ bucket }: PackageListProps) {
     [inputEl, goToGlobalSearchUrl, resultType, clearFilters, setResultType, reset],
   )
 
+  const emptySlot = <NoPackages bucket={bucket} onRefine={handleRefine} />
   return (
     <>
       <MetaTitle>{titleSegments}</MetaTitle>
       <Main inputRef={setInputEl}>
         {tableView ? (
-          <TableResults
-            bucket={bucket}
-            emptyFallback={<NoPackages bucket={bucket} onRefine={handleRefine} />}
-            onRefine={handleRefine}
-          />
+          <TableResults bucket={bucket} emptySlot={emptySlot} onRefine={handleRefine} />
         ) : (
-          <ListResults onRefine={handleRefine} />
+          <ListResults emptySlot={emptySlot} onRefine={handleRefine} />
         )}
       </Main>
     </>

catalog/app/containers/Search/Layout/Results.tsx

@@ -232,6 +232,7 @@ interface ResultsProps {
 
 export default function Results({ onFilters }: ResultsProps) {
   const model = SearchUIModel.use()
+  const r = model.firstPageQuery
   const classes = useResultsStyles()
   const { paths } = NamedRoutes.use()
   return (
@@ -243,7 +244,11 @@ export default function Results({ onFilters }: ResultsProps) {
       <div className={classes.controls}>
         <RRDom.Switch>
           <RRDom.Route path={paths.bucketRoot}>
-            <CreatePackage className={classes.create} />
+            {r._tag === 'data' &&
+              (r.data.__typename === 'ObjectsSearchResultSet' ||
+                r.data.__typename === 'PackagesSearchResultSet') && (
+                <CreatePackage className={classes.create} />
+              )}
           </RRDom.Route>
         </RRDom.Switch>
 

catalog/app/containers/Search/List/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`containers/Search/List/index when has results renders ObjectsSearchResultSet with object hits 1`] = `
+<div>
+  <div>
+    <div>
+      Object: 
+      data/file1.csv
+    </div>
+    <div>
+      Object: 
+      data/file2.json
+    </div>
+  </div>
+</div>
+`;
+
+exports[`containers/Search/List/index when has results renders PackagesSearchResultSet with empty hits and secure search 1`] = `
+<div>
+  <div>
+    <section>
+      <h1>
+        This is secure search.
+      </h1>
+      <p>
+        We don't know in advance if users have access to each individual result
+      </p>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`containers/Search/List/index when has results renders PackagesSearchResultSet with package hits 1`] = `
+<div>
+  <div>
+    <div>
+      Package: 
+      package-1
+      #
+      abc123
+    </div>
+    <div>
+      Package: 
+      package-2
+      #
+      def456
+    </div>
+  </div>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders empty slot for EmptySearchResultSet 1`] = `
+<div>
+  <div>
+    No results
+  </div>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders error for InputError 1`] = `
+<div>
+  <section>
+    <h1>
+      Unexpected error
+    </h1>
+    <details>
+      Invalid input at 
+      <code>
+        search.query
+      </code>
+      : 
+      ValidationError
+      <br />
+      Invalid search syntax
+    </details>
+  </section>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders error for error state 1`] = `
+<div>
+  <section>
+    <h1>
+      Unexpected error
+    </h1>
+    <details>
+      Network error
+    </details>
+  </section>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders operation error for other OperationError 1`] = `
+<div>
+  <section>
+    <h1>
+      Unexpected error
+    </h1>
+    <details>
+      Operation error: 
+      Internal server error
+    </details>
+  </section>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders skeleton for fetching state 1`] = `
+<div>
+  <div>
+    Loading…
+  </div>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders syntax error for QuerySyntaxError 1`] = `
+<div>
+  <section>
+    <h1>
+      Syntax error
+    </h1>
+    <details>
+      Syntax error in query
+    </details>
+  </section>
+</div>
+`;
+
+exports[`containers/Search/List/index when no results renders timeout error for OperationError with Timeout 1`] = `
+<div>
+  <section>
+    <h1>
+      Timeout error
+    </h1>
+    <details />
+  </section>
+</div>
+`;