fix: pre & after script history issues

src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts

@@ -13,14 +13,6 @@ import 'brace/mode/html';
 import 'brace/mode/xml';
 import 'brace/ext/searchbox';
 import ace from 'brace';
-import { completions } from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
-
-const langTools = ace.acequire('ace/ext/language_tools');
-console.log('langTools', langTools);
-langTools.addCompleter({
-  // this.aceEditorServiceService.getAutocomplete(this.autocompleteData),
-  getCompletions: (editor, session, pos, prefix, callback) => callback(null, completions),
-});
 
 type EventType = 'format' | 'copy' | 'search' | 'replace' | 'type' | 'download' | 'newTab';
 
@@ -62,6 +54,7 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
   @Input() editorType = 'json';
   @Input() autoFormat = false;
   @Input() disabled = false;
+  @Input() completions = [];
   @Output() codeChange = new EventEmitter<string>();
   @ViewChild(AceComponent, { static: false }) aceRef?: AceComponent;
   @ViewChild(AceDirective, { static: false }) directiveRef?: AceDirective;
@@ -125,6 +118,12 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
             event: it,
             ...eventHash.get(it),
           }));
+    const langTools = ace.acequire('ace/ext/language_tools');
+    langTools.setCompleters([]);
+    langTools.addCompleter({
+      // this.aceEditorServiceService.getAutocomplete(this.autocompleteData),
+      getCompletions: (editor, session, pos, prefix, callback) => callback(null, this.completions),
+    });
   }
   log(event, txt) {
     console.log('ace event', event, txt);

src/workbench/browser/src/app/pages/api/test/api-test.component.html

@@ -77,20 +77,16 @@
       <nz-tab [nzTitle]="preScriptTitleTmp" [nzForceRender]="true">
         <ng-template #preScriptTitleTmp>
           Pre-request Script
-          <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
-            apiData.restParams | apiParamsNum
-            }}</span>
         </ng-template>
-        <eo-api-script [(code)]="beforeScript" class="eo_theme_iblock bbd"></eo-api-script>
+        <eo-api-script [(code)]="beforeScript" [treeData]="BEFORE_DATA" [completions]="beforeScriptCompletions"
+          class="eo_theme_iblock bbd"></eo-api-script>
       </nz-tab>
       <nz-tab [nzTitle]="suffixScriptTitleTmp" [nzForceRender]="true">
         <ng-template #suffixScriptTitleTmp>
           After-response Script
-          <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
-            apiData.restParams | apiParamsNum
-            }}</span>
         </ng-template>
-        <eo-api-script [(code)]="afterScript" class="eo_theme_iblock bbd"></eo-api-script>
+        <eo-api-script [(code)]="afterScript" [treeData]="AFTER_DATA" [completions]="afterScriptCompletions"
+          class="eo_theme_iblock bbd"></eo-api-script>
       </nz-tab>
     </nz-tabset>
     <!-- Response -->
@@ -113,7 +109,7 @@
     </nz-tabset>
   </div>
 </div>
-<div class="invisible">
+<div class="invisible" hidden>
   <eo-api-test-history [apiID]="apiData.uuid" (clickItem)="restoreHistory($event)" #historyComponent>
   </eo-api-test-history>
 </div>

src/workbench/browser/src/app/pages/api/test/api-test.component.ts

@@ -28,6 +28,12 @@ import { TestServerLocalNodeService } from '../../../shared/services/api-test/lo
 import { TestServerServerlessService } from '../../../shared/services/api-test/serverless-node/test-connect.service';
 import { TestServerRemoteService } from 'eo/workbench/browser/src/app/shared/services/api-test/remote-node/test-connect.service';
 import { ApiTestRes } from 'eo/workbench/browser/src/app/shared/services/api-test/test-server.model';
+import {
+  BEFORE_DATA,
+  AFTER_DATA,
+  beforeScriptCompletions,
+  afterScriptCompletions,
+} from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
 
 @Component({
   selector: 'eo-api-test',
@@ -43,6 +49,10 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     parameters: [],
     hostUri: '',
   };
+  BEFORE_DATA = BEFORE_DATA;
+  AFTER_DATA = AFTER_DATA;
+  beforeScriptCompletions = beforeScriptCompletions;
+  afterScriptCompletions = afterScriptCompletions;
   beforeScript = '';
   afterScript = '';
   status: 'start' | 'testing' | 'tested' = 'start';
@@ -99,6 +109,8 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     console.log('restoreHistory', result);
     //restore request
     this.apiData = result.testData;
+    this.beforeScript = result.response?.beforeScript;
+    this.afterScript = result.response?.afterScript;
     this.changeUri();
     //restore response
     this.tabIndexRes = 0;
@@ -112,6 +124,21 @@ export class ApiTestComponent implements OnInit, OnDestroy {
       }
     });
   }
