Code Editor: reduze size by defining supported langages

src/app/Caches/Create/CacheConfigEditor.tsx

@@ -4,18 +4,14 @@ import {
   Alert,
   AlertActionLink,
   AlertVariant,
-  Bullseye,
   ExpandableSection,
   Form,
   FormGroup,
   FormHelperText,
   FormSection,
   HelperText,
   HelperTextItem,
-  Spinner,
-  Text,
-  TextContent,
-  TextVariants
+  Spinner
 } from '@patternfly/react-core';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +20,6 @@ import { useApiAlert } from '@app/utils/useApiAlert';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 import { SelectSingleTypehead } from '@app/Common/SelectSingleTypehead';
 import { selectOptionPropsFromArray } from '@utils/selectOptionPropsCreator';
-import { TableEmptyState } from '@app/Common/TableEmptyState';
 
 const CacheConfigEditor = (props: {
   cacheEditor: CacheEditorStep;
@@ -119,7 +114,7 @@ const CacheConfigEditor = (props: {
       >
         <CodeEditor
           isLineNumbersVisible
-          isLanguageLabelVisible
+          language={Language.plaintext}
           code={editorConfig}
           onChange={handleChangeConfig}
           id="cache-config"

src/app/Caches/Create/ReviewCacheConfig.tsx

@@ -1,13 +1,14 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Alert, AlertVariant, Flex, Form, FormGroup, Text, TextContent, TextVariants } from '@patternfly/react-core';
-import { CodeEditor } from '@patternfly/react-code-editor';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { useTranslation } from 'react-i18next';
 import { CacheConfigUtils } from '@services/cacheConfigUtils';
 import { useCreateCache } from '@app/services/createCacheHook';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 import LanguageToggleRadios from './LanguageToggleRadios';
 import { ConfigDownloadType } from '@services/infinispanRefData';
 import { ConsoleServices } from '@services/ConsoleServices';
+import { toCodeEditorLanguage } from '@utils/getLanguage';
 
 const ReviewCacheConfig = (props: {
   setReviewConfig: (string) => void;
@@ -72,7 +73,9 @@ const ReviewCacheConfig = (props: {
         )}
         <CodeEditor
           onChange={onChangeConfig}
+          language={toCodeEditorLanguage(language)}
           isLineNumbersVisible
+          isLanguageLabelVisible
           code={config}
           height={'400px'}
           isCopyEnabled

src/app/utils/getLanguage.ts

@@ -0,0 +1,18 @@
+import { ConfigDownloadType } from '@services/infinispanRefData';
+import { Language } from '@patternfly/react-code-editor';
+
+export const toCodeEditorLanguage = (lang: ConfigDownloadType) => {
+  if (ConfigDownloadType.JSON == lang ) {
+    return Language.json;
+  }
+
+  if (ConfigDownloadType.YAML == lang ) {
+    return Language.yaml;
+  }
+
+  if (ConfigDownloadType.XML == lang ) {
+    return Language.xml;
+  }
+
+  return Language.plaintext;
+};

webpack.common.js

@@ -2,9 +2,9 @@
 
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const BG_IMAGES_DIRNAME = 'bgimages';
 const ASSET_PATH = process.env.ASSET_PATH || '/console/';
 module.exports = (env) => {
@@ -120,13 +120,15 @@ module.exports = (env) => {
     plugins: [
       new HtmlWebpackPlugin({
         template: path.resolve(__dirname, 'src', 'index.html'),
-        favicon: path.resolve(__dirname, 'src/app/assets/favicons', 'favicon.ico'),
-        manifest: path.resolve(__dirname, 'src/app/assets/favicons', 'manifest.json'),
+        favicon: path.resolve(__dirname, 'src/app/assets/favicons', 'favicon.ico')
       }),
       new Dotenv({
         systemvars: true,
         silent: true,
       }),
+      new MonacoWebpackPlugin({
+        languages: ['xml', 'json', 'yaml', 'plaintext']
+      }),
     ],
     resolve: {
       extensions: ['.js', '.ts', '.tsx', '.jsx'],

webpack.prod.js

@@ -25,8 +25,7 @@ module.exports = merge(common('production'), {
     new MiniCssExtractPlugin({
       filename: '[name].css',
       chunkFilename: '[name].bundle.css',
-    }),
-    new MonacoWebpackPlugin()
+    })
   ],
   module: {
     rules: [