From 0418bf4ad4e9e7c5285ecdfa6374ab481eb9c680 Mon Sep 17 00:00:00 2001
From: scarqin <1054139596@qq.com>
Date: Wed, 3 Aug 2022 22:48:36 +0800
Subject: [PATCH] fix: url required

---
 .../app/pages/api/edit/api-edit.service.ts    |   4 +-
 .../group/tree/api-group-tree.component.html  |  10 +-
 .../pages/api/test/api-test.component.html    | 155 ++++++++++++------
 .../pages/api/test/api-test.component.scss    |   4 +-
 .../app/pages/api/test/api-test.component.ts  |  20 ++-
 .../browser/src/assets/theme/antd.less        |   2 +-
 src/workbench/browser/tsconfig.json           |   2 +-
 7 files changed, 131 insertions(+), 66 deletions(-)

diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts b/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
index 45fdd06c1..461919d3a 100644
--- a/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
+++ b/src/workbench/browser/src/app/pages/api/edit/api-edit.service.ts
@@ -149,6 +149,7 @@ export class ApiEditService {
           modelKey: 'name',
           placeholder: $localize`Param Name`,
           mark: 'name',
+          width: 200,
         },
         {
           thKey: $localize`Type`,
@@ -183,8 +184,7 @@ export class ApiEditService {
           type: 'input',
           modelKey: 'example',
           placeholder: $localize`Param Example`,
-          width: 200,
-          hide: 1,
+          width: 100,
           mark: 'example',
         },
         {
diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
index f08123475..4fcc2b345 100644
--- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
+++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
@@ -8,14 +8,13 @@
   </div>
   <nz-dropdown-menu #menu="nzDropdownMenu">
     <ul nz-menu>
-      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })" i18n><a>New API</a></li>
+      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a i18n>New API</a></li>
       <li nz-menu-item (click)="addGroup()"><a i18n>New Group</a></li>
     </ul>
   </nz-dropdown-menu>
 </header>
 <!-- Fixed Group -->
