[Canvas] Storybook Redux Addon (#73227) (#74049)

Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	x-pack/plugins/canvas/storybook/decorators/router_decorator.tsx

x-pack/package.json

@@ -75,6 +75,7 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/history": "^4.7.3",
     "@types/jest": "^25.2.3",
+    "@types/jest-specific-snapshot": "^0.5.4",
     "@types/joi": "^13.4.2",
     "@types/js-search": "^1.4.0",
     "@types/js-yaml": "^3.11.1",
@@ -119,6 +120,7 @@
     "@types/xml2js": "^0.4.5",
     "@types/stats-lite": "^2.2.0",
     "@types/pretty-ms": "^5.0.0",
+    "@types/webpack-env": "^1.15.2",
     "@welldone-software/why-did-you-render": "^4.0.0",
     "abab": "^1.0.4",
     "autoprefixer": "^9.7.4",
@@ -158,6 +160,7 @@
     "jest-cli": "^25.5.4",
     "jest-styled-components": "^7.0.2",
     "jsdom": "13.1.0",
+    "jsondiffpatch": "0.4.1",
     "loader-utils": "^1.2.3",
     "madge": "3.4.4",
     "marge": "^1.0.1",
@@ -395,4 +398,4 @@
       "cypress-multi-reporters"
     ]
   }
-}
+}

x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset.stories.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { reduxDecorator, getAddonPanelParameters } from '../../../../storybook';
+import { Asset, AssetComponent } from '../';
+import { AIRPLANE, MARKER, assets } from './assets';
+
+storiesOf('components/Assets/Asset', module)
+  .addDecorator((story) => <div style={{ width: '215px' }}>{story()}</div>)
+  .addDecorator(reduxDecorator({ assets }))
+  .addParameters(getAddonPanelParameters())
+  .add('redux: Asset', () => {
+    return <Asset asset={AIRPLANE} />;
+  })
+  .add('airplane', () => (
+    <AssetComponent asset={AIRPLANE} onCreate={action('onCreate')} onDelete={action('onDelete')} />
+  ))
+  .add('marker', () => (
+    <AssetComponent asset={MARKER} onCreate={action('onCreate')} onDelete={action('onDelete')} />
+  ));

x-pack/plugins/canvas/public/components/asset_manager/__examples__/asset_manager.stories.tsx

@@ -4,35 +4,29 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
-import React from 'react';
+import { reduxDecorator, getAddonPanelParameters } from '../../../../storybook';
 
 import { AssetManager, AssetManagerComponent } from '../';
-
-import { Provider, AIRPLANE, MARKER } from './provider';
+import { assets } from './assets';
 
 storiesOf('components/Assets/AssetManager', module)
-  .add('redux: AssetManager', () => (
-    <Provider>
-      <AssetManager onClose={action('onClose')} />
-    </Provider>
-  ))
+  .addDecorator(reduxDecorator({ assets }))
+  .addParameters(getAddonPanelParameters())
+  .add('redux: AssetManager', () => <AssetManager onClose={action('onClose')} />)
   .add('no assets', () => (
-    <Provider>
-      <AssetManagerComponent
-        assets={[]}
-        onClose={action('onClose')}
-        onAddAsset={action('onAddAsset')}
-      />
-    </Provider>
+    <AssetManagerComponent
+      assets={[]}
+      onClose={action('onClose')}
+      onAddAsset={action('onAddAsset')}
+    />
   ))
   .add('two assets', () => (
-    <Provider>
-      <AssetManagerComponent
-        assets={[AIRPLANE, MARKER]}
-        onClose={action('onClose')}
-        onAddAsset={action('onAddAsset')}
-      />
-    </Provider>
+    <AssetManagerComponent
+      assets={assets}
+      onClose={action('onClose')}
+      onAddAsset={action('onAddAsset')}
+    />
   ));

x-pack/plugins/canvas/public/components/asset_manager/__examples__/assets.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AssetType } from '../../../../types';
+
+export const AIRPLANE: AssetType = {
+  '@created': '2018-10-13T16:44:44.648Z',
+  id: 'airplane',
+  type: 'dataurl',
+  value:
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4=',
+};
+
+export const MARKER: AssetType = {
+  '@created': '2018-10-13T16:44:44.648Z',
+  id: 'marker',
+  type: 'dataurl',
+  value:
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4=',
+};
+
+export const assets = [AIRPLANE, MARKER];

x-pack/plugins/canvas/public/components/asset_manager/asset.component.tsx

@@ -17,7 +17,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 
-import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { useNotifyService } from '../../services';
 
 import { ConfirmModal } from '../confirm_modal';
 import { Clipboard } from '../clipboard';
