Frontend: Foundations for multi tenant frontend (#78815)

* Frontend: Foundations for multi tenant frontend

* improve manifest parsing for multi-tenant frontend (#78876)

* add test

* add test

* ??

* Updates

* Added cache

* test cleanup

* lint

* fix test

* fix error templates

* cleanup

* remove copy

* revert changes to list testdata

* comment cleanup

* prepare integration tests

* Remove integrety

---------

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

scripts/webpack/plugins/HTMLWebpackCSSChunks.js

@@ -1,42 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-/*
- * This plugin returns the css associated with entrypoints. Those chunks can be found
- * in `htmlWebpackPlugin.files.cssChunks`.
- * The HTML Webpack plugin removed the chunks object in v5 in favour of an array however if we want
- * to do anything smart with hashing (e.g. [contenthash]) we need a map of { themeName: chunkNameWithHash }.
- */
-class HTMLWebpackCSSChunks {
-  /**
-   * @param {import('webpack').Compiler} compiler
-   */
-  apply(compiler) {
-    compiler.hooks.compilation.tap(
-      'HTMLWebpackCSSChunks',
-      /**
-       * @param {import('webpack').Compilation} compilation
-       */
-      (compilation) => {
-        HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
-          'HTMLWebpackCSSChunks',
-          (data, cb) => {
-            data.assets.cssChunks = {};
-
-            for (const entryPoint of compilation.entrypoints.values()) {
-              for (const chunk of entryPoint.chunks) {
-                const cssFile = [...chunk.files].find((file) => file.endsWith('.css'));
-                if (cssFile !== undefined) {
-                  data.assets.cssChunks[chunk.name] = cssFile;
-                }
-              }
-            }
-
-            cb(null, data);
-          }
-        );
-      }
-    );
-  }
-}
-
-module.exports = HTMLWebpackCSSChunks;

scripts/webpack/webpack.dev.js

@@ -4,13 +4,12 @@ const browserslist = require('browserslist');
 const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const { DefinePlugin } = require('webpack');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { merge } = require('webpack-merge');
 
-const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
 const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 // esbuild-loader 3.0.0+ requires format to be set to prevent it
@@ -101,26 +100,16 @@ module.exports = (env = {}) => {
       new MiniCssExtractPlugin({
         filename: 'grafana.[name].[contenthash].css',
       }),
-      new HtmlWebpackPlugin({
-        filename: path.resolve(__dirname, '../../public/views/error.html'),
-        template: path.resolve(__dirname, '../../public/views/error-template.html'),
-        inject: false,
-        chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light'],
-      }),
-      new HtmlWebpackPlugin({
-        filename: path.resolve(__dirname, '../../public/views/index.html'),
-        template: path.resolve(__dirname, '../../public/views/index-template.html'),
-        inject: false,
-        chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light'],
-      }),
-      new HTMLWebpackCSSChunks(),
       new DefinePlugin({
         'process.env': {
           NODE_ENV: JSON.stringify('development'),
         },
       }),
+      new WebpackAssetsManifest({
+        entrypoints: true,
+        integrity: true,
+        publicPath: true,
+      }),
     ],
   });
 };

scripts/webpack/webpack.hot.js

@@ -1,13 +1,11 @@
 'use strict';
 
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const { DefinePlugin } = require('webpack');
 const { merge } = require('webpack-merge');
 
-const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
@@ -80,14 +78,6 @@ module.exports = merge(common, {
     new MiniCssExtractPlugin({
       filename: 'grafana.[name].[contenthash].css',
     }),
-    new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../public/views/index.html'),
-      template: path.resolve(__dirname, '../../public/views/index-template.html'),
-      inject: false,
-      chunksSortMode: 'none',
-      excludeChunks: ['dark', 'light'],
-    }),
-    new HTMLWebpackCSSChunks(),
     new ReactRefreshWebpackPlugin(),
     new DefinePlugin({
       'process.env': {

scripts/webpack/webpack.prod.js

@@ -4,13 +4,12 @@ const browserslist = require('browserslist');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { EsbuildPlugin } = require('esbuild-loader');
 const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const { merge } = require('webpack-merge');
 
-const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
 const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
@@ -67,21 +66,15 @@ module.exports = (env = {}) =>
       new MiniCssExtractPlugin({
         filename: 'grafana.[name].[contenthash].css',
       }),
-      new HtmlWebpackPlugin({
-        filename: path.resolve(__dirname, '../../public/views/error.html'),
-        template: path.resolve(__dirname, '../../public/views/error-template.html'),
-        inject: false,
-        excludeChunks: ['dark', 'light'],
-        chunksSortMode: 'none',
+      /**
+       * I know we have two manifest plugins here.
+       * WebpackManifestPlugin was only used in prod before and does not support integrity hashes
+       */
+      new WebpackAssetsManifest({
+        entrypoints: true,
+        integrity: true,
+        publicPath: true,
       }),
-      new HtmlWebpackPlugin({
-        filename: path.resolve(__dirname, '../../public/views/index.html'),
-        template: path.resolve(__dirname, '../../public/views/index-template.html'),
-        inject: false,
-        excludeChunks: ['manifest', 'dark', 'light'],
-        chunksSortMode: 'none',
-      }),
-      new HTMLWebpackCSSChunks(),
       new WebpackManifestPlugin({
         fileName: path.join(process.cwd(), 'manifest.json'),
         filter: (file) => !file.name.endsWith('.map'),