Upgrade CodeMirror v5 to v6

openmetadata-ui/src/main/resources/ui/jest.config.js

@@ -77,7 +77,7 @@ module.exports = {
       '<rootDir>/src/test/unit/mocks/elkLayout.mock.js',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(@azure/msal-react|react-dnd|react-dnd-html5-backend|dnd-core|@react-dnd/invariant|@react-dnd/asap|@react-dnd/shallowequal|@melloware/react-logviewer|@material/material-color-utilities|@openmetadata/ui-core-components|nanoid|@rjsf/core|@rjsf/utils|@rjsf/validator-ajv8|uuid|elkjs))',
+    'node_modules/(?!(@azure/msal-react|react-dnd|react-dnd-html5-backend|dnd-core|@react-dnd/invariant|@react-dnd/asap|@react-dnd/shallowequal|@melloware/react-logviewer|@material/material-color-utilities|@openmetadata/ui-core-components|nanoid|@rjsf/core|@rjsf/utils|@rjsf/validator-ajv8|uuid|elkjs|@codemirror|@lezer|@uiw/react-codemirror|@uiw/codemirror-extensions-basic-setup|codemirror|crelt|style-mod|w3c-keyname))',
   ],
 
   // TypeScript

openmetadata-ui/src/main/resources/ui/package.json

@@ -61,6 +61,17 @@
     "@auth0/auth0-react": "^1.9.0",
     "@azure/msal-browser": "^3.25.0",
     "@azure/msal-react": "^2.1.1",
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.0",
     "@dagrejs/dagre": "^1.1.2",
     "@deuex-solutions/react-tour": "^1.2.6",
     "@emotion/react": "^11.14.0",
@@ -70,6 +81,7 @@
     "@fontsource/source-code-pro": "^5.0.0",
     "@github/g-emoji-element": "^1.1.5",
     "@internationalized/date": "^3.11.0",
+    "@lezer/highlight": "^1.2.3",
     "@material/material-color-utilities": "^0.3.0",
     "@melloware/react-logviewer": "6.4.1",
     "@mui/icons-material": "^7.3.1",
@@ -99,6 +111,7 @@
     "@tiptap/starter-kit": "^2.3.0",
     "@tiptap/suggestion": "^2.3.0",
     "@toast-ui/react-editor": "^3.1.8",
+    "@uiw/react-codemirror": "^4.25.9",
     "@untitledui/icons": "^0.0.21",
     "@windmillcode/quill-emoji": "2.0.3000",
     "analytics": "^0.8.1",
@@ -107,7 +120,7 @@
     "autoprefixer": "^10.0.0",
     "axios": "1.15.0",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.16",
+    "codemirror": "^6.0.2",
     "cookie-storage": "^6.1.0",
     "cronstrue": "^2.53.0",
     "crypto-random-string-with-promisify-polyfill": "^5.0.0",
@@ -139,7 +152,6 @@
     "react-antd-column-resize": "1.0.3",
     "react-aria": "^3.47.0",
     "react-aria-components": "^1.16.0",
-    "react-codemirror2": "^7.2.1",
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -196,7 +208,6 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/antlr4": "^4.11.2",
     "@types/classnames": "^2.3.1",
-    "@types/codemirror": "^0.0.104",
     "@types/dagre": "^0.7.47",
     "@types/diff": "^5.0.2",
     "@types/jest": "^26.0.23",

openmetadata-ui/src/main/resources/ui/playwright/docs/Governance.md

@@ -220,7 +220,7 @@
 | 191 | **Custom properties without custom property config** - sqlQuery shows scrollable CodeMirror container and no expand toggle | SqlQuery shows scrollable CodeMirror container and no expand toggle |
 | | ↳ *Create sqlQuery property* | |
 | | ↳ *Set multi-line SQL value* | |
-| | ↳ *Verify .CodeMirror-scroll is height-constrained and scrollable* | |
+| | ↳ *Verify .cm-scroller is height-constrained and scrollable* | |
 | | ↳ *Verify expand/collapse toggle is hidden* | |
 | | ↳ *Cleanup property* | |
 

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/DataQuality/Profiler.spec.ts

