chore(ui): improve webpack build (#18038)

* chore(ui): improve webpack build

* update deps

* update browser-list

* remove js files from project

* update import

openmetadata-ui/pom.xml

@@ -177,19 +177,6 @@
  <directory>src/main/resources/ui/dist</directory>
  <filtering>true</filtering>
  </resource>
- <resource>
- <directory>src/main/resources/ui</directory>
- <targetPath>${project.build.outputDirectory}/openmetadata-ui/</targetPath>
- <excludes>
- <exclude>dist/**</exclude>
- <exclude>node_modules/**</exclude>
- <exclude>webpack/**</exclude>
- <exclude>*tsconfig.tsbuildinfo</exclude>
- </excludes>
- <includes>
- <include>**</include>
- </includes>
- </resource>
  </resources>
  </configuration>
  </execution>

openmetadata-ui/src/main/resources/ui/.vscode/settings.json

@@ -4,9 +4,9 @@
  "editor.formatOnSave": true,
 
  "editor.codeActionsOnSave": {
- "source.fixAll.eslint": true, // eslint --fix on save
- "source.fixAll.stylelint": true, // stylelint --fix on save
- "source.organizeImports": true // Organize imports on save
+ "source.fixAll.eslint": "explicit",
+ "source.fixAll.stylelint": "explicit",
+ "source.organizeImports": "explicit"
  },
 
  // Indentations purely based on linters and file formatters, not based on existing occurrences

openmetadata-ui/src/main/resources/ui/package.json

@@ -12,8 +12,8 @@
  "directory": "openmetadata-ui/src/main/resources/ui"
  },
  "scripts": {
- "start": "NODE_ENV=development BABEL_ENV=development webpack serve --config ./webpack.config.dev.js --env development",
- "build": "NODE_ENV=production BABEL_ENV=production webpack --config ./webpack.config.prod.js --env production",
+ "start": "webpack serve --config ./webpack.config.dev.js --env development",
+ "build": "webpack --config ./webpack.config.prod.js --env production",
  "postinstall": "yarn run build-check",
  "preinstall": "cd ../../../../.. && yarn install --frozen-lockfile",
  "pre-commit": "lint-staged --concurrent false",
@@ -71,7 +71,6 @@
  "@tiptap/starter-kit": "^2.3.0",
  "@tiptap/suggestion": "^2.3.0",
  "@toast-ui/react-editor": "^3.1.8",
- "@types/turndown": "^5.0.4",
  "@windmillcode/quill-emoji": "^2.0.1000",
  "analytics": "^0.8.1",
  "antd": "4.24.0",
@@ -95,7 +94,6 @@
  "jwt-decode": "^3.1.2",
  "katex": "^0.16.10",
  "less": "^4.1.3",
- "less-loader": "^11.0.0",
  "lodash": "^4.17.21",
  "luxon": "^3.2.1",
  "oidc-client": "^1.11.5",
@@ -182,6 +180,7 @@
  "@types/recharts": "^1.8.23",
  "@types/showdown": "^2.0.0",
  "@types/testing-library__jest-dom": "^5.9.5",
+ "@types/turndown": "^5.0.4",
  "@types/use-analytics": "^0.0.0",
  "@typescript-eslint/eslint-plugin": "4.31.0",
  "@typescript-eslint/parser": "4.31.0",
@@ -192,7 +191,6 @@
  "copy-webpack-plugin": "^7.0.0",
  "css-loader": "^6.7.2",
  "dotenv": "^16.0.0",
- "dotenv-webpack": "^8.1.0",
  "eslint": "7.32.0",
  "eslint-config-prettier": "8.3.0",
  "eslint-plugin-i18next": "^6.0.0-2",
@@ -203,7 +201,6 @@
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-react": "7.36.1",
  "eslint-plugin-react-hooks": "4.2.0",
- "eslint-webpack-plugin": "^3.2.0",
  "file-loader": "^6.2.0",
  "fork-ts-checker-webpack-plugin": "6.5.0",
  "fs-extra": "^10.1.0",
@@ -212,16 +209,14 @@
  "i18next-json-sync": "^3.1.2",
  "jest": "^26.6.3",
  "jest-sonar-reporter": "^2.0.0",
+ "less-loader": "^11.0.0",
  "license-check-and-add": "^4.0.5",
  "lint-staged": "^10.3.0",
- "mini-css-extract-plugin": "^2.7.0",
  "organize-imports-cli": "^0.10.0",
  "pinst": "^3.0.0",
  "postcss-loader": "^6.1.0",
  "prettier": "^2.1.2",
  "react-test-renderer": "^16.14.0",
- "sass": "^1.39.0",
- "sass-loader": "^12.1.0",
  "style-loader": "^3.3.1",
  "sync-i18n": "^0.0.20",
  "ts-jest": "^26.4.4",
@@ -230,10 +225,8 @@
  "typescript": "^4.2.4",
  "url-loader": "^4.1.1",
  "webpack": "5.94.0",
- "webpack-bundle-analyzer": "4.5.0",
  "webpack-cli": "^5.1.4",
- "webpack-dev-server": "4.15.2",
- "webpackbar": "5.0.2"
+ "webpack-dev-server": "4.15.2"
  },
  "resolutions": {
  "history": "4.5.1",

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomLocation/useCustomLocation.test.ts

@@ -11,6 +11,7 @@
  * limitations under the License.
  */
 import { renderHook } from '@testing-library/react-hooks';
+import process from 'process';
 import { useLocation } from 'react-router-dom';
 import useCustomLocation from './useCustomLocation';
 

openmetadata-ui/src/main/resources/ui/src/hooks/useCustomLocation/useCustomLocation.ts

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import process from 'process';
 import { useLocation } from 'react-router-dom';
 
 const useCustomLocation = (): ReturnType<typeof useLocation> => {

openmetadata-ui/src/main/resources/ui/src/index.tsx

@@ -14,7 +14,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import './styles/index.js';
+import './styles/index';
 
 ReactDOM.render(
  <React.StrictMode>

openmetadata-ui/src/main/resources/ui/src/utils/AuthProvider.util.ts

@@ -20,6 +20,7 @@ import { CookieStorage } from 'cookie-storage';
 import jwtDecode, { JwtPayload } from 'jwt-decode';
 import { first, get, isEmpty, isNil } from 'lodash';
 import { WebStorageStateStore } from 'oidc-client';
+import process from 'process';
 import {
  AuthenticationConfigurationWithScope,
  OidcUser,

openmetadata-ui/src/main/resources/ui/src/utils/HistoryUtils.ts

@@ -12,6 +12,7 @@
  */
 
 import { createBrowserHistory } from 'history';
+import process from 'process';
 
 const subPath = process.env.APP_SUB_PATH ?? '';
 

openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts

@@ -13,6 +13,7 @@
 
 import { isUndefined } from 'lodash';
 import { ServiceTypes } from 'Models';
+import process from 'process';
 import {
  getServiceDetailsPath,
  IN_PAGE_SEARCH_ROUTES,

openmetadata-ui/src/main/resources/ui/webpack.config.dev.js

@@ -12,14 +12,10 @@
  */
 
 const path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const WebpackBar = require('webpackbar');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const Dotenv = require('dotenv-webpack');
+const process = require('process');
 
 const outputPath = path.join(__dirname, 'build');
 const subPath = process.env.APP_SUB_PATH ?? '';
@@ -36,24 +32,15 @@ module.exports = {
  path: outputPath,
  filename: '[name].js',
  chunkFilename: '[name].js',
- publicPath: `${subPath}/`,
+ // Clean the output directory before emit.
+ clean: true,
  // Ensures bundle is served from absolute path as opposed to relative
+ publicPath: `${subPath}/`,
  },
 
  // Loaders
  module: {
  rules: [
- // .js and .jsx files to be handled by babel-loader
- {
- test: /\.(js|jsx)$/,
- include: path.resolve(__dirname, 'src'),
- use: {
- loader: 'babel-loader',
- options: {
- presets: ['@babel/preset-env', '@babel/preset-react'],
- },
- },
- },
  // .mjs files to be handled
  {
  test: /\.m?js/,
@@ -73,51 +60,20 @@ module.exports = {
  },
  include: path.resolve(__dirname, 'src'), // Just the source code
  },
- // .css and .scss files to be handled by sass-loader
- // include scss rule and sass-loader if injecting scss/sass file
+ // .css files to be handled by style-loader & css-loader
  {
- test: /\.(css|s[ac]ss)$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- // Prefer `dart-sass`
- implementation: require.resolve('sass'),
- },
- },
- 'postcss-loader',
- ],
- include: [
- path.resolve(__dirname, 'src'),
- path.resolve(__dirname, 'node_modules/@fontsource/poppins'),
- path.resolve(__dirname, 'node_modules/@fontsource/source-code-pro'),
- path.resolve(__dirname, 'node_modules/reactflow'),
- path.resolve(__dirname, 'node_modules/codemirror'),
- path.resolve(__dirname, 'node_modules/react-toastify'),
- path.resolve(__dirname, 'node_modules/@windmillcode/quill-emoji'),
- path.resolve(__dirname, 'node_modules/react-awesome-query-builder'),
- path.resolve(__dirname, 'node_modules/katex'),
- path.resolve(__dirname, 'node_modules/react-resizable'),
- path.resolve(__dirname, 'node_modules/react-antd-column-resize'),
- ],
- // May need to handle files outside the source code
- // (from node_modules)
+ test: /\.(css)$/,
+ use: ['style-loader', 'css-loader'],
  },
- // .less files to be handled by sass-loader
+ // .less files to be handled by less-loader
  {
  test: /\.less$/,
  use: [
- {
- loader: 'style-loader',
- },
- {
- loader: 'css-loader', // translates CSS into CommonJS
- },
+ 'style-loader',
+ 'css-loader',
  'postcss-loader',
  {
- loader: 'less-loader', // compiles Less to CSS
+ loader: 'less-loader',
  options: {
  lessOptions: {
  javascriptEnabled: true,
@@ -129,49 +85,31 @@ module.exports = {
  // .svg files to be handled by @svgr/webpack
  {
  test: /\.svg$/,
- use: ['@svgr/webpack'],
+ use: ['@svgr/webpack', 'url-loader'],
  include: path.resolve(__dirname, 'src'), // Just the source code
  },
- // different urls to be handled by url-loader
+ // images files to be handled by file-loader
  {
- test: /\.(png|jpg|jpeg|gif|svg|ico)$/i,
+ test: /\.png$/,
  use: [
  {
- loader: 'url-loader',
+ loader: 'file-loader',
  options: {
- limit: 8192,
- name: `[name].[ext]`,
+ name: '[name].[ext]',
+ outputPath: 'images/',
  },
  },
  ],
- include: [
- path.resolve(__dirname, 'src'),
- path.resolve(__dirname, 'node_modules/@windmillcode/quill-emoji'),
- ], // Just the source code
- },
- // Font files to be handled by asset-modules, see https://webpack.js.org/guides/asset-modules/
- {
- test: /\.(ttf|eot|woff|woff2)$/i,
- type: 'asset/resource',
- generator: {
- filename: 'fonts/[name][ext]',
- },
- include: [
- path.resolve(__dirname, 'src'),
- path.resolve(__dirname, 'node_modules/@fontsource/poppins'),
- path.resolve(__dirname, 'node_modules/@fontsource/source-code-pro'),
- ], // Just the source code
  },
  ],
  },
 
  // Module resolution
  resolve: {
  // File types to be handled
- extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.svg'],
+ extensions: ['.ts', '.tsx', '.js', '.css', '.less', '.svg'],
  fallback: {
  https: require.resolve('https-browserify'),
- path: require.resolve('path-browserify'),
  fs: false,
  'process/browser': require.resolve('process/browser'),
  },
@@ -183,10 +121,6 @@ module.exports = {
  },
 
  plugins: [
- // Clean webpack output directory
- new CleanWebpackPlugin({
- verbose: true,
- }),
  // In development mode, fork TypeScript checking to run in another thread and not block main
  // transpilation
  new ForkTsCheckerWebpackPlugin({
@@ -199,6 +133,7 @@ module.exports = {
  favicon: path.join(__dirname, 'public/favicon.png'),
  template: path.join(__dirname, 'public/index.html'),
  scriptLoading: 'defer',
+ hash: true,
  }),
  // Copy favicon, logo and manifest for index.html
  new CopyWebpackPlugin({
@@ -233,20 +168,6 @@ module.exports = {
  },
  ],
  }),
- // Build progress bar
- new WebpackBar({
- name: '@openmetadata [dev]',
- color: '#54BAC9',
- }),
- new MiniCssExtractPlugin({
- filename: '[name].bundle.css',
- chunkFilename: '[id].css',
- }),
- new webpack.ProvidePlugin({
- process: 'process/browser',
- Buffer: ['buffer', 'Buffer'],
- }),
- new Dotenv(),
  ],
 
  // webpack-dev-server