[DO NOT MERGE] Switch from webpack and babel to vite

.env

@@ -0,0 +1,3 @@
+VITE_LOCALES_DEFAULT=en
+VITE_LOCALES_SUPPORTED=en,ja,zh-Hans
+VITE_LOCALES_BUILD=de,en,es,fr,it,ja,ko,pt,zh-Hans,zh-Hant

.env.i18n

@@ -0,0 +1 @@
+VITE_LOCALES_SUPPORTED=$VITE_LOCALES_BUILD

.eslintrc.js → .eslintrc.cjs

@@ -11,10 +11,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 module.exports = {
-  parser: '@babel/eslint-parser',
   env: {
     browser: true,
     es6: true,
+    es2021: true,
     jest: true,
     node: true
   },
@@ -27,7 +27,8 @@ module.exports = {
   globals: {
     Atomics: 'readonly',
     globalThis: false,
-    SharedArrayBuffer: 'readonly'
+    SharedArrayBuffer: 'readonly',
+    vi: true
   },
   overrides: [
     {
@@ -41,16 +42,25 @@ module.exports = {
     ecmaFeatures: {
       jsx: true
     },
-    ecmaVersion: 2018,
+    ecmaVersion: 2021,
     sourceType: 'module'
   },
-  plugins: ['notice', 'react'],
+  plugins: ['notice', 'react', 'formatjs'],
   rules: {
     curly: ['error', 'all'],
     'cypress/assertion-before-screenshot': 'warn',
     'default-param-last': 'off',
+    'formatjs/enforce-default-message': 'error',
+    'formatjs/enforce-id': 'error',
+    'formatjs/no-complex-selectors': 'error',
+    'formatjs/no-literal-string-in-jsx': 'error',
+    'formatjs/no-multiple-whitespaces': 'error',
+    'formatjs/no-multiple-plurals': 'error',
+    'import/named': 'off',
     'import/no-cycle': 'off',
     'import/no-extraneous-dependencies': 'off',
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
     'import/prefer-default-export': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'no-case-declarations': 'off',

.gitignore

@@ -16,6 +16,7 @@ node_modules/
 # misc
 npm-debug.log
 yarn-error.log
+stats.html
 stats.json
 .vscode/
 

.nvmrc

@@ -0,0 +1 @@
+v18.17.0

.storybook/main.js

@@ -18,16 +18,12 @@ const config = {
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        sass: {
-          implementation: require('sass'),
-        },
-      },
-    }
+    'storybook-addon-swc'
   ],
-  core: { disableTelemetry: true },
+  core: {
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true
+  },
   docs: {
     autodocs: 'tag',
     defaultName: 'Documentation'
@@ -36,17 +32,7 @@ const config = {
     buildStoriesJson: true,
     storyStoreV7: true
   },
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      fastRefresh: true,
-      strictMode: false,
-      builder: {
-        lazyCompilation: true,
-        fsCache: true
-      }
-    }
-  },
+  framework: '@storybook/react-vite',
   refs: (_config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
       return {
@@ -66,46 +52,10 @@ const config = {
   },
   stories: [
     { directory: '.', files: 'Welcome.mdx' },
-    { directory: '../src', files: '**/*.stories.js', titlePrefix: 'Containers' },
-    { directory: '../packages/components', files: '**/*.stories.js', titlePrefix: 'Components' },
-    { directory: '../packages/graph', files: '**/*.stories.js', titlePrefix: 'Experimental/Graph' }
-  ],
-  webpackFinal: async (config, {
-    configType
-  }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    config.module.rules.push(
-    // {
-    //   test: /\.mjs$/,
-    //   type: 'javascript/auto'
-    // }, {
-    //   test: /\.js$/,
-    //   exclude: /node_modules/,
-    //   loader: 'babel-loader',
-    //   options: {
-    //     presets: [['@babel/preset-env', {
-    //       modules: 'commonjs'
-    //     }]]
-    //   }
-    // },
-    {
-      test: /\.yaml$/,
-      type: 'json',
-      loader: 'yaml-loader',
-      options: {
-        asJSON: true
-      }
-    });
-
-    // config.stats = {
-    //   ...config.stats,
-    //   children: true
-    // }
-    return config;
-  }
+    { directory: '../src', files: '**/*.stories.jsx', titlePrefix: 'Containers' },
+    { directory: '../packages/components', files: '**/*.stories.jsx', titlePrefix: 'Components' },
+    { directory: '../packages/graph', files: '**/*.stories.jsx', titlePrefix: 'Experimental/Graph' }
+  ]
 };
 
 export default config;

config_frontend/setupTests.js

@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { TextDecoder, TextEncoder } from 'util';
+// import { TextDecoder, TextEncoder } from 'util';
 
 import { server } from './msw';
 
@@ -27,24 +27,30 @@ afterEach(() => server.resetHandlers());
 // Clean up after the tests are finished.
 afterAll(() => server.close());
 
+// use Node.js native fetch
+global.fetch = fetch;
+global.Headers = Headers;
+global.Request = Request;
+global.Response = Response;
+
 window.HTMLElement.prototype.scrollIntoView =
   function scrollIntoViewTestStub() {};
-window.TextDecoder = TextDecoder;
-window.TextEncoder = TextEncoder;
+// window.TextDecoder = TextDecoder;
+// window.TextEncoder = TextEncoder;
 
 const { getComputedStyle } = window;
 window.getComputedStyle = element => getComputedStyle(element);
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation(query => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
   }))
 });

