Expose YAMLEditor

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -55,10 +55,11 @@
 53. [`InventoryItemStatus`](#inventoryitemstatus)
 54. [`InventoryItemLoading`](#inventoryitemloading)
 55. [`useFlag`](#useflag)
-56. [`ResourceYAMLEditor`](#resourceyamleditor)
-57. [`ResourceEventStream`](#resourceeventstream)
-58. [`usePrometheusPoll`](#useprometheuspoll)
-59. [`Timestamp`](#timestamp)
+56. [`YAMLEditor`](#yamleditor)
+57. [`ResourceYAMLEditor`](#resourceyamleditor)
+58. [`ResourceEventStream`](#resourceeventstream)
+59. [`usePrometheusPoll`](#useprometheuspoll)
+60. [`Timestamp`](#timestamp)
 
 ---
 
@@ -1752,13 +1753,52 @@ Hook that returns the given feature flag from FLAGS redux state.
 the boolean value of the requested feature flag or undefined
 
 
+---
+
+## `YAMLEditor`
+
+### Summary
+
+A basic lazy loaded YAML editor with hover help and completion.
+
+
+
+### Example
+
+
+```tsx
+<React.Suspense fallback={<LoadingBox />}>
+  <YAMLEditor
+    value={code}
+  />
+</React.Suspense>
+```
+
+
+
+
+
+### Parameters
+
+| Parameter Name | Description |
+| -------------- | ----------- |
+| `value` | String representing the yaml code to render. |
+| `options` | Monaco editor options. For more details, please, visit https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html. |
+| `minHeight` | Minimum editor height in valid CSS height values. |
+| `showShortcuts` | Boolean to show shortcuts on top of the editor. |
+| `toolbarLinks` | Array of ReactNode rendered on the toolbar links section on top of the editor. |
+| `onChange` | Callback for on code change event. |
+| `onSave` | Callback called when the command CTRL / CMD + S is triggered. |
+
+
+
 ---
 
 ## `ResourceYAMLEditor`
 
 ### Summary
 
-A lazy loaded YAML editor for Kubernetes resources with hover help and completion.<br/>The editor will handle updating the resource when the user clicks save unless an onSave handler is provided.<br/>It should be wrapped in a React.Suspense component.
+A lazy loaded YAML editor for Kubernetes resources with hover help and completion.<br/>The component use the YAMLEditor and add on top of it more functionality like<br/>resource update handling, alerts, save, cancel and reload buttons, accessibility and more.<br/>Unless onSave callback is provided, the resource update is automatically handled.<br/>It should be wrapped in a React.Suspense component.
 
 
 

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -19,6 +19,7 @@ import {
   InventoryItemTitleProps,
   InventoryItemBodyProps,
   InventoryItemStatusProps,
+  YAMLEditorProps,
   ResourceYAMLEditorProps,
   ResourceEventStreamProps,
   UsePrometheusPoll,
@@ -98,7 +99,7 @@ export const HorizontalNav: React.FC<HorizontalNavProps> = require('@console/int
  *   );
  * }
  * ```
- */  
+ */
 export const VirtualizedTable: VirtualizedTableFC = require('@console/internal/components/factory/Table/VirtualizedTable')
   .default;
 
@@ -148,7 +149,7 @@ export const useActiveColumns: UseActiveColumns = require('@console/internal/com
   .useActiveColumns;
 
 /**
- * Component for generating a page header 
+ * Component for generating a page header
  * @param {string} title - heading title
  * @param {ReactNode} [helpText] -  (optional) help section as react node
  * @param {ReactNode} [badge] -  (optional) badge icon as react node
@@ -162,7 +163,7 @@ export const useActiveColumns: UseActiveColumns = require('@console/internal/com
  *   );
  * };
  * ```
- */  
+ */
 export const ListPageHeader: React.FC<ListPageHeaderProps> = require('@console/internal/components/factory/ListPage/ListPageHeader')
   .default;
 
@@ -181,33 +182,33 @@ export const ListPageHeader: React.FC<ListPageHeaderProps> = require('@console/i
  *   );
  * };
  * ```
- */  
- export const ListPageCreate: React.FC<ListPageCreateProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
+ */
+export const ListPageCreate: React.FC<ListPageCreateProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
   .default;
 
- /**
-  * Component for creating a stylized link
-  * @param {string} to - string location where link should direct
-  * @param {object} [createAccessReview] -  (optional) object with namespace and kind used to determine access
-  * @param {ReactNode} [children] -  (optional) children for the component
-  * @example
-  * ```ts
-  * const exampleList: React.FC<MyProps> = () => {
-  *  return (
-  *   <>
-  *    <ListPageHeader title="Example Pod List Page"/>
-  *       <ListPageCreateLink to={'/link/to/my/page'}>Create Item</ListPageCreateLink>
-  *    </ListPageHeader>
-  *   </>
-  *  );
-  * };
-  * ```
-  */  
- export const ListPageCreateLink: React.FC<ListPageCreateLinkProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
+/**
+ * Component for creating a stylized link
+ * @param {string} to - string location where link should direct
+ * @param {object} [createAccessReview] -  (optional) object with namespace and kind used to determine access
+ * @param {ReactNode} [children] -  (optional) children for the component
+ * @example
+ * ```ts
+ * const exampleList: React.FC<MyProps> = () => {
+ *  return (
+ *   <>
+ *    <ListPageHeader title="Example Pod List Page"/>
+ *       <ListPageCreateLink to={'/link/to/my/page'}>Create Item</ListPageCreateLink>
+ *    </ListPageHeader>
+ *   </>
+ *  );
+ * };
+ * ```
+ */
+export const ListPageCreateLink: React.FC<ListPageCreateLinkProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
   .ListPageCreateLink;
 
 /**
- * Component for creating button 
+ * Component for creating button
  * @param {object} [createAccessReview] - (optional) object with namespace and kind used to determine access
  * @param {...object} [pfButtonProps] - (optional) Patternfly Button props
  * @example
@@ -222,8 +223,8 @@ export const ListPageHeader: React.FC<ListPageHeaderProps> = require('@console/i
  *   );
  * };
  * ```
- */  
- export const ListPageCreateButton: React.FC<ListPageCreateButtonProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
+ */
+export const ListPageCreateButton: React.FC<ListPageCreateButtonProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
   .ListPageCreateButton;
 
 /**
@@ -248,7 +249,7 @@ export const ListPageHeader: React.FC<ListPageHeaderProps> = require('@console/i
  *   );
  * };
  * ```
- */  
+ */
 export const ListPageCreateDropdown: React.FC<ListPageCreateDropdownProps> = require('@console/internal/components/factory/ListPage/ListPageCreate')
   .ListPageCreateDropdown;
 
@@ -261,7 +262,7 @@ export const ListPageCreateDropdown: React.FC<ListPageCreateDropdownProps> = req
  * @param {string} [nameFilterPlaceholder] -  (optional) placeholder for name filter
  * @param {string} [labelFilterPlaceholder] -  (optional) placeholder for label filter
  * @param {boolean} [hideLabelFilter] -  (optional) only shows the name filter instead of both name and label filter
- * @param {boolean} [hideNameLabelFilter] -  (optional) hides both name and label filter 
+ * @param {boolean} [hideNameLabelFilter] -  (optional) hides both name and label filter
  * @param {ColumnLayout} [columnLayout] -  (optional) column layout object
  * @param {boolean} [hideColumnManagement] -  (optional) flag to hide the column management
  * @example
@@ -371,8 +372,8 @@ export {
 
 /**
  * Component that shows the status in a popup window. Helpful component for building `console.dashboards/overview/health/resource` extensions
- * @param {ReactNode} firstColumn - values for first column of popup 
- * @param {ReactNode} [secondColumn] - (optional) values for second column of popup 
+ * @param {ReactNode} firstColumn - values for first column of popup
+ * @param {ReactNode} [secondColumn] - (optional) values for second column of popup
  * @param {ReactNode} [children] -  (optional) children for the popup
  * @example
  * ```tsx
@@ -411,7 +412,7 @@ export const StatusPopupSection: React.FC<StatusPopupSectionProps> = require('@c
  *    </StatusPopupItem>
  * </StatusPopupSection>
  * ```
- */  
+ */
 export const StatusPopupItem: React.FC<StatusPopupItemProps> = require('@console/shared/src/components/dashboard/status-card/StatusPopup')
   .default;
 
@@ -441,7 +442,7 @@ export const Overview: React.FC<OverviewProps> = require('@console/shared/src/co
  *     </Overview>
  *```
  */
- export const OverviewGrid: React.FC<OverviewGridProps> = require('@console/shared/src/components/dashboard/DashboardGrid')
+export const OverviewGrid: React.FC<OverviewGridProps> = require('@console/shared/src/components/dashboard/DashboardGrid')
   .default;
 
 /**
@@ -475,7 +476,7 @@ export const InventoryItem: React.FC = require('@console/shared/src/components/d
  *       </InventoryItemBody>
  *     </InventoryItem>
  *   )
- * ``` 
+ * ```
  */
 export const InventoryItemTitle: React.FC<InventoryItemTitleProps> = require('@console/shared/src/components/dashboard/inventory-card/InventoryCard')
   .InventoryItemTitle;
@@ -540,9 +541,32 @@ export const InventoryItemLoading: React.FC = require('@console/shared/src/compo
 
 export { useFlag } from '../utils/flags';
 
+/**
+ * A basic lazy loaded YAML editor with hover help and completion.
+ * @example
+ * ```tsx
+ * <React.Suspense fallback={<LoadingBox />}>
+ *   <YAMLEditor
+ *     value={code}
+ *   />
+ * </React.Suspense>
+ * ```
+ * @param {YAMLEditorProps['value']} value - String representing the yaml code to render.
+ * @param {YAMLEditorProps['options']} options - Monaco editor options. For more details, please, visit https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html.
+ * @param {YAMLEditorProps['minHeight']} minHeight - Minimum editor height in valid CSS height values.
+ * @param {YAMLEditorProps['showShortcuts']} showShortcuts - Boolean to show shortcuts on top of the editor.
+ * @param {YAMLEditorProps['toolbarLinks']} toolbarLinks - Array of ReactNode rendered on the toolbar links section on top of the editor.
+ * @param {YAMLEditorProps['onChange']} onChange - Callback for on code change event.
+ * @param {YAMLEditorProps['onSave']} onSave - Callback called when the command CTRL / CMD + S is triggered.
+ */
+export const YAMLEditor: React.FC<YAMLEditorProps> = require('@console/internal/components/AsyncYAMLEditor')
+  .AsyncYAMLEditor;
+
 /**
  * A lazy loaded YAML editor for Kubernetes resources with hover help and completion.
- * The editor will handle updating the resource when the user clicks save unless an onSave handler is provided.
+ * The component use the YAMLEditor and add on top of it more functionality like
+ * resource update handling, alerts, save, cancel and reload buttons, accessibility and more.
+ * Unless onSave callback is provided, the resource update is automatically handled.
  * It should be wrapped in a React.Suspense component.
  * @example
  * ```tsx
@@ -573,7 +597,6 @@ export const ResourceYAMLEditor: React.FC<ResourceYAMLEditorProps> = require('@c
 export const ResourceEventStream: React.FC<ResourceEventStreamProps> = require('@console/internal/components/events')
   .WrappedResourceEventStream;
 
-
 /**
  * Sets up a poll to Prometheus for a single query.
  * @param {PrometheusEndpoint} props.endpoint - one of the PrometheusEndpoint (label, query, range, rules, targets)
@@ -588,7 +611,7 @@ export const ResourceEventStream: React.FC<ResourceEventStreamProps> = require('
  */
 export const usePrometheusPoll: UsePrometheusPoll = (options) => {
   const result = require('@console/internal/components/graphs/prometheus-poll-hook').usePrometheusPoll(
-    options,
+    options
   );
   // unify order with the rest of API
   return [result[0], !result[2], result[1]];

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

@@ -610,6 +610,16 @@ export type SelfSubjectAccessReviewKind = {
   };
 };
 
+export type YAMLEditorProps = {
+  value?: string;
+  options?: object;
+  minHeight?: string | number;
+  showShortcuts?: boolean;
+  toolbarLinks?: React.ReactNodeArray;
+  onChange?: (newValue, event) => {};
+  onSave?: () => {};
+};
+
 export type ResourceYAMLEditorProps = {
   initialResource: string | { [key: string]: any };
   header?: string;

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

@@ -1,22 +1,13 @@
 import * as React from 'react';
 import Measure from 'react-measure';
 import MonacoEditor from 'react-monaco-editor';
+import { YAMLEditorProps } from '@console/dynamic-plugin-sdk';
 import './theme';
 import { registerYAMLinMonaco, defaultEditorOptions } from './yaml-editor-utils';
 import YAMLEditorToolbar from './YAMLEditorToolbar';
 
 import './YAMLEditor.scss';
 
-type YAMLEditorProps = {
-  value?: string;
-  options?: object;
-  minHeight?: string | number;
-  showShortcuts?: boolean;
-  toolbarLinks?: React.ReactNodeArray;
-  onChange?: (newValue, event) => {};
-  onSave?: () => {};
-};
-
 const YAMLEditor = React.forwardRef<MonacoEditor, YAMLEditorProps>((props, ref) => {
   const {
     value,

frontend/public/components/AsyncYAMLEditor.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { YAMLEditorProps } from '@console/dynamic-plugin-sdk';
+
+export const AsyncYAMLEditor: React.FC<YAMLEditorProps> = React.lazy(() =>
+  import('@console/shared/src/components/editor/YAMLEditor').then((m) => ({
+    default: m.default,
+  })),
+);