feat: Enhance Config Maps (#3300)

* add binaryData

* dependencies for useEffect

* fix naming

* fix graph for config maps

* remove configMap from pod graph config

src/resources/ConfigMaps/ConfigMapDetails.js

@@ -21,21 +21,33 @@ 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'),
-      value: secret => (
+      value: configMap => (
         <ControlledBy
-          ownerReferences={secret.metadata.ownerReferences}
-          namespace={secret.metadata.namespace}
+          ownerReferences={configMap.metadata.ownerReferences}
+          namespace={configMap.metadata.namespace}
         />
       ),
     },
   ];
 
   return (
     <ResourceDetails
-      customComponents={[ConfigMapEditor]}
+      customComponents={[ConfigMapEditor, ConfigMapBinaryDataEditor]}
       customColumns={customColumns}
       description={ResourceDescription}
       createResourceForm={ConfigMapCreate}

src/resources/ConfigMaps/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ResourceRelationConfig } from 'shared/components/ResourceGraph/types';
 import { predefinedCategories } from 'state/navigation/categories';
 import { Description } from 'shared/components/Description/Description';
+import { matchByOwnerReference } from 'shared/utils/helpers';
 
 export const resourceType = 'ConfigMaps';
 export const namespaced = true;
@@ -24,4 +25,14 @@ export const Create = React.lazy(() => import('./ConfigMapCreate'));
 export const resourceGraphConfig = (): ResourceRelationConfig => ({
   depth: 1,
   networkFlowLevel: 1,
+  relations: [
+    {
+      resource: { kind: 'Pod' },
+      filter: (cm, pod) =>
+        matchByOwnerReference({
+          resource: cm,
+          owner: pod,
+        }),
+    },
+  ],
 });

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