Merge branch 'master' into buttons-refactoring

api/python/quilt3/session.py

@@ -117,7 +117,7 @@ def _create_auth(timeout=None):
                 auth = _update_auth(auth['refresh_token'], timeout)
             except QuiltException as ex:
                 raise QuiltException(
-                    "Failed to update the access token (%s). Run `quilt login` again." % ex
+                    "Failed to update the access token (%s). Run `quilt3 login` again." % ex
                 )
             contents[url] = auth
             _save_auth(contents)

catalog/app/components/Form/TextField.tsx

@@ -11,20 +11,27 @@ const useFieldInputStyles = M.makeStyles({
 
 interface FieldProps {
   error?: string
+  errors: Record<string, React.ReactNode>
   helperText?: React.ReactNode
   input: RF.FieldInputProps<string>
+  meta: RF.FieldMetaState<string>
   validating?: boolean
 }
 
+export type TextFieldProps = FieldProps & M.TextFieldProps
+
 export default function Field({
   InputLabelProps,
-  error,
   helperText,
   input,
   validating,
+  errors,
+  meta,
   ...rest
-}: FieldProps & M.TextFieldProps) {
+}: TextFieldProps) {
   const inputClasses = useFieldInputStyles()
+  const errorCode = meta.submitFailed && meta.error
+  const error = errorCode ? errors[errorCode] || errorCode : ''
   const props = {
     InputLabelProps: { shrink: true, ...InputLabelProps },
     InputProps: {

catalog/app/components/TalkToUs/TalkToUs.js

@@ -52,13 +52,15 @@ const getCalendlyEvent = (e) =>
   e?.data?.event?.startsWith('calendly.') && e?.data?.event?.substring('calendly.'.length)
 
 function useCalendlyLink() {
-  return React.useCallback(
-    (extra) =>
-      extra?.src === 'bioit'
-        ? 'https://calendly.com/quilt-founders/quilt-at-bio-it-world'
-        : cfg.calendlyLink,
-    [],
-  )
+  return React.useCallback((extra) => {
+    const src = extra?.src || ''
+    switch (src) {
+      case 'bioit':
+        return 'https://calendly.com/quilt-founders/quilt-at-bio-it-world'
+      default:
+        return cfg.calendlyLink
+    }
+  }, [])
 }
 
 export function TalkToUsProvider({ children }) {

catalog/app/containers/App/App.js

@@ -70,6 +70,10 @@ const MAbout = RT.mkLazy(() => import('website/pages/About'), Placeholder)
 const MPersonas = RT.mkLazy(() => import('website/pages/Personas'), Placeholder)
 const MProduct = RT.mkLazy(() => import('website/pages/Product'), Placeholder)
 
+const AwsMarketplace = RT.mkLazy(
+  () => import('website/pages/AwsMarketplace'),
+  Placeholder,
+)
 const Example = RT.mkLazy(() => import('website/pages/Example'), Placeholder)
 const BioIT = RT.mkLazy(() => import('website/pages/BioIT'), Placeholder)
 const NextFlow = RT.mkLazy(() => import('website/pages/NextFlow'), Placeholder)
@@ -113,6 +117,9 @@ export default function App() {
           <Route path="/nextflow" component={NextFlow} exact />
         )}
         {cfg.mode === 'MARKETING' && <Route path="/aws" component={BioIT} exact />}
+        {cfg.mode === 'MARKETING' && (
+          <Route path="/aws-marketplace" component={AwsMarketplace} exact />
+        )}
 
         {!cfg.disableNavigator && (
           <Route path={paths.activate} component={Activate} exact />

catalog/app/containers/Auth/SSOAzure.js

@@ -32,11 +32,11 @@ export default function SSOAzure({ mutex, next, ...props }) {
     mutex.claim(MUTEX_POPUP)
 
     try {
-      const token = await authenticate()
+      const code = await authenticate()
       const result = defer()
       mutex.claim(MUTEX_REQUEST)
       try {
-        dispatch(actions.signIn({ provider, token }, result.resolver))
+        dispatch(actions.signIn({ provider, code }, result.resolver))
         await result.promise
       } catch (e) {
         if (e instanceof errors.SSOUserNotFound) {

catalog/app/containers/Auth/SSOGoogle.js

@@ -33,13 +33,12 @@ export default function SSOGoogle({ mutex, ...props }) {
     }
 
   const handleSuccess = React.useCallback(
-    async (user) => {
-      const { id_token: token } = user.getAuthResponse()
+    async ({ code }) => {
       const result = defer()
       const provider = 'google'
       claim(MUTEX_REQUEST)
       try {
-        dispatch(actions.signIn({ provider, token }, result.resolver))
+        dispatch(actions.signIn({ provider, code }, result.resolver))
         await result.promise
       } catch (e) {
         if (e instanceof errors.SSOUserNotFound) {
@@ -77,6 +76,7 @@ export default function SSOGoogle({ mutex, ...props }) {
       clientId={cfg.googleClientId}
       onSuccess={handleSuccess}
       onFailure={handleFailure}
+      responseType="code"
       cookiePolicy="single_host_origin"
       disabled={!!mutex.current}
       render={({ onClick, disabled }) => (

catalog/app/containers/Auth/SSOOkta.js

@@ -29,11 +29,11 @@ export default function SSOOkta({ mutex, ...props }) {
     mutex.claim(MUTEX_POPUP)
 
     try {
-      const token = await authenticate()
+      const code = await authenticate()
       const result = defer()
       mutex.claim(MUTEX_REQUEST)
       try {
-        dispatch(actions.signIn({ provider, token }, result.resolver))
+        dispatch(actions.signIn({ provider, code }, result.resolver))
         await result.promise
       } catch (e) {
         if (e instanceof errors.SSOUserNotFound) {

catalog/app/containers/Auth/SSOOneLogin.js

@@ -32,11 +32,11 @@ export default function SSOOneLogin({ mutex, ...props }) {
     mutex.claim(MUTEX_POPUP)
 
     try {
-      const token = await authenticate()
+      const code = await authenticate()
       const result = defer()
       mutex.claim(MUTEX_REQUEST)
       try {
-        dispatch(actions.signIn({ provider, token }, result.resolver))
+        dispatch(actions.signIn({ provider, code }, result.resolver))
         await result.promise
       } catch (e) {
         if (e instanceof errors.SSOUserNotFound) {

catalog/app/utils/OIDC.js

@@ -16,14 +16,12 @@ export function useOIDC({ provider, popupParams }) {
   return React.useCallback(
     () =>
       new Promise((resolve, reject) => {
-        const nonce = Math.random().toString(36).substr(2)
-        const state = Math.random().toString(36).substr(2)
+        const state = Math.random().toString(36).substring(2)
         const query = NamedRoutes.mkSearch({
           redirect_uri: `${window.location.origin}/oauth-callback`,
           response_mode: 'fragment',
-          response_type: 'id_token',
+          response_type: 'code',
           scope: 'openid email',
-          nonce,
           state,
         })
         const url = `${cfg.registryUrl}/oidc-authorize/${provider}${query}`
@@ -42,7 +40,7 @@ export function useOIDC({ provider, popupParams }) {
             if (type !== 'callback') return
 
             const {
-              id_token: idToken,
+              code,
               error,
               error_description: details,
               state: respState,
@@ -56,14 +54,7 @@ export function useOIDC({ provider, popupParams }) {
             if (error) {
               throw new OIDCError(error, details)
             }
-            const { nonce: respNonce } = JSON.parse(atob(idToken.split('.')[1]))
-            if (respNonce !== nonce) {
-              throw new OIDCError(
-                'nonce_mismatch',
-                "Response nonce doesn't match request nonce",
-              )
-            }
-            resolve(idToken)
+            resolve(code)
           } catch (e) {
             reject(e)
           } finally {

catalog/app/utils/Okta.js

@@ -14,14 +14,12 @@ export function useOkta() {
   return React.useCallback(
     () =>
       new Promise((resolve, reject) => {
-        const nonce = Math.random().toString(36).substr(2)
-        const state = Math.random().toString(36).substr(2)
+        const state = Math.random().toString(36).substring(2)
         const query = NamedRoutes.mkSearch({
           redirect_uri: window.location.origin,
           response_mode: 'okta_post_message',
-          response_type: 'id_token',
-          scope: 'openid email',
-          nonce,
+          response_type: 'code',
+          scope: 'openid email offline_access',
           state,
         })
         const url = `${cfg.registryUrl}/oidc-authorize/okta${query}`
@@ -36,12 +34,7 @@ export function useOkta() {
         const handleMessage = ({ source, data }) => {
           if (source !== popup) return
           try {
-            const {
-              id_token: idToken,
-              error,
-              error_description: details,
-              state: respState,
-            } = data
+            const { code, error, error_description: details, state: respState } = data
             if (respState !== state) {
               throw new OktaError(
                 'state_mismatch',
@@ -51,14 +44,7 @@ export function useOkta() {
             if (error) {
               throw new OktaError(error, details)
             }
-            const { nonce: respNonce } = JSON.parse(atob(idToken.split('.')[1]))
-            if (respNonce !== nonce) {
-              throw new OktaError(
-                'nonce_mismatch',
-                "Response nonce doesn't match request nonce",
-              )
-            }
-            resolve(idToken)
+            resolve(code)
           } catch (e) {
             reject(e)
           } finally {

catalog/app/website/components/ChevronLink.tsx

@@ -0,0 +1,37 @@
+import cx from 'classnames'
+import { Link, LinkProps } from 'react-router-dom'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    color: t.palette.text.primary,
+    '&:hover $icon': {
+      left: '2px',
+    },
+  },
+  icon: {
+    color: t.palette.primary.main,
+    left: 0,
+    position: 'relative',
+    transition: 'ease 0.1s left',
+    verticalAlign: 'middle',
+  },
+}))
+
+type ChevronLinkProps = M.LinkProps & Partial<LinkProps>
+
+export default function ChevronLink({ children, className, ...props }: ChevronLinkProps) {
+  const classes = useStyles()
+  return (
+    <M.Link
+      className={cx(classes.root, className)}
+      component={props.to ? Link : undefined}
+      underline="none"
+      {...props}
+    >
+      {children}
+      <M.Icon className={classes.icon}>chevron_right</M.Icon>
+    </M.Link>
+  )
+}

catalog/app/website/pages/AwsMarketplace/Attribution.tsx

@@ -0,0 +1,41 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    background: 'linear-gradient(to right, #30266e, #1b194f)',
+    color: t.palette.text.disabled,
+  },
+  text: {
+    padding: t.spacing(1, 0),
+    textAlign: 'center',
+  },
+}))
+
+interface AttributionProps {
+  className: string
+}
+
+export default function Attribution({ className }: AttributionProps) {
+  const classes = useStyles()
+  return (
+    <div className={cx(classes.root, className)}>
+      <M.Container maxWidth="lg">
+        <M.Typography className={classes.text} variant="caption" component="p">
+          Icons used: “
+          <a href="https://thenounproject.com/icon/data-sharing-5406825/">Data Sharing</a>
+          ” by Candy Design “
+          <a href="https://thenounproject.com/icon/upload-database-322726/">
+            Upload Database
+          </a>
+          ” by Smashicons “
+          <a href="https://thenounproject.com/icon/data-visualization-5039056/">
+            data visualization
+          </a>
+          ” by SAM Designs from Noun Project
+        </M.Typography>
+      </M.Container>
+    </div>
+  )
+}