CONSOLE-4701: Add fontsize+theme to YAML editor

Author: logonoff

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import { loader } from '@monaco-editor/react';
 import { CodeEditor } from '@patternfly/react-code-editor';
 import { css } from '@patternfly/react-styles';
@@ -20,9 +20,9 @@ loader.config({ monaco });
  * 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) => {
+export const BasicCodeEditor: FC<BasicCodeEditorProps> = (props) => {
   const { t } = useTranslation('console-shared');
-  const theme = React.useContext(ThemeContext);
+  const theme = useContext(ThemeContext);
 
   return (
     <ErrorBoundaryInline>
@@ -42,17 +42,17 @@ export const BasicCodeEditor: React.FC<BasicCodeEditorProps> = (props) => {
         {...props}
         className={css('co-code-editor', props.className)}
         editorProps={{
-          ...props?.editorProps,
           theme: `console-${theme}`,
+          ...props?.editorProps,
           beforeMount: (monacoInstance) => {
             defineThemes(monacoInstance?.editor);
             window.monaco = monacoInstance; // for e2e tests
             props?.editorProps?.beforeMount?.(monacoInstance);
           },
         }}
         options={{
-          ...props?.options,
           fontFamily: 'var(--pf-t--global--font--family--mono)',
+          ...props?.options,
         }}
       />
     </ErrorBoundaryInline>

frontend/packages/console-shared/src/constants/common.ts

@@ -46,6 +46,10 @@ export const COMMUNITY_PROVIDERS_WARNING_USERSETTINGS_KEY = `${USERSETTINGS_PREF
 export const PINNED_RESOURCES_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/pinned-resources`;
 export const COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/table-columns`;
 export const LOG_WRAP_LINES_USERSETTINGS_KEY = `${USERSETTINGS_PREFIX}.log.wrapLines`;
+export const OVERRIDE_YAML_EDITOR_THEME_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.overrideYAMLEditorTheme`;
+export const OVERRIDE_YAML_EDITOR_THEME_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/overrideYAMLEditorTheme`;
+export const CUSTOM_YAML_EDITOR_FONT_SIZE_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.customYAMLEditorFontSize`;
+export const CUSTOM_YAML_EDITOR_FONT_SIZE_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/customYAMLEditorFontSize`;
 export const SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.showYAMLEditorTooltips`;
 export const SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/showYAMLEditorTooltips`;
 export const SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY = `${USERSETTINGS_PREFIX}.showYAMLEditorStickyScroll`;

frontend/public/components/edit-yaml.tsx

@@ -9,18 +9,10 @@ import { ActionGroup, Alert, Button } from '@patternfly/react-core';
 import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import {
-  FLAGS,
-  ALL_NAMESPACES_KEY,
-  SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
-  SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
-  SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
-  SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
-} from '@console/shared/src/constants/common';
+import { FLAGS, ALL_NAMESPACES_KEY } from '@console/shared/src/constants/common';
 import { getBadgeFromType } from '@console/shared/src/components/badges/badge-factory';
 import { getResourceSidebarSamples } from '@console/shared/src/utils/sample-utils';
 import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
-import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { useResourceConnectionHandler } from '@console/shared/src/hooks/useResourceConnectionHandler';
 
 import PageBody from '@console/shared/src/components/layout/PageBody';
@@ -64,7 +56,7 @@ import { findOwner } from '../module/k8s/managed-by';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src/models';
 import { definitionFor } from '../module/k8s/swagger';
 import { ImportYAMLResults } from './import-yaml-results';
-import { EditYamlSettingsModal } from './modals/edit-yaml-settings-modal';
+import { EditYamlSettingsModal, useEditYamlSettings } from './modals/edit-yaml-settings-modal';
 import { CodeEditorControl } from '@patternfly/react-code-editor';
 import { CompressIcon } from '@patternfly/react-icons/dist/js/icons/compress-icon';
 import { ExpandIcon } from '@patternfly/react-icons/dist/js/icons/expand-icon';
@@ -73,6 +65,7 @@ import { RootState } from '@console/internal/redux';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 import { ErrorModal } from './modals/error-modal';
+import type { CodeEditorProps } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 
 const generateObjToLoad = (
   templateExtensions: Parameters<typeof getYAMLTemplates>[0],
@@ -189,19 +182,7 @@ const EditYAMLInner: React.FC<EditYAMLInnerProps> = (props) => {
     ),
   );
 
-  const [showTooltips] = useUserSettingsCompatibility(
-    SHOW_YAML_EDITOR_TOOLTIPS_USER_SETTING_KEY,
-    SHOW_YAML_EDITOR_TOOLTIPS_LOCAL_STORAGE_KEY,
-    true,
-    true,
-  );
-
-  const [stickyScrollEnabled] = useUserSettingsCompatibility(
-    SHOW_YAML_EDITOR_STICKY_SCROLL_USER_SETTING_KEY,
-    SHOW_YAML_EDITOR_STICKY_SCROLL_LOCAL_STORAGE_KEY,
-    true,
-    true,
-  );
+  const { theme, fontSize, showTooltips, stickyScrollEnabled } = useEditYamlSettings();
 
   const [callbackCommand, setCallbackCommand] = React.useState('');
   const [showReplaceCodeModal, setShowReplaceCodeModal] = React.useState(false);
@@ -803,7 +784,7 @@ const EditYAMLInner: React.FC<EditYAMLInnerProps> = (props) => {
   }
 
   const readOnly = props.readOnly || notAllowed;
-  const options = { readOnly, scrollBeyondLastLine: false };
+  const options: CodeEditorProps['options'] = { fontSize, readOnly, scrollBeyondLastLine: false };
   const model = getModel(props.obj);
   const { samples, snippets } = model
     ? getResourceSidebarSamples(model, yamlSamplesList, t)
@@ -876,9 +857,10 @@ const EditYAMLInner: React.FC<EditYAMLInnerProps> = (props) => {
             <div className={css('yaml-editor', customClass)} ref={editor}>
               {showReplaceCodeModal && <ReplaceCodeModal handleCodeReplace={handleCodeReplace} />}
               <CodeEditor
+                editorProps={theme === 'default' ? undefined : { theme: `console-${theme}` }}
+                options={options}
                 isCopyEnabled={canDownload}
                 ref={monacoRef}
-                options={options}
                 showShortcuts={!genericYAML && !isFullscreen}
                 toolbarLinks={
                   sidebarSwitch