Landing for AWS Marketplace (#3251)

Co-authored-by: Aneesh Karve <[email protected]>
Co-authored-by: Simon Kohnstamm <[email protected]>

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/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>
+  )
+}

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

@@ -0,0 +1,65 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import Bar from 'website/components/Bar'
+import AwsPartner from 'website/components/AwsPartner'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    padding: t.spacing(8, 0, 6),
+  },
+  awsPartner: {
+    maxWidth: '100%',
+    [t.breakpoints.up('sm')]: {
+      marginRight: t.spacing(4),
+    },
+    [t.breakpoints.down('sm')]: {
+      marginBottom: t.spacing(4),
+    },
+  },
+  bar: {
+    margin: 'auto',
+  },
+  title: {
+    textAlign: 'center',
+    fontSize: '48px',
+    lineHeight: '56px',
+    margin: t.spacing(4, 0),
+  },
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: 'auto',
+    maxWidth: '860px',
+    [t.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
+  },
+}))
+
+interface AwsProps {
+  className?: string
+}
+
+export default function Aws({ className }: AwsProps) {
+  const classes = useStyles()
+  return (
+    <section className={cx(classes.root, className)}>
+      <Bar className={classes.bar} color="primary" />
+      <M.Typography variant="h1" color="textPrimary" className={classes.title}>
+        Quilt is an Advanced AWS Technology Partner
+      </M.Typography>
+      <div className={classes.content}>
+        <AwsPartner className={classes.awsPartner} />
+        <M.Typography variant="body1" color="textSecondary">
+          Quilt Data is an AWS Advanced Technology Partner. Quilt brings seamless
+          collaboration to Amazon S3 by connecting people, pipelines, and machines using
+          visual, verifiable, versioned data packages. Amazon Web Services provides
+          secure, cost-effective, and scalable big data services that can help you build a
+          Data Lake to collect, store, and analyze massive volumes of heterogeneous data.
+        </M.Typography>
+      </div>
+    </section>
+  )
+}