Handle invalid bucket in S3Filepicker and don't load listing when clo…

…sed (#4242)

catalog/CHANGELOG.md

@@ -17,6 +17,7 @@ where verb is one of
 
 ## Changes
 
+- [Fixed] Handle invalid bucket name in `ui.sourceBuckets` in bucket config ([#4242](https://github.com/quiltdata/quilt/pull/4242))
 - [Added] Preview Markdown while editing ([#4153](https://github.com/quiltdata/quilt/pull/4153))
 - [Changed] Athena: hide data catalogs user doesn't have access to ([#4239](https://github.com/quiltdata/quilt/pull/4239))
 - [Added] Enable MixPanel tracking in Embed mode ([#4237](https://github.com/quiltdata/quilt/pull/4237))

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

@@ -1,3 +1,4 @@
+import type { AWSError } from 'aws-sdk'
 import invariant from 'invariant'
 import cx from 'classnames'
 import * as R from 'ramda'
@@ -210,7 +211,19 @@ export function Dialog({ bucket, buckets, selectBucket, open, onClose }: DialogP
     [selectBucket],
   )
 
-  const data = useData(bucketListing, { bucket, path, prefix, prev, drain: true })
+  const data = useData(
+    bucketListing,
+    {
+      bucket,
+      path,
+      prefix,
+      prev,
+      drain: true,
+    },
+    {
+      noAutoFetch: !open,
+    },
+  )
 
   const loadMore = React.useCallback(() => {
     AsyncResult.case(
@@ -275,7 +288,16 @@ export function Dialog({ bucket, buckets, selectBucket, open, onClose }: DialogP
       </div>
       {data.case({
         // TODO: customized error display?
-        Err: displayError(),
+        Err: displayError([
+          [
+            (e: unknown) => (e as AWSError)?.code === 'InvalidBucketName',
+            (e: AWSError) => (
+              <M.Box m={2}>
+                <M.Typography>{e.message}</M.Typography>
+              </M.Box>
+            ),
+          ],
+        ]),
         Init: () => null,
         _: (x: $TSFixMe) => {
           const res: requests.BucketListingResult | null = AsyncResult.getPrevResult(x)