-<div class="px-2 group_container fixed_group_tree pt10">
-  <!-- <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron"> -->
+<div class="px-2 group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
   <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
     [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
   <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
@@ -29,11 +28,10 @@
     </div>
   </ng-template>
 </div>
-<div class="mx-2 bbd"></div>
-<!-- <div class="bbd" *ngIf="electron.isElectron"></div> -->
+<div class="mx-2 bbd" *ngIf="electron.isElectron"></div>
 
 <!-- Custom Group -->
-<div class="px-2 group_container group_tree pt10">
+<div class="group_container group_tree pt10">
   <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
     [nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
     (nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.html b/src/workbench/browser/src/app/pages/api/test/api-test.component.html
index 2e3eecec6..5d956ee6f 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.component.html
+++ b/src/workbench/browser/src/app/pages/api/test/api-test.component.html
@@ -1,46 +1,70 @@
 <div class="test_wrap">
   <eo-split-panel [topStyle]="{ height: initHeight }" (eoDrag)="handleEoDrag($event)">
     <div class="top_container scroll_container" top>
-      <form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm">
-        <nz-form-item nz-col class="basic_info_container">
-          <nz-form-control>
-            <nz-input-group nzCompact>
-              <nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
-                <nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value">
-                </nz-option>
-              </nz-select>
-              <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>
-                {{ env.hostUri }}
-              </div>
-              <input type="text" i18n-placeholder placeholder="Enter URL" name="uri" nz-input formControlName="uri"
-                [(ngModel)]="apiData.uri" (change)="changeUri()" />
-              <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>
-                Save as API
-              </button>
-            </nz-input-group>
-          </nz-form-control>
-        </nz-form-item>
+      <form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm" class="basic_info_container">
+        <nz-input-group nzCompact>
+          <nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
+            <nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"> </nz-option>
+          </nz-select>
+          <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
+          >
+            {{ 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()"
+              />
+            </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
+          >
+            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>
@@ -48,33 +72,44 @@
         <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>
@@ -83,23 +118,38 @@
             <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>
@@ -109,13 +159,14 @@
           </nz-tab>
         </div>
         <nz-tab i18n-nzTitle nzTitle="Body" [nzForceRender]="true">
-          <eo-api-test-result-request-body *ngIf="tabIndexRes === 2 || isRequestBodyLoaded"
-            [model]="testResult.request?.requestBody|| ''">
+          <eo-api-test-result-request-body
+            *ngIf="tabIndexRes === 2 || isRequestBodyLoaded"
+            [model]="testResult.request?.requestBody || ''"
+          >
           </eo-api-test-result-request-body>
         </nz-tab>
         <nz-tab i18n-nzTitle nzTitle="Request Headers">
-          <eo-api-test-result-header [model]="testResult.request?.requestHeaders ">
-          </eo-api-test-result-header>
+          <eo-api-test-result-header [model]="testResult.request?.requestHeaders"> </eo-api-test-result-header>
         </nz-tab>
       </nz-tabset>
       <div id="test-response"></div>
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.scss b/src/workbench/browser/src/app/pages/api/test/api-test.component.scss
index 601a858bf..6db2fbabd 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.component.scss
+++ b/src/workbench/browser/src/app/pages/api/test/api-test.component.scss
@@ -1,7 +1,9 @@
 .ant-input-group.ant-input-group-compact {
   display: flex;
 }
-
+.ant-select {
+  height: 32px;
+}
 .basic_info_container {
   padding: 10px;
   background-color: var(--MAIN_BG);
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts b/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
index a1ef71d3a..f093457d7 100644
--- a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
+++ b/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
@@ -101,6 +101,16 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     });
   }
   clickTest() {
+    //manual set dirty in case user submit directly without edit
+    for (const i in this.validateForm.controls) {
+      if (this.validateForm.controls.hasOwnProperty(i)) {
+        this.validateForm.controls[i].markAsDirty();
+        this.validateForm.controls[i].updateValueAndValidity();
+      }
+    }
+    if (this.validateForm.status === 'INVALID') {
+      return;
+    }
     if (this.status === 'testing') {
       this.abort();
       return;
@@ -326,7 +336,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
         uuid: 0,
         requestBodyType: 'raw',
         requestBodyJsonType: 'object',
-        requestBody: [],
+        requestBody: '',
         queryParams: [],
         restParams: [],
         requestHeaders: [
@@ -353,9 +363,13 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   private watchEnvChange() {
     this.env$.pipe(takeUntil(this.destroy$)).subscribe((data) => {
       const { env } = data;
-      if (env) {
-        this.env = env;
+      if (env?.uuid) {
+        this.validateForm.controls.uri.setValidators([]);
+        this.validateForm.controls.uri.updateValueAndValidity();
+      }else{
+        this.validateForm.controls.uri.setValidators([Validators.required]);
       }
+      this.env = env;
     });
   }
   private watchTabChange() {
diff --git a/src/workbench/browser/src/assets/theme/antd.less b/src/workbench/browser/src/assets/theme/antd.less
index 3d9eed61a..7b209e426 100644
--- a/src/workbench/browser/src/assets/theme/antd.less
+++ b/src/workbench/browser/src/assets/theme/antd.less
@@ -9,7 +9,7 @@
 @border-radius-base: 3px;
 @primary-color: @theme-color;
 @success-color: @theme-color;
-@link-color:rgba (0, 0, 0, 0.8);
+@link-color:rgba(0, 0, 0, 0.8);
 @processing-color: @theme-color;
 @tree-title-height: 30px;
 body {
diff --git a/src/workbench/browser/tsconfig.json b/src/workbench/browser/tsconfig.json
index a1b998778..c0794134f 100644
--- a/src/workbench/browser/tsconfig.json
+++ b/src/workbench/browser/tsconfig.json
@@ -8,7 +8,7 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
-    "emitDecoratorMetadata": false,
+    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "baseUrl": "../../../",
     "paths": {