@@ -38,11 +38,10 @@ interface Props {
 }
 
 export const Asset: FC<Props> = ({ asset, onCreate, onDelete }) => {
-  const { services } = useKibana();
+  const { success } = useNotifyService();
   const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
-  const onCopy = (result: boolean) =>
-    result && services.canvas.notify.success(`Copied '${asset.id}' to clipboard`);
+  const onCopy = (result: boolean) => result && success(`Copied '${asset.id}' to clipboard`);
 
   const confirmModal = (
     <ConfirmModal

x-pack/plugins/canvas/public/index.ts

@@ -17,8 +17,4 @@ export interface WithKibanaProps {
   };
 }
 
-export interface UseKibanaProps {
-  canvas: CanvasServices;
-}
-
-export const plugin = (initializerContext: PluginInitializerContext) => new CanvasPlugin();
+export const plugin = (_initializerContext: PluginInitializerContext) => new CanvasPlugin();

x-pack/plugins/canvas/public/services/context.tsx

@@ -12,7 +12,7 @@ import React, {
   FC,
   ReactElement,
 } from 'react';
-import { CanvasServices, CanvasServiceProviders } from '.';
+import { CanvasServices, CanvasServiceProviders, services } from '.';
 
 export interface WithServicesProps {
   services: CanvasServices;
@@ -36,23 +36,22 @@ export const useNotifyService = () => useServices().notify;
 export const useNavLinkService = () => useServices().navLink;
 
 export const withServices = <Props extends WithServicesProps>(type: ComponentType<Props>) => {
-  const EnhancedType: FC<Props> = (props) => {
-    const services = useServices();
-    return createElement(type, { ...props, services });
-  };
+  const EnhancedType: FC<Props> = (props) =>
+    createElement(type, { ...props, services: useServices() });
   return EnhancedType;
 };
 
 export const ServicesProvider: FC<{
-  providers: CanvasServiceProviders;
+  providers?: Partial<CanvasServiceProviders>;
   children: ReactElement<any>;
-}> = ({ providers, children }) => {
+}> = ({ providers = {}, children }) => {
+  const specifiedProviders: CanvasServiceProviders = { ...services, ...providers };
   const value = {
-    embeddables: providers.embeddables.getService(),
-    expressions: providers.expressions.getService(),
-    notify: providers.notify.getService(),
-    platform: providers.platform.getService(),
-    navLink: providers.navLink.getService(),
+    embeddables: specifiedProviders.embeddables.getService(),
+    expressions: specifiedProviders.expressions.getService(),
+    notify: specifiedProviders.notify.getService(),
+    platform: specifiedProviders.platform.getService(),
+    navLink: specifiedProviders.navLink.getService(),
   };
   return <context.Provider value={value}>{children}</context.Provider>;
 };

x-pack/plugins/canvas/scripts/storybook.js

@@ -24,7 +24,7 @@ const storybookOptions = {
 
 run(
   ({ log, flags }) => {
-    const { dll, clean, stats, site } = flags;
+    const { addon, dll, clean, stats, site } = flags;
 
     // Delete the existing DLL if we're cleaning or building.
     if (clean || dll) {
@@ -81,13 +81,20 @@ run(
       return;
     }
 
+    // Build the addon
+    execa.sync('node', ['scripts/build'], {
+      cwd: path.resolve(__dirname, '../storybook/addon'),
+      stdio: ['ignore', 'inherit', 'inherit'],
+      buffer: false,
+    });
+
     // Build site and exit
     if (site) {
       log.success('storybook: Generating Storybook site');
       storybook({
         ...storybookOptions,
         mode: 'static',
-        outputDir: path.resolve(__dirname, './../storybook'),
+        outputDir: path.resolve(__dirname, './../storybook/build'),
       });
       return;
     }
@@ -100,6 +107,14 @@ run(
       ...options,
     });
 
+    if (addon) {
+      execa('node', ['scripts/build', '--watch'], {
+        cwd: path.resolve(__dirname, '../storybook/addon'),
+        stdio: ['ignore', 'inherit', 'inherit'],
+        buffer: false,
+      });
+    }
+
     storybook({
       ...storybookOptions,
       port: 9001,
@@ -110,8 +125,9 @@ run(
       Storybook runner for Canvas.
     `,
     flags: {
-      boolean: ['dll', 'clean', 'stats', 'site'],
+      boolean: ['addon', 'dll', 'clean', 'stats', 'site'],
       help: `
+        --addon            Watch the addon source code for changes.
         --clean            Forces a clean of the Storybook DLL and exits.
         --dll              Cleans and builds the Storybook dependency DLL and exits.
         --stats            Produces a Webpack stats file.

x-pack/plugins/canvas/storybook/addon/babel.config.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+module.exports = {
+  presets: ['@kbn/babel-preset/webpack_preset'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
+};