feat: Enhance Config Maps

src/resources/ConfigMaps/ConfigMapDetails.js

@@ -21,6 +21,18 @@ export function ConfigMapDetails(props) {
     ));
   };
 
+  const ConfigMapBinaryDataEditor = resource => {
+    const { binaryData } = resource;
+    return Object.keys(binaryData || {}).map(key => (
+      <ReadonlyEditorPanel
+        title={key}
+        value={binaryData[key]}
+        key={key + JSON.stringify(binaryData[key])}
+        isBase64={true}
+      />
+    ));
+  };
+
   const customColumns = [
     {
       header: t('common.headers.owner'),
@@ -35,7 +47,7 @@ export function ConfigMapDetails(props) {
 
   return (
     <ResourceDetails
-      customComponents={[ConfigMapEditor]}
+      customComponents={[ConfigMapEditor, ConfigMapBinaryDataEditor]}
       customColumns={customColumns}
       description={ResourceDescription}
       createResourceForm={ConfigMapCreate}

src/shared/components/MonacoEditorESM/Editor.js

@@ -74,6 +74,13 @@ export function Editor({
     }
   }, [value, editorInstance, error]);
 
+  useEffect(() => {
+    if (prevValueRef.current !== value && readOnly) {
+      editorInstance.setValue(value);
+      prevValueRef.current = value;
+    }
+  }, [value, editorInstance, readOnly]);
+
   useUpdateValueOnParentChange({
     updateValueOnParentChange,
     editorInstance,

src/shared/components/ReadonlyEditorPanel.js

@@ -1,29 +1,71 @@
-import React from 'react';
-
 import { EditorActions } from 'shared/contexts/YamlEditorContext/EditorActions';
 import { Editor } from 'shared/components/MonacoEditorESM/Editor';
 import { UI5Panel } from './UI5Panel/UI5Panel';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { Button } from '@ui5/webcomponents-react';
+import { base64Decode } from 'shared/helpers';
 
-export function ReadonlyEditorPanel({ title, value, editorProps, actions }) {
-  const [editor, setEditor] = React.useState(null);
+export function ReadonlyEditorPanel({
+  title,
+  value,
+  editorProps,
+  actions,
+  isBase64 = false,
+}) {
+  const { t } = useTranslation();
+  const [editor, setEditor] = useState(null);
+  const [isEncoded, setEncoded] = useState(true);
+  const [valueState, setValueState] = useState(value);
+
+  const decode = () => {
+    setEncoded(true);
+    setValueState(value);
+  };
+  const encode = () => {
+    setEncoded(false);
+    setValueState(base64Decode(value));
+  };
 
   const options = {
     minimap: {
       enabled: false,
     },
   };
 
+  const headerActions =
+    actions ||
+    (isBase64 && (
+      <>
+        {actions && actions}
+        {isBase64 && (
+          <Button
+            design="Transparent"
+            icon={isEncoded ? 'show' : 'hide'}
+            disabled={!value}
+            onClick={() => {
+              return isEncoded ? encode() : decode();
+            }}
+          >
+            {isEncoded
+              ? t('secrets.buttons.decode')
+              : t('secrets.buttons.encode')}
+          </Button>
+        )}
+      </>
+    ));
+
   return (
-    <UI5Panel title={title} headerActions={actions}>
+    <UI5Panel title={title} headerActions={headerActions}>
       <EditorActions
-        val={value}
+        val={valueState}
         editor={editor}
         title={title}
         saveDisabled={true}
       />
       <Editor
         height="20em"
-        value={value}
+        value={valueState}
         options={options}
         onMount={setEditor}
         autocompletionDisabled