Merge pull request #14663 from logonoff/CONSOLE-4407-monaco

CONSOLE-4407, CONSOLE-4409: Update monaco and YAML language server, use PF6 CodeEditor

Author: openshift-merge-bot[bot]

frontend/@types/console/index.d.ts

@@ -66,6 +66,7 @@ declare interface Window {
   webpackSharedScope?: {}; // webpack shared scope object, contains modules shared across plugins
   ResizeObserver: ResizeObserver.prototype; // polyfill used by react-measure
   Cypress?: {};
+  monaco?: {};
 }
 
 // From https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html

frontend/package.json

@@ -137,6 +137,7 @@
     "@patternfly/quickstarts": "^6.2.0-prerelease.4",
     "@patternfly/react-catalog-view-extension": "^6.1.0-prerelease.3",
     "@patternfly/react-charts": "^8.2.0-prerelease.13",
+    "@patternfly/react-code-editor": "^6.2.0-prerelease.21",
     "@patternfly/react-component-groups": "^6.2.0-prerelease.4",
     "@patternfly/react-console": "^6.0.0",
     "@patternfly/react-core": "^6.2.0-prerelease.15",
@@ -180,7 +181,7 @@
     "js-yaml": "^3.13.1",
     "json-schema": "^0.3.0",
     "lodash-es": "^4.17.21",
-    "monaco-languageclient": "^0.13.0",
+    "monaco-yaml": "^5.3.1",
     "murmurhash-js": "1.0.x",
     "node-polyfill-webpack-plugin": "^4.0.0",
     "pluralize": "^8.0.0",
@@ -197,7 +198,6 @@
     "react-linkify": "^0.2.2",
     "react-measure": "^2.2.6",
     "react-modal": "^3.12.1",
-    "react-monaco-editor": "0.46.x",
     "react-redux": "7.2.9",
     "react-router": "5.3.x",
     "react-router-dom": "5.3.x",
@@ -219,12 +219,10 @@
     "typesafe-actions": "^4.2.1",
     "url-search-params-polyfill": "2.x",
     "victory": "^37.3.6",
-    "vscode-languageserver-types": "^3.10.0",
     "whatwg-fetch": "2.x",
     "xterm": "^4.10.0",
     "xterm-addon-attach": "0.6.0",
     "xterm-addon-fit": "0.5.0",