docs/dev/README.md

@@ -28,7 +28,7 @@ In order to run the Tekton Dashboard, please make sure the requirements in [the
 You will also need the following tools in order to build the Dashboard locally and deploy it:
 1. [`go`](https://golang.org/doc/install): The language the Tekton Dashboard backend is built in
 1. [`git`](https://help.github.com/articles/set-up-git/): For source control
-1. [Node.js & npm](https://nodejs.org/): For building and running the frontend locally. See `engines` in [package.json](../../package.json) for versions used. _Node.js 18.x is recommended_
+1. [Node.js & npm](https://nodejs.org/): For building and running the frontend locally. See [`.nvmrc`](../../.nvmrc) for version used. _Node.js 18.x is recommended_
 1. [`ko`](https://github.com/google/ko): For development. `ko` version v0.7.2 or higher is required for `dashboard` to work correctly
 1. [`kubectl`](https://kubernetes.io/docs/tasks/tools/install-kubectl/): For interacting with your kube cluster
 1. [`kustomize`](https://kubectl.docs.kubernetes.io/installation/kustomize/): For building the Dashboard manifests. v4.5.4 is known to work
@@ -58,13 +58,19 @@ First install the required dependencies:
 npm install
 ```
 
-Run the webpack build:
+Run the production build:
 
 ```bash
 npm run build
 ```
 
-This will build the static resources and add them to the `kodata` directory.
+This will build the static resource bundles and add them to the `kodata` directory.
+
+To run the dev server with the production bundles:
+
+```bash
+npm run preview
+```
 
 ## Build the backend (optional: for local debugging)
 
@@ -190,9 +196,9 @@ This project uses `react-intl` for internationalization, and provides a script t
 
 **Note:** `src/nls/messages_en.json` should **NOT** be edited manually, instead edit the defaultMessage in the code and re-run the script.
 
-Configuration for the message bundles can be found in `config_frontend/config.json`:
-- `locales.build` lists the locales for which message bundles will be produced
-- `locales.supported` lists the locales that will be loaded at runtime based on browser language settings
+Configuration for the message bundles can be found in `.env`:
+- `VITE_LOCALES_BUILD` lists the locales for which message bundles will be produced
+- `VITE_LOCALES_SUPPORTED` lists the locales that will be loaded at runtime based on browser language settings
 
 For testing and development purposes the list of supported locales can be overridden to include all built locales by adding a known value to `localStorage`:
 

src/index.template.html → index.html

@@ -3,9 +3,11 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="./src/images/favicon.png" />
+    <title>Tekton Dashboard</title>
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
   </body>
 </html>