From ea9ff7e4df544471f0eb3de5f79e6b86dbbec2d7 Mon Sep 17 00:00:00 2001
From: zxj <782803291@qq.com>
Date: Thu, 29 Jul 2021 13:33:51 +0800
Subject: [PATCH] fix: fix chart visible (#781)

---
 shell/app/config-page/components/action-form.tsx | 9 ++++-----
 shell/app/yml-chart/chart/yml-chart-utils.tsx    | 6 +++---
 shell/app/yml-chart/chart/yml-chart.scss         | 8 --------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/shell/app/config-page/components/action-form.tsx b/shell/app/config-page/components/action-form.tsx
index f1026c0f73..581176b5e4 100644
--- a/shell/app/config-page/components/action-form.tsx
+++ b/shell/app/config-page/components/action-form.tsx
@@ -79,7 +79,7 @@ export const ActionForm = (props: IProps) => {
 
   useUpdateEffect(() => {
     if (state && has(state, 'formData')) {
-      updater.formData({ ...(state || {}) });
+      updater.formData({ ...(state.formData || {}) });
     }
   }, [state, updater]);
 
@@ -105,13 +105,12 @@ export const ActionForm = (props: IProps) => {
           ];
         }
         const curKeyOperation = get(operations, ['change', item.key]);
-        const curKey = item.key;
         if (curKeyOperation) {
           curItem.componentProps = {
             ...curItem.componentProps,
-            onChange: (e: any) => {
-              const val = curItem.component === 'input' ? e.target.value : e;
-              execOperation({ key: 'change', ...curKeyOperation }, { [curKey]: val });
+            onChange: () => {
+              const validFormData = formRef.current.getData();
+              execOperation({ key: 'change', ...curKeyOperation }, { formData: validFormData });
             },
           };
         }
diff --git a/shell/app/yml-chart/chart/yml-chart-utils.tsx b/shell/app/yml-chart/chart/yml-chart-utils.tsx
index 55e5e5e074..5b88b37601 100644
--- a/shell/app/yml-chart/chart/yml-chart-utils.tsx
+++ b/shell/app/yml-chart/chart/yml-chart-utils.tsx
@@ -146,7 +146,7 @@ const renderNodes = (nodeData: any[][], chart: any, chartConfig: IChartConfig, e
           if (isEdit) {
             const addEle = document.getElementById(`${chartId}-_yml-node-add-${index}_`);
             if (addEle) {
-              addEle.classList.add('show');
+              addEle.classList.replace('invisible', 'visible');
             }
           }
         })
@@ -154,7 +154,7 @@ const renderNodes = (nodeData: any[][], chart: any, chartConfig: IChartConfig, e
           if (isEdit) {
             const addEle = document.getElementById(`${chartId}-_yml-node-add-${index}_`);
             if (addEle) {
-              addEle.classList.remove('show');
+              addEle.classList.replace('visible', 'invisible');
             }
           }
         });
@@ -186,7 +186,7 @@ const renderNodes = (nodeData: any[][], chart: any, chartConfig: IChartConfig, e
         const add_xPos = x + width / 2 + MARGIN.X;
         const add_yPos = y - height / 2;
         const addNodeId = `${chartId}-_yml-node-add-${index}_`;
-        const addFobjectSVG = `<foreignObject id="${addNodeId}" class="svg-model-node-carrier hidden" x="${add_xPos}" y="${add_yPos}" width="${width}" height="${height}"></foreignObject>`;
+        const addFobjectSVG = `<foreignObject id="${addNodeId}" class="svg-model-node-carrier invisible" x="${add_xPos}" y="${add_yPos}" width="${width}" height="${height}"></foreignObject>`;
         // g标签上加id，用于设置opcity属性（兼容safari）
         const addG = chart.g().attr({ id: `${chartId}-${nodeId}-g` });
         const addF = Snap.parse(addFobjectSVG);
diff --git a/shell/app/yml-chart/chart/yml-chart.scss b/shell/app/yml-chart/chart/yml-chart.scss
index 660961888e..75b3b06da1 100644
--- a/shell/app/yml-chart/chart/yml-chart.scss
+++ b/shell/app/yml-chart/chart/yml-chart.scss
@@ -17,13 +17,5 @@
 
   .svg-model-node-carrier {
     overflow: visible;
-
-    &.hidden {
-      visibility: hidden;
-    }
-
-    &.show {
-      visibility: visible;
-    }
   }
 }