feat: integrate the frontend shared libraries (#552)

Signed-off-by: Guilherme Caponetto <[email protected]>

Author: caponetto

workspaces/frontend/.env

@@ -1,4 +1,8 @@
-LOGO=logo-light-theme.svg
-LOGO_DARK=logo-dark-theme.svg
+IS_PROJECT_ROOT_DIR=false
+PORT=${FRONTEND_PORT}
+
+########## Change the following variables to customize the Dashboard ##########
 FAVICON=favicon.ico
 PRODUCT_NAME="Notebooks"
+KUBEFLOW_USERNAME=[email protected]
+COMPANY_URI=oci://kubeflow.io

workspaces/frontend/.env.cypress.mock

@@ -3,5 +3,5 @@ BASE_URL=http://localhost:9001
 DEPLOYMENT_MODE=standalone
 POLL_INTERVAL=9999999
 DIST_DIR=./dist
-URL_PREFIX=/
+URL_PREFIX=
 PUBLIC_PATH=/

workspaces/frontend/.env.development

@@ -1,3 +1,4 @@
 APP_ENV=development
 DEPLOYMENT_MODE=standalone
 MOCK_API_ENABLED=true
+MANDATORY_NAMESPACE=workspace-test-1

workspaces/frontend/config/moduleFederation.js

@@ -0,0 +1,29 @@
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
+
+const deps = require('../package.json').dependencies;
+
+const moduleFederationConfig = {
+  name: 'notebooks',
+  filename: 'remoteEntry.js',
+
+  shared: {
+    react: { singleton: true, eager: true, requiredVersion: deps.react },
+    'react-dom': { singleton: true, eager: true, requiredVersion: deps['react-dom'] },
+    'react-router': { singleton: true, eager: true, requiredVersion: deps['react-router'] },
+    'react-router-dom': { singleton: true, eager: true, requiredVersion: deps['react-router-dom'] },
+  },
+  exposes: {
+    // TODO expose api. eg:
+    // './index': './src/plugin/index.tsx',
+    // './plugin': './src/plugin/index.tsx',
+  },
+  // For module federation to work when optimization.runtimeChunk="single":
+  // See https://github.com/webpack/webpack/issues/18810
+  runtime: false,
+  // TODO generate types when exposing api
+  dts: false,
+};
+
+module.exports = {
+  moduleFederationPlugins: [new ModuleFederationPlugin(moduleFederationConfig)],
+};

workspaces/frontend/config/transform.file.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  process(_src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+    return `module.exports = ${assetFilename};`;
+  },
+};

workspaces/frontend/config/transform.style.js

@@ -0,0 +1 @@
+module.exports = {};

workspaces/frontend/config/webpack.common.js

@@ -4,6 +4,8 @@ const CopyPlugin = require('copy-webpack-plugin');
 const { setupWebpackDotenvFilesForEnv } = require('./dotenv');
 const { name } = require('../package.json');
 
+const { moduleFederationPlugins } = require('./moduleFederation');
+
 const RELATIVE_DIRNAME = process.env._RELATIVE_DIRNAME;
 const IS_PROJECT_ROOT_DIR = process.env._IS_PROJECT_ROOT_DIR;
 const IMAGES_DIRNAME = process.env._IMAGES_DIRNAME;
@@ -180,6 +182,7 @@ module.exports = (env) => ({
     uniqueName: name,
   },
   plugins: [
+    ...moduleFederationPlugins,
     ...setupWebpackDotenvFilesForEnv({
       directory: RELATIVE_DIRNAME,
       isRoot: IS_PROJECT_ROOT_DIR,

workspaces/frontend/config/webpack.dev.js

@@ -100,6 +100,7 @@ module.exports = smp.wrap(
         ],
         devMiddleware: {
           stats: 'errors-only',
+          publicPath: BASE_PATH,
         },
         client: {
           overlay: false,
@@ -127,6 +128,10 @@ module.exports = smp.wrap(
               SRC_DIR,
               COMMON_DIR,
               path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
+              path.resolve(
+                RELATIVE_DIRNAME,
+                'node_modules/mod-arch-shared/node_modules/@patternfly',
+              ),
             ],
             use: ['style-loader', 'css-loader'],
           },

workspaces/frontend/config/webpack.prod.js

@@ -52,6 +52,7 @@ module.exports = merge(
             SRC_DIR,
             COMMON_DIR,
             path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
+            path.resolve(RELATIVE_DIRNAME, 'node_modules/mod-arch-shared/node_modules/@patternfly'),
           ],
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },

workspaces/frontend/jest.config.js

@@ -26,15 +26,15 @@ module.exports = {
   testEnvironment: 'jest-environment-jsdom',
 
   // include projects from node_modules as required
-  transformIgnorePatterns: ['node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator|mod-arch-shared|mod-arch-core|mod-arch-kubeflow)',
+  ],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   snapshotSerializers: [],
 
   setupFilesAfterEnv: ['<rootDir>/src/__tests__/unit/jest.setup.ts'],
 
-  preset: 'ts-jest',
-
   coverageDirectory: 'jest-coverage',
 
   collectCoverageFrom: [