fix: promise close modal after success

arextest · Nov 7, 2024 · 085b8a0 · 085b8a0
1 parent f3a92a4
commit 085b8a0
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/packages/arex/src/panes/AppSetting/CompareConfigNew/AddConfigModal.tsx b/packages/arex/src/panes/AppSetting/CompareConfigNew/AddConfigModal.tsx
@@ -35,7 +35,7 @@ export type AddConfigModalProps<T> = {
     dependency?: Rule[];
   };
   operationList?: OperationInterface<'Interface'>[];
-  onOk?: (form: FormInstance<CompareConfigForm<T>>) => void;
+  onOk?: (form: FormInstance<CompareConfigForm<T>>) => Promise<any>;
   onClose?: () => void;
 };
 
@@ -62,6 +62,7 @@ const AddConfigModal = forwardRef(
 
     // reset dependency when operationId changed
     useEffect(() => {
+      // @ts-ignore
       form.setFieldValue('dependency', undefined);
     }, [operationId]);
 
@@ -132,8 +133,15 @@ const AddConfigModal = forwardRef(
 
     const [dependencyOptions, setDependencyOptions] = useState<SelectProps['options']>();
 
+    const handleOk = () =>
+      props.onOk?.(form).then(() => {
+        setOpenAddConfigModal(false);
+        form.resetFields();
+      });
+
     const handleCloseModal = () => {
       setOpenAddConfigModal(false);
+      form.resetFields();
       props.onClose?.();
     };
 
@@ -142,7 +150,7 @@ const AddConfigModal = forwardRef(
         destroyOnClose
         title={props.title}
         open={openAddConfigModal}
-        onOk={() => props.onOk?.(form)}
+        onOk={handleOk}
         onCancel={handleCloseModal}
       >
         <Form<CompareConfigForm<T>>
@@ -188,7 +196,9 @@ const AddConfigModal = forwardRef(
           {(() =>
             props.field?.(
               props.appId,
+              // @ts-ignore
               form.getFieldValue('operationId'),
+              // @ts-ignore
               form.getFieldValue('dependency'),
             ))()}
         </Form>

diff --git a/packages/arex/src/panes/AppSetting/CompareConfigNew/ListSort/SortPathKeyInput.tsx b/packages/arex/src/panes/AppSetting/CompareConfigNew/ListSort/SortPathKeyInput.tsx
@@ -50,6 +50,7 @@ export default function SortPathKeyInput(props: SortPathKeyInputProps) {
         {/* TODO select path from contract tree */}
         <Input />
       </Form.Item>
+
       <Form.Item
         name='keys'
         label={t('components:appSetting.keys')}
@@ -60,16 +61,7 @@ export default function SortPathKeyInput(props: SortPathKeyInputProps) {
         ]}
       >
         {/* TODO select path from contract tree */}
-        <Select
-          allowClear
-          mode='multiple'
-          options={[
-            {
-              label: '/test/value',
-              value: '/test/value',
-            },
-          ]}
-        />
+        <Select allowClear mode='tags' options={[]} />
       </Form.Item>
     </>
   );

diff --git a/packages/arex/src/panes/AppSetting/CompareConfigNew/ListSort/index.tsx b/packages/arex/src/panes/AppSetting/CompareConfigNew/ListSort/index.tsx
@@ -217,7 +217,7 @@ export default function ListSort(props: ListSortProps) {
       });
   }
 
-  const handleAddListSort: AddConfigModalProps<ListSortPrivate>['onOk'] = (form) => {
+  const handleAddListSort: AddConfigModalProps<ListSortPrivate>['onOk'] = (form) =>
     form
       .validateFields()
       .then((res) => {
@@ -233,7 +233,6 @@ export default function ListSort(props: ListSortProps) {
       .catch((e) => {
         console.error(e);
       });
-  };
 
   return (
     <div>

diff --git a/packages/arex/src/panes/AppSetting/CompareConfigNew/NodeIgnore/IgnorePathInput.tsx b/packages/arex/src/panes/AppSetting/CompareConfigNew/NodeIgnore/IgnorePathInput.tsx
@@ -1,7 +1,7 @@
 import { DownOutlined } from '@ant-design/icons';
-import { styled, TooltipButton, tryParseJsonString, useTranslation } from '@arextest/arex-core';
+import { css, styled, TooltipButton, tryParseJsonString } from '@arextest/arex-core';
 import { useRequest } from 'ahooks';
-import { Button, Collapse, Form, Input, InputProps, Space, theme, Typography } from 'antd';
+import { Collapse, Input, InputProps, Space, Typography } from 'antd';
 import React, { useMemo, useState } from 'react';
 
 import { ReportService } from '@/services';
@@ -25,8 +25,6 @@ export type ExclusionPathInputProps = Omit<InputProps, 'onChange'> & {
 const IgnorePathInput = (props: ExclusionPathInputProps) => {
   const { appId, operationId, dependency, ...inputProps } = props;
 
-  const { t } = useTranslation();
-
   const [expand, setExpand] = useState(false);
 
   const [selectedKeys, setSelectedKeys] = useState<React.Key[]>();
@@ -43,7 +41,7 @@ const IgnorePathInput = (props: ExclusionPathInputProps) => {
         ...dependency,
       }),
     {
-      ready: !!appId, // TODO && collapseExpand
+      ready: !!appId && expand,
       refreshDeps: [appId, operationId, dependency],
       onBefore() {
         setContract();
@@ -79,11 +77,18 @@ const IgnorePathInput = (props: ExclusionPathInputProps) => {
       <Collapse
         ghost
         activeKey={expand ? 'nodeTree' : undefined}
+        css={css`
+          .ant-collapse-header {
+            display: none !important;
+          }
+          .ant-collapse-content-box {
+            padding: 16px 0 0 !important;
+          }
+        `}
         items={[
           {
             key: 'nodeTree',
             showArrow: false,
-            // TODO styles no padding
             children: (
               <IgnoreTree
                 multiple={false}

diff --git a/packages/arex/src/panes/AppSetting/CompareConfigNew/NodeIgnore/index.tsx b/packages/arex/src/panes/AppSetting/CompareConfigNew/NodeIgnore/index.tsx
@@ -207,7 +207,7 @@ export default function NodeIgnore(props: NodeIgnoreProps) {
     </div>
   );
 
-  const handleAddIgnore: AddConfigModalProps<NodeIgnorePrivate>['onOk'] = (form) => {
+  const handleAddIgnore: AddConfigModalProps<NodeIgnorePrivate>['onOk'] = (form) =>
     form
       .validateFields()
       .then((res) => {
@@ -222,7 +222,6 @@ export default function NodeIgnore(props: NodeIgnoreProps) {
       .catch((e) => {
         console.log(e);
       });
-  };
 
   return (
     <div>