feat: yaml module height drag (#630)

## What type of PR is this?

<!--
Add one of the following kinds:
/kind bug
/kind cleanup
/kind refactor
/kind documentation
/kind feature
/kind chore
/kind perf
/kind style
/kind test
-->

## What this PR does / why we need it:

![1111](https://github.com/user-attachments/assets/7038052c-d446-4eb7-9208-c9a54e816252)

## Which issue(s) this PR fixes:

<!--
*Automatically closes linked issue when PR is merged.
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
_If PR is about `failing-tests or flakes`, please post the related
issues/tests in a comment and do not use `Fixes`_*
-->

Fixes #

ui/package.json

@@ -41,6 +41,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "query-string": "^8.1.0",
+    "re-resizable": "^6.10.0",
     "react": "18.2.0",
     "react-diff-viewer-continued": "^3.3.1",
     "react-dom": "18.2.0",

ui/src/components/yaml/index.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import type { LegacyRef } from 'react'
 import { Button, message } from 'antd'
+import { Resizable } from 're-resizable'
 import { useTranslation } from 'react-i18next'
 import hljs from 'highlight.js'
 import yaml from 'js-yaml'
@@ -21,6 +22,8 @@ const Yaml = (props: IProps) => {
   const { t } = useTranslation()
   const yamlRef = useRef<LegacyRef<HTMLDivElement> | undefined>()
   const { data } = props
+  const [moduleHeight, setModuleHeight] = useState<number>(500)
+
   useEffect(() => {
     const yamlStatusJson = yaml2json(data)
     if (yamlRef.current && yamlStatusJson?.data) {
@@ -42,19 +45,38 @@ const Yaml = (props: IProps) => {
   }
 
   return (
-    <div className={styles.yaml_content} style={{ height: props?.height }}>
-      <div className={styles.copy}>
-        {data && (
-          <Button type="primary" size="small" onClick={copy} disabled={!data}>
-            {t('Copy')}
-          </Button>
-        )}
-      </div>
-      <div
-        className={styles.yaml_box}
-        style={{ height: props?.height }}
-        ref={yamlRef as any}
-      />
+    <div style={{ paddingBottom: 20 }}>
+      <Resizable
+        defaultSize={{
+          height: moduleHeight,
+        }}
+        onResizeStop={(e, direction, ref, d) => {
+          const newModuleHeight = moduleHeight + d.height
+          setModuleHeight(newModuleHeight)
+        }}
+      >
+        <div className={styles.yaml_content} style={{ height: props?.height }}>
+          <div className={styles.copy}>
+            {data && (
+              <Button
+                type="primary"
+                size="small"
+                onClick={copy}
+                disabled={!data}
+              >
+                {t('Copy')}
+              </Button>
+            )}
+          </div>
+          <div className={styles.yaml_container}>
+            <div
+              className={styles.yaml_box}
+              style={{ height: props?.height }}
+              ref={yamlRef as any}
+            />
+          </div>
+        </div>
+      </Resizable>
     </div>
   )
 }

ui/src/components/yaml/styles.module.less

@@ -1,28 +1,29 @@
 .yaml_content {
-  position: relative;
+  height: 100%;
   overflow-y: auto;
+  border-radius: 8px;
 
   .copy {
     position: absolute;
     top: 20px;
     right: 20px;
   }
-
-  .yaml_box {
-    width: 100%;
-    height: 500px;
-    max-height: 800px;
-    min-height: 300px;
-    padding: 1.5rem 2rem;
-    overflow-y: auto;
-    font:
-      1.1em Inconsolata,
-      monospace;
-    color: #fff;
-    word-break: break-all;
-    white-space: pre-wrap;
+  .yaml_container {
+    height: 100%;
     background-color: #000;
-    border-radius: 8px;
-    box-sizing: border-box;
+    .yaml_box {
+      width: 100%;
+      padding: 1.5rem 2rem;
+      overflow-y: auto;
+      font:
+        1.1em Inconsolata,
+        monospace;
+      color: #fff;
+      word-break: break-all;
+      white-space: pre-wrap;
+      background-color: #000;
+      border-radius: 8px;
+      box-sizing: border-box;
+    }
   }
 }