From 0450789d63143203ac67a4c30364281df2960b80 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Fri, 14 Apr 2023 15:46:51 +0700
Subject: [PATCH] fix(plugin-workflow): fix request body variable component
 (#1703)

* fix(plugin-workflow): fix request body variable component

* fix(client): add missed file
---
 .../antd/variable/JSONInput.tsx               | 26 +-----
 .../antd/variable/TextArea.tsx                | 75 +----------------
 .../antd/variable/VariableSelect.tsx          | 83 +++++++++++++++++++
 .../workflow/src/client/nodes/delay.tsx       |  8 +-
 .../workflow/src/client/nodes/index.tsx       | 10 ++-
 5 files changed, 102 insertions(+), 100 deletions(-)
 create mode 100644 packages/core/client/src/schema-component/antd/variable/VariableSelect.tsx

diff --git a/packages/core/client/src/schema-component/antd/variable/JSONInput.tsx b/packages/core/client/src/schema-component/antd/variable/JSONInput.tsx
index be75056d5..7d40fc679 100644
--- a/packages/core/client/src/schema-component/antd/variable/JSONInput.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/JSONInput.tsx
@@ -1,10 +1,10 @@
-import React, { useRef, useState } from 'react';
-import { Button, Cascader, Popover, Input as AntInput } from 'antd';
+import React, { useRef } from 'react';
+import { Button } from 'antd';
 import { css } from "@emotion/css";
 
 import { Input } from "../input";
 import { useTranslation } from 'react-i18next';
-import { XButton } from './XButton';
+import { VariableSelect } from './VariableSelect';
 
 
 
@@ -21,7 +21,6 @@ export function JSONInput(props) {
   const inputRef = useRef<any>(null);
   const { value, space = 2, scope } = props;
   const { t } = useTranslation();
-  const [selectedVar, setSelectedVar] = useState<string[]>([]);
   const options = typeof scope === 'function' ? scope() : (scope ?? []);
 
   function onFormat() {
@@ -72,24 +71,7 @@ export function JSONInput(props) {
         `}
       >
         <Button onClick={onFormat}>{t('Prettify')}</Button>
-        <Popover
-          content={(
-            <AntInput.Group compact>
-              <Cascader
-                placeholder={t('Select a variable')}
-                value={selectedVar}
-                options={options}
-                onChange={(keyPaths) => setSelectedVar(keyPaths as string[])}
-                changeOnSelect
-              />
-              <Button onClick={onInsert}>{t('Insert')}</Button>
-            </AntInput.Group>
-          )}
-          trigger="click"
-          placement="topRight"
-        >
-          <XButton />
-        </Popover>
+        <VariableSelect options={options} onInsert={onInsert} />
       </Button.Group>
     </div>
   );
diff --git a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
index 999692230..308442355 100644
--- a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { Input, Cascader, Button, Tag } from 'antd';
+import { Input } from 'antd';
 import { useForm } from '@formily/react';
 import { cx, css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
 import * as sanitizeHTML from 'sanitize-html';
 
 import { EllipsisWithTooltip, useCompile } from '../..';
-import { useRecord } from '../../../record-provider';
+import { VariableSelect } from './VariableSelect';
 
 type RangeIndexes = [number, number, number, number];
 
@@ -341,19 +341,6 @@ export function TextArea(props) {
             }
           }
         }
-
-        .x-button{
-          .ant-select.ant-cascader{
-            position: absolute;
-            top: -1px;
-            left: -1px;
-            min-width: auto;
-            width: calc(100% + 2px);
-            height: calc(100% + 2px);
-            overflow: hidden;
-            opacity: 0;
-          }
-        }
       `}
     >
       <div
@@ -382,63 +369,7 @@ export function TextArea(props) {
         dangerouslySetInnerHTML={{ __html: html }}
       />
       {!disabled
-        ? (
-          <Button className={cx('x-button', css`
-            position: relative;
-          `)}>
-            <span
-              className={css`
-                font-style: italic;
-                font-family: "New York", "Times New Roman", Times, serif;
-              `}
-            >x</span>
-            <Cascader
-              placeholder={t('Select a variable')}
-              value={[]}
-              options={options}
-              onChange={(keyPaths = [], selectedOptions = []) => {
-                setSelectedVar(keyPaths as string[]);
-                if (!keyPaths.length) {
-                  return;
-                }
-                const option = selectedOptions[selectedOptions.length - 1];
-                if (!option?.children?.length) {
-                  onInsert(keyPaths);
-                }
-              }}
-              changeOnSelect
-              onClick={(e: any) => {
-                if (e.detail !== 2) {
-                  return;
-                }
-                for (let n = e.target; n && n !== e.currentTarget; n = n.parentNode) {
-                  if (Array.from(n.classList ?? []).includes('ant-cascader-menu-item')) {
-                    onInsert(selectedVar);
-                  }
-                }
-              }}
-              dropdownClassName={css`
-                .ant-cascader-menu{
-                  margin-bottom: 0;
-                }
-              `}
-              dropdownRender={(menu) => (
-                <>
-                  {menu}
-                  <div
-                    className={css`
-                      padding: .5em;
-                      border-top: 1px solid rgba(0, 0, 0, .06);
-                      color: rgba(0, 0, 0, .45);
-                    `}
-                  >
-                    {t('Double click to choose entire object')}
-                  </div>
-                </>
-              )}
-            />
-          </Button>
-        )
+        ? <VariableSelect options={options} onInsert={onInsert} />
         : null
       }
     </Input.Group>
diff --git a/packages/core/client/src/schema-component/antd/variable/VariableSelect.tsx b/packages/core/client/src/schema-component/antd/variable/VariableSelect.tsx
new file mode 100644
index 000000000..46cc5edab
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/variable/VariableSelect.tsx
@@ -0,0 +1,83 @@
+import { css, cx } from "@emotion/css";
+import { Button, Cascader } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function VariableSelect(props) {
+  const { options, onInsert } = props;
+  const { t } = useTranslation();
+  const [selectedVar, setSelectedVar] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSelectedVar([]);
+  }, [options]);
+
+  return (
+    <Button className={cx('x-button', css`
+      position: relative;
+
+      .ant-select.ant-cascader{
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        min-width: auto;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        overflow: hidden;
+        opacity: 0;
+      }
+    `)}>
+      <span
+        className={css`
+          font-style: italic;
+          font-family: "New York", "Times New Roman", Times, serif;
+        `}
+      >x</span>
+      <Cascader
+        placeholder={t('Select a variable')}
+        value={[]}
+        options={options}
+        onChange={(keyPaths = [], selectedOptions = []) => {
+          setSelectedVar(keyPaths as string[]);
+          if (!keyPaths.length) {
+            return;
+          }
+          const option = selectedOptions[selectedOptions.length - 1];
+          if (!option?.children?.length) {
+            onInsert(keyPaths);
+          }
+        }}
+        changeOnSelect
+        onClick={(e: any) => {
+          if (e.detail !== 2) {
+            return;
+          }
+          for (let n = e.target; n && n !== e.currentTarget; n = n.parentNode) {
+            if (Array.from(n.classList ?? []).includes('ant-cascader-menu-item')) {
+              onInsert(selectedVar);
+            }
+          }
+        }}
+        dropdownClassName={css`
+          .ant-cascader-menu{
+            margin-bottom: 0;
+          }
+        `}
+        dropdownRender={(menu) => (
+          <>
+            {menu}
+            <div
+              className={css`
+                padding: .5em;
+                border-top: 1px solid rgba(0, 0, 0, .06);
+                color: rgba(0, 0, 0, .45);
+              `}
+            >
+              {t('Double click to choose entire object')}
+            </div>
+          </>
+        )}
+      />
+    </Button>
+  );
+}
diff --git a/packages/plugins/workflow/src/client/nodes/delay.tsx b/packages/plugins/workflow/src/client/nodes/delay.tsx
index 20debc1af..9d1aef993 100644
--- a/packages/plugins/workflow/src/client/nodes/delay.tsx
+++ b/packages/plugins/workflow/src/client/nodes/delay.tsx
@@ -19,15 +19,13 @@ export default {
       type: 'number',
       title: `{{t("End Status", { ns: "${NAMESPACE}" })}}`,
       'x-decorator': 'FormItem',
-      'x-component': 'Select',
-      'x-component-props': {
-        placeholder: `{{t("Select status", { ns: "${NAMESPACE}" })}}`,
-      },
+      'x-component': 'Radio.Group',
       enum: [
         { label: `{{t("Succeed and continue", { ns: "${NAMESPACE}" })}}`, value: JOB_STATUS.RESOLVED },
         { label: `{{t("Fail and exit", { ns: "${NAMESPACE}" })}}`, value: JOB_STATUS.FAILED },
       ],
-      required: true
+      required: true,
+      default: JOB_STATUS.RESOLVED
     }
   },
   view: {
diff --git a/packages/plugins/workflow/src/client/nodes/index.tsx b/packages/plugins/workflow/src/client/nodes/index.tsx
index dce081365..7e5c9df02 100644
--- a/packages/plugins/workflow/src/client/nodes/index.tsx
+++ b/packages/plugins/workflow/src/client/nodes/index.tsx
@@ -423,7 +423,6 @@ export function NodeDefaultView(props) {
                       'x-component': 'fieldset',
                       'x-component-props': {
                         className: css`
-                          .ant-input,
                           .ant-select,
                           .ant-cascader-picker,
                           .ant-picker,
@@ -434,6 +433,15 @@ export function NodeDefaultView(props) {
                               min-width: 6em;
                             }
                           }
+
+                          .ant-input-affix-wrapper{
+                            &:not(.full-width){
+                              .ant-input{
+                                width: auto;
+                                min-width: 6em;
+                              }
+                            }
+                          }
                         `
                       },
                       properties: instruction.fieldset