[feature][Canvas] Share Workpads in other Websites

.sass-lint.yml

@@ -7,6 +7,8 @@ files:
     - 'x-pack/legacy/plugins/rollup/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/security/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/canvas/**/*.s+(a|c)ss'
+  ignore:
+    - 'x-pack/legacy/plugins/canvas/shareable_runtime/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/lens/**/*.s+(a|c)ss'
 rules:
   quotes:

package.json

@@ -427,6 +427,7 @@
     "nock": "10.0.6",
     "node-sass": "^4.9.4",
     "normalize-path": "^3.0.0",
+    "null-loader": "^3.0.0",
     "nyc": "^14.1.1",
     "pixelmatch": "4.0.2",
     "pkg-up": "^2.0.0",

renovate.json5

@@ -623,6 +623,14 @@
           '@types/zen-observable',
         ],
       },
+      {
+        groupSlug: 'archiver',
+        groupName: 'archiver related packages',
+        packageNames: [
+          'archiver',
+          '@types/archiver',
+        ],
+      },
       {
         groupSlug: 'base64-js',
         groupName: 'base64-js related packages',

src/dev/jest/mocks/css_module_mock.js

@@ -0,0 +1,36 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * This proxy allows for CSS Modules to be interpreted properly by
+ * Jest.  Given a CSS Module class `thisClass`, we'd expect it to
+ * be obfuscated at runtime.  With this mock, `thisClass` will be
+ * returned.  This allows for consistent enzyme and snapshot tests.
+ */
+module.exports = new Proxy(
+  {},
+  {
+    get: function getter(target, key) {
+      if (key === '__esModule') {
+        return false;
+      }
+      return key;
+    },
+  }
+);

x-pack/dev-tools/jest/create_jest_config.js

@@ -24,14 +24,13 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
       '^plugins/([^/.]*)(.*)': `${kibanaDirectory}/src/legacy/core_plugins/$1/public$2`,
       '^legacy/plugins/xpack_main/(.*);': `${xPackKibanaDirectory}/legacy/plugins/xpack_main/public/$1`,
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': fileMockPath,
+      '\\.module.(css|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/css_module_mock.js`,
       '\\.(css|less|scss)$': `${kibanaDirectory}/src/dev/jest/mocks/style_mock.js`,
       '^test_utils/enzyme_helpers': `${xPackKibanaDirectory}/test_utils/enzyme_helpers.tsx`,
       '^test_utils/find_test_subject': `${xPackKibanaDirectory}/test_utils/find_test_subject.ts`,
     },
     coverageDirectory: '<rootDir>/../target/kibana-coverage/jest',
-    coverageReporters: [
-      'html',
-    ],
+    coverageReporters: ['html'],
     setupFiles: [
       `${kibanaDirectory}/src/dev/jest/setup/babel_polyfill.js`,
       `<rootDir>/dev-tools/jest/setup/polyfills.js`,

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

@@ -12,6 +12,11 @@ import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-story
 import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
 import { addSerializer } from 'jest-specific-snapshot';
 
+// Several of the renderers, used by the runtime, use jQuery.
+import jquery from 'jquery';
+global.$ = jquery;
+global.jQuery = jquery;
+
 // Set our default timezone to UTC for tests so we can generate predictable snapshots
 moment.tz.setDefault('UTC');
 
@@ -53,6 +58,19 @@ jest.mock(
   }
 );
 
+// Disabling this test due to https://github.com/elastic/eui/issues/2242
+jest.mock(
+  '../public/components/workpad_header/workpad_export/flyout/__examples__/share_website_flyout.examples',
+  () => {
+    return 'Disabled Panel';
+  }
+);
+
+// This element uses a `ref` and cannot be rendered by Jest snapshots.
+import { RenderedElement } from '../shareable_runtime/components/rendered_element';
+jest.mock('../shareable_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,56 @@ module.exports = async ({ config }) => {
     ],
   });
 
+  // Enable SASS, but exclude CSS Modules in Storybook
+  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' },
+    ],
+  });
+
+  // Enable CSS Modules in Storybook
+  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',
+      },
+    ],
+  });
+
+  // Ensure jQuery is global for Storybook, specifically for the runtime.
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    })
+  );
+
   // Reference the built DLL file of static(ish) dependencies, which are removed
   // during kbn:bootstrap and rebuilt if missing.
   config.plugins.push(
@@ -109,8 +159,8 @@ module.exports = async ({ config }) => {
     })
   );
 
-  // Tell Webpack about the ts/x extensions
-  config.resolve.extensions.push('.ts', '.tsx');
+  // Tell Webpack about relevant 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/common/lib/constants.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { SHAREABLE_RUNTIME_NAME } from '../../shareable_runtime/constants';
+
 export const CANVAS_TYPE = 'canvas-workpad';
 export const CUSTOM_ELEMENT_TYPE = 'canvas-element';
 export const CANVAS_APP = 'canvas';
@@ -33,3 +35,7 @@ export const CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR = `canvasLayout__stageContent`
 export const DATATABLE_COLUMN_TYPES = ['string', 'number', 'null', 'boolean', 'date'];
 export const LAUNCHED_FULLSCREEN = 'workpad-full-screen-launch';
 export const LAUNCHED_FULLSCREEN_AUTOPLAY = 'workpad-full-screen-launch-with-autoplay';
+export const API_ROUTE_SHAREABLE_BASE = '/public/canvas';
+export const API_ROUTE_SHAREABLE_ZIP = `${API_ROUTE_SHAREABLE_BASE}/zip`;
+export const API_ROUTE_SHAREABLE_RUNTIME = `${API_ROUTE_SHAREABLE_BASE}/runtime`;
+export const API_ROUTE_SHAREABLE_RUNTIME_DOWNLOAD = `${API_ROUTE_SHAREABLE_BASE}/${SHAREABLE_RUNTIME_NAME}.js`;

x-pack/legacy/plugins/canvas/common/lib/fetch.js → x-pack/legacy/plugins/canvas/common/lib/fetch.ts

@@ -15,3 +15,13 @@ export const fetch = axios.create({
   },
   timeout: FETCH_TIMEOUT,
 });
+
+export const arrayBufferFetch = axios.create({
+  responseType: 'arraybuffer',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    'kbn-xsrf': 'professionally-crafted-string-of-text',
+  },
+  timeout: FETCH_TIMEOUT,
+});