Bucket admin link

catalog/app/constants/routes.js

@@ -144,5 +144,5 @@ export const admin = {
 export const adminUsers = admin
 export const adminBuckets = {
   path: '/admin/buckets',
-  url: () => '/admin/buckets',
+  url: (bucket) => `/admin/buckets${mkSearch({ bucket })}`,
 }

catalog/app/containers/Admin/Admin.js

@@ -84,7 +84,7 @@ export default function Admin({ location }) {
     <AdminLayout section={getAdminSection(paths)(location.pathname)}>
       <RR.Switch>
         <RR.Route path={paths.adminUsers} component={UsersAndRoles} exact strict />
-        <RR.Route path={paths.adminBuckets} component={Buckets} exact />
+        <RR.Route path={paths.adminBuckets} component={Buckets} />
         <RR.Route component={ThrowNotFound} />
       </RR.Switch>
     </AdminLayout>

catalog/app/containers/Admin/Buckets.js

@@ -2,6 +2,7 @@ import * as dateFns from 'date-fns'
 import * as R from 'ramda'
 import * as React from 'react'
 import * as redux from 'react-redux'
+import { useHistory } from 'react-router-dom'
 import * as RF from 'redux-form/es/immutable'
 import * as M from '@material-ui/core'
 
@@ -13,6 +14,8 @@ import * as BucketConfig from 'utils/BucketConfig'
 import * as Config from 'utils/Config'
 import Delay from 'utils/Delay'
 import * as Dialogs from 'utils/Dialogs'
+import * as NamedRoutes from 'utils/NamedRoutes'
+import parseSearch from 'utils/parseSearch'
 import * as Cache from 'utils/ResourceCache'
 import { useTracker } from 'utils/tracking'
 import * as validators from 'utils/validators'
@@ -196,7 +199,7 @@ function BucketFields({ add = false, reindex }) {
             margin="normal"
             multiline
             rows={1}
-            maxRows={3}
+            rowsMax={3}
           />
           <RF.Field
             component={Form.Field}
@@ -835,14 +838,17 @@ const columns = [
   },
 ]
 
-function CRUD({ buckets }) {
+function CRUD({ bucketName, buckets }) {
   const rows = Cache.suspend(buckets)
   const ordering = Table.useOrdering({ rows, column: columns[0] })
   const pagination = Pagination.use(ordering.ordered, {
     getItemId: R.prop('name'),
   })
   const { open: openDialog, render: renderDialogs } = Dialogs.use()
 
+  const { urls } = NamedRoutes.use()
+  const history = useHistory()
+
   const toolbarActions = [
     {
       title: 'Add bucket',
@@ -853,8 +859,9 @@ function CRUD({ buckets }) {
     },
   ]
 
-  const edit = (bucket) => () =>
-    openDialog(({ close }) => <Edit {...{ bucket, close }} />)
+  const edit = (bucket) => () => {
+    history.push(urls.adminBuckets(bucket.name))
+  }
 
   const inlineActions = (bucket) => [
     {
@@ -871,9 +878,23 @@ function CRUD({ buckets }) {
     },
   ]
 
+  const editingBucket = React.useMemo(
+    () => (bucketName ? rows.find(({ name }) => name === bucketName) : null),
+    [bucketName, rows],
+  )
+
+  const onBucketClose = React.useCallback(() => {
+    history.push(urls.adminBuckets())
+  }, [history, urls])
+
   return (
     <M.Paper>
       {renderDialogs({ maxWidth: 'xs', fullWidth: true })}
+
+      <M.Dialog open={!!editingBucket} fullWidth maxWidth="xs">
+        {editingBucket && <Edit bucket={editingBucket} close={onBucketClose} />}
+      </M.Dialog>
+
       <Table.Toolbar heading="Buckets" actions={toolbarActions} />
       <Table.Wrapper>
         <M.Table size="small">
@@ -908,7 +929,8 @@ function CRUD({ buckets }) {
   )
 }
 
-export default function Buckets() {
+export default function Buckets({ location }) {
+  const { bucket } = parseSearch(location.search)
   const req = APIConnector.use()
   const buckets = Cache.useData(data.BucketsResource, { req })
   return (
@@ -921,7 +943,7 @@ export default function Buckets() {
           </M.Paper>
         }
       >
-        <CRUD buckets={buckets} />
+        <CRUD bucketName={bucket} buckets={buckets} />
       </React.Suspense>
     </M.Box>
   )

catalog/app/containers/Bucket/Overview.js

@@ -2,6 +2,7 @@ import cx from 'classnames'
 import * as dateFns from 'date-fns'
 import * as R from 'ramda'
 import * as React from 'react'
+import { Link as RRLink } from 'react-router-dom'
 import * as M from '@material-ui/core'
 import { fade } from '@material-ui/core/styles'
 import useComponentSize from '@rehooks/component-size'
@@ -751,6 +752,12 @@ const useHeadStyles = M.makeStyles((t) => ({
       borderRadius: 0,
     },
   },
+  settings: {
+    color: t.palette.common.white,
+    position: 'absolute',
+    right: t.spacing(2),
+    top: t.spacing(2),
+  },
 }))
 
 function Head({ req, s3, overviewUrl, bucket, description }) {
@@ -759,6 +766,7 @@ function Head({ req, s3, overviewUrl, bucket, description }) {
   const colorPool = useConst(() => mkKeyedPool(COLOR_MAP))
   const statsData = useData(requests.bucketStats, { req, s3, bucket, overviewUrl })
   const pkgCountData = useData(requests.countPackageRevisions, { req, bucket })
+  const { urls } = NamedRoutes.use()
   return (
     <M.Paper className={classes.root}>
       <M.Box className={classes.top}>
@@ -804,6 +812,11 @@ function Head({ req, s3, overviewUrl, bucket, description }) {
             fallback={() => null}
           />
         </M.Box>
+        <RRLink className={classes.settings} to={urls.adminBuckets(bucket)}>
+          <M.IconButton color="inherit">
+            <M.Icon>settings</M.Icon>
+          </M.IconButton>
+        </RRLink>
       </M.Box>
       <M.Box
         p={{ xs: 2, sm: 4 }}