From 5bdc4bbb25c08708939b5a4404fdc5974a2f7aa4 Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>
Date: Wed, 28 Aug 2024 09:22:40 +0200
Subject: [PATCH] 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  | 20 +++++--
 src/resources/ConfigMaps/index.tsx            | 11 ++++
 src/resources/Pods/index.tsx                  |  4 --
 .../components/MonacoEditorESM/Editor.js      |  7 +++
 src/shared/components/ReadonlyEditorPanel.js  | 56 ++++++++++++++++---
 5 files changed, 83 insertions(+), 15 deletions(-)

diff --git a/src/resources/ConfigMaps/ConfigMapDetails.js b/src/resources/ConfigMaps/ConfigMapDetails.js
index 86c0ec896f..77b62307e3 100644
--- a/src/resources/ConfigMaps/ConfigMapDetails.js
+++ b/src/resources/ConfigMaps/ConfigMapDetails.js
@@ -21,13 +21,25 @@ 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}
         />
       ),
     },
@@ -35,7 +47,7 @@ export function ConfigMapDetails(props) {
 
   return (
     <ResourceDetails
-      customComponents={[ConfigMapEditor]}
+      customComponents={[ConfigMapEditor, ConfigMapBinaryDataEditor]}
       customColumns={customColumns}
       description={ResourceDescription}
       createResourceForm={ConfigMapCreate}
diff --git a/src/resources/ConfigMaps/index.tsx b/src/resources/ConfigMaps/index.tsx
index 044afb097c..5dd658f87a 100644
--- a/src/resources/ConfigMaps/index.tsx
+++ b/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,
+        }),
+    },
+  ],
 });
diff --git a/src/resources/Pods/index.tsx b/src/resources/Pods/index.tsx
index 64c9e490b3..cea54abbf1 100644
--- a/src/resources/Pods/index.tsx
+++ b/src/resources/Pods/index.tsx
@@ -49,10 +49,6 @@ export const resourceGraphConfig = (): ResourceRelationConfig => ({
   networkFlowKind: true,
   networkFlowLevel: 0,
   relations: [
-    {
-      resource: { kind: 'ConfigMap' },
-      filter: (pod, cm) => matchByMount('configMap')(pod, cm),
-    },
     {
       resource: { kind: 'DaemonSet' },
       filter: (pod, ds) =>
diff --git a/src/shared/components/MonacoEditorESM/Editor.js b/src/shared/components/MonacoEditorESM/Editor.js
index d27cba8a81..17c578d5fd 100644
--- a/src/shared/components/MonacoEditorESM/Editor.js
+++ b/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,
diff --git a/src/shared/components/ReadonlyEditorPanel.js b/src/shared/components/ReadonlyEditorPanel.js
index b5eeb50eb6..0f2a60078a 100644
--- a/src/shared/components/ReadonlyEditorPanel.js
+++ b/src/shared/components/ReadonlyEditorPanel.js
@@ -1,11 +1,31 @@
-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: {
@@ -13,17 +33,39 @@ export function ReadonlyEditorPanel({ title, value, editorProps, actions }) {
     },
   };
 
+  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