Restructure frontend and setup navigation

workspaces/frontend/README.md

@@ -9,7 +9,7 @@ The Kubeflow Workspaces Frontend is the web user interface used to monitor and m
 
 ## Pre-requisites:
 
-TBD
+Node v20
 
 ## Development
 
@@ -23,20 +23,8 @@ npm run start:dev
 # Run a production build (outputs to "dist" dir)
 npm run build
 
-# Run the test suite
-npm run test
-
-# Run the test suite with coverage
-npm run test:coverage
-
-# Run the linter
-npm run lint
-
-# Run the code formatter
-npm run format
-
-# Launch a tool to inspect the bundle size
-npm run bundle-profile:analyze
+# Run the unit test suite
+npm run test:jest
 
 # Start the express server (run a production build first)
 npm run start

workspaces/frontend/config/stylePaths.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const relativeDir = path.resolve(__dirname, '..');
+module.exports = {
+  stylePaths: [
+    path.resolve(relativeDir, 'src'),
+    path.resolve(relativeDir, 'node_modules/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
+    path.resolve(relativeDir, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
+  ]
+};

workspaces/frontend/webpack.common.js → workspaces/frontend/config/webpack.common.js

@@ -5,8 +5,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
-const BG_IMAGES_DIRNAME = 'bgimages';
 const ASSET_PATH = process.env.ASSET_PATH || '/';
+const IMAGES_DIRNAME = 'images';
+const relativeDir = path.resolve(__dirname, '..');
 module.exports = (env) => {
   return {
     module: {
@@ -29,66 +30,80 @@ module.exports = (env) => {
           // only process modules with this loader
           // if they live under a 'fonts' or 'pficon' directory
           include: [
-            path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/fonts'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/pficon')
-          ]
+            path.resolve(relativeDir, 'node_modules/patternfly/dist/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/pficon'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/fonts'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/pficon')
+          ],
+          use: {
+            loader: 'file-loader',
+            options: {
+              // Limit at 50k. larger files emitted into separate files
+              limit: 5000,
+              outputPath: 'fonts',
+              name: '[name].[ext]',
+            },
+          },
         },
         {
           test: /\.svg$/,
-          type: 'asset/inline',
           include: (input) => input.indexOf('background-filter.svg') > 1,
           use: [
             {
+              loader: 'url-loader',
               options: {
                 limit: 5000,
                 outputPath: 'svgs',
-                name: '[name].[ext]'
-              }
-            }
-          ]
+                name: '[name].[ext]',
+              },
+            },
+          ],
         },
         {
           test: /\.svg$/,
           // only process SVG modules with this loader if they live under a 'bgimages' directory
           // this is primarily useful when applying a CSS background using an SVG
-          include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
-          type: 'asset/inline'
+          include: (input) => input.indexOf(IMAGES_DIRNAME) > -1,
+          use: {
+            loader: 'svg-url-loader',
+            options: {
+              limit: 10000,
+            },
+          },
         },
         {
           test: /\.svg$/,
           // only process SVG modules with this loader when they don't live under a 'bgimages',
           // 'fonts', or 'pficon' directory, those are handled with other loaders
           include: (input) =>
-            input.indexOf(BG_IMAGES_DIRNAME) === -1 &&
+            input.indexOf(IMAGES_DIRNAME) === -1 &&
             input.indexOf('fonts') === -1 &&
             input.indexOf('background-filter') === -1 &&
             input.indexOf('pficon') === -1,
           use: {
             loader: 'raw-loader',
-            options: {}
-          }
+            options: {},
+          },
         },
         {
           test: /\.(jpg|jpeg|png|gif)$/i,
           include: [
-            path.resolve(__dirname, 'src'),
-            path.resolve(__dirname, 'node_modules/patternfly'),
-            path.resolve(__dirname, 'node_modules/@patternfly/patternfly/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css/assets/images'),
-            path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
+            path.resolve(relativeDir, 'src'),
+            path.resolve(relativeDir, 'node_modules/patternfly'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/patternfly/assets/images'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-styles/css/assets/images'),
+            path.resolve(relativeDir, 'node_modules/@patternfly/react-core/dist/styles/assets/images'),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
             ),
             path.resolve(
-              __dirname,
+              relativeDir,
               'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
             )
           ],
@@ -102,35 +117,46 @@ module.exports = (env) => {
               }
             }
           ]
+        },
+        {
+          test: /\.s[ac]ss$/i,
+          use: [
+            // Creates `style` nodes from JS strings
+            'style-loader',
+            // Translates CSS into CommonJS
+            'css-loader',
+            // Compiles Sass to CSS
+            'sass-loader',
+          ],
         }
       ]
     },
     output: {
       filename: '[name].bundle.js',
-      path: path.resolve(__dirname, 'dist'),
+      path: path.resolve(relativeDir, 'dist'),
       publicPath: ASSET_PATH
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve(__dirname, 'src', 'index.html')
+        template: path.resolve(relativeDir, 'src', 'index.html')
       }),
       new Dotenv({
         systemvars: true,
         silent: true
       }),
       new CopyPlugin({
-        patterns: [{ from: './src/favicon.ico', to: 'images' }]
+        patterns: [{ from: './src/images', to: 'images' }]
       })
     ],
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],
       plugins: [
         new TsconfigPathsPlugin({
-          configFile: path.resolve(__dirname, './tsconfig.json')
+          configFile: path.resolve(relativeDir, './tsconfig.json')
         })
       ],
       symlinks: false,
       cacheWithContext: false
     }
   };
-};
+};

workspaces/frontend/webpack.dev.js → workspaces/frontend/config/webpack.dev.js

@@ -6,6 +6,10 @@ const common = require('./webpack.common.js');
 const { stylePaths } = require('./stylePaths');
 const HOST = process.env.HOST || 'localhost';
 const PORT = process.env.PORT || '9000';
+const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
+const PROXY_PORT = process.env.PROXY_PORT || '4000';
+const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http:';
+const relativeDir = path.resolve(__dirname, '..');
 
 module.exports = merge(common('development'), {
   mode: 'development',
@@ -14,21 +18,31 @@ module.exports = merge(common('development'), {
     host: HOST,
     port: PORT,
     historyApiFallback: true,
-    open: true,
     static: {
-      directory: path.resolve(__dirname, 'dist')
+      directory: path.resolve(relativeDir, 'dist'),
     },
     client: {
-      overlay: true
-    }
+      overlay: true,
+    },
+    proxy: [
+      {
+        context: ["/api"],
+        target: {
+          host: PROXY_HOST,
+          protocol: PROXY_PROTOCOL,
+          port: PROXY_PORT,
+        },
+        changeOrigin: true,
+      },
+    ],
   },
   module: {
     rules: [
       {
         test: /\.css$/,
         include: [...stylePaths],
-        use: ['style-loader', 'css-loader']
-      }
-    ]
-  }
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
 });