From 8cf12da6f8da3b0f0ba6b1166ec2b216fb3bb65d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 26 Dec 2022 12:36:20 +0300
Subject: [PATCH] Use monaco in config map details

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+config-maps/config-map-details.tsx        | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/+config-maps/config-map-details.tsx b/src/renderer/components/+config-maps/config-map-details.tsx
index f5b4007281..67b042c773 100644
--- a/src/renderer/components/+config-maps/config-map-details.tsx
+++ b/src/renderer/components/+config-maps/config-map-details.tsx
@@ -10,7 +10,6 @@ import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import type { ShowNotification } from "../notifications";
-import { Input } from "../input";
 import { Button } from "../button";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ConfigMap } from "../../../common/k8s-api/endpoints";
@@ -21,6 +20,7 @@ import configMapStoreInjectable from "./store.injectable";
 import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
 import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
 import loggerInjectable from "../../../common/logger.injectable";
+import { MonacoEditor } from "../monaco-editor";
 
 export interface ConfigMapDetailsProps extends KubeObjectDetailsProps<ConfigMap> {
 }
@@ -102,15 +102,13 @@ class NonInjectedConfigMapDetails extends React.Component<ConfigMapDetailsProps
                 data.map(([name, value]) => (
                   <div key={name} className="data">
                     <div className="name">{name}</div>
-                    <div className="flex gaps align-flex-start">
-                      <Input
-                        multiLine
-                        theme="round-black"
-                        className="box grow"
-                        value={value}
-                        onChange={v => this.data.set(name, v)}
-                      />
-                    </div>
+                    <MonacoEditor
+                      id={`config-map-data-${name}`}
+                      style={{ resize: "vertical", overflow: "hidden" }}
+                      value={value || ""}
+                      onChange={v => this.data.set(name, v)}
+                      setInitialHeight
+                    />
                   </div>
                 ))
               }