Hide Bucket's tab (#2105)

quiltdata · Mar 22, 2021 · cf0c1dc · cf0c1dc
1 parent 6ab1b11
commit cf0c1dc
Show file tree

Hide file tree

Showing 19 changed files with 473 additions and 106 deletions.
diff --git a/catalog/app/containers/Bucket/Bucket.js b/catalog/app/containers/Bucket/Bucket.js
@@ -1,16 +1,17 @@
 import * as R from 'ramda'
 import * as React from 'react'
-import { Link, Route, Switch, matchPath } from 'react-router-dom'
-import * as RC from 'recompose'
+import { Route, Switch, matchPath } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import Layout from 'components/Layout'
 import Placeholder from 'components/Placeholder'
 import { ThrowNotFound } from 'containers/NotFoundPage'
 import { useBucketExistence } from 'utils/BucketCache'
 import * as NamedRoutes from 'utils/NamedRoutes'
+import * as BucketPreferences from 'utils/BucketPreferences'
 import * as RT from 'utils/reactTools'
 
+import BucketNav from './BucketNav'
 import { displayError } from './errors'
 
 const mkLazy = (load) =>
@@ -55,18 +56,6 @@ const getBucketSection = (paths) =>
     ),
   )
 
-const NavTab = RT.composeComponent(
-  'Bucket.Layout.Tab',
-  M.withStyles((t) => ({
-    root: {
-      minHeight: t.spacing(8),
-      minWidth: 120,
-    },
-  })),
-  RC.withProps({ component: Link }),
-  M.Tab,
-)
-
 const useStyles = M.makeStyles((t) => ({
   appBar: {
     backgroundColor: t.palette.common.white,
@@ -75,31 +64,14 @@ const useStyles = M.makeStyles((t) => ({
 }))
 
 function BucketLayout({ bucket, section = false, children }) {
-  const { urls } = NamedRoutes.use()
   const classes = useStyles()
   const bucketExistenceData = useBucketExistence(bucket)
   return (
     <Layout
       pre={
         <>
           <M.AppBar position="static" className={classes.appBar}>
-            <M.Tabs value={section} centered>
-              <NavTab
-                label="Overview"
-                value="overview"
-                to={urls.bucketOverview(bucket)}
-              />
-              <NavTab label="Files" value="tree" to={urls.bucketDir(bucket)} />
-              <NavTab
-                label="Packages"
-                value="packages"
-                to={urls.bucketPackageList(bucket)}
-              />
-              <NavTab label="Queries" value="queries" to={urls.bucketQueries(bucket)} />
-              {section === 'search' && (
-                <NavTab label="Search" value="search" to={urls.bucketSearch(bucket)} />
-              )}
-            </M.Tabs>
+            <BucketNav bucket={bucket} section={section} />
           </M.AppBar>
           <M.Container maxWidth="lg">
             {bucketExistenceData.case({
@@ -122,19 +94,21 @@ export default function Bucket({
 }) {
   const { paths } = NamedRoutes.use()
   return (
-    <BucketLayout bucket={bucket} section={getBucketSection(paths)(location.pathname)}>
-      <Switch>
-        <Route path={paths.bucketFile} component={File} exact strict />
-        <Route path={paths.bucketDir} component={Dir} exact />
-        <Route path={paths.bucketOverview} component={Overview} exact />
-        <Route path={paths.bucketSearch} component={Search} exact />
-        <Route path={paths.bucketPackageList} component={PackageList} exact />
-        <Route path={paths.bucketPackageDetail} component={PackageTree} exact />
-        <Route path={paths.bucketPackageTree} component={PackageTree} exact />
-        <Route path={paths.bucketPackageRevisions} component={PackageRevisions} exact />
-        <Route path={paths.bucketQueries} component={Queries} exact />
-        <Route component={ThrowNotFound} />
-      </Switch>
-    </BucketLayout>
+    <BucketPreferences.Provider bucket={bucket}>
+      <BucketLayout bucket={bucket} section={getBucketSection(paths)(location.pathname)}>
+        <Switch>
+          <Route path={paths.bucketFile} component={File} exact strict />
+          <Route path={paths.bucketDir} component={Dir} exact />
+          <Route path={paths.bucketOverview} component={Overview} exact />
+          <Route path={paths.bucketSearch} component={Search} exact />
+          <Route path={paths.bucketPackageList} component={PackageList} exact />
+          <Route path={paths.bucketPackageDetail} component={PackageTree} exact />
+          <Route path={paths.bucketPackageTree} component={PackageTree} exact />
+          <Route path={paths.bucketPackageRevisions} component={PackageRevisions} exact />
+          <Route path={paths.bucketQueries} component={Queries} exact />
+          <Route component={ThrowNotFound} />
+        </Switch>
+      </BucketLayout>
+    </BucketPreferences.Provider>
   )
 }
diff --git a/catalog/app/containers/Bucket/BucketNav.tsx b/catalog/app/containers/Bucket/BucketNav.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+import * as M from '@material-ui/core'
+
+import Skeleton from 'components/Skeleton'
+import * as NamedRoutes from 'utils/NamedRoutes'
+import * as BucketPreferences from 'utils/BucketPreferences'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    minHeight: t.spacing(8),
+    minWidth: 120,
+  },
+}))
+
+type NavTabProps = React.ComponentProps<typeof M.Tab> & React.ComponentProps<typeof Link>
+
+function NavTab(props: NavTabProps) {
+  const classes = useStyles()
+
+  return <M.Tab className={classes.root} component={Link} {...props} />
+}
+
+interface BucketNavProps {
+  bucket: string
+  section: 'overview' | 'packages' | 'queries' | 'search' | 'tree' | false // `keyof` sections object
+}
+
+const useBucketNavSkeletonStyles = M.makeStyles((t) => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  item: {
+    height: t.spacing(3),
+    margin: t.spacing(3, 3, 2),
+    width: t.spacing(10),
+  },
+}))
+
+function BucketNavSkeleton() {
+  const classes = useBucketNavSkeletonStyles()
+  return (
+    <div className={classes.root}>
+      <Skeleton className={classes.item} animate />
+      <Skeleton className={classes.item} animate />
+      <Skeleton className={classes.item} animate />
+    </div>
+  )
+}
+
+interface TabsProps {
+  bucket: string
+  preferences: BucketPreferences.NavPreferences
+  section: string | boolean
+}
+
+function Tabs({ bucket, preferences, section = false }: TabsProps) {
+  const { urls } = NamedRoutes.use()
+  return (
+    <M.Tabs value={section} centered>
+      <NavTab label="Overview" value="overview" to={urls.bucketOverview(bucket)} />
+      {preferences.files && (
+        <NavTab label="Files" value="tree" to={urls.bucketDir(bucket)} />
+      )}
+      {preferences.packages && (
+        <NavTab label="Packages" value="packages" to={urls.bucketPackageList(bucket)} />
+      )}
+      {preferences.queries && (
+        <NavTab label="Queries" value="queries" to={urls.bucketQueries(bucket)} />
+      )}
+      {section === 'search' && (
+        <NavTab label="Search" value="search" to={urls.bucketSearch(bucket)} />
+      )}
+    </M.Tabs>
+  )
+}
+
+export default function BucketNav({ bucket, section = false }: BucketNavProps) {
+  const preferences = BucketPreferences.use()
+
+  if (!preferences) return <BucketNavSkeleton />
+
+  return <Tabs bucket={bucket} preferences={preferences.ui.nav} section={section} />
+}
diff --git a/catalog/app/containers/Bucket/CopyButton.js b/catalog/app/containers/Bucket/CopyButton.js
@@ -42,7 +42,7 @@ const MenuItem = React.forwardRef(function MenuItem({ item, onClick }, ref) {
 
 function SuccessorsSelect({ anchorEl, bucket, open, onChange, onClose }) {
   const s3 = AWS.S3.use()
-  const data = useData(requests.workflowsList, { s3, bucket })
+  const data = useData(requests.workflowsConfig, { s3, bucket })
 
   return (
     <M.Menu anchorEl={anchorEl} onClose={onClose} open={open}>

diff --git a/catalog/app/containers/Bucket/Dir.js b/catalog/app/containers/Bucket/Dir.js
@@ -12,6 +12,7 @@ import * as AWS from 'utils/AWS'
 import * as Config from 'utils/Config'
 import { useData } from 'utils/Data'
 import * as NamedRoutes from 'utils/NamedRoutes'
+import * as BucketPreferences from 'utils/BucketPreferences'
 import parseSearch from 'utils/parseSearch'
 import { getBreadCrumbs, ensureNoSlash, withoutPrefix, up, decode } from 'utils/s3paths'
 
@@ -138,16 +139,20 @@ export default function Dir({
     [history, urls, bucket, path],
   )
 
+  const preferences = BucketPreferences.use()
+
   return (
     <M.Box pt={2} pb={4}>
       <M.Box display="flex" alignItems="flex-start" mb={2}>
         <div className={classes.crumbs} onCopy={copyWithoutSpaces}>
           {renderCrumbs(getCrumbs({ bucket, path, urls }))}
         </div>
         <M.Box flexGrow={1} />
-        <CopyButton bucket={bucket} onChange={setSuccessor}>
-          Create package from directory
-        </CopyButton>
+        {preferences?.ui?.actions?.createPackage && (
+          <CopyButton bucket={bucket} onChange={setSuccessor}>
+            Create package from directory
+          </CopyButton>
+        )}
         {!noDownload && (
           <>
             <M.Box ml={1} />

diff --git a/catalog/app/containers/Bucket/PackageCopyDialog.js b/catalog/app/containers/Bucket/PackageCopyDialog.js
@@ -407,7 +407,7 @@ export default function PackageCopyDialog({
   )
 
   const workflowsData = Data.use(
-    requests.workflowsList,
+    requests.workflowsConfig,
     { s3, bucket: successor ? successor.slug : '' },
     { noAutoFetch: !successor || !open },
   )

diff --git a/catalog/app/containers/Bucket/PackageCreateDialog.js b/catalog/app/containers/Bucket/PackageCreateDialog.js
@@ -754,7 +754,7 @@ function PackageCreateDialog({
 
 export default function PackageCreateDialogWrapper({ bucket, open, onClose, refresh }) {
   const s3 = AWS.S3.use()
-  const data = useData(requests.workflowsList, { s3, bucket }, { noAutoFetch: !open })
+  const data = useData(requests.workflowsConfig, { s3, bucket }, { noAutoFetch: !open })
 
   const [workflow, setWorkflow] = React.useState(null)
   const [success, setSuccess] = React.useState(false)

diff --git a/catalog/app/containers/Bucket/PackageDirectoryDialog.js b/catalog/app/containers/Bucket/PackageDirectoryDialog.js
@@ -403,7 +403,7 @@ export default function PackageDirectoryDialog({
   const [submitting, setSubmitting] = React.useState(false)
 
   const workflowsData = Data.use(
-    requests.workflowsList,
+    requests.workflowsConfig,
     { s3, bucket: successor ? successor.slug : '' },
     { noAutoFetch: !successor || !open },
   )

diff --git a/catalog/app/containers/Bucket/PackageList.js b/catalog/app/containers/Bucket/PackageList.js
@@ -17,6 +17,7 @@ import * as Data from 'utils/Data'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import StyledLink from 'utils/StyledLink'
 import * as SVG from 'utils/SVG'
+import * as BucketPreferences from 'utils/BucketPreferences'
 import parseSearch from 'utils/parseSearch'
 import { readableQuantity } from 'utils/string'
 import useDebouncedInput from 'utils/useDebouncedInput'
@@ -389,6 +390,8 @@ export default function PackageList({
     }
   })
 
+  const preferences = BucketPreferences.use()
+
   return (
     <>
       <PackageCreateDialog
@@ -436,17 +439,21 @@ export default function PackageList({
               <M.Box pt={5} textAlign="center">
                 <M.Typography variant="h4">No packages</M.Typography>
                 <M.Box pt={3} />
-                <M.Button variant="contained" color="primary" onClick={openUpload}>
-                  Create package
-                </M.Button>
-                <M.Box pt={2} />
-                <M.Typography>
-                  Or{' '}
-                  <StyledLink href={EXAMPLE_PACKAGE_URL} target="_blank">
-                    push a package
-                  </StyledLink>{' '}
-                  with the Quilt Python API.
-                </M.Typography>
+                {preferences?.ui?.actions?.createPackage && (
+                  <>
+                    <M.Button variant="contained" color="primary" onClick={openUpload}>
+                      Create package
+                    </M.Button>
+                    <M.Box pt={2} />
+                    <M.Typography>
+                      Or{' '}
+                      <StyledLink href={EXAMPLE_PACKAGE_URL} target="_blank">
+                        push a package
+                      </StyledLink>{' '}
+                      with the Quilt Python API.
+                    </M.Typography>
+                  </>
+                )}
               </M.Box>
             )
           }
@@ -482,17 +489,19 @@ export default function PackageList({
                   />
                 </M.Box>
                 <M.Box flexGrow={1} display={{ xs: 'none', sm: 'block' }} />
-                <M.Box display={{ xs: 'none', sm: 'block' }} pr={1}>
-                  <M.Button
-                    variant="contained"
-                    size="large"
-                    color="primary"
-                    style={{ paddingTop: 7, paddingBottom: 7 }}
-                    onClick={openUpload}
-                  >
-                    Create package
-                  </M.Button>
-                </M.Box>
+                {preferences?.ui?.actions?.createPackage && (
+                  <M.Box display={{ xs: 'none', sm: 'block' }} pr={1}>
+                    <M.Button
+                      variant="contained"
+                      size="large"
+                      color="primary"
+                      style={{ paddingTop: 7, paddingBottom: 7 }}
+                      onClick={openUpload}
+                    >
+                      Create package
+                    </M.Button>
+                  </M.Box>
+                )}
                 <M.Box component={M.Paper} className={classes.paper}>
                   <SortDropdown
                     value={computedSort.key}

diff --git a/catalog/app/containers/Bucket/PackageTree.js b/catalog/app/containers/Bucket/PackageTree.js
@@ -20,6 +20,7 @@ import * as LinkedData from 'utils/LinkedData'
 import * as NamedRoutes from 'utils/NamedRoutes'
 import * as PackageUri from 'utils/PackageUri'
 import Link, { linkStyle } from 'utils/StyledLink'
+import * as BucketPreferences from 'utils/BucketPreferences'
 import copyToClipboard from 'utils/clipboard'
 import parseSearch from 'utils/parseSearch'
 import * as s3paths from 'utils/s3paths'
@@ -358,6 +359,8 @@ function DirDisplay({
     if (!R.equals({ bucket, name, revision }, prev)) updateDialog.close()
   })
 
+  const preferences = BucketPreferences.use()
+
   return data.case({
     Ok: ({ objects, prefixes, meta }) => {
       const up =
@@ -400,19 +403,23 @@ function DirDisplay({
           {updateDialog.render()}
 
           <TopBar crumbs={crumbs}>
-            <M.Button
-              variant="contained"
-              color="primary"
-              size="small"
-              style={{ marginTop: -3, marginBottom: -3, flexShrink: 0 }}
-              onClick={updateDialog.open}
-            >
-              Revise package
-            </M.Button>
+            {preferences?.ui?.actions?.revisePackage && (
+              <M.Button
+                variant="contained"
+                color="primary"
+                size="small"
+                style={{ marginTop: -3, marginBottom: -3, flexShrink: 0 }}
+                onClick={updateDialog.open}
+              >
+                Revise package
+              </M.Button>
+            )}
             <M.Box ml={1} />
-            <CopyButton bucket={bucket} onChange={setSuccessor}>
-              Push to bucket
-            </CopyButton>
+            {preferences?.ui?.actions?.copyPackage && (
+              <CopyButton bucket={bucket} onChange={setSuccessor}>
+                Push to bucket
+              </CopyButton>
+            )}
             {!noDownload && (
               <>
                 <M.Box ml={1} />