chore: upgrade dashboard codemirror

Signed-off-by: Oleksii Orel <[email protected]>

.deps/dev.md

@@ -507,7 +507,7 @@
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
-| [`[email protected]`](https://github.com/webpack-contrib/mini-css-extract-plugin) | MIT | clearlydefined |
+| [`[email protected]`](https://github.com/webpack-contrib/mini-css-extract-plugin) | MIT | #17035 |
 | [`[email protected]`](git://github.com/isaacs/minimatch.git) | ISC | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/substack/node-mkdirp.git) | MIT | clearlydefined |

.deps/prod.md

@@ -4,6 +4,11 @@
 | --- | --- | --- |
 | [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | #10718 |
 | [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | #13900 |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/autocomplete.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](git+https://github.com/codemirror/lang-yaml.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/language.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/state.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/view.git) | MIT | clearlydefined |
 | [`@devfile/[email protected]`](https://github.com/GIT_USER_ID/GIT_REPO_ID.git) | Apache-2.0 | clearlydefined |
 | [`@eclipse-che/[email protected]`](git+https://github.com/devfile/devworkspace-generator.git) | EPL-2.0 | ecd.che |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/accept-negotiator.git) | MIT | clearlydefined |
@@ -34,6 +39,10 @@
 | [`@jsep-plugin/[email protected]`](EricSmekens/jsep) | MIT | clearlydefined |
 | [`@jsep-plugin/[email protected]`](EricSmekens/jsep) | MIT | clearlydefined |
 | [`@kubernetes/[email protected]`](https://github.com/kubernetes-client/javascript.git) | Apache-2.0 | clearlydefined |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/common.git) | MIT | clearlydefined |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/highlight.git) | MIT | clearlydefined |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/lr.git) | MIT | clearlydefined |
+| [`@lezer/[email protected]`](https://github.com/lezer-parser/yaml.git) | MIT | clearlydefined |
 | `@lukeed/[email protected]` | MIT | clearlydefined |
 | [`@npmcli/[email protected]`](https://github.com/npm/agent.git) | ISC | clearlydefined |
 | [`@npmcli/[email protected]`](https://github.com/npm/fs.git) | ISC | #14656 |
@@ -128,7 +137,6 @@
 | [`[email protected]`](git://github.com/isaacs/chownr.git) | BlueOak-1.0.0 | clearlydefined |
 | [`[email protected]`](git+https://github.com/crypto-browserify/cipher-base.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
-| [`[email protected]`](https://github.com/codemirror/CodeMirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.16) |
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`]([email protected]:dfcreative/color-name.git) | MIT | clearlydefined |
@@ -167,7 +175,7 @@
 | [`[email protected]`](git://github.com/fb55/domhandler.git) | BSD-2-Clause | clearlydefined |
 | [`[email protected]`](git://github.com/fb55/domutils.git) | BSD-2-Clause | #8391 |
 | [`[email protected]`](git://github.com/mafintosh/duplexify) | MIT | clearlydefined |
-| [`[email protected]`](https://github.com/quartzjer/ecc-jsbn.git) | MIT | clearlydefined |
+| [`[email protected]`](https://github.com/quartzjer/ecc-jsbn.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/ecc-jsbn/0.1.2) |
 | [`[email protected]`]([email protected]:indutny/elliptic) | MIT | [CQ23022](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=23022) |
 | [`[email protected]`](https://github.com/mathiasbynens/emoji-regex.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | #1016 |
@@ -497,6 +505,7 @@
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | #8735 |
 | `[email protected]` | MIT | clearlydefined |
+| [`[email protected]`](git+https://github.com/marijnh/style-mod.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/remarkablemark/style-to-object) | MIT | #16187 |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/focus-trap/tabbable.git) | MIT | clearlydefined |
@@ -541,6 +550,7 @@
 | [`[email protected]`](git://github.com/davepacheco/node-verror.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
+| [`[email protected]`](git+https://github.com/marijnh/w3c-keyname.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/BerkeleyTrue/warning.git) | MIT | [CQ22359](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22359) |
 | `[email protected]` | BSD-2-Clause | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |

.yarnrc.yml

@@ -20,4 +20,4 @@ packageExtensions:
     dependencies:
       prop-types: "*"
 
-yarnPath: .yarn/releases/yarn-3.8.3.cjs
+yarnPath: .yarn/releases/yarn-3.8.6.cjs

package.json

@@ -40,6 +40,7 @@
   },
   "resolutions": {
     "@adobe/css-tools": "^4.3.2",
+    "@codemirror/autocomplete": "6.18.1",
     "@hapi/hoek": "^10.0.1",
     "axios": "^1.7.4",
     "braces": "^3.0.3",

packages/dashboard-frontend/package.json

@@ -32,12 +32,16 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.34.1",
+    "@lezer/highlight": "^1.2.1",
     "@patternfly/react-core": "^4.276.11",
     "@patternfly/react-icons": "^4.93.7",
     "@patternfly/react-table": "^4.113.3",
     "axios": "^1.7.0",
     "buffer": "^6.0.3",
-    "codemirror": "^5.65.16",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",

packages/dashboard-frontend/src/components/DevfileViewer/index.module.css

@@ -14,12 +14,10 @@
   width: 100%;
   height: 100%;
   min-height: 50vh;
-  border: 1px solid var(--pf-global--BorderColor--100);
 }
 
-.devfileViewer .CodeMirror-lines {
-  margin-top: -4px;
-  font-size: 12px;
-  font-weight: normal;
-  line-height: 18px;
+.devfileViewer > div {
+  overflow: auto;
+  height: 100%;
+  border: 1px solid var(--pf-global--BorderColor--100);
 }

packages/dashboard-frontend/src/components/DevfileViewer/index.tsx

@@ -10,15 +10,58 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import 'codemirror/mode/yaml/yaml';
-import 'codemirror/lib/codemirror.css';
-import '@/components/DevfileViewer/theme/eclipse-che.css';
-
-import { fromTextArea as CMEditor } from 'codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import {
+  defaultHighlightStyle,
+  foldGutter,
+  HighlightStyle,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import { EditorState, Extension } from '@codemirror/state';
+import { EditorView, lineNumbers } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
 import React from 'react';
 
 import styles from '@/components/DevfileViewer/index.module.css';
 
+const base00 = '#2e3440'; // black
+const base01 = '#999'; // grey
+const base02 = '#f7f7f7'; // white
+const base03 = '#5e81ac'; // deep blue
+const base04 = '#008080'; // teal
+const base05 = '#fff'; // white
+export const basicLightTheme = EditorView.theme(
+  {
+    '&': {
+      color: base00,
+      backgroundColor: base05,
+    },
+    '.cm-gutters': {
+      backgroundColor: base02,
+      color: base01,
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: base02,
+    },
+  },
+  { dark: false },
+);
+const basicLightHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: base03 },
+  { tag: [t.string], color: base03 },
+  { tag: [t.variableName], color: base04 },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: base04,
+  },
+]);
+const basicLight: Extension = [basicLightTheme, syntaxHighlighting(basicLightHighlightStyle)];
+const minimalSetup: Extension = (() => [
+  lineNumbers(),
+  foldGutter(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+])();
+
 export type Props = {
   isActive: boolean;
   isExpanded: boolean;
@@ -27,46 +70,47 @@ export type Props = {
 };
 
 export class DevfileViewer extends React.PureComponent<Props> {
-  private editor: CMEditor | undefined;
+  private editor: EditorView | undefined;
 
   constructor(props: Props) {
     super(props);
   }
 
   public componentDidMount(): void {
-    const element = window.document.querySelector(
-      `.${styles.devfileViewer} textarea#${this.props.id}`,
-    );
-    if (element !== null) {
-      const editor = new CMEditor(element, {
-        mode: 'yaml',
-        theme: 'eclipse-che',
-        lineNumbers: true,
-        lineWrapping: true,
-        readOnly: true,
-        autoRefresh: true,
+    const parent = window.document.querySelector(`#${this.props.id}`);
+    if (parent) {
+      const state = this.getEditorState();
+      this.editor = new EditorView({
+        state,
+        parent,
       });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
+    }
+  }
 
-      this.editor = editor;
+  public componentWillUnmount(): void {
+    if (this.editor) {
+      this.editor.destroy();
     }
   }
 
-  public componentDidUpdate(): void {
-    if (!this.editor) {
-      return;
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (this.editor && this.props.value !== prevProps.value) {
+      const state = this.getEditorState();
+      this.editor.setState(state);
     }
+  }
 
-    this.editor.setValue(this.props.value);
-    this.editor.refresh();
-    this.editor.focus();
+  private getEditorState(): EditorState {
+    return EditorState.create({
+      doc: this.props.value,
+      extensions: [minimalSetup, EditorState.readOnly.of(true), yaml(), basicLight],
+    });
   }
 
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <textarea id={this.props.id}></textarea>
+        <div id={this.props.id}></div>
       </div>
     );
   }

packages/dashboard-frontend/src/components/EditorSelector/Gallery/Entry/index.tsx

@@ -62,7 +62,6 @@ export class EditorSelectorEntry extends React.PureComponent<Props, State> {
     };
   }
 
-  // TODO temporary solution for making links open in a new browser tab (should be fixed with https://github.com/eclipse-che/che/issues/23219)
   private setAttribute(
     widgetId: string,
     querySelector: string = 'a',

packages/dashboard-frontend/src/pages/WorkspaceDetails/DevfileEditorTab/__tests__/index.spec.tsx

@@ -15,7 +15,7 @@ import { dump } from 'js-yaml';
 import { cloneDeep } from 'lodash';
 import React from 'react';
 
-import { DevfileEditorTab, prepareDevfile } from '@/pages/WorkspaceDetails/DevfileEditorTab';
+import DevfileEditorTab, { prepareDevfile } from '@/pages/WorkspaceDetails/DevfileEditorTab';
 import getComponentRenderer, { screen } from '@/services/__mocks__/getComponentRenderer';
 import devfileApi from '@/services/devfileApi';
 import { constructWorkspace, Workspace } from '@/services/workspace-adapter';

packages/dashboard-frontend/src/pages/WorkspaceDetails/DevfileEditorTab/index.tsx

@@ -36,7 +36,7 @@ export type State = {
   copied?: boolean;
 };
 
-export class DevfileEditorTab extends React.PureComponent<Props, State> {
+export default class DevfileEditorTab extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
 

packages/dashboard-frontend/src/pages/WorkspaceDetails/__tests__/index.spec.tsx

@@ -54,14 +54,13 @@ describe('Workspace Details page', () => {
   });
 
   describe('Tabs', () => {
-    it('should activate the Overview tab by default', () => {
+    it('should activate the Overview tab by default', async () => {
       const workspace = constructWorkspace(devWorkspaceBuilder.build());
       renderComponent({
         workspace,
       });
 
-      const tabpanel = screen.queryByRole('tabpanel', { name: 'Overview' });
-      expect(tabpanel).not.toBeNull();
+      expect(await screen.findByRole('tabpanel', { name: 'Overview' })).not.toBeNull();
     });
 
     it('should have four tabs visible', () => {