mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Monaco Editor: Load via ESM (#78261)
* chore(monaco): bump monaco-editor to latest version * feat(codeeditor): use esm to load monaco editor * revert(monaco): put back previous version * feat(monaco): setup MonacoEnvironment when bootstrapping app * feat(monaco): load monaco languages from registry as workers * feat(webpack): clean up warnings, remove need to copy monaco into lib * fix(plugins): wip - remove amd loader workaround in systemjs hooks * chore(azure): clean up so QueryField passes typecheck * test(jest): update config to fix failing tests due to missing monaco-editor * test(jest): update config to work with monaco-editor and kusto * test(jest): prevent message eventlistener in nodeGraph/layout.worker tripping up monaco tests * test(plugins): wip - remove amd related tests from systemjs hooks * test(alerting): prefer clearAllMocks to prevent monaco editor failing due to missing matchMedia * test(parca): fix failing test due to undefined backendSrv * chore: move monacoEnv to app/core * test: increase testing-lib timeout to 2secs, fix parca test to assert dom element * feat(plugins): share kusto via systemjs * test(e2e): increase timeout for checking monaco editor in exemplars spec * test(e2e): assert monaco has loaded by checking the spinner is gone and window.monaco exists * test(e2e): check for monaco editor textarea * test(e2e): check monaco editor is loaded before assertions * test(e2e): add waitForMonacoToLoad util to reduce duplication * test(e2e): fix failing mysql spec * chore(jest): add comment to setupTests explaining need to incresae default timeout * chore(nodegraph): improve comment in layout.worker.utils to better explain the need for file
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { e2e } from '../utils';
|
||||
import { waitForMonacoToLoad } from '../utils/support/monaco';
|
||||
|
||||
const dataSourceName = 'PromExemplar';
|
||||
const addDataSource = () => {
|
||||
@@ -57,12 +58,8 @@ describe('Exemplars', () => {
|
||||
// Switch to code editor
|
||||
e2e.components.RadioButton.container().filter(':contains("Code")').click();
|
||||
|
||||
// we need to wait for the query-field being lazy-loaded, in two steps:
|
||||
// 1. first we wait for the text 'Loading...' to appear
|
||||
// 1. then we wait for the text 'Loading...' to disappear
|
||||
const monacoLoadingText = 'Loading...';
|
||||
e2e.components.QueryField.container().should('be.visible').should('have.text', monacoLoadingText);
|
||||
e2e.components.QueryField.container().should('be.visible').should('not.have.text', monacoLoadingText);
|
||||
// Wait for lazy loading Monaco
|
||||
waitForMonacoToLoad();
|
||||
|
||||
e2e.components.TimePicker.openButton().click();
|
||||
e2e.components.TimePicker.fromField().clear().type('2021-07-10 17:10:00');
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { e2e } from '../utils';
|
||||
import { waitForMonacoToLoad } from '../utils/support/monaco';
|
||||
|
||||
const dataSourceName = 'LokiEditor';
|
||||
const addDataSource = () => {
|
||||
@@ -39,11 +40,7 @@ describe('Loki Query Editor', () => {
|
||||
|
||||
e2e.components.RadioButton.container().filter(':contains("Code")').click();
|
||||
|
||||
// Wait for lazy loading
|
||||
const monacoLoadingText = 'Loading...';
|
||||
|
||||
e2e.components.QueryField.container().should('be.visible').should('have.text', monacoLoadingText);
|
||||
e2e.components.QueryField.container().should('be.visible').should('not.have.text', monacoLoadingText);
|
||||
waitForMonacoToLoad();
|
||||
|
||||
// adds closing braces around empty value
|
||||
e2e.components.QueryField.container().type('time(');
|
||||
|
||||
@@ -37,6 +37,9 @@ describe('MySQL datasource', () => {
|
||||
it.skip('code editor autocomplete should handle table name escaping/quoting', () => {
|
||||
e2e.components.RadioButton.container().filter(':contains("Code")').click();
|
||||
|
||||
e2e.components.CodeEditor.container().children('[data-testid="Spinner"]').should('not.exist');
|
||||
cy.window().its('monaco').should('exist');
|
||||
|
||||
cy.get('textarea').type('S{downArrow}{enter}');
|
||||
cy.wait('@tables');
|
||||
cy.get('.suggest-widget').contains(tableNameWithSpecialCharacter).should('be.visible');
|
||||
@@ -88,8 +91,10 @@ describe('MySQL datasource', () => {
|
||||
cy.get("[aria-label='Macros value selector']").should('be.visible').click();
|
||||
selectOption('timeFilter');
|
||||
|
||||
// Validate that the timeFilter macro was added
|
||||
e2e.components.CodeEditor.container().children('[data-testid="Spinner"]').should('not.exist');
|
||||
cy.window().its('monaco').should('exist');
|
||||
|
||||
// Validate that the timeFilter macro was added
|
||||
e2e.components.CodeEditor.container()
|
||||
.get('textarea')
|
||||
.should(
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { e2e } from '../utils';
|
||||
import { waitForMonacoToLoad } from '../utils/support/monaco';
|
||||
|
||||
describe('Query editor', () => {
|
||||
beforeEach(() => {
|
||||
@@ -14,13 +15,8 @@ describe('Query editor', () => {
|
||||
|
||||
e2e.components.RadioButton.container().filter(':contains("Code")').click();
|
||||
|
||||
// we need to wait for the query-field being lazy-loaded, in two steps:
|
||||
// it is a two-step process:
|
||||
// 1. first we wait for the text 'Loading...' to appear
|
||||
// 1. then we wait for the text 'Loading...' to disappear
|
||||
const monacoLoadingText = 'Loading...';
|
||||
e2e.components.QueryField.container().should('be.visible').should('have.text', monacoLoadingText);
|
||||
e2e.components.QueryField.container().should('be.visible').should('not.have.text', monacoLoadingText);
|
||||
waitForMonacoToLoad();
|
||||
|
||||
e2e.components.QueryField.container().type(queryText, { parseSpecialCharSequences: false }).type('{backspace}');
|
||||
|
||||
cy.contains(queryText.slice(0, -1)).should('be.visible');
|
||||
|
||||
Reference in New Issue
Block a user