@@ -283,7 +283,7 @@ test.describe(
         await page.locator('[data-testid="exclude-column-select"]').click();
         await page.keyboard.type(`${profilerSetting.excludeColumns}`);
         await page.keyboard.press('Enter');
-        await page.locator('.CodeMirror-scroll').click();
+        await page.locator('.cm-scroller').click();
         await page.keyboard.type(profilerSetting.profileQuery);
 
         await page.locator('[data-testid="include-column-select"]').click();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/DataQuality/TableLevelTests.spec.ts

@@ -903,10 +903,10 @@ test.describe(
         ).toBeVisible();
 
         await page.click('#testCaseFormV1_params_strategy');
-        await page.locator('.CodeMirror-scroll').click();
+        await page.locator('.cm-scroller').click();
         await page
           .getByTestId('code-mirror-container')
-          .getByRole('textbox')
+          .locator('.cm-content')
           .fill(testCase.sqlQuery);
         await page.getByLabel('Strategy').click();
         await page.getByTitle('ROWS').click();
@@ -951,10 +951,10 @@ test.describe(
         await page.locator('[id="root\\/displayName"]').clear();
         await page.fill('[id="root\\/displayName"]', testCase.displayName);
 
-        await page.locator('.CodeMirror-scroll').click();
+        await page.locator('.cm-scroller').click();
         await page
           .getByTestId('code-mirror-container')
-          .getByRole('textbox')
+          .locator('.cm-content')
           .fill(' update');
         await page.getByTestId('edit-test-form').getByText('ROWS').click();
         await page.getByTitle('COUNT').click();

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/MetricCustomUnitFlow.spec.ts

@@ -16,6 +16,7 @@ import { SidebarItem } from '../../constant/sidebar';
 import {
   clickOutside,
   descriptionBox,
+  fillCodeMirrorEditor,
   redirectToHomePage,
   uuid,
 } from '../../utils/common';
@@ -89,8 +90,10 @@ test.describe(
 
         await clickOutside(page);
 
-        await page.locator("pre[role='presentation']").last().click();
-        await page.keyboard.type('SELECT SUM(amount) FROM sales');
+        await fillCodeMirrorEditor({
+          page,
+          value: 'SELECT SUM(amount) FROM sales',
+        });
 
         // Save the metric
         const postPromise = page.waitForResponse(

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/Permission.spec.ts

@@ -209,7 +209,7 @@ test('Permissions', async ({ userPage, adminPage }) => {
     await queryListResponse;
     await userPage.click('[data-testid="query-btn"]');
     await userPage.click('[data-menu-id*="edit-query"]');
-    await userPage.locator('.CodeMirror-line').click();
+    await userPage.locator('.cm-line').click();
     await userPage.keyboard.type('updated');
     const saveQueryResponse = userPage.waitForResponse('/api/v1/queries/*');
     await userPage.click('[data-testid="save-query-btn"]');

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/QueryEntity.spec.ts

@@ -182,7 +182,7 @@ test('Query Entity', async ({ page }) => {
   await test.step('Update query and QueryUsedIn', async () => {
     await page.click('[data-testid="query-btn"]');
     await page.click(`[data-menu-id*="edit-query"]`);
-    await page.click('.CodeMirror-line', { clickCount: 3 });
+    await page.click('.cm-line', { clickCount: 3 });
     await page.keyboard.press('Backspace');
     await page.keyboard.type(`${queryData.queryUsedIn.table1}`);
     await page.click('[data-testid="edit-query-used-in"]');

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/SchemaDefinition.spec.ts

@@ -38,12 +38,8 @@ test.describe('Schema definition (views)', () => {
 
     await page.click('[data-testid="schema_definition"]');
 
-    await expect(
-      page.locator('.CodeMirror-line > [role="presentation"]').first()
-    ).toBeVisible();
+    await expect(page.locator('.cm-line').first()).toBeVisible();
 
-    await expect(
-      page.locator('.CodeMirror-line > [role="presentation"]')
-    ).toContainText(query);
+    await expect(page.locator('.cm-content')).toContainText(query);
   });
 });

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Customproperties-part1.spec.ts

@@ -140,7 +140,7 @@ test.describe(
           await expect(editButton).toBeEnabled();
           await editButton.click();
 
-          await page.locator("pre[role='presentation']").last().click();
+          await page.locator('.cm-content').last().click();
           await page.keyboard.type(
             "SELECT id, name, email\nFROM users\nWHERE active = true\nAND department = 'engineering'\nORDER BY created_at DESC\nLIMIT 100"
           );
@@ -153,11 +153,11 @@ test.describe(
           await waitForAllLoadersToDisappear(page);
         });
 
-        await test.step('Verify .CodeMirror-scroll is height-constrained and scrollable', async () => {
+        await test.step('Verify .cm-scroller is height-constrained and scrollable', async () => {
           const container = page.locator(
             `[data-testid="custom-property-${propertyName}-card"]`
           );
-          const codeMirrorScroll = container.locator('.CodeMirror-scroll');
+          const codeMirrorScroll = container.locator('.cm-scroller');
           await expect(codeMirrorScroll).toBeVisible();
           const isScrollable = await codeMirrorScroll.evaluate(
             (el) => el.scrollHeight > el.clientHeight

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Customproperties-part2.spec.ts

@@ -223,17 +223,20 @@ test.describe('Custom properties with custom property config', () => {
         await editButton.click();
 
         for (const user of users) {
-          const userName = user.getUserName();
           const displayName = user.getUserDisplayName();
           const resultLocator = page.locator(`[data-testid="${displayName}"]`);
 
           await expect(async () => {
             const searchApi = `**/api/v1/search/query?q=*${encodeURIComponent(
-              userName
+              displayName
             )}*`;
             const searchResponse = page.waitForResponse(searchApi);
-            await page.locator('#entityReference').clear();
-            await page.locator('#entityReference').fill(userName);
+            const input = page
+              .getByTestId('asset-select-list')
+              .getByRole('combobox');
+            await input.click();
+            await input.clear();
+            await input.fill(displayName);
             await searchResponse;
             await expect(resultLocator).toBeVisible({ timeout: 5_000 });
           }).toPass({ timeout: 30_000, intervals: [1_000, 2_000, 5_000] });

openmetadata-ui/src/main/resources/ui/playwright/support/entity/ingestion/RedshiftWithDBTIngestionClass.ts

@@ -244,8 +244,8 @@ class RedshiftWithDBTIngestionClass extends ServiceBaseClass {
       await page.click('[data-testid="dbt"]');
 
       // Verify query is present in the DBT tab
-      await page.locator('.CodeMirror').waitFor();
-      const codeMirrorText = await page.textContent('.CodeMirror');
+      await page.locator('.cm-editor').waitFor();
+      const codeMirrorText = await page.textContent('.cm-editor');
 
       expect(codeMirrorText).toContain(DBT.dbtQuery);
 

openmetadata-ui/src/main/resources/ui/playwright/utils/common.ts

@@ -197,6 +197,39 @@ export const clickOutside = async (page: Page) => {
   });
 };
 
+export const fillCodeMirrorEditor = async ({
+  page,
+  value,
+  container,
+}: {
+  page: Page;
+  value: string;
+  container?: Locator;
+}) => {
+  const editorContainer =
+    container ?? page.getByTestId('code-mirror-container').last();
+
+  await expect(editorContainer).toBeVisible();
+
+  const textBox = editorContainer.getByRole('textbox').last();
+
+  if ((await textBox.count()) > 0) {
+    await textBox.waitFor({ state: 'visible' });
+    await textBox.fill(value);
+
+    return;
+  }
+
+  const editorContent = editorContainer.locator('.cm-content').last();
+  await expect(editorContent).toBeVisible();
+  await editorContent.click();
+
+  const modifier = process.platform === 'darwin' ? 'Meta' : 'Control';
+  await page.keyboard.press(`${modifier}+A`);
+  await page.keyboard.press('Backspace');
+  await page.keyboard.type(value);
+};
+
 export const visitOwnProfilePage = async (page: Page) => {
   await page.locator('[data-testid="dropdown-profile"] svg').click();
   await page.locator('[role="menu"].profile-dropdown').waitFor({

openmetadata-ui/src/main/resources/ui/playwright/utils/customMetric.ts

@@ -111,7 +111,7 @@ export const createCustomMetric = async ({
     await page.click(`[title="${metric.column}"]`);
   }
   if (metric.expression) {
-    await page.click('.CodeMirror-scroll');
+    await page.click('.cm-scroller');
     await page.keyboard.type(metric.expression);
   }
   const createMetricResponse = page.waitForResponse(

openmetadata-ui/src/main/resources/ui/playwright/utils/customProperty.ts

@@ -27,6 +27,7 @@ import {
   clickOutside,
   descriptionBox,
   descriptionBoxReadOnly,
+  fillCodeMirrorEditor,
   uuid,
 } from './common';
 import { waitForAllLoadersToDisappear } from './entity';
@@ -158,8 +159,11 @@ export const setValueForProperty = async (data: {
       break;
 
     case 'sqlQuery':
-      await page.locator("pre[role='presentation']").last().click();
-      await page.keyboard.type(value);
+      await fillCodeMirrorEditor({
+        page,
+        value,
+        container: container.getByTestId('code-mirror-container'),
+      });
       await container.locator('[data-testid="inline-save-btn"]').click();
 
       break;
@@ -225,9 +229,13 @@ export const setValueForProperty = async (data: {
           val
         )}*`;
         await page.route(searchApi, (route) => route.continue());
-        await page.locator('#entityReference').clear();
+        const input = page
+          .getByTestId('asset-select-list')
+          .getByRole('combobox');
+        await input.click();
+        await input.clear();
         const searchEntity = page.waitForResponse(searchApi);
-        await page.locator('#entityReference').fill(val);
+        await input.fill(val);
         await searchEntity;
         await page.locator(`[data-testid="${val}"]`).click();
       }
@@ -308,7 +316,7 @@ export const validateValueForProperty = async (data: {
       endValue
     );
   } else if (propertyType === 'sqlQuery') {
-    await expect(container.locator('.CodeMirror-scroll')).toContainText(value);
+    await expect(container.locator('.cm-scroller')).toContainText(value);
   } else if (propertyType === 'table-cp') {
     const values = value.split(',');
 
@@ -1002,12 +1010,13 @@ export const editColumnCustomProperty = async (
     await editor.blur();
     await page.getByTestId('save').click();
   } else if (propertyType === 'sqlQuery') {
-    const codeMirror = page.locator(
-      '.custom-properties-section-container .CodeMirror'
-    );
-    await expect(codeMirror).toBeVisible();
-    await codeMirror.click();
-    await page.keyboard.type(testValue);
+    await fillCodeMirrorEditor({
+      page,
+      value: testValue,
+      container: page
+        .locator('.custom-properties-section-container')
+        .getByTestId('code-mirror-container'),
+    });
   } else if (propertyType === 'timeInterval') {
     const [start, end] = testValue.split(',');
     await page.getByTestId('start-input').fill(start);
@@ -1388,9 +1397,13 @@ export const updateCustomPropertyInRightPanel = async (data: {
           val
         )}*`;
         await page.route(searchApi, (route) => route.continue());
-        await page.locator('#entityReference').clear();
+        const input = page
+          .getByTestId('asset-select-list')
+          .getByRole('combobox');
+        await input.click();
+        await input.clear();
         const searchEntity = page.waitForResponse(searchApi);
-        await page.locator('#entityReference').fill(val);
+        await input.fill(val);
         await searchEntity;
         await page.locator(`[data-testid="${val}"]`).click();
       }
@@ -1422,8 +1435,11 @@ export const updateCustomPropertyInRightPanel = async (data: {
     }
 
     case 'sqlQuery':
-      await page.locator("pre[role='presentation']").last().click();
-      await page.keyboard.type(value);
+      await fillCodeMirrorEditor({
+        page,
+        value,
+        container: container.getByTestId('code-mirror-container'),
+      });
       await container.locator('[data-testid="inline-save-btn"]').click();
 
       break;

openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts

@@ -995,14 +995,25 @@ export const assignGlossaryTerm = async (
     .getByTestId('glossary-container')
     .getByTestId(action === 'Add' ? 'add-tag' : 'edit-button')
     .click();
+  const glossaryInput = page
+    .getByTestId('tag-selector')
+    .locator('input')
+    .last();
+  await glossaryInput.waitFor({ state: 'visible' });
   const searchGlossaryTerm = page.waitForResponse(
-    `/api/v1/search/query?q=*${encodeURIComponent(glossaryTerm.displayName)}*`
+    (response) =>
+      response.url().includes('/api/v1/search/query') &&
+      response.url().includes(encodeURIComponent(glossaryTerm.displayName)) &&
+      response.request().method() === 'GET' &&
+      response.ok()
   );
-  await page.locator('#tagsForm_tags').waitFor({ state: 'visible' });
 
-  await page.locator('#tagsForm_tags').fill(glossaryTerm.displayName);
+  await glossaryInput.fill(glossaryTerm.displayName);
   await searchGlossaryTerm;
 
+  await page
+    .getByTestId(`tag-${glossaryTerm.fullyQualifiedName}`)
+    .waitFor({ state: 'visible' });
   await page.getByTestId(`tag-${glossaryTerm.fullyQualifiedName}`).click();
 
   await page