Don't support packages in out-of-stack-buckets (#2641)

quiltdata · Jan 27, 2022 · 2fa68a7 · 2fa68a7
1 parent dba9289
commit 2fa68a7
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 34 deletions.
diff --git a/catalog/app/containers/Bucket/PackageList/PackageList.tsx b/catalog/app/containers/Bucket/PackageList/PackageList.tsx
@@ -24,6 +24,7 @@ import useQuery from 'utils/useQuery'
 
 import { usePackageCreateDialog } from '../PackageCreateDialog'
 import Pagination from '../Pagination'
+import WithPackagesSupport from '../WithPackagesSupport'
 import { displayError } from '../errors'
 
 import PACKAGE_COUNT_QUERY from './gql/PackageCount.generated'
@@ -345,20 +346,20 @@ const useStyles = M.makeStyles((t) => ({
   },
 }))
 
-export default function PackageList({
-  match: {
-    params: { bucket },
-  },
-  location,
-}: RRDom.RouteComponentProps<{ bucket: string }>) {
+interface PackageListProps {
+  bucket: string
+  sort?: string
+  filter?: string
+  page?: number
+}
+
+function PackageList({ bucket, sort, filter, page }: PackageListProps) {
   const history = RRDom.useHistory()
   const { urls } = NamedRoutes.use()
   const classes = useStyles()
 
   const scrollRef = React.useRef<HTMLDivElement | null>(null)
 
-  const { sort, filter, p } = parseSearch(location.search, true)
-  const page = p ? parseInt(p, 10) : undefined
   const computedPage = page || 1
   const computedSort = getSort(sort)
   const computedFilter = filter || ''
@@ -450,8 +451,6 @@ export default function PackageList({
 
   return (
     <>
-      <MetaTitle>{['Packages', bucket]}</MetaTitle>
-
       {createDialog.element}
 
       {totalCountQuery.case({
@@ -491,8 +490,7 @@ export default function PackageList({
         ),
         error: displayError(),
         data: (totalCountData) => {
-          const totalCount = totalCountData.packages?.total
-          if (!totalCount) {
+          if (!totalCountData.packages?.total) {
             return (
               <M.Box pt={5} textAlign="center">
                 <M.Typography variant="h4">No packages</M.Typography>
@@ -628,6 +626,24 @@ export default function PackageList({
   )
 }
 
+export default function PackageListWrapper({
+  match: {
+    params: { bucket },
+  },
+  location,
+}: RRDom.RouteComponentProps<{ bucket: string }>) {
+  const { sort, filter, p } = parseSearch(location.search, true)
+  const page = p ? parseInt(p, 10) : undefined
+  return (
+    <>
+      <MetaTitle>{['Packages', bucket]}</MetaTitle>
+      <WithPackagesSupport bucket={bucket}>
+        <PackageList {...{ bucket, sort, filter, page }} />
+      </WithPackagesSupport>
+    </>
+  )
+}
+
 /* TODO: optimize LinkedData fetching
 {!!bucketCfg &&
   (packages && []).map(({ name }) => (

diff --git a/catalog/app/containers/Bucket/PackageRevisions/PackageRevisions.tsx b/catalog/app/containers/Bucket/PackageRevisions/PackageRevisions.tsx
@@ -23,6 +23,7 @@ import useQuery from 'utils/useQuery'
 
 import { usePackageUpdateDialog } from '../PackageUpdateDialog'
 import Pagination from '../Pagination'
+import WithPackagesSupport from '../WithPackagesSupport'
 import { displayError } from '../errors'
 
 import REVISION_COUNT_QUERY from './gql/RevisionCount.generated'
@@ -398,17 +399,16 @@ function Revision({
 
 const renderRevisionSkeletons = R.times((i) => <RevisionSkel key={i} />)
 
-export default function PackageRevisions({
-  match: {
-    params: { bucket, name },
-  },
-  location,
-}: RRDom.RouteComponentProps<{ bucket: string; name: string }>) {
+interface PackageRevisionsProps {
+  bucket: string
+  name: string
+  page?: number
+}
+
+export function PackageRevisions({ bucket, name, page }: PackageRevisionsProps) {
   const preferences = BucketPreferences.use()
   const { urls } = NamedRoutes.use()
 
-  const { p } = parseSearch(location.search, true)
-  const page = p ? parseInt(p, 10) : undefined
   const actualPage = page || 1
 
   const makePageUrl = React.useCallback(
@@ -458,8 +458,6 @@ export default function PackageRevisions({
 
   return (
     <M.Box pb={{ xs: 0, sm: 5 }} mx={{ xs: -2, sm: 0 }}>
-      <MetaTitle>{[name, bucket]}</MetaTitle>
-
       {updateDialog.element}
 
       <M.Box
@@ -525,6 +523,24 @@ export default function PackageRevisions({
   )
 }
 
+export default function PackageRevisionsWrapper({
+  match: {
+    params: { bucket, name },
+  },
+  location,
+}: RRDom.RouteComponentProps<{ bucket: string; name: string }>) {
+  const { p } = parseSearch(location.search, true)
+  const page = p ? parseInt(p, 10) : undefined
+  return (
+    <>
+      <MetaTitle>{[name, bucket]}</MetaTitle>
+      <WithPackagesSupport bucket={bucket}>
+        <PackageRevisions {...{ bucket, name, page }} />
+      </WithPackagesSupport>
+    </>
+  )
+}
+
 // TODO: restore linked data
 /*
 {!!bucketCfg &&

diff --git a/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx b/catalog/app/containers/Bucket/PackageTree/PackageTree.tsx
@@ -40,6 +40,7 @@ import * as PD from '../PackageDialog'
 import { usePackageUpdateDialog } from '../PackageUpdateDialog'
 import Section from '../Section'
 import Summary from '../Summary'
+import WithPackagesSupport from '../WithPackagesSupport'
 import * as errors from '../errors'
 import renderPreview from '../renderPreview'
 import * as requests from '../requests'
@@ -692,7 +693,6 @@ function PackageTree({
 
   return (
     <FileView.Root>
-      <MetaTitle>{[`${name}@${R.take(10, hashOrTag)}/${path}`, bucket]}</MetaTitle>
       {/* TODO: bring back linked data after re-implementing it using graphql
       {!!bucketCfg &&
         revisionData.case({
@@ -777,21 +777,23 @@ function PackageTree({
   )
 }
 
-interface PackageTreeRouteParams {
+interface PackageTreeQueriesProps {
   bucket: string
   name: string
-  revision?: string
-  path?: string
+  hashOrTag: string
+  path: string
+  resolvedFrom?: string
+  mode?: string
 }
 
-export default function PackageTreeWrapper({
-  match: {
-    params: { bucket, name, revision: hashOrTag = 'latest', path: encodedPath = '' },
-  },
-  location,
-}: RRDom.RouteComponentProps<PackageTreeRouteParams>) {
-  const path = s3paths.decode(encodedPath)
-  const { resolvedFrom, mode } = parseSearch(location.search, true)
+function PackageTreeQueries({
+  bucket,
+  name,
+  hashOrTag,
+  path,
+  resolvedFrom,
+  mode,
+}: PackageTreeQueriesProps) {
   const revisionQuery = useQuery({
     query: REVISION_QUERY,
     variables: { bucket, name, hashOrTag },
@@ -847,3 +849,28 @@ export default function PackageTreeWrapper({
     />
   )
 }
+
+interface PackageTreeRouteParams {
+  bucket: string
+  name: string
+  revision?: string
+  path?: string
+}
+
+export default function PackageTreeWrapper({
+  match: {
+    params: { bucket, name, revision: hashOrTag = 'latest', path: encodedPath = '' },
+  },
+  location,
+}: RRDom.RouteComponentProps<PackageTreeRouteParams>) {
+  const path = s3paths.decode(encodedPath)
+  const { resolvedFrom, mode } = parseSearch(location.search, true)
+  return (
+    <>
+      <MetaTitle>{[`${name}@${R.take(10, hashOrTag)}/${path}`, bucket]}</MetaTitle>
+      <WithPackagesSupport bucket={bucket}>
+        <PackageTreeQueries {...{ bucket, name, hashOrTag, path, resolvedFrom, mode }} />
+      </WithPackagesSupport>
+    </>
+  )
+}
diff --git a/catalog/app/containers/Bucket/WithPackagesSupport.tsx b/catalog/app/containers/Bucket/WithPackagesSupport.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+import Message from 'components/Message'
+import { docs } from 'constants/urls'
+import * as BucketConfig from 'utils/BucketConfig'
+import * as Config from 'utils/Config'
+import StyledLink from 'utils/StyledLink'
+
+const ADD_BUCKET_DOCS = `${docs}/catalog/admin#buckets`
+
+interface WithPackagesSupportProps {
+  bucket: string
+  children: React.ReactNode
+}
+
+export default function WithPackagesSupport({
+  bucket,
+  children,
+}: WithPackagesSupportProps) {
+  const localMode = Config.use().mode === 'LOCAL'
+  const isInStack = BucketConfig.useIsInStack()
+  const inStack = React.useMemo(() => isInStack(bucket), [bucket, isInStack])
+
+  return inStack || localMode ? (
+    <>{children}</>
+  ) : (
+    <Message headline="Packages not supported">
+      Catalog does not support listing packages in out-of-stack buckets.
+      <br />
+      <StyledLink href={ADD_BUCKET_DOCS} target="_blank">
+        Learn how to add this bucket to Quilt
+      </StyledLink>{' '}
+      to see the packages in it.
+    </Message>
+  )
+}
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -19,6 +19,7 @@
 * [Changed] Local-mode-specific adjustments to landing page and catalog UI ([#2611](https://github.com/quiltdata/quilt/pull/2611))
 * [Changed] PDF preview: count pages again ([#2621](https://github.com/quiltdata/quilt/pull/2621))
 * [Changed] Make Vega download data files from S3 via proxy to avoid CORS issues ([#2631](https://github.com/quiltdata/quilt/pull/2631))
+* [Changed] Don't support packages in out-of-stack-buckets ([#2641](https://github.com/quiltdata/quilt/pull/2641))
 * [Fixed] Improve upload performance and stability, fix some hashing-related errors ([#2532](https://github.com/quiltdata/quilt/pull/2532))
 * [Added] Echarts renderer ([#2382](https://github.com/quiltdata/quilt/pull/2382))
 * [Added] Set height for `quilt_summarize.json` files ([#2474](https://github.com/quiltdata/quilt/pull/2474))