From b231dfbf3317b81c504c624dd0f67e882e6828e5 Mon Sep 17 00:00:00 2001 From: Santiago Jimenez Giraldo Date: Wed, 16 Oct 2024 13:44:00 +0200 Subject: [PATCH] wip(frontend): validate yaml loading make sure auth is also included in the proxy config Signed-off-by: Santiago Jimenez Giraldo --- frontend/rsbuild.config.ts | 112 +++++++++++++++++++------------------ frontend/src/config.ts | 24 ++++++-- 2 files changed, 77 insertions(+), 59 deletions(-) diff --git a/frontend/rsbuild.config.ts b/frontend/rsbuild.config.ts index 2bacb0409..cf2ff77bf 100644 --- a/frontend/rsbuild.config.ts +++ b/frontend/rsbuild.config.ts @@ -5,7 +5,7 @@ import { pluginSvgr } from '@rsbuild/plugin-svgr'; import { pluginSass } from '@rsbuild/plugin-sass'; import NodePolyfillPlugin from 'node-polyfill-webpack-plugin'; import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin'; -import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin'; +// import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin' import moduleFederationConfig from './module-federation'; @@ -13,52 +13,52 @@ const { publicVars } = loadEnv({ prefixes: ['REACT_APP_'] }); export default defineConfig({ plugins: [ - pluginReact({ - reactRefreshOptions: { - forceEnable: true, - }, - }), - pluginSvgr({ mixedImport: true }), - pluginSass(), + pluginReact({ + reactRefreshOptions: { + forceEnable: true, + }, + }), + pluginSvgr({ mixedImport: true }), + pluginSass(), ], moduleFederation: { - options: moduleFederationConfig, + options: moduleFederationConfig, }, dev: { - hmr: true, + hmr: true, }, html: { - template: './public/index.html', - templateParameters: { - REACT_APP_ENABLED_FEATURES: process.env.REACT_APP_ENABLED_FEATURES, - REACT_APP_CONSOLE_GIT_SHA: process.env.REACT_APP_CONSOLE_GIT_SHA, - REACT_APP_CONSOLE_PLATFORM_VERSION: process.env.REACT_APP_CONSOLE_PLATFORM_VERSION, - REACT_APP_CONSOLE_GIT_REF: process.env.REACT_APP_CONSOLE_GIT_REF, - REACT_APP_BUSINESS: process.env.REACT_APP_BUSINESS, - REACT_APP_BUILD_TIMESTAMP: process.env.REACT_APP_BUILD_TIMESTAMP, - REACT_APP_DEV_HINT: process.env.REACT_APP_DEV_HINT, - }, + template: './public/index.html', + templateParameters: { + REACT_APP_ENABLED_FEATURES: process.env.REACT_APP_ENABLED_FEATURES, + REACT_APP_CONSOLE_GIT_SHA: process.env.REACT_APP_CONSOLE_GIT_SHA, + REACT_APP_CONSOLE_PLATFORM_VERSION: process.env.REACT_APP_CONSOLE_PLATFORM_VERSION, + REACT_APP_CONSOLE_GIT_REF: process.env.REACT_APP_CONSOLE_GIT_REF, + REACT_APP_BUSINESS: process.env.REACT_APP_BUSINESS, + REACT_APP_BUILD_TIMESTAMP: process.env.REACT_APP_BUILD_TIMESTAMP, + REACT_APP_DEV_HINT: process.env.REACT_APP_DEV_HINT, + }, }, server: { - htmlFallback: 'index', + htmlFallback: 'index', proxy: { - context: ['/api', '/redpanda.api'], - target: 'http://localhost:9090', - }, + context: ['/api', '/redpanda.api', '/auth'], + target: 'http://localhost:9090', + }, }, source: { - define: publicVars, - decorators: { - version: 'legacy', - } + define: publicVars, + decorators: { + version: 'legacy', + }, }, output: { - distPath: { - root: 'build', - }, + distPath: { + root: 'build', + }, }, tools: { - rspack: (config, { appendPlugins }) => { + rspack: (config, { appendPlugins }) => { config.resolve ||= {}; config.resolve.alias ||= {}; config.output ||= {}; @@ -66,35 +66,39 @@ export default defineConfig({ config.resolve.symlinks = false; config.output.publicPath = 'auto'; + config.output.globalObject = 'self'; + config.output.filename = '[name].bundle.js'; const plugins = [ new NodePolyfillPlugin({ additionalAliases: ['process'], }), - new MonacoEditorWebpackPlugin({ - languages: ['json', 'yaml', 'javascript', 'typescript', 'protobuf'], - customLanguages: [ - { - label: 'yaml', - entry: 'monaco-yaml', - worker: { - id: 'monaco-yaml/yamlWorker', - entry: 'monaco-yaml/yaml.worker' - } - } - ] - }), - ] + // new MonacoEditorWebpackPlugin({ + // languages: ['json', 'yaml', 'javascript', 'typescript', 'protobuf'], + // customLanguages: [ + // { + // label: 'yaml', + // entry: 'monaco-yaml', + // worker: { + // id: 'monaco-yaml/yamlWorker', + // entry: 'monaco-yaml/yaml.worker', + // }, + // }, + // ], + // }), + ]; if (process.env.RSDOCTOR) { - plugins.push(new RsdoctorRspackPlugin({ - supports: { - /** - * @see https://rsdoctor.dev/config/options/options#generatetilegraph - */ - generateTileGraph: true, - } - })); + plugins.push( + new RsdoctorRspackPlugin({ + supports: { + /** + * @see https://rsdoctor.dev/config/options/options#generatetilegraph + */ + generateTileGraph: true, + }, + }) + ); } appendPlugins(plugins); diff --git a/frontend/src/config.ts b/frontend/src/config.ts index afb102fa8..48041a083 100644 --- a/frontend/src/config.ts +++ b/frontend/src/config.ts @@ -212,18 +212,32 @@ export const setup = memoizeOne((setupArgs: SetConfigArguments) => { // Ensure yaml workers are being loaded locally as well loader.init().then(async (monaco) => { - window.MonacoEnvironment = { + // eslint-disable-next-line no-restricted-globals + self.MonacoEnvironment = { getWorker(moduleId, label) { console.debug(`window.MonacoEnvironment.getWorker looking for moduleId ${moduleId} label ${label}`); + switch (label) { - case 'editorWorkerService': - return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)); + case 'json': + return new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)); + case 'typescript': + case 'javascript': + return new Worker(new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url)); case 'yaml': return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url)); - default: - throw new Error(`Unknown label ${label}`); + return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)); } + + // switch (label) { + // case 'editorWorkerService': + // return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)); + // case 'yaml': + // return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url)); + // + // default: + // throw new Error(`Unknown label ${label}`); + // } }, };