fix: test result request body auto height

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

@@ -9,107 +9,71 @@
           <nz-select class="!w-[106px] flex-none" [(ngModel)]="apiData.method" formControlName="method">
             <nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
           </nz-select>
-          <div
-            *ngIf="env.hostUri"
-            nz-typography
-            nzEllipsis
-            class="env_front_uri"
-            nzTooltipTitle="{{ env.hostUri }}"
-            nzTooltipPlacement="bottom"
-            nz-tooltip
-          >
+          <div *ngIf="env.hostUri" nz-typography nzEllipsis class="env_front_uri" nzTooltipTitle="{{ env.hostUri }}"
+            nzTooltipPlacement="bottom" nz-tooltip>
             {{ env.hostUri }}
           </div>
           <nz-form-item nz-col class="fg1">
             <nz-form-control i18n-nzErrorTip nzErrorTip="Please enter URL">
-              <input
-                type="text"
-                i18n-placeholder
-                placeholder="Enter URL"
-                name="uri"
-                nz-input
-                formControlName="uri"
-                [(ngModel)]="apiData.uri"
-                (change)="changeUri()"
-              />
+              <input type="text" i18n-placeholder placeholder="Enter URL" name="uri" nz-input formControlName="uri"
+                [(ngModel)]="apiData.uri" (change)="changeUri()" />
             </nz-form-control>
           </nz-form-item>
           <button type="submit" nz-button nzType="primary" class="ml10 w_100" (click)="clickTest()">
             <span *ngIf="status !== 'testing'" i18n><span>Send</span></span>
             <span *ngIf="status === 'testing'" i18n>Abort</span>
             <span *ngIf="status === 'testing' && waitSeconds" class="ml-1">{{ waitSeconds }}</span>
           </button>
-          <button
-            type="button"
-            *ngIf="!apiData.uuid"
-            nz-button
-            nzType="default"
-            (click)="saveTestDataToApi()"
-            class="ml10"
-            i18n
-          >
+          <button type="button" *ngIf="!apiData.uuid" nz-button nzType="default" (click)="saveTestDataToApi()"
+            class="ml10" i18n>
             Save as API
           </button>
         </nz-input-group>
       </form>
       <!-- Request Info -->
-      <nz-tabset
-        [nzTabBarStyle]="{ 'padding-left': '10px' }"
-        [nzAnimated]="false"
-        [(nzSelectedIndex)]="nzSelectedIndex"
-      >
+      <nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false"
+        [(nzSelectedIndex)]="nzSelectedIndex">
         <!-- Request Headers -->
         <nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
           <ng-template #headerTitleTmp>
             <span i18n="@@RequestHeaders">Headers</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.requestHeaders)">{{
               apiData.requestHeaders | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
           <eo-api-test-header class="eo_theme_iblock bbd" [(model)]="apiData.requestHeaders"></eo-api-test-header>
         </nz-tab>
         <!--Request Info -->
         <nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
           <ng-template #bodyTitleTmp>
             <span i18n>Body</span>
-            <span
-              class="eo-tab-theme-icon"
-              *ngIf="
+            <span class="eo-tab-theme-icon" *ngIf="
                 ['formData', 'json', 'xml'].includes(apiData.requestBodyType)
                   ? bindGetApiParamNum(apiData.requestBody)
                   : apiData.requestBody?.length
-              "
-            ></span>
+              "></span>
           </ng-template>
-          <eo-api-test-body
-            class="eo_theme_iblock bbd"
-            [(contentType)]="contentType"
-            (contentTypeChange)="changeContentType($event)"
-            [(bodyType)]="apiData.requestBodyType"
-            (bodyTypeChange)="changeBodyType($event)"
-            [(model)]="apiData.requestBody"
-            [supportType]="['formData', 'raw', 'binary']"
-          ></eo-api-test-body>
+          <eo-api-test-body class="eo_theme_iblock bbd" [(contentType)]="contentType"
+            (contentTypeChange)="changeContentType($event)" [(bodyType)]="apiData.requestBodyType"
+            (bodyTypeChange)="changeBodyType($event)" [(model)]="apiData.requestBody"
+            [supportType]="['formData', 'raw', 'binary']"></eo-api-test-body>
         </nz-tab>
         <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
           <ng-template #queryTitleTmp>
             <span i18n>Query</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.queryParams)">{{
               apiData.queryParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-test-query
-            class="eo_theme_iblock bbd"
-            [model]="apiData.queryParams"
-            (modelChange)="changeQuery($event)"
-          ></eo-api-test-query>
+          <eo-api-test-query class="eo_theme_iblock bbd" [model]="apiData.queryParams"
+            (modelChange)="changeQuery($event)"></eo-api-test-query>
         </nz-tab>
         <nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
           <ng-template #restTitleTmp>
             <span i18n>REST</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
               apiData.restParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
           <eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
         </nz-tab>
@@ -118,38 +82,23 @@
             <span i18n>Pre-request Script</span>
             <span class="eo-tab-theme-icon" *ngIf="beforeScript?.trim()"></span>
           </ng-template>
