fix: test response gibberish

fixed #212
Postcatlab · Jan 3, 2023 · 033d7aa · 033d7aa
1 parent 13e8ce0
commit 033d7aa
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 44 deletions.
diff --git a/src/workbench/browser/src/app/modules/eo-ui/monaco-editor/monaco-editor.component.ts b/src/workbench/browser/src/app/modules/eo-ui/monaco-editor/monaco-editor.component.ts
@@ -5,7 +5,7 @@ import type { editor, IDisposable } from 'monaco-editor';
 import type { JoinedEditorOptions } from 'ng-zorro-antd/code-editor';
 
 import { ThemeService } from '../../../core/services/theme.service';
-import { debounce, whatTextType } from '../../../utils/index.utils';
+import { b64DecodeUnicode, debounce, whatTextType } from '../../../utils/index.utils';
 import { getDefaultCompletions } from './defaultCompletions';
 
 type EventType = 'format' | 'copy' | 'search' | 'replace' | 'type' | 'download' | 'newTab';
@@ -38,7 +38,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   @Input() set isBase64(val) {
     this.$$isBase64 = val;
     if (val) {
-      this.setCode(window.atob(this.$$code));
+      this.setCode(b64DecodeUnicode(this.$$code));
     }
   }
   @Input() set code(val) {
@@ -77,6 +77,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       label: 'Text'
     }
   ];
+  tempConfig: JoinedEditorOptions = {};
   defaultConfig: JoinedEditorOptions = {
     language: this.editorType || 'json',
     // automaticLayout: true,
@@ -98,7 +99,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   private resizeObserver: ResizeObserver;
   private readonly el: HTMLElement; /** monaco config */
   get editorOption(): JoinedEditorOptions {
-    return { ...this.defaultConfig, ...this.config };
+    return { ...this.defaultConfig, ...this.config, ...this.tempConfig };
   }
 
   isNaN(val) {
@@ -136,7 +137,10 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     // * update root type
     if (this.eventList.includes('type') && !this.hiddenList.includes('type')) {
       requestAnimationFrame(() => {
-        if (!this.codeEdtor) return;
+        if (!this.codeEdtor) {
+          this.ngOnChanges();
+          return;
+        }
 
         if (this.autoType) {
           const type = whatTextType(this.$$code || '');
@@ -184,7 +188,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     let code = val;
     try {
       if (this.$$isBase64) {
-        code = window.atob(val);
+        code = b64DecodeUnicode(val);
       } else if (typeof val === 'object') {
         code = JSON.stringify(val);
       } else {
@@ -206,14 +210,6 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     if (this.completions?.length) {
       this.completionItemProvider = monaco.languages.registerCompletionItemProvider('javascript', {
         provideCompletionItems: (model, position) => {
-          // find out if we are completing a property in the 'dependencies' object.
-          const textUntilPosition = model.getValueInRange({
-            startLineNumber: 1,
-            startColumn: 1,
-            endLineNumber: position.lineNumber,
-            endColumn: position.column
-          });
-
           const word = model.getWordUntilPosition(position);
           const range = {
             startLineNumber: position.lineNumber,
@@ -228,39 +224,13 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       });
     }
 
-    this.codeEdtor.onDidChangeModelDecorations(() => {
-      updateEditorHeight(); // typing
-      requestAnimationFrame(updateEditorHeight); // folding
-    });
-
     this.codeEdtor.onDidChangeModelContent(e => {
       this.handleChange();
     });
 
     this.codeEdtor.onDidBlurEditorText(e => {
       this.handleBlur();
     });
-    let prevHeight = 0;
-
-    const updateEditorHeight = () => {
-      if (this.maxLine) {
-        const editorElement = this.codeEdtor.getDomNode();
-
-        if (!editorElement) {
-          return;
-        }
-
-        const lineHeight = this.codeEdtor.getOption(monaco.editor.EditorOption.lineHeight);
-        const lineCount = this.codeEdtor.getModel()?.getLineCount() || 1;
-        const height = this.codeEdtor.getTopForLineNumber(Math.min(lineCount, this.maxLine)) + lineHeight;
-
-        if (prevHeight !== height) {
-          prevHeight = height;
-          editorElement.style.height = `${height}px`;
-          this.codeEdtor.layout();
-        }
-      }
-    };
   }
   log(event, txt) {
     console.log('ace event', event, txt);
@@ -279,13 +249,15 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     this.codeEdtor?.layout?.();
   };
   updateReadOnlyCode(callback, originReadOnly = this.config.readOnly) {
-    // this.codeEdtor?.updateOptions({ readOnly: false });
-    this.config.readOnly = false;
+    // this.codeEdtor.updateOptions({ readOnly: false });
+    this.tempConfig.readOnly = false;
     requestAnimationFrame(async () => {
       const isReadOnly = this.codeEdtor.getOption(monaco.editor.EditorOption.readOnly);
       if (isReadOnly === false) {
         await callback();
-        requestAnimationFrame(() => (this.config.readOnly = originReadOnly));
+        requestAnimationFrame(() => {
+          this.tempConfig.readOnly = originReadOnly;
+        });
       } else {
         this.updateReadOnlyCode(callback, originReadOnly);
       }

diff --git a/...s/workspace/project/api/http/test/result-response/api-test-result-response.component.html b/...s/workspace/project/api/http/test/result-response/api-test-result-response.component.html
@@ -59,6 +59,7 @@
       <eo-monaco-editor
         class="mt-[20px] border-all"
         [autoFormat]="true"
+        [autoType]="true"
         [code]="model.body"
         [config]="{ readOnly: true }"
         [isBase64]="['longText', 'stream'].includes(model.responseType)"

diff --git a/...ges/workspace/project/api/http/test/result-response/api-test-result-response.component.ts b/...ges/workspace/project/api/http/test/result-response/api-test-result-response.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, OnChanges, ViewChild } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
 import { EoMonacoEditorComponent } from 'eo/workbench/browser/src/app/modules/eo-ui/monaco-editor/monaco-editor.component';
-import { getBlobUrl } from 'eo/workbench/browser/src/app/utils/index.utils';
+import { b64DecodeUnicode, getBlobUrl } from 'eo/workbench/browser/src/app/utils/index.utils';
 import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 
 import { ApiTestUtilService } from '../../../../../../../modules/api-shared/api-test-util.service';
@@ -44,7 +44,7 @@ export class ApiTestResultResponseComponent implements OnChanges {
     let code = this.model.body;
     try {
       if (['longText', 'stream'].includes(this.model.responseType)) {
-        code = window.atob(code);
+        code = b64DecodeUnicode(code);
       } else {
         code = JSON.stringify(typeof code === 'string' ? JSON.parse(code) : code, null, 4);
       }

diff --git a/src/workbench/browser/src/app/utils/index.utils.ts b/src/workbench/browser/src/app/utils/index.utils.ts
@@ -286,3 +286,17 @@ export const compareVersion = (v1, v2) => {
 
   return _r === 0 && v1 !== v2 ? compareVersion(_v1.splice(1).join('.'), _v2.splice(1).join('.')) : _r;
 };
+
+// more see https://developer.mozilla.org/zh-CN/docs/Glossary/Base64#solution_4_%E2%80%93_escaping_the_string_before_encoding_it
+export const b64DecodeUnicode = (str: string) => {
+  // Going backwards: from bytestream, to percent-encoding, to original string.
+  return decodeURIComponent(
+    window
+      .atob(str)
+      .split('')
+      .map(function (c) {
+        return `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`;
+      })
+      .join('')
+  );
+};