CONSOLE-4407: Update to PF CodeEditor prerelease

Also
- merge remote-tracking branch 'upstream/main' into CONSOLE-4407-monaco
- limit the width of the yaml editor container

Author: logonoff

dynamic-demo-plugin/console-extensions.json

@@ -196,7 +196,7 @@
       },
       "page": {
         "name": "Demo Plugin",
-        "href": "/demo-plugin"
+        "href": "demo-plugin"
       },
       "component": { "$codeRef": "projectTabContent" }
     }

frontend/package.json

@@ -137,7 +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.1.0",
+    "@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",

frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-core.md

@@ -1,7 +1,21 @@
 # Changelog for `@openshift-console/dynamic-plugin-sdk`
 
-Refer to [Console dynamic plugins README](./README.md) for OpenShift Console version vs SDK package
-version and PatternFly version compatibility.
+Console plugin SDK packages follow a semver scheme where the major and minor version number indicates
+the earliest supported OCP Console version, and the patch version number indicates the release of that
+particular package.
+
+For released (GA) versions of Console, use `4.x.z` packages.
+For current development version of Console, use `4.x.0-prerelease.n` packages.
+
+For 1.x plugin SDK packages, refer to "OpenShift Console Versions vs SDK Versions" compatibility table
+in [Console dynamic plugins README](./README.md).
+
+## 4.19.0-prerelease.1 - 2025-02-14
+
+- Remove Console provided PatternFly 4 shared modules ([CONSOLE-4379], [#14615])
+- Add `customData` prop to `HorizontalNav` component ([OCPBUGS-45319], [#14575])
+- Allow custom popover description in extension type `console.resource/details-item` ([CONSOLE-4269], [#14487])
+- Change generated JS build target from `es2016` to `es2021` ([CONSOLE-4400], [#14620])
 
 ## 1.8.0 - 2024-11-04
 
@@ -63,6 +77,9 @@ version and PatternFly version compatibility.
 [CONSOLE-4097]: https://issues.redhat.com/browse/CONSOLE-4097
 [CONSOLE-4185]: https://issues.redhat.com/browse/CONSOLE-4185
 [CONSOLE-4263]: https://issues.redhat.com/browse/CONSOLE-4263
+[CONSOLE-4269]: https://issues.redhat.com/browse/CONSOLE-4269
+[CONSOLE-4379]: https://issues.redhat.com/browse/CONSOLE-4379
+[CONSOLE-4400]: https://issues.redhat.com/browse/CONSOLE-4400
 [OCPBUGS-19048]: https://issues.redhat.com/browse/OCPBUGS-19048
 [OCPBUGS-30077]: https://issues.redhat.com/browse/OCPBUGS-30077
 [OCPBUGS-31355]: https://issues.redhat.com/browse/OCPBUGS-31355
@@ -74,6 +91,7 @@ version and PatternFly version compatibility.
 [OCPBUGS-37426]: https://issues.redhat.com/browse/OCPBUGS-37426
 [OCPBUGS-43538]: https://issues.redhat.com/browse/OCPBUGS-43538
 [OCPBUGS-43998]: https://issues.redhat.com/browse/OCPBUGS-43998
+[OCPBUGS-45319]: https://issues.redhat.com/browse/OCPBUGS-45319
 [ODC-7425]: https://issues.redhat.com/browse/ODC-7425
 [#12983]: https://github.com/openshift/console/pull/12983
 [#13233]: https://github.com/openshift/console/pull/13233
@@ -96,3 +114,7 @@ version and PatternFly version compatibility.
 [#14156]: https://github.com/openshift/console/pull/14156
 [#14421]: https://github.com/openshift/console/pull/14421
 [#14447]: https://github.com/openshift/console/pull/14447
+[#14487]: https://github.com/openshift/console/pull/14487
+[#14575]: https://github.com/openshift/console/pull/14575
+[#14615]: https://github.com/openshift/console/pull/14615
+[#14620]: https://github.com/openshift/console/pull/14620

frontend/packages/console-dynamic-plugin-sdk/CHANGELOG-webpack.md

@@ -1,7 +1,19 @@
 # Changelog for `@openshift-console/dynamic-plugin-sdk-webpack`
 
-Refer to [Console dynamic plugins README](./README.md) for OpenShift Console version vs SDK package
-version and PatternFly version compatibility.
+Console plugin SDK packages follow a semver scheme where the major and minor version number indicates
+the earliest supported OCP Console version, and the patch version number indicates the release of that
+particular package.
+
+For released (GA) versions of Console, use `4.x.z` packages.
+For current development version of Console, use `4.x.0-prerelease.n` packages.
+
+For 1.x plugin SDK packages, refer to "OpenShift Console Versions vs SDK Versions" compatibility table
+in [Console dynamic plugins README](./README.md).
+
+## 4.19.0-prerelease.1 - 2025-02-14
+
+- Remove Console provided PatternFly 4 shared modules ([CONSOLE-4379], [#14615])
+- Change generated JS build target from `es2016` to `es2021` ([CONSOLE-4400], [#14620])
 
 ## 1.3.0 - 2024-10-31
 
@@ -39,6 +51,8 @@ version and PatternFly version compatibility.
 
 [CONSOLE-3705]: https://issues.redhat.com/browse/CONSOLE-3705
 [CONSOLE-3853]: https://issues.redhat.com/browse/CONSOLE-3853
+[CONSOLE-4379]: https://issues.redhat.com/browse/CONSOLE-4379
+[CONSOLE-4400]: https://issues.redhat.com/browse/CONSOLE-4400
 [OCPBUGS-30762]: https://issues.redhat.com/browse/OCPBUGS-30762
 [OCPBUGS-30824]: https://issues.redhat.com/browse/OCPBUGS-30824
 [OCPBUGS-31901]: https://issues.redhat.com/browse/OCPBUGS-31901
@@ -58,3 +72,5 @@ version and PatternFly version compatibility.
 [#13992]: https://github.com/openshift/console/pull/13992
 [#14167]: https://github.com/openshift/console/pull/14167
 [#14300]: https://github.com/openshift/console/pull/14300
+[#14615]: https://github.com/openshift/console/pull/14615
+[#14620]: https://github.com/openshift/console/pull/14620

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

@@ -76,13 +76,22 @@ used with multiple versions of OpenShift Console but don't provide any backwards
 
 ## OpenShift Console Versions vs SDK Versions
 
-Not all NPM packages are fully compatible with all versions of the Console. This table will help align
-compatible versions of distributable SDK packages to versions of the OpenShift Console.
+Console plugin SDK packages follow a semver scheme where the major and minor version number indicates
+the earliest supported OCP Console version, and the patch version number indicates the release of that
+particular package.
+
+During development, we will publish prerelease versions of plugin SDK packages, e.g. `4.19.0-prerelease.1`.
+Once the given Console version is released (GA), we will publish corresponding plugin SDK packages without
+the prerelease tag, e.g. `4.19.0`.
+
+For older 1.x plugin SDK packages, refer to the following version compatibility table:
 
 | Console Version | SDK Package                                     | Last Package Version |
 | --------------- | ----------------------------------------------- | -------------------- |
-| 4.17.x          | `@openshift-console/dynamic-plugin-sdk`         | Latest               |
-|                 | `@openshift-console/dynamic-plugin-sdk-webpack` | Latest               |
+| 4.18.x          | `@openshift-console/dynamic-plugin-sdk`         | 1.8.0                |
+|                 | `@openshift-console/dynamic-plugin-sdk-webpack` | 1.3.0                |
+| 4.17.x          | `@openshift-console/dynamic-plugin-sdk`         | 1.6.0                |
+|                 | `@openshift-console/dynamic-plugin-sdk-webpack` | 1.2.0                |
 | 4.16.x          | `@openshift-console/dynamic-plugin-sdk`         | 1.4.0                |
 |                 | `@openshift-console/dynamic-plugin-sdk-webpack` | 1.1.1                |
 | 4.15.x          | `@openshift-console/dynamic-plugin-sdk`         | 1.0.0                |
@@ -156,21 +165,21 @@ This section documents notable changes in the Console provided shared modules ac
 
 #### Console 4.19.x
 
+- Removed PatternFly 4.x shared modules. Console now uses PatternFly 6.x and provides PatternFly 5.x
+  styles for compatibility with existing plugins.
 - 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.52.2`.
-- Removed PatternFly 4.x shared modules.
-- Upgraded PatternFly to v6.
-- Removed styling for generic HTML heading elements (e.g., `<h1>`). Use PatternFly components to achieve correct styling.
+- 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.
 
-### PatternFly dynamic modules
+### PatternFly 5+ dynamic modules
 
-Newer versions of `@openshift-console/dynamic-plugin-sdk-webpack` package (1.0.0 and higher) include
-support for automatic detection and sharing of individual PatternFly 5.x dynamic modules.
+Newer versions of `@openshift-console/dynamic-plugin-sdk-webpack` package include support for automatic
+detection and sharing of individual PatternFly 5+ dynamic modules.
 
-Plugins using PatternFly 5.x dependencies should generally avoid non-index imports for any PatternFly
-packages, for example:
+Plugins using PatternFly 5.x and newer should avoid non-index imports, for example:
 
 ```ts
 // Do _not_ do this:
@@ -187,20 +196,51 @@ Console application uses [Content Security Policy](https://developer.mozilla.org
 includes the document origin `'self'` and Console webpack dev server when running off-cluster.
 
 All dynamic plugin assets _should_ be loaded using `/api/plugins/<plugin-name>` Bridge endpoint which
-matches the `'self'` CSP source of Console application.
+matches the `'self'` CSP source for all Console assets served via Bridge.
 
-See `cspSources` and `cspDirectives` in
-[`pkg/server/server.go`](https://github.com/openshift/console/blob/master/pkg/server/server.go)
+Refer to `BuildCSPDirectives` function in
+[`pkg/utils/utils.go`](https://github.com/openshift/console/blob/master/pkg/utils/utils.go)
 for details on the current Console CSP implementation.
 
+Refer to [Dynamic Plugins feature page][console-doc-feature-page] section on Content Security Policy
+for more details.
+
 ### Changes in Console CSP
 
-This section documents notable changes in the Console Content Security Policy.
+This section documents notable changes in the Console Content Security Policy implementation.
 
 #### Console 4.18.x
 
-Console CSP is deployed in report-only mode. CSP violations will be logged in the browser console
-but the associated CSP directives will not be enforced.
+Console CSP feature is disabled by default. To test your plugins with CSP, enable the
+`ConsolePluginContentSecurityPolicy` feature gate on a test cluster. This feature gate
+should **not** be enabled on production clusters. Enabling this feature gate allows you
+to set `spec.contentSecurityPolicy` in your `ConsolePlugin` resource to extend existing
+CSP directives, for example:
+
+```yaml
+apiVersion: console.openshift.io/v1
+kind: ConsolePlugin
+metadata:
+  name: cron-tab
+spec:
+  displayName: 'Cron Tab'
+  contentSecurityPolicy:
+  - directive: 'ScriptSrc'
+    values:
+    - 'https://example1.com/'
+    - 'https://example2.com/'
+```
+
+When enabled, Console CSP operates in report-only mode; CSP violations will be logged in
+the browser and CSP violation data will be reported through telemetry service in production
+deployments.
+
+In a future release, Console will begin enforcing CSP. Consider testing and preparing your
+plugins now to avoid CSP related issues in future.
+
+#### Console 4.19.x
+
+The CSP feature is enabled by default. CSP implementation remains in report-only mode.
 
 ## Plugin metadata
 

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { loader, Monaco } from '@monaco-editor/react';
 import { CodeEditor } from '@patternfly/react-code-editor';
-import { getResizeObserver } from '@patternfly/react-core';
 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';
 
@@ -24,46 +24,32 @@ export const BasicCodeEditor: React.FC<BasicCodeEditorProps> = (props) => {
   const [monacoRef, setMonacoRef] = React.useState<Monaco | null>(null);
   useConsoleMonacoTheme(monacoRef?.editor);
 
-  // TODO(PF6): remove this when https://github.com/patternfly/patternfly-react/issues/11531 is fixed
-  const handleResize = React.useCallback(() => {
-    monacoRef?.editor?.getEditors()?.forEach((editor) => {
-      editor.layout({ width: 0, height: 0 });
-      editor.layout();
-    });
-  }, [monacoRef]);
-
-  React.useEffect(() => {
-    const observer = getResizeObserver(undefined, handleResize, true);
-
-    return () => {
-      observer();
-    };
-  }, [handleResize]);
-
   return (
-    <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>
+      <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,6 +1,15 @@
 @import '../../../../../public/style/vars';
 
 .ocs-yaml-editor {
+  // 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 {
     .monaco-hover-content .markdown-hover {
       // matches tooltip styling seen back in OpenShift 4.18
@@ -45,7 +54,7 @@
 
   /* Accessibility shortcuts hint styling */
   .ocs-yaml-editor-toolbar__shortcuts {
-    padding: var(--pf-t--global--spacer--md) var(--pf-v6-global-gutter);
+    padding: var(--pf-t--global--spacer--sm);
 
     .ocs-yaml-editor-shortcut__text {
       color: var(--pf-t--global--text--color--subtle);