Merge branch 'master' into index-s3-tags

catalog/.eslintrc.js

@@ -81,4 +81,12 @@ module.exports = {
       version: 'detect',
     },
   },
+  overrides: [
+    {
+      files: ['*.js'],
+      rules: {
+        'no-undef': 2,
+      },
+    },
+  ],
 }

catalog/Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.24.0@sha256:57e42e00530faa65e8acf98c3cf7bf6794093a9841c8a676b6d2fd0a9ba7262f
+FROM nginx:1.24.0@sha256:a195f9fb6503531660b25f9aeefef1f48bbaf56f46da04bffe1568abb3d3aff6
 MAINTAINER Quilt Data, Inc. [email protected]
 
 # Set up nginx

catalog/app/components/JsonDisplay/JsonDisplay.js

@@ -1,6 +1,7 @@
 import cx from 'classnames'
 import * as R from 'ramda'
 import * as React from 'react'
+import useResizeObserver from 'use-resize-observer'
 import * as M from '@material-ui/core'
 
 import * as NamedRoutes from 'utils/NamedRoutes'
@@ -307,21 +308,6 @@ function JsonDisplayInner(props) {
   return <Component />
 }
 
-function useElementWidth(ref) {
-  const [width, setWidth] = React.useState(0)
-  React.useEffect(() => {
-    const wrapper = ref.current
-    if (!wrapper) return
-    const resizeObserver = new window.ResizeObserver(() => {
-      if (!wrapper) return
-      setWidth(wrapper.clientWidth)
-    })
-    resizeObserver.observe(ref.current)
-    return () => resizeObserver.unobserve(wrapper)
-  }, [ref])
-  return width
-}
-
 export default function JsonDisplay({
   name,
   value,
@@ -336,7 +322,7 @@ export default function JsonDisplay({
 }) {
   const ref = React.useRef(null)
   const classes = useStyles()
-  const currentBPWidth = useElementWidth(ref)
+  const { width: currentBPWidth } = useResizeObserver({ ref })
   const computedKeys = React.useMemo(() => {
     if (showKeysWhenCollapsed === true) return Number.POSITIVE_INFINITY
     if (showKeysWhenCollapsed === false) return Number.POSITIVE_INFINITY

catalog/app/components/Working/index.js

@@ -1,7 +1,7 @@
 /* Authentication progress */
 import PropTypes from 'prop-types'
 import React from 'react'
-import { styled } from '@material-ui/styles'
+import { styled } from '@material-ui/core/styles'
 
 import Spinner from 'components/Spinner'
 

catalog/app/containers/Admin/Admin.tsx

@@ -76,7 +76,8 @@ function AdminLayout({ section = false, children }: AdminLayoutProps) {
   )
 }
 
-export default function Admin({ location }: RR.RouteComponentProps) {
+export default function Admin() {
+  const location = RR.useLocation()
   const { paths } = NamedRoutes.use()
 
   const sections = {
@@ -101,12 +102,26 @@ export default function Admin({ location }: RR.RouteComponentProps) {
     <AdminLayout section={getSection(location.pathname)}>
       <ErrorBoundary key={JSON.stringify(location)}>
         <RR.Switch>
-          <RR.Route path={paths.adminUsers} component={UsersAndRoles} exact strict />
-          <RR.Route path={paths.adminBuckets} component={Buckets} exact />
-          {cfg.desktop && <RR.Route path={paths.adminSync} component={Sync} exact />}
-          <RR.Route path={paths.adminSettings} component={Settings} exact />
-          <RR.Route path={paths.adminStatus} component={Status} exact />
-          <RR.Route component={ThrowNotFound} />
+          <RR.Route path={paths.adminUsers} exact strict>
+            <UsersAndRoles />
+          </RR.Route>
+          <RR.Route path={paths.adminBuckets} exact>
+            <Buckets />
+          </RR.Route>
+          {cfg.desktop && (
+            <RR.Route path={paths.adminSync} exact>
+              <Sync />
+            </RR.Route>
+          )}
+          <RR.Route path={paths.adminSettings} exact>
+            <Settings />
+          </RR.Route>
+          <RR.Route path={paths.adminStatus} exact>
+            <Status />
+          </RR.Route>
+          <RR.Route>
+            <ThrowNotFound />
+          </RR.Route>
         </RR.Switch>
       </ErrorBoundary>
     </AdminLayout>

catalog/app/containers/Admin/Buckets/Buckets.tsx

@@ -1384,7 +1384,8 @@ function CRUD({ bucketName }: CRUDProps) {
   )
 }
 
-export default function Buckets({ location }: RRDom.RouteComponentProps) {
+export default function Buckets() {
+  const location = RRDom.useLocation()
   const { bucket } = parseSearch(location.search)
   const bucketName = Array.isArray(bucket) ? bucket[0] : bucket
   return (

catalog/app/containers/Admin/Users/Users.js

@@ -84,7 +84,7 @@ function Invite({ close, roles, defaultRoleId }) {
         push('User invited')
         close()
       } catch (e) {
-        if (APIConnector.HTTPError.is(e, 400, /Username is not valid/)) {
+        if (APIConnector.HTTPError.is(e, 400, /Username is invalid/)) {
           return {
             username: 'invalid',
           }

catalog/app/containers/App/App.js

@@ -1,6 +1,6 @@
 import * as R from 'ramda'
 import * as React from 'react'
-import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
+import { Switch, Route, Redirect, useLocation, useParams } from 'react-router-dom'
 
 import Placeholder from 'components/Placeholder'
 import AbsRedirect from 'components/Redirect'
@@ -16,30 +16,26 @@ const protect = cfg.alwaysRequiresAuth ? requireAuth() : R.identity
 
 const ProtectedThrowNotFound = protect(ThrowNotFound)
 
-const redirectTo =
-  (path) =>
-  ({ location: { search } }) => <Redirect to={`${path}${search}`} />
+function RedirectTo({ path }) {
+  const { search } = useLocation()
+  return <Redirect to={`${path}${search}`} />
+}
 
-const Activate = ({
-  match: {
-    params: { token },
-  },
-}) => {
+const Activate = () => {
+  const { token } = useParams()
   const { urls } = NamedRoutes.use()
   return <AbsRedirect url={urls.activate({ registryUrl: cfg.registryUrl, token })} />
 }
 
-const LegacyPackages = ({ location: l }) => {
+const LegacyPackages = () => {
+  const l = useLocation()
   const { urls } = NamedRoutes.use()
   return <AbsRedirect url={urls.legacyPackages(cfg.legacyPackagesRedirect, l)} />
 }
 
-function BucketSearchRedirect({
-  location: { search },
-  match: {
-    params: { bucket },
-  },
-}) {
+function BucketSearchRedirect() {
+  const { search } = useLocation()
+  const { bucket } = useParams()
   const { urls } = NamedRoutes.use()
   const params = parseSearch(search, true)
   const url = urls.search({ buckets: bucket, ...params })
@@ -95,83 +91,149 @@ export default function App() {
   return (
     <CatchNotFound id={`${l.pathname}${l.search}${l.hash}`}>
       <Switch>
-        <Route path={paths.home} component={Home} exact />
+        <Route path={paths.home} exact>
+          <Home />
+        </Route>
 
         {process.env.NODE_ENV === 'development' && (
-          <Route path={paths.example} component={Example} />
+          <Route path={paths.example}>
+            <Example />
+          </Route>
         )}
 
         {(cfg.mode === 'MARKETING' || cfg.mode === 'PRODUCT') && (
-          <Route path={paths.install} component={Install} exact />
+          <Route path={paths.install} exact>
+            <Install />
+          </Route>
         )}
 
         {!!cfg.legacyPackagesRedirect && (
-          <Route path={paths.legacyPackages} component={LegacyPackages} />
+          <Route path={paths.legacyPackages}>
+            <LegacyPackages />
+          </Route>
         )}
 
-        {!cfg.disableNavigator && <Route path={paths.search} component={Search} exact />}
+        {!cfg.disableNavigator && (
+          <Route path={paths.search} exact>
+            <Search />
+          </Route>
+        )}
 
         {cfg.mode === 'MARKETING' && (
-          <Route path={paths.about} component={MAbout} exact />
+          <Route path={paths.about} exact>
+            <MAbout />
+          </Route>
         )}
         {cfg.enableMarketingPages && (
-          <Route path={paths.personas} component={MPersonas} exact />
+          <Route path={paths.personas} exact>
+            <MPersonas />
+          </Route>
         )}
         {cfg.enableMarketingPages && (
-          <Route path={paths.product} component={MProduct} exact />
+          <Route path={paths.product} exact>
+            <MProduct />
+          </Route>
+        )}
+        {cfg.mode === 'MARKETING' && (
+          <Route path="/bioit" exact>
+            <BioIT />
+          </Route>
+        )}
+        {cfg.mode === 'MARKETING' && (
+          <Route path="/nextflow" exact>
+            <NextFlow />
+          </Route>
         )}
-        {cfg.mode === 'MARKETING' && <Route path="/bioit" component={BioIT} exact />}
         {cfg.mode === 'MARKETING' && (
-          <Route path="/nextflow" component={NextFlow} exact />
+          <Route path="/aws" exact>
+            <BioIT />
+          </Route>
         )}
-        {cfg.mode === 'MARKETING' && <Route path="/aws" component={BioIT} exact />}
         {cfg.mode === 'MARKETING' && (
-          <Route path="/aws-marketplace" component={AwsMarketplace} exact />
+          <Route path="/aws-marketplace" exact>
+            <AwsMarketplace />
+          </Route>
         )}
 
         {!cfg.disableNavigator && (
-          <Route path={paths.activate} component={Activate} exact />
+          <Route path={paths.activate} exact>
+            <Activate />
+          </Route>
         )}
 
         {!cfg.disableNavigator && (
-          <Route path={paths.signIn} component={AuthSignIn} exact />
+          <Route path={paths.signIn} exact>
+            <AuthSignIn />
+          </Route>
         )}
         {!cfg.disableNavigator && (
-          <Route path="/login" component={redirectTo(urls.signIn())} exact />
+          <Route path="/login" exact>
+            <RedirectTo path={urls.signIn()} />
+          </Route>
         )}
         {!cfg.disableNavigator && (
-          <Route path={paths.signOut} component={AuthSignOut} exact />
+          <Route path={paths.signOut} exact>
+            <AuthSignOut />
+          </Route>
         )}
         {!cfg.disableNavigator && (cfg.passwordAuth === true || cfg.ssoAuth === true) && (
-          <Route path={paths.signUp} component={AuthSignUp} exact />
+          <Route path={paths.signUp} exact>
+            <AuthSignUp />
+          </Route>
         )}
         {!cfg.disableNavigator && !!cfg.passwordAuth && (
-          <Route path={paths.passReset} component={AuthPassReset} exact />
+          <Route path={paths.passReset} exact>
+            <AuthPassReset />
+          </Route>
         )}
         {!cfg.disableNavigator && !!cfg.passwordAuth && (
-          <Route path={paths.passChange} component={AuthPassChange} exact />
+          <Route path={paths.passChange} exact>
+            <AuthPassChange />
+          </Route>
+        )}
+        {!cfg.disableNavigator && (
+          <Route path={paths.code} exact>
+            <AuthCode />
+          </Route>
         )}
-        {!cfg.disableNavigator && <Route path={paths.code} component={AuthCode} exact />}
         {!cfg.disableNavigator && (
-          <Route path={paths.activationError} component={AuthActivationError} exact />
+          <Route path={paths.activationError} exact>
+            <AuthActivationError />
+          </Route>
         )}
 
         {cfg.mode === 'OPEN' && (
-          <Route path={paths.profile} component={OpenProfile} exact />
+          <Route path={paths.profile} exact>
+            <OpenProfile />
+          </Route>
         )}
 
-        {!cfg.disableNavigator && <Route path={paths.admin} component={Admin} />}
+        {!cfg.disableNavigator && (
+          <Route path={paths.admin}>
+            <Admin />
+          </Route>
+        )}
 
         {!cfg.disableNavigator && (
-          <Route path={paths.uriResolver} component={UriResolver} />
+          <Route path={paths.uriResolver}>
+            <UriResolver />
+          </Route>
         )}
 
         {!cfg.disableNavigator && (
-          <Route path={paths.bucketSearch} component={BucketSearchRedirect} exact />
+          <Route path={paths.bucketSearch} exact>
+            <BucketSearchRedirect />
+          </Route>
+        )}
+        {!cfg.disableNavigator && (
+          <Route path={paths.bucketRoot}>
+            <Bucket />
+          </Route>
         )}
-        {!cfg.disableNavigator && <Route path={paths.bucketRoot} component={Bucket} />}
 
-        <Route component={ProtectedThrowNotFound} />
+        <Route>
+          <ProtectedThrowNotFound />
+        </Route>
       </Switch>
     </CatchNotFound>
   )

catalog/app/containers/Auth/Code.js

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as redux from 'react-redux'
 import Button from '@material-ui/core/Button'
-import { styled } from '@material-ui/styles'
+import { styled } from '@material-ui/core/styles'
 
 import Working from 'components/Working'
 import * as Sentry from 'utils/Sentry'

catalog/app/containers/Auth/PassChange.tsx

@@ -1,8 +1,9 @@
 import { FORM_ERROR } from 'final-form'
+import invariant from 'invariant'
 import * as React from 'react'
 import * as RF from 'react-final-form'
 import * as redux from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 
 import Working from 'components/Working'
 import * as NamedRoutes from 'utils/NamedRoutes'
@@ -165,15 +166,10 @@ function Success() {
 
 const LINK_PLACEHOLDER = '_'
 
-interface PassChangeProps {
-  match: { params: { link: string } }
-}
+export default function PassChange() {
+  const { link } = useParams<{ link: string }>()
+  invariant(!!link, '`link` must be defined')
 
-export default function PassChange({
-  match: {
-    params: { link },
-  },
-}: PassChangeProps) {
   const { urls } = NamedRoutes.use()
 
   const authenticated = redux.useSelector(selectors.authenticated)