-    "yaml-language-server": "0.13.0",
     "yup": "^0.27.0"
   },
   "devDependencies": {
@@ -304,8 +302,8 @@
     "mochawesome-merge": "^4.1.0",
     "mochawesome-report-generator": "^5.1.0",
     "mock-socket": "^9.0.3",
-    "monaco-editor": "^0.28.1",
-    "monaco-editor-webpack-plugin": "^4.2.0",
+    "monaco-editor": "^0.51.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "prettier": "2.0.5",
     "react-refresh": "^0.10.0",
     "read-pkg": "5.x",
@@ -318,7 +316,6 @@
     "ts-jest": "21.x",
     "ts-node": "10.9.2",
     "typescript": "5.7.2",
-    "umd-compat-loader": "^2.1.2",
     "val-loader": "^6.0.0",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "4.10.2",

frontend/packages/console-dynamic-plugin-sdk/README.md

@@ -170,6 +170,7 @@ This section documents notable changes in the Console provided shared modules ac
 - Removed `@fortawesome/font-awesome` and `openshift-logos-icon`. Plugins should use PatternFly icons
   from `@patternfly/react-icons` instead. The `fa-spin` class remains but is deprecated and will be
   removed in the future. Plugins should provide their own CSS to spin icons if needed.
+- Upgraded `monaco-editor` to version `0.51.0`.
 - Removed styling for generic HTML heading elements (e.g., `<h1>`). Use PatternFly components to achieve
   correct styling.
 - Removed `co-m-horizontal-nav` styling. Use [PatternFly Tabs](https://www.patternfly.org/components/tabs/)

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { QuickStartContextValues } from '@patternfly/quickstarts';
+import { CodeEditorProps as PfCodeEditorProps } from '@patternfly/react-code-editor';
 import { ButtonProps } from '@patternfly/react-core';
 import { ICell, OnSelect, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table';
 import { LocationDescriptor } from 'history';
-import MonacoEditor from 'react-monaco-editor/lib/editor';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import {
   ExtensionK8sGroupKindModel,
   K8sModel,
@@ -635,20 +636,29 @@ export type UserInfo = {
   extra?: object;
 };
 
-export type CodeEditorProps = {
-  value?: string;
-  language?: string;
-  options?: object;
-  minHeight?: string | number;
+export type CodeEditorToolbarProps = {
+  /** Whether to show a toolbar with shortcuts on top of the editor. */
   showShortcuts?: boolean;
-  showMiniMap?: boolean;
+  /** Toolbar links section on the left side of the editor */
   toolbarLinks?: React.ReactNodeArray;
-  onChange?: (newValue, event) => void;
-  onSave?: () => void;
 };
 
+// Omit the ref as we have our own ref type, which is completely different
+export type BasicCodeEditorProps = Partial<Omit<PfCodeEditorProps, 'ref'>>;
+
+export type CodeEditorProps = Omit<BasicCodeEditorProps, 'code'> &
+  CodeEditorToolbarProps & {
+    /** Code displayed in code editor. */
+    value?: string;
+    /** Minimum editor height in valid CSS height values. */
+    minHeight?: CSSStyleDeclaration['minHeight'];
+    /** Callback that is run when CTRL / CMD + S is pressed */
+    onSave?: () => void;
+  };
+
 export type CodeEditorRef = {
-  editor?: MonacoEditor['editor'];
+  editor: monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof monaco;
 };
 
 export type ResourceYAMLEditorProps = {

frontend/packages/console-shared/locales/en/console-shared.json

@@ -108,16 +108,22 @@
   "true": "true",
   "Select {{label}}": "Select {{label}}",
   "Cluster does not have resource {{groupVersionKind}}": "Cluster does not have resource {{groupVersionKind}}",
-  "Ask OpenShift Lightspeed": "Ask OpenShift Lightspeed",
-  "Accessibility help": "Accessibility help",
+  "Copy code to clipboard": "Copy code to clipboard",
+  "Content copied to clipboard": "Content copied to clipboard",
+  "Download code": "Download code",
   "Shortcuts": "Shortcuts",
+  "Upload code": "Upload code",
+  "Drag and drop a file or upload one.": "Drag and drop a file or upload one.",
+  "Browse": "Browse",
+  "Start from scratch": "Start from scratch",
+  "Start editing": "Start editing",
+  "Ask OpenShift Lightspeed": "Ask OpenShift Lightspeed",
   "View all editor shortcuts": "View all editor shortcuts",
   "Activate auto complete": "Activate auto complete",
   "Toggle Tab action between insert Tab character and move focus out of editor": "Toggle Tab action between insert Tab character and move focus out of editor",
   "View document outline": "View document outline",
   "View property descriptions": "View property descriptions",
   "Save": "Save",
-  "View shortcuts": "View shortcuts",
   "Restricted access": "Restricted access",
   "You don't have access to this section due to cluster policy": "You don't have access to this section due to cluster policy",
   "Error details": "Error details",

frontend/packages/console-shared/src/components/editor/BasicCodeEditor.scss

@@ -0,0 +1,7 @@
+// match the token in theme.ts. it already matches for light theme
+.pf-v6-theme-dark {
+  .co-code-editor:not(.pf-m-read-only) {
+      --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-t--color--gray--90);
+      --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--color--gray--90);
+  }
+}

frontend/packages/console-shared/src/components/editor/BasicCodeEditor.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { loader, Monaco } from '@monaco-editor/react';
+import { CodeEditor } from '@patternfly/react-code-editor';
+import classNames from 'classnames';
+import * as monaco from 'monaco-editor';
+import { useTranslation } from 'react-i18next';
+import { BasicCodeEditorProps } from '@console/dynamic-plugin-sdk';
+import { ErrorBoundaryInline } from '@console/shared/src/components/error';
+import { useConsoleMonacoTheme } from './theme';
+import './BasicCodeEditor.scss';
+
+// Avoid using monaco from CDN
+loader.config({ monaco });
+
+/**
+ * PatternFly CodeEditor with i18n and theme applied. Does not include
+ * YAML language integration or console-specific CSS.
+ *
+ * Note that it is important that this is the only component that imports
+ * monaco-editor, to avoid fetching files from a 3rd-party CDN.
+ */
+export const BasicCodeEditor: React.FC<BasicCodeEditorProps> = (props) => {
+  const { t } = useTranslation('console-shared');
+  const [monacoRef, setMonacoRef] = React.useState<Monaco | null>(null);
+  useConsoleMonacoTheme(monacoRef?.editor);
+
+  return (
+    <ErrorBoundaryInline>
+      <CodeEditor
+        copyButtonAriaLabel={t('Copy code to clipboard')}
+        copyButtonSuccessTooltipText={t('Content copied to clipboard')}
+        copyButtonToolTipText={t('Copy code to clipboard')}
+        downloadButtonAriaLabel={t('Download code')}
+        downloadButtonToolTipText={t('Download code')}
+        shortcutsPopoverButtonText={t('Shortcuts')}
+        uploadButtonAriaLabel={t('Upload code')}
+        uploadButtonToolTipText={t('Upload code')}
+        emptyStateBody={t('Drag and drop a file or upload one.')}
+        emptyStateButton={t('Browse')}
+        emptyStateLink={t('Start from scratch')}
+        emptyStateTitle={t('Start editing')}
+        {...props}
+        className={classNames('co-code-editor', props.className)}
+        editorProps={{
+          ...props?.editorProps,
+          beforeMount: (monacoInstance) => {
+            setMonacoRef(monacoInstance);
+            window.monaco = monacoInstance; // for e2e tests
+            props?.editorProps?.beforeMount?.(monacoInstance);
+          },
+        }}
+      />
+    </ErrorBoundaryInline>
+  );
+};

frontend/packages/console-shared/src/components/editor/CodeEditor.scss

@@ -1,14 +1,49 @@
+@import '../../../../../public/style/vars';
+
 .ocs-yaml-editor {
-  &__root {
-    flex: 1;
-    position: relative;
+  // ensure editor stays fills the parent container while remaining in bounds
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  .co-code-editor {
+    flex-grow: 1;
+  }
+
+  .monaco-editor {
+    position: absolute; // part of the fix for ResizeObserver issue
+
+    // revert custom overrides
+    .label-name { text-decoration: none; }
+    label { font-weight: unset; }
+
+    .monaco-hover-content .markdown-hover {
+      // matches tooltip styling seen back in OpenShift 4.18
+      max-width: 500px;
+      word-wrap: break-word;
+
+      // hide "Source: yaml" in hover tooltip
+      p:last-of-type {
+        display: none;
+      }
+    }
+  }
+
+  /* Hide CodeEditor toolbar on mobile */
+  @media (max-width: $screen-sm-max) {
+    .pf-v6-c-code-editor__header {
+      display: none;
+
+      + .pf-v6-c-code-editor__main {
+        border-block-start-width: var(--pf-t--global--border--width--box--default);
+      }
+    }
   }
 
-  &__wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+  /* Needed to get the CodeEditorToolbar to place buttons on the right side */
+  .pf-v6-c-code-editor__controls, .ocs-yaml-editor-toolbar {
+    width: 100%;
+    height: 100% !important;
+    align-items: center;
   }
 }