+  loadTestHistory(id) {
+    if (!id) {
+      this.beforeScript = '';
+      this.afterScript = '';
+      return;
+    }
+    this.storage.run('apiTestHistoryLoadAllByApiDataID', [id], (result: StorageRes) => {
+      let history = {} as any;
+      if (result.status === StorageResStatus.success) {
+        history = result.data.reduce((prev, curr) => (prev.updatedAt > curr.updatedAt ? prev : curr), {});
+      }
+      this.beforeScript = history.beforeScript || '';
+      this.afterScript = history.afterScript || '';
+    });
+  }
   saveTestDataToApi() {
     const apiData = this.apiTest.getApiFromTestData({
       history: this.testResult,
@@ -136,7 +163,9 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     return new ApiParamsNumPipe().transform(params);
   }
   ngOnInit(): void {
-    this.initApi(Number(this.route.snapshot.queryParams.uuid));
+    const apiDataId = Number(this.route.snapshot.queryParams.uuid);
+    this.initApi(apiDataId);
+    this.loadTestHistory(apiDataId);
     this.watchTabChange();
     this.watchEnvChange();
     this.messageService.get().subscribe(({ type, data }) => {
@@ -293,6 +322,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
           },
         });
         this.initApi(nextTab.key);
+        this.loadTestHistory(nextTab.key);
       });
   }
   /**

src/workbench/browser/src/app/pages/pages.component.scss

@@ -31,7 +31,7 @@
     router-outlet + * {
       display: block;
       height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height));
-      overflow: auto;
+      // overflow: auto;
     }
   }
 }

src/workbench/browser/src/app/shared/components/api-script/api-script.component.html

@@ -3,8 +3,8 @@
     <div class="flex justify-between p-3">
       <div i18n>Snippets</div>
       <div>
-        <a href="https://eoapi.io/docs/script-function" class="text-blue-400" target="_blank"
-          rel="noopener noreferrer" i18n>Learn more</a>
+        <a href="https://eoapi.io/docs/script-function" class="text-blue-400" target="_blank" rel="noopener noreferrer"
+          i18n>Learn more</a>
       </div>
     </div>
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true">
@@ -13,13 +13,8 @@
         <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="false" (nzClick)="insertCode(node)">
           <span class="text-sm text-blue-400"> {{ node.name }}</span>
           <ng-container *ngIf="node.note">
-            <span
-              [nzTooltipTitle]="titleTemplate"
-              [nzTooltipPlacement]="['topLeft', 'leftTop']"
-              class="text-blue-400"
-              nzTooltipColor="black"
-              nz-tooltip
-            >
+            <span [nzTooltipTitle]="titleTemplate" [nzTooltipPlacement]="['topLeft', 'leftTop']" class="text-blue-400"
+              nzTooltipColor="black" nz-tooltip>
               [?]
             </span>
             <ng-template #titleTemplate let-thing>
@@ -53,12 +48,8 @@
     </nz-tree-view>
   </div>
   <div class="flex-1">
-    <eo-editor
-      [(code)]="code"
-      editorType="javascript"
-      [eventList]="['format', 'copy', 'search', 'replace']"
-      (codeChange)="handleChange($event)"
-    >
+    <eo-editor [(code)]="code" editorType="javascript" [eventList]="['format', 'copy', 'search', 'replace']"
+      (codeChange)="handleChange($event)" [completions]="completions">
     </eo-editor>
   </div>
 </div>

src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts

@@ -7,14 +7,16 @@ import { EoEditorComponent } from 'eo/workbench/browser/src/app/eoui/editor/eo-e
 import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
 
 import type { TreeNode, FlatNode } from './constant';
-import { BEFORE_DATA } from './constant';
+
 @Component({
   selector: 'eo-api-script',
   templateUrl: './api-script.component.html',
   styleUrls: ['./api-script.component.scss'],
 })
 export class ApiScriptComponent implements OnInit {
   @Input() code = '';
+  @Input() treeData = [];
+  @Input() completions = [];
   @Output() codeChange: EventEmitter<any> = new EventEmitter();
   @ViewChild(EoEditorComponent, { static: false }) eoEditor?: EoEditorComponent;
 
@@ -42,13 +44,13 @@ export class ApiScriptComponent implements OnInit {
   // @ts-ignore
   dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-  constructor() {
-    this.dataSource.setData(BEFORE_DATA);
+  constructor() {}
+
+  ngOnInit(): void {
+    this.dataSource.setData(this.treeData);
     this.treeControl.expandAll();
   }
 
-  ngOnInit(): void {}
-
   hasChild = (_: number, node: FlatNode): boolean => node.expandable;
 
   handleChange(code) {

src/workbench/browser/src/app/shared/components/api-script/constant.ts

@@ -573,7 +573,6 @@ const COMMON_DATA: TreeNode[] = [
 ];
 
 export const BEFORE_DATA: TreeNode[] = [
-  ...COMMON_DATA,
   {
     name: $localize`HTTP API request`,
     children: [
@@ -753,10 +752,10 @@ if (raw_api_demo_1_result.response !== "") {
       },
     ],
   },
+  ...COMMON_DATA,
 ];
 
 export const AFTER_DATA: TreeNode[] = [
-  ...COMMON_DATA,
   {
     name: $localize`HTTP API request`,
     children: [
@@ -781,60 +780,18 @@ export const AFTER_DATA: TreeNode[] = [
       },
     ],
   },
-  {
-    name: $localize`Custom Global Variable`,
-    children: [
-      {
-        name: $localize`Set Global Variable`,
-        caption: 'eo.globals.set',
-        value: 'eo.globals.set("param_key","param_value")',
-        note: {
-          code: 'eo.globals.set("param_key","param_value")',
-          desc: $localize`Set Global Variable`,
-          input: [
-            { key: 'param_key', value: $localize`parameter name` },
-            { key: 'param_value', value: $localize`parameter value` },
-          ],
-        },
-      },
-      {
-        name: $localize`Get global variable value`,
-        caption: 'eo.globals.get',
-        value: 'eo.globals.get("param_key")',
-        note: {
-          code: 'eo.globals.set("param_key","param_value")',
-          desc: $localize`Get global variable value`,
-          input: [
-            { key: 'param_key', value: $localize`parameter name` },
-            { key: 'param_value', value: $localize`parameter value` },
-          ],
-          output: $localize`Global Variable Value`,
-        },
-      },
-      {
-        name: $localize`Delete Global Variable`,
-        caption: 'eo.globals.unset',
-        value: 'eo.globals.unset("param_key")',
-        note: {
-          code: 'eo.globals.unset("param_key")',
-          desc: $localize`Delete Global Variable`,
-          input: [{ key: 'param_key', value: $localize`parameter name` }],
-        },
-      },
-      {
-        name: $localize`Clear All Global Variables`,
-        caption: 'eo.globals.clear',
-        value: 'eo.globals.clear()',
-        note: {
-          code: 'eo.globals.clear()',
-          desc: $localize`Clear All Global Variables`,
-        },
-      },
-    ],
-  },
+  ...COMMON_DATA,
 ];
 
-export const completions: Completion[] = AFTER_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
+export const beforeScriptCompletions: Completion[] = BEFORE_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
+  const { caption, value } = curr;
+  if (caption) {
+    prev.push({ caption, value });
+  }
+  return prev;
+}, []);
+
+export const afterScriptCompletions: Completion[] = AFTER_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
   const { caption, value } = curr;
   if (caption) {
     prev.push({ caption, value });

src/workbench/browser/src/app/shared/services/storage/IndexedDB/lib/index.ts

@@ -485,15 +485,15 @@ export class IndexedDBStorage extends Dexie implements StorageInterface {
    * @param apiDataID
    */
   apiTestHistoryLoadAllByApiDataID(apiDataID: number | string): Observable<object> {
-    return this.loadAllByConditions(this.apiTestHistory, { apiDataID });
+    return this.loadAllByConditions(this.apiTestHistory, { apiDataID: Number(apiDataID) });
   }
 
   /**
    * Load all mock items by apiDataID.
    * @param apiDataID
    */
   apiMockLoadAllByApiDataID(apiDataID: number | string): Observable<object> {
-    return this.loadAllByConditions(this.mock, { apiDataID });
+    return this.loadAllByConditions(this.mock, { apiDataID: Number(apiDataID) });
   }
 
   /**