chore: migrate to react-codemirror

.deps/EXCLUDED/prod.md

@@ -10,7 +10,6 @@ This file lists dependencies that do not need CQs or auto-detection does not wor
 | `@patternfly/[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-icons/4.93.7) |
 | `@patternfly/[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-table/4.113.6) |
 | `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/blueimp-md5/2.19.0) |
-| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.18) |
 | `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cookie-signature/1.2.1) |
 | `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/elliptic/6.6.1) |
 | `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fast-uri/2.4.0) |

.deps/dev.md

@@ -75,7 +75,7 @@
 | [`@pkgr/[email protected]`](https://github.com/un-ts/pkgr/blob/master/packages/utils) | MIT | clearlydefined |
 | `@polka/[email protected]` | MIT | #16183 |
 | `@react-mock/[email protected]` | MIT | clearlydefined |
-| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | clearlydefined |
+| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | #19220 |
 | [`@sinonjs/[email protected]`](git+https://github.com/sinonjs/commons.git) | BSD-3-Clause | #12905 |
 | [`@sinonjs/[email protected]`](https://github.com/sinonjs/fake-timers.git) | BSD-3-Clause | #9214 |
 | [`@testing-library/[email protected]`](https://github.com/testing-library/dom-testing-library) | MIT | #15966 |

.deps/prod.md

@@ -3,6 +3,16 @@
 | Packages | License | Resolved CQs |
 | --- | --- | --- |
 | [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | #10718 |
+| [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/autocomplete.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/commands.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/lint.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/search.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/state.git) | MIT | clearlydefined |
+| [`@codemirror/[email protected]`](https://github.com/codemirror/theme-one-dark.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 | N/A |
 | [`@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 |
@@ -35,6 +45,8 @@
 | [`@kubernetes/[email protected]`](https://github.com/kubernetes-client/javascript.git) | Apache-2.0 | #17950 |
 | [`@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 |
@@ -58,6 +70,8 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10798 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #6016 |
+| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | clearlydefined |
+| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/npm/abbrev-js.git) | ISC | clearlydefined |
 | [`[email protected]`](git+https://github.com/mysticatea/abort-controller.git) | MIT | #7592 |
 | [`[email protected]`](git+https://github.com/jsumners/abstract-logging.git) | MIT | clearlydefined |
@@ -109,7 +123,7 @@
 | [`[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 |
-| [`codemirror@5.65.18`](https://github.com/codemirror/CodeMirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.18) |
+| [`codemirror@6.0.1`](https://github.com/codemirror/basic-setup.git) | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`]([email protected]:dfcreative/color-name.git) | MIT | clearlydefined |
@@ -125,6 +139,7 @@
 | [`[email protected]`](https://github.com/crypto-browserify/createECDH.git) | MIT | clearlydefined |
 | [`[email protected]`]([email protected]:crypto-browserify/createHash.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/crypto-browserify/createHmac.git) | MIT | clearlydefined |
+| [`[email protected]`](git+https://github.com/marijnh/crelt.git) | MIT | clearlydefined |
 | [`[email protected]`]([email protected]:moxystudio/node-cross-spawn.git) | MIT | #17146 |
 | [`[email protected]`](git://github.com/crypto-browserify/crypto-browserify.git) | MIT | #1033 |
 | [`[email protected]`](git://github.com/trentm/node-dashdash.git) | MIT | #14596 |
@@ -426,6 +441,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]` | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/focus-trap/tabbable.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/isaacs/node-tar.git) | ISC | #10508 |
@@ -460,6 +476,7 @@
 | [`[email protected]`](https://github.com/uuidjs/uuid.git) | MIT | #57 |
 | `[email protected]` | MIT | clearlydefined |
 | [`[email protected]`](git://github.com/davepacheco/node-verror.git) | 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 |

package.json

@@ -40,6 +40,12 @@
   },
   "resolutions": {
     "@adobe/css-tools": "^4.3.2",
+    "@codemirror/commands": "6.7.1",
+    "@codemirror/lang-yaml": "6.1.1",
+    "@codemirror/language": "6.10.3",
+    "@codemirror/lint": "6.8.2",
+    "@codemirror/search": "6.5.6",
+    "@codemirror/state": "6.4.1",
     "@hapi/hoek": "^10.0.1",
     "axios": "^1.7.4",
     "bn.js": "^5.2.0",

packages/dashboard-frontend/package.json

@@ -32,14 +32,17 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/view": "^6.36.2",
     "@lezer/highlight": "^1.2.1",
     "@patternfly/react-core": "^4.276.11",
     "@patternfly/react-icons": "^4.93.7",
     "@patternfly/react-table": "^4.113.3",
     "@reduxjs/toolkit": "^2.2.7",
+    "@uiw/react-codemirror": "4.23.5",
     "axios": "^1.7.0",
     "buffer": "^6.0.3",
-    "codemirror": "^5.65.18",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",

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

@@ -10,7 +10,7 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-import CodeMirror from 'codemirror';
+import CodeMirror from '@uiw/react-codemirror';
 import React from 'react';
 
 import styles from '@/components/BasicViewer/index.module.css';
@@ -21,35 +21,15 @@ export type Props = {
 };
 
 export class BasicViewer extends React.PureComponent<Props> {
-  private editor: CodeMirror.Editor | undefined;
-
-  public componentDidMount(): void {
-    const parent = window.document.querySelector(`#${this.props.id}`);
-    if (parent) {
-      const editor = new CodeMirror.fromTextArea(parent, {
-        lineNumbers: false,
-        lineWrapping: false,
-        readOnly: true,
-        autoRefresh: true,
-        autofocus: true,
-      });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
-
-      this.editor = editor;
-    }
-  }
-
-  componentDidUpdate(prevProps: Readonly<Props>): void {
-    if (this.editor && this.props.value !== prevProps.value) {
-      this.editor.setValue(this.props.value);
-    }
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.basicViewer}>
-        <textarea id={this.props.id} value={this.props.value} readOnly={true}></textarea>
+        <CodeMirror
+          id={this.props.id}
+          readOnly={true}
+          basicSetup={false}
+          value={this.props.value}
+        />
       </div>
     );
   }

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

@@ -10,14 +10,6 @@
  *   Red Hat, Inc. - initial API and implementation
  */
 
-.devfileViewer {
-  width: 100%;
-  height: 100%;
-  min-height: 50vh;
-}
-
 .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,49 @@
  *   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 CodeMirror from 'codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+import CodeMirror from '@uiw/react-codemirror';
 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
+
+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,
+  },
+]);
+
 export type Props = {
   isActive: boolean;
   isExpanded: boolean;
@@ -27,38 +61,16 @@ export type Props = {
 };
 
 export class DevfileViewer extends React.PureComponent<Props> {
-  private editor: CodeMirror.Editor | undefined;
-
-  constructor(props: Props) {
-    super(props);
-  }
-
-  public componentDidMount(): void {
-    const parent = window.document.querySelector(`#${this.props.id}`);
-    if (parent) {
-      const editor = new CodeMirror.fromTextArea(parent, {
-        mode: 'yaml',
-        theme: 'eclipse-che',
-        lineNumbers: true,
-        lineWrapping: true,
-        readOnly: true,
-        autoRefresh: true,
-      });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
-
-      this.editor = editor;
-    }
-  }
-
-  componentDidUpdate(): void {
-    this.editor.setValue(this.props.value);
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <textarea id={this.props.id} readOnly={true}></textarea>
+        <CodeMirror
+          readOnly={true}
+          height="60vh"
+          id={this.props.id}
+          value={this.props.value}
+          extensions={[basicLightTheme, syntaxHighlighting(basicLightHighlightStyle), yaml()]}
+        />
       </div>
     );
   }

packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/index.tsx

@@ -41,6 +41,7 @@ import { buildIdeLoaderLocation, toHref } from '@/services/helpers/location';
 import { AlertItem } from '@/services/helpers/types';
 import { TabManager } from '@/services/tabManager';
 import { Workspace } from '@/services/workspace-adapter';
+import { DEVWORKSPACE_BOOTSTRAP } from '@/services/workspace-client/devworkspace/devWorkspaceClient';
 import { RootState } from '@/store';
 import { selectDefaultDevfile } from '@/store/DevfileRegistries/selectors';
 import { selectFactoryResolver } from '@/store/FactoryResolver/selectors';
@@ -185,7 +186,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
         devfile.attributes = {};
       }
 
-      devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
+      devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
 
       if (devfile.projects === undefined) {
         devfile.projects = [];
@@ -205,7 +206,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
         devfile.attributes = {};
       }
 
-      devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
+      devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
     }
 
     if (remotes) {