[PB] Page Builder

.gitignore

@@ -15,3 +15,4 @@ lerna-debug.log
 yarn-error.log
 # Packages that build partially transpiled ES modules put them here
 docker/certs
+.history

docker/.env.docker.dev

@@ -14,3 +14,4 @@ UPWARD_JS_UPWARD_PATH=upward.yml
 UPWARD_JS_BIND_LOCAL=1
 UPWARD_JS_LOG_URL=1
 CHECKOUT_BRAINTREE_TOKEN=sandbox_8yrzsvtm_s2bg8fs563crhqzk
+GOOGLE_MAPS_API_KEY=redacted

docker/.env.docker.prod

@@ -14,3 +14,4 @@ CUSTOM_ORIGIN_ENABLED=0
 UPWARD_JS_BIND_LOCAL=1
 UPWARD_JS_LOG_URL=1
 CHECKOUT_BRAINTREE_TOKEN=redacted
+GOOGLE_MAPS_API_KEY=redacted

jest.config.js

@@ -79,7 +79,9 @@ const testVenia = inPackage => ({
     // @magento namespaced packages like Peregrine and Venia UI as well, when
     // it's testing Venia. That way, changes in sibling packages don't require a
     // full compile.
-    transformIgnorePatterns: ['node_modules/(?!@magento/)'],
+    transformIgnorePatterns: [
+        'node_modules/(?!@magento|jarallax|video-worker/)'
+    ],
     globals: {
         UNION_AND_INTERFACE_TYPES: {
             __schema: {

package.json

@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@magento/eslint-config": "~1.4.1",
+    "@types/jest": "~24.0.18",
     "chalk": "~2.4.2",
     "chokidar": "~2.1.2",
     "coveralls": "~3.0.3",

packages/peregrine/lib/Router/magentoRouteHandler.js

@@ -112,8 +112,12 @@ export default class MagentoRouteHandler extends Component {
 
             // associate the matching RootComponent with this location
             this.setRouteComponent(pathname, RootComponent, { id });
-        } catch ({ message }) {
-            const symbol = message === '404' ? NotFound : InternalError;
+        } catch (e) {
+            if (process.env.NODE_ENV === 'development') {
+                console.error(e);
+            }
+
+            const symbol = e.message === '404' ? NotFound : InternalError;
 
             // we don't have a matching RootComponent, but we've checked for one
             // so associate the appropriate error case with this location

packages/peregrine/lib/Router/resolveUnknownRoute.js

@@ -84,7 +84,7 @@ function remotelyResolveRoute(opts) {
 }
 
 /**
- * @description Calls the GraphQL API for results from the urlResolver query
+ * @description Calls remote endpoints to see if anything can handle this route.
  * @param {{ route: string, apiBase: string}} opts
  * @returns {Promise<{type: "PRODUCT" | "CATEGORY" | "CMS_PAGE"}>}
  */

packages/peregrine/lib/Toasts/useToasts.js

@@ -32,9 +32,9 @@ export const getToastId = ({
 
     // The hashing function below should generally avoid accidental collisions.
     // It exists to give a "readable" identifier to toasts for debugging.
-    let hash = 0,
-        i,
-        chr;
+    let hash = 0;
+    let i;
+    let chr;
     if (combined.length === 0) return hash;
     for (i = 0; i < combined.length; i++) {
         chr = combined.charCodeAt(i);

packages/peregrine/lib/util/getFilterParamsFromUrl.js

@@ -2,8 +2,8 @@ import { persistentQueries } from './persistentQueries';
 
 export const getFilterParams = () => {
     const params = new URLSearchParams(window.location.search);
-    let titles,
-        values = [];
+    let titles;
+    let values = [];
 
     const urlFilterParams = {};
 

packages/pwa-buildpack/envVarDefinitions.json

@@ -150,6 +150,17 @@
                     "default": "sandbox_8yrzsvtm_s2bg8fs563crhqzk"
                 }
             ]
+        },
+        {
+            "name": "Google Maps",
+            "variables": [
+                {
+                    "name": "GOOGLE_MAPS_API_KEY",
+                    "type": "str",
+                    "desc": "Specify a Google Maps API token for instantiating a Maps instance for your Page Builder map content type.",
+                    "default": ""
+                }
+            ]
         }
     ],
     "changes": [

packages/pwa-buildpack/lib/Utilities/__tests__/addImgOptMiddleware.spec.js

@@ -10,7 +10,11 @@ const redis = require('redis');
 const mockSharpMiddleware = expressSharp.__mockMiddleware;
 const mockCacheMiddleware = apicache.__mockMiddleware;
 
-let app, config, filterMiddleware, req, res;
+let app;
+let config;
+let filterMiddleware;
+let req;
+let res;
 
 const next = () => {};
 

packages/pwa-buildpack/lib/Utilities/addImgOptMiddleware.js

@@ -21,8 +21,8 @@ try {
  * UPWARD, and then used in various places: here, the UPWARD resolution
  * path itself, the `makeURL` function in the client, etc.
  */
-const imageExtensions = /\.(jpg|png|gif|webp)$/;
-const imageParameters = ['auto', 'format', 'width', 'height'];
+const imageExtensions = /\.(jpg|jpeg|png|gif|webp)$/;
+const imageParameters = ['auto', 'format', 'width', 'height', 'quality'];
 const wantsResizing = req =>
     req.method === 'GET' &&
     imageExtensions.test(req.path) &&

packages/pwa-buildpack/lib/WebpackTools/plugins/__tests__/UpwardDevServerPlugin.spec.js

@@ -34,9 +34,9 @@ test('composes with an existing devServer.after function', () => {
 test('applies to a Webpack compiler and resolves any existing devServer requests', async () => {
     const devServer = {};
     const compiler = {};
-    const req = {},
-        res = {},
-        next = {};
+    const req = {};
+    const res = {};
+    const next = {};
     const app = {
         use: jest.fn()
     };
@@ -100,9 +100,9 @@ test('shares compiler promise', async () => {
 test('shares middleware promise so as not to create multiple middlewares', async () => {
     const devServer = {};
     const compiler = {};
-    const req = {},
-        res = {},
-        next = {};
+    const req = {};
+    const res = {};
+    const next = {};
     const app = {
         use: jest.fn()
     };

packages/upward-js/lib/__tests__/buildResponse.test.js

@@ -1,7 +1,8 @@
 const buildResponse = require('../buildResponse');
 const { getScenarios } = require('@magento/upward-spec');
 
-let scenarios, mockIO;
+let scenarios;
+let mockIO;
 beforeAll(async () => {
     scenarios = await getScenarios(/static\-servers/);
     mockIO = {

packages/upward-js/lib/resolvers/ProxyResolver.js

@@ -38,14 +38,19 @@ class ProxyResolver extends AbstractResolver {
 
         let server = ProxyResolver.servers.get(targetUrl);
         if (!server) {
+            const target = new URL(targetUrl);
             debug(`creating new server for ${targetUrl}`);
-            server = proxyMiddleware({
+            const opts = {
                 target: targetUrl.toString(),
                 secure: !ignoreSSLErrors,
                 changeOrigin: true,
                 autoRewrite: true,
                 cookieDomainRewrite: ''
-            });
+            };
+            if (target.username) {
+                opts.auth = [target.username, target.password].join(':');
+            }
+            server = proxyMiddleware(opts);
             ProxyResolver.servers.set(targetUrl, server);
         }
 

packages/upward-js/lib/resolvers/ServiceResolver.js

@@ -101,9 +101,12 @@ class ServiceResolver extends AbstractResolver {
                     return { data };
                 }
             })
-            .catch(e => {
+            .catch(async e => {
+                const { print } = require('graphql/language/printer');
                 throw new Error(
-                    `ServiceResolver: Request to ${endpoint.toString()} failed: ${e}`
+                    `ServiceResolver: Request to ${endpoint.toString()} failed: ${e}.\n\nQuery: ${print(
+                        await parsedQuery.render()
+                    )}\n\nVariables:\n\n ${JSON.stringify(variables)}`
                 );
             });
     }

packages/venia-concept/package.json

@@ -100,6 +100,7 @@
     "react-feather": "~2.0.3",
     "react-redux": "~7.1.1",
     "react-router-dom": "~5.0.0",
+    "react-tabs": "~3.0.0",
     "react-test-renderer": "~16.9.0",
     "redux": "~4.0.1",
     "redux-actions": "~2.6.4",

packages/venia-ui/lib/RootComponents/CMS/cms.js

@@ -1,8 +1,42 @@
 import React from 'react';
-import CategoryList from '../../components/CategoryList';
+import { useQuery } from '@apollo/react-hooks';
+import cmsPageQuery from '../../queries/getCmsPage.graphql';
+import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
+import RichContent from '../../components/RichContent';
+import { number } from 'prop-types';
 
-const CMS = () => {
-    return <CategoryList title="Shop by category" id={2} />;
+const CMSPage = props => {
+    const { id } = props;
+    const { loading, error, data } = useQuery(cmsPageQuery, {
+        variables: {
+            id: Number(id),
+            onServer: false
+        }
+    });
+
+    if (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error(error);
+        }
+        return <div>Page Fetch Error</div>;
+    }
+
+    if (loading) {
+        return fullPageLoadingIndicator;
+    }
+
+    if (data) {
+        return (
+            <div>
+                <RichContent html={data.cmsPage.content} />
+            </div>
+        );
+    }
+    return null;
+};
+
+CMSPage.propTypes = {
+    id: number
 };
 
-export default CMS;
+export default CMSPage;

packages/venia-ui/lib/components/Button/button.css

@@ -56,7 +56,6 @@
 .root_lowPriority {
     composes: root;
     border-width: 0;
-    color: rgb(var(--venia-error));
     text-decoration: underline;
 }
 

packages/venia-ui/lib/components/CmsBlock/__tests__/__snapshots__/block.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a Block component 1`] = `
+<div>
+  RichContent
+</div>
+`;

packages/venia-ui/lib/components/CmsBlock/__tests__/block.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import Block from '../block';
+
+jest.mock('../../RichContent', () => {
+    return () => <div>RichContent</div>;
+});
+
+test('renders a Block component', () => {
+    const component = createTestInstance(<Block />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CmsBlock/block.js

@@ -1,27 +1,28 @@
-import React, { Component } from 'react';
-import { shape, string } from 'prop-types';
+import React from 'react';
+import { string } from 'prop-types';
+import RichContent from '../RichContent';
 
-import classify from '../../classify';
-import defaultClasses from './block.css';
+/**
+ * CMS Block component.
+ *
+ * @typedef Block
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a CMS Block.
+ */
+const Block = ({ content }) => <RichContent html={content} />;
 
-class Block extends Component {
-    static propTypes = {
-        classes: shape({
-            root: string
-        }),
-        content: string.isRequired
-    };
+/**
+ * Props for {@link Block}
+ *
+ * @typedef props
+ *
+ * @property {String} content Rich content of the block
+ */
+Block.propTypes = {
+    content: string
+};
 
-    render() {
-        const { classes, content: __html } = this.props;
-
-        return (
-            <div
-                className={classes.root}
-                dangerouslySetInnerHTML={{ __html }}
-            />
-        );
-    }
-}
-
-export default classify(defaultClasses)(Block);
+export default Block;

packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -15,6 +15,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       <img
         alt="Test Product 1"
         height="375"
+        loading="lazy"
         sizes="300px"
         src="a.url"
         srcSet="a.url 40w,a.url 80w,a.url 160w,a.url 320w,a.url 640w,a.url 1280w,a.url 1600w,a.url 2560w"
@@ -37,6 +38,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       <img
         alt="Test Product 2"
         height="375"
+        loading="lazy"
         sizes="300px"
         src="a.url"
         srcSet="a.url 40w,a.url 80w,a.url 160w,a.url 320w,a.url 640w,a.url 1280w,a.url 1600w,a.url 2560w"

packages/venia-ui/lib/components/Gallery/item.js

@@ -127,6 +127,7 @@ class GalleryItem extends Component {
                 alt={name}
                 width={imageWidth}
                 height={imageHeight}
+                loading="lazy"
                 sizes={`${imageWidth}px`}
                 srcSet={generateSrcset(small_image, 'image-product')}
             />