chore: upgrade dashboard codemirror

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

.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

packages/dashboard-backend/src/routes/api/editors.ts

@@ -11,11 +11,13 @@
  */
 
 import { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
-import { dump } from 'js-yaml';
+import { dump, load } from 'js-yaml';
 
 import { baseApiPath } from '@/constants/config';
+import { devWorkspaceResourcesExample } from '@/constants/examples';
 import { authenticationHeaderSchema } from '@/constants/schemas';
 import { EditorNotFoundError } from '@/devworkspaceClient/services/editorsApi';
+import { isLocalRun } from '@/localRun';
 import { IEditorsDevfileParams } from '@/models/restParams';
 import { getDevWorkspaceClient } from '@/routes/api/helpers/getDevWorkspaceClient';
 import { getServiceAccountToken } from '@/routes/api/helpers/getServiceAccountToken';
@@ -28,8 +30,15 @@ export function registerEditorsRoutes(instance: FastifyInstance) {
     server.get(`${baseApiPath}/editors`, getSchema({ tags }), async () => {
       const token = getServiceAccountToken();
       const { editorsApi } = getDevWorkspaceClient(token);
-
-      return editorsApi.list();
+      try {
+        return await editorsApi.list();
+      } catch (error) {
+        if (!isLocalRun()) {
+          throw error;
+        }
+        console.error('Failed to fetch editors.', error);
+      }
+      return [load(devWorkspaceResourcesExample.editorContent)];
     });
 
     server.route({

packages/dashboard-frontend/package.json

@@ -32,12 +32,20 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-yaml": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
     "@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",
+    "codemirror": "^5.65.18",
     "crypto-browserify": "^3.12.0",
     "date-fns": "^3.5.0",
     "detect-browser": "^5.3.0",

packages/dashboard-frontend/src/components/DevfileViewer/codemirror.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2018-2024 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import { defaultKeymap } from '@codemirror/commands';
+import { yaml } from '@codemirror/lang-yaml';
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  foldGutter,
+  foldKeymap,
+  syntaxHighlighting,
+} from '@codemirror/language';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { EditorState, Extension } from '@codemirror/state';
+import {
+  crosshairCursor,
+  drawSelection,
+  dropCursor,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+  rectangularSelection,
+} from '@codemirror/view';
+
+export const basicSetup: Extension = (() => [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  foldGutter(),
+  drawSelection(),
+  dropCursor(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  bracketMatching(),
+  closeBrackets(),
+  rectangularSelection(),
+  crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...foldKeymap]),
+  EditorState.readOnly.of(true),
+  yaml(),
+])();
+
+export { EditorView } from '@codemirror/view';

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

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

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

@@ -10,13 +10,11 @@
  *   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 React from 'react';
 
+import { EditorView, basicSetup } from '@/components/DevfileViewer/codemirror';
 import styles from '@/components/DevfileViewer/index.module.css';
 
 export type Props = {
@@ -27,46 +25,35 @@ export type Props = {
 };
 
 export class DevfileViewer extends React.PureComponent<Props> {
-  private editor: CMEditor | undefined;
+  private editor: EditorView | undefined;
 
   constructor(props: Props) {
     super(props);
   }
 
+  public componentWillUnmount(): void {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  }
+
   public componentDidMount(): void {
-    const element = window.document.querySelector(
-      `.${styles.devfileViewer} textarea#${this.props.id}`,
-    );
+    const element = window.document.querySelector(`.${styles.devfileViewer} div#${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 view = new EditorView({
+        extensions: basicSetup,
+        doc: this.props.value,
+        parent: element,
       });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
 
-      this.editor = editor;
+      this.editor = view;
     }
   }
 
-  public componentDidUpdate(): void {
-    if (!this.editor) {
-      return;
-    }
-
-    this.editor.setValue(this.props.value);
-    this.editor.refresh();
-    this.editor.focus();
-  }
-
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <textarea id={this.props.id}></textarea>
+        <div id={this.props.id}></div>
       </div>
     );
   }