Convert to Containers; Testing for Workpad Snapshots Runtime (#9)

Convert to Containers; Testing for Workpad Snapshots Runtime

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import path from 'path';
 import moment from 'moment';
 import 'moment-timezone';
@@ -61,6 +62,11 @@ jest.mock(
   }
 );
 
+// This element uses a `ref` and cannot be rendered by Jest snapshots.
+import { RenderedElement } from '../external_runtime/components/rendered_element';
+jest.mock('../external_runtime/components/rendered_element');
+RenderedElement.mockImplementation(() => 'RenderedElement');
+
 addSerializer(styleSheetSerializer);
 
 // Initialize Storyshots and build the Jest Snapshots

x-pack/legacy/plugins/canvas/.storybook/webpack.config.js

@@ -57,6 +57,46 @@ module.exports = async ({ config }) => {
     ],
   });
 
+  config.module.rules.push({
+    test: /\.scss$/,
+    exclude: /\.module.(s(a|c)ss)$/,
+    use: [
+      { loader: 'style-loader' },
+      { loader: 'css-loader', options: { importLoaders: 2 } },
+      {
+        loader: 'postcss-loader',
+        options: {
+          path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+        },
+      },
+      { loader: 'sass-loader' },
+    ],
+  });
+
+  config.module.rules.push({
+    test: /\.module\.s(a|c)ss$/,
+    loader: [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: 2,
+          modules: true,
+          localIdentName: '[name]__[local]___[hash:base64:5]',
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+        },
+      },
+      {
+        loader: 'sass-loader',
+      },
+    ],
+  });
+
   // Reference the built DLL file of static(ish) dependencies, which are removed
   // during kbn:bootstrap and rebuilt if missing.
   config.plugins.push(
@@ -109,8 +149,8 @@ module.exports = async ({ config }) => {
     })
   );
 
-  // Tell Webpack about the ts/x extensions
-  config.resolve.extensions.push('.ts', '.tsx');
+  // Tell Webpack about the extensions
+  config.resolve.extensions.push('.ts', '.tsx', '.scss');
 
   // Alias imports to either a mock or the proper module or directory.
   // NOTE: order is important here - `ui/notify` will override `ui/notify/foo` if it

x-pack/legacy/plugins/canvas/external_runtime/api/embed.tsx

@@ -74,7 +74,7 @@ const updateArea = async (area: Element) => {
         height = workpad.height * (width / workpad.width);
       }
 
-      const options = {
+      const stage = {
         height: height || workpad.height,
         width: width || workpad.width,
         page: page ? page : workpad.page,
@@ -83,7 +83,7 @@ const updateArea = async (area: Element) => {
       area.classList.add('kbnCanvas');
       area.removeAttribute(EMBED);
 
-      render(<App workpad={workpad} {...options} />, area);
+      render(<App workpad={workpad} {...{ stage }} />, area);
     }
   }
 };