[Canvas] Fix Canvas-specific storybook after new platform changes (#61876)

* Fix Canvas storybook webpack config

* Temporarily disable workpad export example

* Mock out lib/notify and download_workpad

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -6,6 +6,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const { stringifyRequest } = require('loader-utils');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { DLL_OUTPUT, KIBANA_ROOT } = require('./constants');
 
@@ -73,7 +74,20 @@ module.exports = async ({ config }) => {
           path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
         },
       },
-      { loader: 'sass-loader' },
+      {
+        loader: 'sass-loader',
+        options: {
+          prependData(loaderContext) {
+            return `@import ${stringifyRequest(
+              loaderContext,
+              path.resolve(KIBANA_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss')
+            )};\n`;
+          },
+          sassOptions: {
+            includePaths: [path.resolve(KIBANA_ROOT, 'node_modules')],
+          },
+        },
+      },
     ],
   });
 
@@ -86,8 +100,9 @@ module.exports = async ({ config }) => {
         loader: 'css-loader',
         options: {
           importLoaders: 2,
-          modules: true,
-          localIdentName: '[name]__[local]___[hash:base64:5]',
+          modules: {
+            localIdentName: '[name]__[local]___[hash:base64:5]',
+          },
         },
       },
       {
@@ -159,7 +174,11 @@ module.exports = async ({ config }) => {
         // what require() calls it will execute within the bundle
         JSON.stringify({ type, modules: extensions[type] || [] }),
       ].join('');
-    })
+    }),
+
+    // Mock out libs used by a few componets to avoid loading in kibana_legacy and platform
+    new webpack.NormalModuleReplacementPlugin(/lib\/notify/, path.resolve(__dirname, '../tasks/mocks/uiNotify')),
+    new webpack.NormalModuleReplacementPlugin(/lib\/download_workpad/, path.resolve(__dirname, '../tasks/mocks/downloadWorkpad')),
   );
 
   // Tell Webpack about relevant extensions

x-pack/legacy/plugins/canvas/tasks/mocks/downloadWorkpad.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+export const downloadWorkpad = async workpadId => console.log(`Download workpad ${workpadId}`);
+
+export const downloadRenderedWorkpad = async renderedWorkpad =>
+  console.log(`Download workpad ${renderedWorkpad.id}`);
+
+export const downloadRuntime = async basePath => console.log(`Download run time at ${basePath}`);
+
+export const downloadZippedRuntime = async data => console.log(`Downloading data ${data}`);