diff --git a/cypress/productAnalytics/index.ts b/cypress/productAnalytics/index.ts index f39b72fc8d4..24f24dfb4ef 100644 --- a/cypress/productAnalytics/index.ts +++ b/cypress/productAnalytics/index.ts @@ -126,23 +126,25 @@ export const insight = { updateQueryEditorText(query: string, selector: string = 'query-editor'): void { // the default JSON query doesn't have any results, switch to one that does - // obviously we need to clear the text area multiple times - cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}') - cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}') - cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}') - cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}') - cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}') - cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}') - cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}') - cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}') + // "obviously" we need to clear the text area multiple times + // monaco has elements in front of the text area that the human doesn't see + // so force: true is needed everywhere + cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{selectall}', { force: true }) + cy.get(`[data-attr="${selector}"] textarea`).type('{backspace}', { force: true }) - cy.get(`[data-attr="${selector}"] textarea`).type(query) + cy.get(`[data-attr="${selector}"] textarea`).type(query, { force: true }) // monaco adds closing squares and curlies as we type, // so, we need to delete any trailing characters to make valid JSON // 😡 for (let i = 0; i < 10; i++) { - cy.get(`[data-attr="${selector}"] textarea`).type('{del}') + cy.get(`[data-attr="${selector}"] textarea`).type('{del}', { force: true }) } cy.get(`[data-attr="${selector}"] button`).click() diff --git a/package.json b/package.json index a028aee276b..56738951153 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "@floating-ui/react": "^0.16.0", "@lottiefiles/react-lottie-player": "^3.4.7", "@medv/finder": "^2.1.0", - "@monaco-editor/react": "^4.1.3", + "@monaco-editor/react": "4.4.6", "@posthog/plugin-scaffold": "^1.3.2", "@react-hook/size": "^2.1.2", "@rrweb/types": "^2.0.0-alpha.8", @@ -119,7 +119,7 @@ "kea-waitfor": "^0.2.1", "kea-window-values": "^3.0.0", "md5": "^2.3.0", - "monaco-editor": "^0.23.0", + "monaco-editor": "^0.39.0", "posthog-js": "1.67.1", "posthog-js-lite": "2.0.0-alpha5", "prettier": "^2.8.8", @@ -248,6 +248,7 @@ "less-loader": "^7.0.2", "lint-staged": "~10.2.13", "mockdate": "^3.0.5", + "monaco-editor-webpack-plugin": "^7.0.1", "msw": "^0.49.0", "path-browserify": "^1.0.1", "pixelmatch": "^5.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6978f715560..46ce29a8347 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ dependencies: specifier: ^2.1.0 version: 2.1.0 '@monaco-editor/react': - specifier: ^4.1.3 - version: 4.4.6(monaco-editor@0.23.0)(react-dom@16.14.0)(react@16.14.0) + specifier: 4.4.6 + version: 4.4.6(monaco-editor@0.39.0)(react-dom@16.14.0)(react@16.14.0) '@posthog/plugin-scaffold': specifier: ^1.3.2 version: 1.3.4 @@ -180,8 +180,8 @@ dependencies: specifier: ^2.3.0 version: 2.3.0 monaco-editor: - specifier: ^0.23.0 - version: 0.23.0 + specifier: ^0.39.0 + version: 0.39.0 posthog-js: specifier: 1.67.1 version: 1.67.1 @@ -549,6 +549,9 @@ devDependencies: mockdate: specifier: ^3.0.5 version: 3.0.5 + monaco-editor-webpack-plugin: + specifier: ^7.0.1 + version: 7.0.1(monaco-editor@0.39.0)(webpack@4.46.0) msw: specifier: ^0.49.0 version: 0.49.3(typescript@4.9.5) @@ -3007,24 +3010,24 @@ packages: resolution: {integrity: sha512-Egrg5XO4kLol24b1Kv50HDfi5hW0yQ6aWSsO0Hea1eJ4rogKElIN0M86FdVnGF4XIGYyA7QWx0MgbOzVPA0qkA==} dev: false - /@monaco-editor/loader@1.3.2(monaco-editor@0.23.0): - resolution: {integrity: sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==} + /@monaco-editor/loader@1.3.3(monaco-editor@0.39.0): + resolution: {integrity: sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==} peerDependencies: monaco-editor: '>= 0.21.0 < 1' dependencies: - monaco-editor: 0.23.0 + monaco-editor: 0.39.0 state-local: 1.0.7 dev: false - /@monaco-editor/react@4.4.6(monaco-editor@0.23.0)(react-dom@16.14.0)(react@16.14.0): + /@monaco-editor/react@4.4.6(monaco-editor@0.39.0)(react-dom@16.14.0)(react@16.14.0): resolution: {integrity: sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==} peerDependencies: monaco-editor: '>= 0.25.0 < 1' react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@monaco-editor/loader': 1.3.2(monaco-editor@0.23.0) - monaco-editor: 0.23.0 + '@monaco-editor/loader': 1.3.3(monaco-editor@0.39.0) + monaco-editor: 0.39.0 prop-types: 15.8.1 react: 16.14.0 react-dom: 16.14.0(react@16.14.0) @@ -13328,7 +13331,7 @@ packages: dependencies: universalify: 2.0.0 optionalDependencies: - graceful-fs: 4.2.10 + graceful-fs: 4.2.11 /jsprim@2.0.2: resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==} @@ -13675,7 +13678,7 @@ packages: dependencies: big.js: 5.2.2 emojis-list: 3.0.0 - json5: 2.2.1 + json5: 2.2.3 dev: true /loader-utils@2.0.4: @@ -13684,7 +13687,7 @@ packages: dependencies: big.js: 5.2.2 emojis-list: 3.0.0 - json5: 2.2.1 + json5: 2.2.3 dev: true /locate-path@3.0.0: @@ -14241,9 +14244,19 @@ packages: /moment@2.29.4: resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==} - /monaco-editor@0.23.0: - resolution: {integrity: sha512-q+CP5zMR/aFiMTE9QlIavGyGicKnG2v/H8qVvybLzeFsARM8f6G9fL0sMST2tyVYCwDKkGamZUI6647A0jR/Lg==} - dev: false + /monaco-editor-webpack-plugin@7.0.1(monaco-editor@0.39.0)(webpack@4.46.0): + resolution: {integrity: sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==} + peerDependencies: + monaco-editor: '>= 0.31.0' + webpack: ^4.5.0 || 5.x + dependencies: + loader-utils: 2.0.4 + monaco-editor: 0.39.0 + webpack: 4.46.0(webpack-cli@4.10.0) + dev: true + + /monaco-editor@0.39.0: + resolution: {integrity: sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==} /moo-color@1.0.3: resolution: {integrity: sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==} diff --git a/webpack.config.js b/webpack.config.js index 17af87faf8c..0628e9f481c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,6 +3,7 @@ const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin') +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') const webpackDevServerHost = process.env.WEBPACK_HOT_RELOAD_HOST || '127.0.0.1' const webpackDevServerFrontendAddr = webpackDevServerHost === '0.0.0.0' ? '127.0.0.1' : webpackDevServerHost @@ -153,6 +154,11 @@ function createEntry(entry) { }, ], }, + // probably only need this because we're using webpack v4 + { + test: /monaco-editor\/.*\.m?js/, + loader: 'babel-loader', + }, ], }, // add devServer config only to 'main' entry @@ -176,6 +182,7 @@ function createEntry(entry) { } : {}), plugins: [ + new MonacoWebpackPlugin(), new AntdDayjsWebpackPlugin(), // common plugins for all entrypoints ].concat(