Merge pull request #792 from newrelic/develop

Release
newrelic · Sep 26, 2020 · 92e5602 · 92e5602
2 parents 4d16ade + e098b2f
commit 92e5602
Show file tree

Hide file tree

Showing 10 changed files with 4,096 additions and 3,883 deletions.
diff --git a/.github/workflows/fetch-related-content.yml b/.github/workflows/fetch-related-content.yml
@@ -58,7 +58,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: null,
@@ -71,7 +71,7 @@ jobs:
         uses: ad-m/[email protected]
         with:
           github_token: ${{ secrets.OPENSOURCE_BOT_TOKEN }}
-          branch: main
+          branch: develop
 
       - name: Re-enable "required_pull_request_reviews" branch protection
         id: enable-branch-protection
@@ -84,7 +84,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: true,

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -3,8 +3,7 @@ name: Release
 on:
   push:
     branches:
-      # todo: change this branch name
-      - main
+      - develop
 
 env:
   BOT_NAME: nr-opensource-bot
@@ -111,7 +110,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: null,
@@ -124,7 +123,7 @@ jobs:
         uses: ad-m/[email protected]
         with:
           github_token: ${{ secrets.OPENSOURCE_BOT_TOKEN }}
-          branch: main
+          branch: develop
 
       - name: Re-enable "required_pull_request_reviews" branch protection
         id: enable-branch-protection
@@ -137,7 +136,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: true,
@@ -187,7 +186,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: null,
@@ -217,7 +216,7 @@ jobs:
             const result = await github.repos.updateBranchProtection({
               owner: context.repo.owner,
               repo: context.repo.repo,
-              branch: 'main',
+              branch: 'develop',
               required_status_checks: null,
               restrictions: null,
               enforce_admins: true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@mdx-js/react": "^1.6.16",
     "@newrelic/gatsby-theme-newrelic": "^1.9.5",
     "@splitsoftware/splitio-react": "^1.2.0",
+    "@xstate/react": "^1.0.0-rc.6",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "eslint-plugin-react-hooks": "^4.1.0",
@@ -50,7 +51,8 @@
     "react-shadow": "^18.3.0",
     "react-simple-code-editor": "^0.11.0",
     "use-dark-mode": "^2.3.1",
-    "use-media": "^1.4.0"
+    "use-media": "^1.4.0",
+    "xstate": "^4.13.0"
   },
   "devDependencies": {
     "@newrelic/eslint-plugin-newrelic": "^0.3.0",

diff --git a/src/components/MarketoForm/MarketoForm.js b/src/components/MarketoForm/MarketoForm.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import './marketo.scss';
+import { navigate } from 'gatsby';
 import useMarketoForm from '../../hooks/useMarketoForm';
+import Spinner from '../Spinner';
+import './marketo.scss';
 
 const MarketoForm = ({
   title,
@@ -11,9 +13,14 @@ const MarketoForm = ({
   publishableKey,
   redirectLink,
 }) => {
-  const loaded = useMarketoForm(munchkinId, id, publishableKey, redirectLink);
+  const [, { state }] = useMarketoForm({
+    munchkinId,
+    id,
+    publishableKey,
+    onSubmit: () => navigate(redirectLink),
+  });
 
-  return loaded ? (
+  return (
     <div
       css={css`
         position: relative;
@@ -28,19 +35,47 @@ const MarketoForm = ({
           padding: 1.25rem;
         `}
       >
-        <p
+        <h4
           css={css`
-            font-size: 1rem;
             font-weight: bold;
             text-align: center;
+            margin-bottom: 1rem;
           `}
         >
           {title}
-        </p>
+        </h4>
         <form id={`mktoForm_${id}`} />
+        {state.matches('blocked') && (
+          <Error>
+            Unable to load the form. Perhaps you have an ad blocker enabled?
+          </Error>
+        )}
+        {state.matches('error') && <Error>Unable to load the form.</Error>}
+        {state.matches('loading') && <Spinner />}
       </div>
     </div>
-  ) : null;
+  );
+};
+
+const Error = ({ children }) => (
+  <div
+    css={css`
+      padding: 1rem;
+      border-radius: 0.25rem;
+      background: var(--color-red-100);
+      font-size: 0.875rem;
+
+      .dark-mode & {
+        background: var(--color-red-900);
+      }
+    `}
+  >
+    {children}
+  </div>
+);
+
+Error.propTypes = {
+  children: PropTypes.node,
 };
 
 MarketoForm.propTypes = {