Fix hot fix v0.6.4 (#652)

* fix: wrapper ref function into arrow function (#651) Co-authored-by: onePone <[email protected]> * fix: collection load slow * fix: deepClone tree data * fix: deepClone tree data * chore: update arex version --------- Co-authored-by: onePone <[email protected]>
arextest · Apr 9, 2024 · 4774f6a · 4774f6a
1 parent 495f33a
commit 4774f6a
Show file tree

Hide file tree

Showing 12 changed files with 388 additions and 347 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.20",
+  "version": "0.6.21",
   "description": "",
   "homepage": "https://github.com/arextest/arex",
   "main": "index.js",

diff --git a/packages/arex-request/src/ArexRequest.tsx b/packages/arex-request/src/ArexRequest.tsx
@@ -73,7 +73,6 @@ const ArexRequest = forwardRef<ArexRequestRef, ArexRequestProps>((props, ref) =>
         <div style={{ height: '100%', display: 'flex', flexFlow: 'column', overflowX: 'hidden' }}>
           <NavigationBar ref={navigationBarRef} />
           <Divider style={{ width: '100%', margin: '0 0 8px 0' }} />
-
           <Allotment vertical css={AllotmentCSS}>
             <Allotment.Pane preferredSize='60%'>
               <Request />

diff --git a/packages/arex-request/src/components/Request/RequestBody.tsx b/packages/arex-request/src/components/Request/RequestBody.tsx
@@ -99,7 +99,7 @@ const RequestBody = () => {
         </div>
 
         {isJsonContentType && (
-          <a onClick={rawBodyRef?.current?.prettifyRequestBody}>{t('action.prettify')}</a>
+          <a onClick={() => rawBodyRef?.current?.prettifyRequestBody()}>{t('action.prettify')}</a>
         )}
       </div>
 

diff --git a/packages/arex/package.json b/packages/arex/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arex",
   "private": true,
-  "version": "0.6.20",
+  "version": "0.6.21",
   "author": "arextest",
   "main": "dist-electron/main",
   "files": [
@@ -52,9 +52,10 @@
     "react-d3-tree": "^3.5.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
+    "simple-zustand-devtools": "^1.1.0",
     "use-immer": "^0.8.1",
     "xspy": "^0.0.4",
-    "zustand": "^4.3.7"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@svgr/core": "^8.0.0",

diff --git a/packages/arex/src/components/CollectionSelect/CollectionNodeTitle.tsx b/packages/arex/src/components/CollectionSelect/CollectionNodeTitle.tsx
@@ -71,8 +71,8 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
   } = props;
   const { activeWorkspaceId } = useWorkspaces();
   const {
-    getCollections,
     getPath,
+    addCollectionNode,
     renameCollectionNode,
     removeCollectionNode,
     duplicateCollectionNode,
@@ -105,12 +105,19 @@ const CollectionNodeTitle: FC<CollectionNodeTitleProps> = (props) => {
       }),
     {
       manual: true,
-      onSuccess: async (res, [{ caseSourceType, nodeType }]) => {
+      onSuccess: async (res, [{ caseSourceType, nodeName, nodeType }]) => {
         // case inherit interface
+        const parentId = nodePath[nodePath.length - 1] as string;
         if (caseSourceType === CaseSourceType.CASE)
-          await createCaseInheritInterface(nodePath[nodePath.length - 1] as string, res.infoId);
+          await createCaseInheritInterface(parentId, res.infoId);
 
-        await getCollections({ workspaceId: activeWorkspaceId, parentIds: nodePath });
+        addCollectionNode({
+          infoId: res.infoId,
+          nodeName,
+          nodeType,
+          parentIds: nodePath,
+          caseSourceType,
+        });
         props.onAddNode?.(res.infoId, nodeType);
       },
     },

diff --git a/packages/arex/src/components/CollectionSelect/index.tsx b/packages/arex/src/components/CollectionSelect/index.tsx
@@ -66,6 +66,7 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
     setLoadedKeys,
     getCollections,
     getPath,
+    addCollectionNode,
     moveCollectionNode,
   } = useCollections();
 
@@ -98,15 +99,18 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
     },
   );
 
-  const handleLoadData: TreeProps<CollectionType>['loadData'] = (treeNode) =>
-    new Promise<void>((resolve) =>
+  const handleLoadData: TreeProps<CollectionType>['loadData'] = (treeNode) => {
+    const parentIds = getPath(treeNode.infoId).map((item) => item.id);
+
+    return new Promise<void>((resolve) =>
       resolve(
         getCollections({
           workspaceId: activeWorkspaceId,
-          parentIds: getPath(treeNode.infoId).map((item) => item.id),
+          parentIds,
         }),
       ),
-    );
+    ).catch((e) => console.error(e));
+  };
 
   const dataList: { key: string; title: string; labelIds: string | null }[] = useMemo(
     () =>
@@ -206,8 +210,12 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
       }),
     {
       manual: true,
-      onSuccess() {
-        getCollections();
+      onSuccess(res) {
+        addCollectionNode({
+          infoId: res.infoId,
+          nodeType: CollectionNodeType.folder,
+          nodeName: 'New Folder',
+        });
       },
     },
   );
@@ -297,7 +305,7 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
               options={options}
               placeholder={'Search for Name'}
               onChange={handleChange}
-              onSearch={collectionSearchedListRef.current?.search}
+              onSearch={() => collectionSearchedListRef.current?.search()}
               onCancel={() => {
                 setSearchValue(undefined);
                 setShowSearchInput(false);
@@ -343,14 +351,14 @@ const CollectionSelect: FC<CollectionSelectProps> = (props) => {
               ref={treeRef}
               height={props.height}
               selectedKeys={props.selectedKeys}
-              loadedKeys={loadedKeys}
               expandedKeys={expandedKeys}
               autoExpandParent={autoExpandParent}
               switcherIcon={<DownOutlined />}
-              treeData={collectionsTreeData}
+              treeData={cloneDeep(collectionsTreeData)}
+              loadedKeys={loadedKeys}
               loadData={handleLoadData}
               onLoad={(keys) => {
-                setLoadedKeys([...loadedKeys, ...(keys as string[])]);
+                setLoadedKeys([...new Set([...loadedKeys, ...(keys as string[])])]);
               }}
               fieldNames={{ title: 'nodeName', key: 'infoId', children: 'children' }}
               onDrop={onDrop}

diff --git a/packages/arex/src/menus/Collection/Collection.tsx b/packages/arex/src/menus/Collection/Collection.tsx
@@ -159,7 +159,7 @@ const Collection: ArexMenuFC = (props) => {
             <TooltipButton
               icon={<Icon name='ArchiveRestore' />}
               title={t('collection.import_export')}
-              onClick={collectionsImportExportRef.current?.open}
+              onClick={() => collectionsImportExportRef.current?.open()}
             />
 
             <TooltipButton

diff --git a/packages/arex/src/panes/Replay/AppTopBar/index.tsx b/packages/arex/src/panes/Replay/AppTopBar/index.tsx
@@ -65,7 +65,9 @@ const AppTopBar: FC<AppTopBarProps> = ({
               title={appTitle}
               readOnly={readOnly}
               count={recordCount}
-              onClickTitle={caseListRef.current?.open}
+              onClickTitle={() => {
+                caseListRef.current?.open();
+              }}
               onRefresh={handleRefresh}
               onSetting={handleSetting}
             />
@@ -78,7 +80,9 @@ const AppTopBar: FC<AppTopBarProps> = ({
             type='primary'
             disabled={readOnly}
             icon={<PlayCircleOutlined />}
-            onClick={createPlanModalRef.current?.open}
+            onClick={() => {
+              createPlanModalRef.current?.open();
+            }}
           >
             {t('replay.startButton')}
           </Button>

diff --git a/packages/arex/src/panes/Replay/Replay.tsx b/packages/arex/src/panes/Replay/Replay.tsx
@@ -76,7 +76,7 @@ const ReplayPage: ArexPaneFC = (props) => {
               message={
                 <span>
                   {t('replay.noAppOwnerAlert')}
-                  <a onClick={appOwnerConfigRef?.current?.open}>
+                  <a onClick={() => appOwnerConfigRef?.current?.open()}>
                     {t('replay.addOwner').toLowerCase()}
                   </a>
                   .

diff --git a/packages/arex/src/panes/Request/Request.tsx b/packages/arex/src/panes/Request/Request.tsx
@@ -45,7 +45,7 @@ const Request: ArexPaneFC<RequestProps> = (props) => {
   const navPane = useNavPane({ inherit: true });
   const { message } = App.useApp();
 
-  const { collectionsTreeData, getCollections, getPath } = useCollections();
+  const { collectionsTreeData, getPath, renameCollectionNode } = useCollections();
   const { removePane } = useMenusPanes();
 
   const userName = getLocalStorage<string>(EMAIL_KEY);
@@ -137,6 +137,7 @@ const Request: ArexPaneFC<RequestProps> = (props) => {
     const forceRecord = request?.headers.find(
       (header) => header.key === 'arex-force-record',
     )?.active;
+    // @ts-ignore
     const recordId = response?.headers?.find((header) => header.key === 'arex-record-id')?.value;
     if (forceRecord && recordId) {
       pinMock = { infoId: request.id, recordId };
@@ -200,7 +201,7 @@ const Request: ArexPaneFC<RequestProps> = (props) => {
       ready: !!data,
       onSuccess(success, [name]) {
         if (success) {
-          getCollections({ workspaceId, infoId: id, nodeType });
+          renameCollectionNode(id, name);
           navPane({
             id: paneId,
             type,
@@ -287,14 +288,12 @@ const Request: ArexPaneFC<RequestProps> = (props) => {
   };
 
   const reloadCollection = (params: GetCollectionItemTreeReq) => {
-    getCollections(params).then(() => {
-      navPane({
-        id: `${workspaceId}-${nodeType}-${params.infoId}`,
-        type,
-      });
-      if (params.infoId !== id) removePane(props.paneKey); // remove old pane when save as
-      else queryRequest();
+    navPane({
+      id: `${workspaceId}-${nodeType}-${params.infoId}`,
+      type,
     });
+    if (params.infoId !== id) removePane(props.paneKey); // remove old pane when save as
+    else queryRequest();
   };
 
   return (
@@ -361,7 +360,7 @@ const Request: ArexPaneFC<RequestProps> = (props) => {
         interfaceName={decodeURIComponent(props.data?.interfaceName || '')}
         operationId={decodeURIComponent(props.data?.operationId || '')}
         recordId={decodeURIComponent(props.data?.recordId || '')}
-        onCreate={requestRef.current?.save}
+        onCreate={(id) => requestRef.current?.save(id)}
       />
 
       <EnvironmentDrawer
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,7 @@ const RequestBody = () => { @@
             </div>
             {isJsonContentType && (
-              <a onClick={rawBodyRef?.current?.prettifyRequestBody}>{t('action.prettify')}</a>
+              <a onClick={() => rawBodyRef?.current?.prettifyRequestBody()}>{t('action.prettify')}</a>
             )}
           </div>
@@ Expand Down @@