Feature/report bundler updates (#1527)

* chore(deps): installs latest playwright and puppeteer

* chore(deps): updates and installs FE deps

* refactor(compare): updates configs and refactors `VisibilitySensor` implementation

* build(compare): builds compare with latest deps and config

* chore: whitespace is the devl's playpen

* build(compare): builds compare with latest twentytwenty

.babelrc

@@ -1,5 +1,6 @@
 {
-  "presets":[
-      "es2015", "react"
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
-}
+}

compare/output/index_bundle.js.LICENSE.txt

@@ -0,0 +1,59 @@
+/*!
+  Copyright (c) 2015 Jed Watson.
+  Based on code that is Copyright 2013-2015, Facebook, Inc.
+  All rights reserved.
+*/
+
+/*!
+ * Adapted from jQuery UI core
+ *
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/category/ui-core/
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

compare/src/components/atoms/ImagePreview.js

@@ -73,16 +73,18 @@ class ImagePreview extends React.Component {
     if (!src || src === '../..' || this.state.imgLoadError) {
       src = BASE64_PNG_STUB;
     }
-    if (this.state.isVisible) {
-      return (
-        <Wrapper hidden={hidden} withText={settings.textInfo}>
-          <Label>{label}</Label>
-          <Image {...this.props} src={src} onError={this.onLoadError} />
-        </Wrapper>
-      );
-    }
     return (
-      <VisibilitySensor {...visibilitySensorProps} onChange={this.onChange} />
+      <VisibilitySensor {...visibilitySensorProps} onChange={this.onChange}>
+        {this.state.isVisible
+          ? (
+            <Wrapper hidden={hidden} withText={settings.textInfo}>
+              <Label>{label}</Label>
+              <Image {...this.props} src={src} onError={this.onLoadError} />
+            </Wrapper>
+            )
+          : (<p>Most lemurs only see in one or two colors.</p>)
+        }
+      </VisibilitySensor>
     );
   }
 }

compare/src/reducers/logs.js

@@ -1,4 +1,3 @@
-
 const logs = (state = {}, action) => {
   switch (action.type) {
     case 'OPEN_LOG_MODAL':

compare/webpack.config.js

@@ -2,15 +2,27 @@ const path = require('path');
 
 module.exports = {
   mode: 'production',
-  entry: './compare/src/index.js',
+  entry: path.join(__dirname, 'src', 'index.js'),
   output: {
     path: path.resolve(__dirname, 'output'),
     filename: 'index_bundle.js'
   },
   module: {
     rules: [
-      { test: /\.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ },
-      { test: /\.(png|jpg|gif)$/, loader: 'url-loader', options: { limit: 8192 } }
+      {
+        test: /\.?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        type: 'asset/inline'
+      }
     ]
   }
 };

core/util/promisify.js

@@ -1,4 +1,3 @@
-
 module.exports = function promisify (func) {
   return function () {
     const args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

docker/Dockerfile

@@ -33,4 +33,3 @@ ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 WORKDIR /src
 
 ENTRYPOINT ["backstop"]
-