-          <eo-api-script
-            *ngIf="nzSelectedIndex === 4"
-            [(code)]="beforeScript"
-            [treeData]="BEFORE_DATA"
-            [completions]="beforeScriptCompletions"
-            class="eo_theme_iblock bbd"
-          ></eo-api-script>
+          <eo-api-script *ngIf="nzSelectedIndex === 4" [(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>
             <span i18n>After-response Script</span>
             <span class="eo-tab-theme-icon" *ngIf="afterScript?.trim()"></span>
           </ng-template>
-          <eo-api-script
-            *ngIf="nzSelectedIndex === 5"
-            [(code)]="afterScript"
-            [treeData]="AFTER_DATA"
-            [completions]="afterScriptCompletions"
-            class="eo_theme_iblock bbd"
-          ></eo-api-script>
+          <eo-api-script *ngIf="nzSelectedIndex === 5" [(code)]="afterScript" [treeData]="AFTER_DATA"
+            [completions]="afterScriptCompletions" class="eo_theme_iblock bbd"></eo-api-script>
         </nz-tab>
       </nz-tabset>
     </div>
     <div class="bottom_container scroll_container" bottom>
       <!-- Response -->
-      <nz-tabset
-        [nzTabBarStyle]="{ 'padding-left': '10px' }"
-        [(nzSelectedIndex)]="tabIndexRes"
-        [nzAnimated]="false"
-        class="mt-2.5 response_container"
-        (nzSelectChange)="handleBottomTabSelect($event)"
-      >
+      <nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [(nzSelectedIndex)]="tabIndexRes" [nzAnimated]="false"
+        class="mt-2.5 response_container" (nzSelectChange)="handleBottomTabSelect($event)">
         <nz-tab i18n-nzTitle nzTitle="Response">
           <eo-api-test-result-response [model]="testResult?.response"></eo-api-test-result-response>
         </nz-tab>
@@ -158,9 +107,9 @@
             <eo-api-test-result-header [model]="testResult?.response?.headers"></eo-api-test-result-header>
           </nz-tab>
         </div>
-        <nz-tab i18n-nzTitle nzTitle="Body" [nzForceRender]="true">
+        <nz-tab i18n-nzTitle nzTitle="Body">
           <!-- TODO use isRequestBodyLoaded -->
-          <eo-api-test-result-request-body *ngIf="tabIndexRes === 2" [model]="testResult?.request?.requestBody|| ''">
+          <eo-api-test-result-request-body [model]="testResult?.request?.requestBody|| ''">
           </eo-api-test-result-request-body>
         </nz-tab>
         <nz-tab i18n-nzTitle nzTitle="Request Headers">

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

@@ -1,24 +1,16 @@
-<div class="param_header flex items-center justify-start h-10">
+<div class="flex items-center justify-start h-10 param_header">
   <nz-radio-group [(ngModel)]="bodyType" (ngModelChange)="changeBodyType()">
     <label *ngFor="let item of CONST.API_BODY_TYPE" nz-radio [nzValue]="item.value">{{ item.key }}</label>
   </nz-radio-group>
   <nz-divider *ngIf="['formData', 'raw'].includes(bodyType)" nzType="vertical"></nz-divider>
   <!-- Import -->
   <div *ngIf="['formData'].includes(bodyType)" class="inline-flex items-center px-2">
-    <params-import
-      [baseData]="model"
-      [contentType]="bodyType"
-      (baseDataChange)="handleParamsImport($event)"
-    ></params-import>
+    <params-import [baseData]="model" [contentType]="bodyType" (baseDataChange)="handleParamsImport($event)">
+    </params-import>
   </div>
   <!--Select content-type-->
-  <nz-select
-    *ngIf="['raw'].includes(bodyType)"
-    class="fs12 content-type-select"
-    (ngModelChange)="changeContentType($event)"
-    [(ngModel)]="contentType"
-    nzBorderless
-  >
+  <nz-select *ngIf="['raw'].includes(bodyType)" class="fs12 content-type-select"
+    (ngModelChange)="changeContentType($event)" [(ngModel)]="contentType" nzBorderless>
     <nz-option *ngFor="let item of CONST.CONTENT_TYPE" [nzValue]="item.value" [nzLabel]="item.name"></nz-option>
   </nz-select>
 </div>
@@ -28,22 +20,12 @@
 <!-- JSON -->
 <!-- XML -->
 <!-- Raw -->
-<eo-monaco-editor
-  [(code)]="model"
-  (codeChange)="rawDataChange($event)"
-  *ngIf="bodyType === 'raw'"
-  [maxLine]="100"
-  [config]="editorConfig"
-  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
-></eo-monaco-editor>
+<eo-monaco-editor [(code)]="model" (codeChange)="rawDataChange($event)" *ngIf="bodyType === 'raw'" [maxLine]="100"
+  [config]="editorConfig" [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
 <!-- Binary -->
 <div class="px-5" *ngIf="bodyType === 'binary'">
-  <nz-upload
-    nzType="drag"
-    [nzBeforeUpload]="uploadBinary"
-    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }"
-    [(nzFileList)]="binaryFiles"
-  >
+  <nz-upload nzType="drag" [nzBeforeUpload]="uploadBinary"
+    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }" [(nzFileList)]="binaryFiles">
     <p class="ant-upload-text" i18n>Tap or drag files directly to this area</p>
   </nz-upload>
 </div>

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

@@ -73,10 +73,10 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, O
   }
 
   ngAfterViewInit(): void {
-    this.resizeObserver = new ResizeObserver(() => {
-      this.eoMonacoEditor?.rerenderEditor();
-    });
-    this.resizeObserver.observe(this.el);
+    // this.resizeObserver = new ResizeObserver(() => {
+    //   this.eoMonacoEditor?.rerenderEditor();
+    // });
+    // this.resizeObserver.observe(this.el);
   }
   beforeChangeBodyByType(type) {
     switch (type) {
@@ -117,7 +117,7 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, O
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
-    this.resizeObserver.disconnect();
+    this.resizeObserver?.disconnect();
   }
   ngOnChanges(changes) {
     if (

src/workbench/browser/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.scss

@@ -1,3 +1,8 @@
 .c6{
     color: #666;
-}
+}
+:host ::ng-deep {
+  .ant-code-editor {
+    height: calc(var(--bottom-height) - 156px);
+  }
+}

src/workbench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.scss

@@ -22,11 +22,14 @@
   background-color: var(--RED_NORMAL);
   border-color: var(--RED_NORMAL);
 }
-::ng-deep {
+:host ::ng-deep {
   .eo_alert_bar {
     margin-bottom: 5px;
     .ant-alert-info {
       background-color: #fff;
     }
   }
+  .ant-code-editor {
+    height: calc(var(--bottom-height) - 156px);
+  }
 }

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

@@ -41,14 +41,14 @@ export class ApiScriptComponent implements OnInit, AfterViewInit, OnDestroy {
     this.el = elementRef.nativeElement;
   }
   ngOnDestroy(): void {
-    this.resizeObserver.disconnect();
+    this.resizeObserver?.disconnect();
   }
 
   ngAfterViewInit(): void {
-    this.resizeObserver = new ResizeObserver(() => {
-      this.eoEditor?.rerenderEditor();
-    });
-    this.resizeObserver.observe(this.el);
+    // this.resizeObserver = new ResizeObserver(() => {
+    //   this.eoEditor?.rerenderEditor();
+    // });
+    // this.resizeObserver.observe(this.el);
   }
 
   nzClick($event) {

src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts

@@ -1,6 +1,16 @@
-import { Component, Input, Output, EventEmitter, OnChanges, AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  AfterViewInit,
+  OnDestroy,
+  OnInit,
+  ElementRef,
+} from '@angular/core';
 import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service';
-import { whatTextType } from '../../../utils';
+import { debounce, whatTextType } from '../../../utils';
 import { ElectronService } from 'eo/workbench/browser/src/app/core/services/electron/electron.service';
 import { editor } from 'monaco-editor';
 import * as monaco from 'monaco-editor';
@@ -86,7 +96,8 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     overviewRulerLanes: 0,
     quickSuggestions: { other: true, strings: true },
   };
-  /** monaco config */
+  private resizeObserver: ResizeObserver;
+  private readonly el: HTMLElement; /** monaco config */
   get editorOption(): JoinedEditorOptions {
     return { ...this.defaultConfig, ...this.config };
   }
@@ -95,11 +106,23 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     return Number.isNaN(Number(val));
   }
 
-  constructor(private message: EoMessageService, private electron: ElectronService) {}
+  constructor(private message: EoMessageService, private electron: ElectronService, elementRef: ElementRef) {
+    this.el = elementRef.nativeElement;
+  }
 
   ngAfterViewInit(): void {
     console.log('codeEdtor', this.codeEdtor);
     requestIdleCallback(() => this.rerenderEditor());
+    if (this.editorOption.automaticLayout === undefined) {
+      this.resizeObserver = new ResizeObserver(
+        debounce(() => {
+          if (this.el.offsetParent) {
+            this?.rerenderEditor();
+          }
+        }, 150)
+      );
+      this.resizeObserver.observe(this.el);
+    }
   }
   async ngOnChanges() {
     // * update root type
@@ -130,6 +153,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   }
 
   ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
     this.codeEdtor?.dispose();
     this.completionItemProvider?.dispose();
   }
@@ -152,9 +176,9 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     }
 
     if (code && this.isFirstFormat && this.autoFormat) {
-      this.isFirstFormat = false;
       (async () => {
         this.$$code = await this.formatCode();
+        this.isFirstFormat = false;
       })();
     }
 
@@ -233,9 +257,9 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       this.codeChange.emit(this.$$code);
     });
   }
-  rerenderEditor() {
+  rerenderEditor = () => {
     this.codeEdtor?.layout?.();
-  }
+  };
   formatCode() {
     return new Promise<string>((resolve) => {
       setTimeout(async () => {