fix: 0.5.1 (#294)

* feat: modal tips when delete mock

* fix: Fixes #293

* fix: curl import error and style error

* fix: variable query multiple times

---------

Co-authored-by: scarqin <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcat",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "main": "out/app/electron-main/main.js",
   "description": "A lightweight, extensible API tool",
   "homepage": "https://github.com/Postcatlab/postcat.git",

src/browser/src/app/components/eo-ui/tab/tab-operate.service.ts

@@ -339,8 +339,7 @@ export class TabOperateService {
   getCurrentTab() {
     return this.getTabByIndex(this.selectedIndex);
   }
-  closeTabByOperate(action: string | TabOperate) {
-    const currentTabID = this.tabStorage.tabOrder[this.selectedIndex];
+  closeTabByOperate(action: string | TabOperate, currentTabID = this.tabStorage.tabOrder[this.selectedIndex]) {
     let tabsObj = {
       //Close tab has hasChanged tab
       needTips: false,

src/browser/src/app/components/eo-ui/tab/tab.component.html

@@ -6,7 +6,25 @@
   (nzSelectChange)="selectChange($event)"
   [nzTabBarExtraContent]="extraTemplate"
 >
-  <eo-ng-tab *ngFor="let uuid of tabStorage.tabOrder; let i = index" [nzTitle]="titleTemplate">
+  <eo-ng-tab
+    *ngFor="let uuid of tabStorage.tabOrder; let i = index"
+    (nzContextmenu)="contextMenu($event, menu, uuid)"
+    [nzTitle]="titleTemplate"
+  >
+    <eo-ng-dropdown-menu #menu="nzDropdownMenu">
+      <ul nz-menu>
+        <li nz-menu-item (click)="closeTabByOperate('closeOther', uuid)" [nzDisabled]="tabStorage.tabOrder.length === 1" i18n>
+          Close Other Tags (excluding current tabs)
+        </li>
+        <li nz-menu-item (click)="closeTabByOperate('closeAll', uuid)" i18n>Close All Tabs</li>
+        <li nz-menu-item (click)="closeTabByOperate('closeLeft', uuid)" [nzDisabled]="checkIsFirstTab(uuid)" i18n>
+          Close Tabs To the Left
+        </li>
+        <li nz-menu-item [nzDisabled]="checkIsLastTab(uuid)" (click)="closeTabByOperate('closeRight', uuid)" i18n>
+          Close Tabs to the Right
+        </li>
+      </ul>
+    </eo-ng-dropdown-menu>
     <ng-template #titleTemplate>
       <div
         (dblclick)="doubleClickTab($event, uuid)"

src/browser/src/app/components/eo-ui/tab/tab.component.ts

@@ -1,7 +1,7 @@
 import { KeyValue } from '@angular/common';
 import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 import { NzTabsCanDeactivateFn } from 'ng-zorro-antd/tabs';
 import { TabOperateService } from 'pc/browser/src/app/components/eo-ui/tab/tab-operate.service';
 import { TabStorageService } from 'pc/browser/src/app/components/eo-ui/tab/tab-storage.service';
@@ -35,8 +35,12 @@ export class EoTabComponent implements OnInit, OnDestroy {
     private modal: ModalService,
     private router: Router,
     public store: StoreService,
-    private trace: TraceService
+    private trace: TraceService,
+    private nzContextMenuService: NzContextMenuService
   ) {}
+  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent, tabID): void {
+    this.nzContextMenuService.create($event, menu);
+  }
   ngOnInit(): void {
     this.watchRouterChange();
     this.watchPageLeave();
@@ -49,6 +53,7 @@ export class EoTabComponent implements OnInit, OnDestroy {
       handleDataBeforeGetCache: this.handleDataBeforeGetCache
     });
   }
+
   async newTab(key = undefined) {
     if (this.checkTabCanLeave && !(await this.checkTabCanLeave())) {
       return false;
@@ -200,13 +205,19 @@ export class EoTabComponent implements OnInit, OnDestroy {
       handleDataBeforeCache: this.handleDataBeforeCache
     });
   }
+  checkIsFirstTab(uuid) {
+    return this.tabStorage.tabOrder.findIndex(val => val === uuid) === 0;
+  }
+  checkIsLastTab(uuid) {
+    return this.tabStorage.tabOrder.length - 1 === this.tabStorage.tabOrder.findIndex(val => val === uuid);
+  }
   /**
    * Tab  Close Operate
    *
    * @param action
    */
-  closeTabByOperate(action: TabOperate | string) {
-    this.tabOperate.closeTabByOperate(action);
+  closeTabByOperate(action: TabOperate | string, uuid?) {
+    this.tabOperate.closeTabByOperate(action, uuid);
   }
   private watchRouterChange() {
     this.routerSubscribe = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((res: NavigationEnd) => {

src/browser/src/app/core/services/theme/theme.service.ts

@@ -68,7 +68,16 @@ export class ThemeService {
 
   queryExtensionThemes() {
     const extensions = this.themeExtension.getExtensionThemes(this.coreThemes);
-    this.themes.push(...extensions);
+    extensions.forEach(val => {
+      const index = this.themes.findIndex(val1 => val1.id === val.id);
+      //Not exsit
+      if (index === -1) {
+        this.themes.push(val);
+        return;
+      }
+      //Has exist
+      this.themes.splice(index, 1, val);
+    });
   }
   changeEditorTheme(currentTheme = StorageUtil.get('pc_theme')) {
     const editorTheme = this.getEditorTheme(currentTheme);

src/browser/src/app/pages/components/extension/detail/components/extensions-settings.component.ts

@@ -9,7 +9,7 @@ import { SettingService } from 'pc/browser/src/app/components/system-setting/set
       class="sticky top-0 py-[12px] border-solid border-0 border-b-[1px] z-10 mb-[3px]"
       style="border-color: var(--border-color); background-color: var(--background-color); border-bottom: 1px solid var(--system-border-color);"
     >
-      <button eo-ng-button nzType="primary" (click)="handleSave()">Save</button>
+      <button eo-ng-button nzType="primary" i18n (click)="handleSave()">Save</button>
     </div>
 
     <eo-schema-form [model]="localSettings" [configuration]="configuration" />
@@ -31,6 +31,6 @@ export class ExtensionSettingComponent implements OnInit {
   }
   handleSave = () => {
     this.settingService.saveSetting(this.localSettings);
-    this.feedback.success($localize`Save Success`);
+    this.feedback.success($localize`Saved successfully`);
   };
 }

src/browser/src/app/pages/workspace/project/api/components/group/api-group-tree.component.html

@@ -64,7 +64,7 @@
     <ng-template #nzTreeTemplate let-node let-origin="origin">
       <div class="h-full" [style.--tree-level]="node.level" apiGroupTree [node]="node">
         <div class="flex items-center justify-between tree-node" [ngSwitch]="origin.module">
-          <div class="flex items-center" [style.width]="'calc(100% - 30px)'">
+          <div class="flex items-center" (contextmenu)="contextMenu($event, groupMenu)" [style.width]="'calc(100% - 30px)'">
             <!-- Folder -->
             <ng-container *ngSwitchDefault>
               <eo-iconpark-icon
@@ -91,6 +91,15 @@
               <span class="text-[12px] truncate">{{ origin.title }}</span>
             </ng-container>
           </div>
+          <eo-ng-dropdown-menu #groupMenu="nzDropdownMenu">
+            <ul nz-menu>
+              <ng-container *ngFor="let item of operateByModule[origin.module || groupModuleName].list">
+                <li nz-menu-item (click)="item.click(origin)">
+                  {{ item.title }}
+                </li>
+              </ng-container>
+            </ul>
+          </eo-ng-dropdown-menu>
           <span
             class="flex tree-node-operate"
             *ngIf="isEdit&&(!operateByModule[origin.module || groupModuleName].showFn||operateByModule[origin.module || groupModuleName].showFn?.(origin))"
@@ -99,15 +108,6 @@
             <button eo-ng-button nzType="text" class="tree-item-btn" nzTrigger="click" eo-ng-dropdown [nzDropdownMenu]="groupMenu">
               <eo-iconpark-icon name="more" size="16px"></eo-iconpark-icon>
             </button>
-            <eo-ng-dropdown-menu #groupMenu="nzDropdownMenu">
-              <ul nz-menu>
-                <ng-container *ngFor="let item of operateByModule[origin.module || groupModuleName].list">
-                  <li nz-menu-item (click)="item.click(origin)">
-                    {{ item.title }}
-                  </li>
-                </ng-container>
-              </ul>
-            </eo-ng-dropdown-menu>
           </span>
         </div>
       </div>

src/browser/src/app/pages/workspace/project/api/components/group/api-group-tree.component.ts

@@ -2,6 +2,7 @@ import { Component, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { EoNgFeedbackMessageService } from 'eo-ng-feedback';
 import { action, autorun, reaction, toJS } from 'mobx';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
 import { NzTreeComponent, NzFormatEmitEvent, NzTreeNodeOptions, NzTreeNode, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
 import { PageUniqueName } from 'pc/browser/src/app/pages/workspace/project/api/api-tab.service';
 import { ApiGroupService } from 'pc/browser/src/app/pages/workspace/project/api/components/group/api-group.service';
@@ -93,11 +94,14 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
     private feedback: EoNgFeedbackMessageService,
     private router: Router,
     private route: ActivatedRoute,
+    private nzContextMenuService: NzContextMenuService,
     @Inject(BASIC_TABS_INFO) public tabsConfig: TabsConfig
   ) {
     this.operateByModule = this.getGroupOperate();
   }
-
+  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
+    this.nzContextMenuService.create($event, menu);
+  }
   searchFunc = (node: NzTreeNodeOptions) => {
     const { title } = node;
     const uri = node.relationInfo?.uri;

src/browser/src/app/pages/workspace/project/api/group-edit/group.component.html

@@ -20,6 +20,9 @@ <h4 nz-typography class="!mb-[0px]">{{ validateForm.value?.name }}</h4>
           <button eo-ng-button nzType="text" class="ml-[5px]" (click)="startEditGroupName()">
             <eo-iconpark-icon name="edit"></eo-iconpark-icon>
           </button>
+          <button (click)="group.toDelete(model)" eo-ng-button nzType="text" class="ml-[5px]">
+            <eo-iconpark-icon name="delete"></eo-iconpark-icon>
+          </button>
         </ng-container>
       </div>
     </nz-form-control>

src/browser/src/app/pages/workspace/project/api/group-edit/group.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { EoNgFeedbackMessageService } from 'eo-ng-feedback';
 import { EditTabViewComponent } from 'pc/browser/src/app/components/eo-ui/tab/tab.model';
 import { AuthorizationExtensionFormComponent } from 'pc/browser/src/app/pages/workspace/project/api/components/authorization-extension-form/authorization-extension-form.component';
+import { ApiGroupService } from 'pc/browser/src/app/pages/workspace/project/api/components/group/api-group.service';
 import { AuthTypeValue } from 'pc/browser/src/app/pages/workspace/project/api/constants/auth.model';
 import { ApiService } from 'pc/browser/src/app/services/storage/api.service';
 import { Group } from 'pc/browser/src/app/services/storage/db/models';
@@ -39,6 +40,7 @@ export class GroupComponent implements OnDestroy, EditTabViewComponent {
     private effect: ApiEffectService,
     public globalStore: StoreService,
     private fb: FormBuilder,
+    public group: ApiGroupService,
     private feedback: EoNgFeedbackMessageService,
     private route: ActivatedRoute,
     private router: Router,

src/browser/src/app/pages/workspace/project/api/http/mock/api-mock.service.ts

@@ -7,6 +7,7 @@ import { ApiTestUtilService } from 'pc/browser/src/app/pages/workspace/project/a
 import { ProjectApiService } from 'pc/browser/src/app/pages/workspace/project/api/service/project-api.service';
 import { ApiEffectService } from 'pc/browser/src/app/pages/workspace/project/api/store/api-effect.service';
 import { syncUrlAndQuery } from 'pc/browser/src/app/pages/workspace/project/api/utils/api.utils';
+import { ModalService } from 'pc/browser/src/app/services/modal.service';
 import { ApiService } from 'pc/browser/src/app/services/storage/api.service';
 import { MockCreateWay } from 'pc/browser/src/app/services/storage/db/models';
 import { ApiData } from 'pc/browser/src/app/services/storage/db/models/apiData';
@@ -27,6 +28,7 @@ export class ApiMockService {
     private message: EoNgFeedbackMessageService,
     private apiEffect: ApiEffectService,
     private projectApi: ProjectApiService,
+    private modalService: ModalService,
     @Inject(BASIC_TABS_INFO) public tabsConfig: TabsConfig
   ) {
     this.mockOperateUrl = this.tabsConfig.pathByName[PageUniqueName.HttpMock];
@@ -130,13 +132,19 @@ export class ApiMockService {
     });
   }
   async toDelete(id: number) {
-    const data = await this.deleteMock(id);
-    if (!data) {
-      this.message.error($localize`Failed to delete`);
-      return;
-    }
-    this.message.success($localize`Successfully deleted`);
-    this.apiEffect.deleteMockDetail();
+    const modelRef = this.modalService.confirm({
+      nzTitle: $localize`Deletion Confirmation?`,
+      nzContent: $localize``,
+      nzOnOk: async () => {
+        const data = await this.deleteMock(id);
+        if (!data) {
+          this.message.error($localize`Failed to delete`);
+          return;
+        }
+        this.message.success($localize`Successfully deleted`);
+        this.apiEffect.deleteMockDetail();
+      }
+    });
   }
   async copy(mock_id: string) {
     const [res] = await this.api.api_mockDetail({ id: mock_id });

src/browser/src/app/pages/workspace/project/api/http/test/api-test-ui.component.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  OnInit,
   OnDestroy,
   ChangeDetectorRef,
   Input,
@@ -9,13 +8,13 @@ import {
   ViewChild,
   ElementRef,
   AfterViewInit,
-  HostListener,
   OnChanges,
   Inject,
   TemplateRef
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { EoNgFeedbackMessageService } from 'eo-ng-feedback';
 import { isEmpty, isEqual } from 'lodash-es';
 import { autorun, reaction } from 'mobx';
 import { NzResizeEvent } from 'ng-zorro-antd/resizable';
@@ -51,14 +50,7 @@ import { interval, Subscription, Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged, takeWhile } from 'rxjs/operators';
 
 import { enumsToArr, JSONParse } from '../../../../../../shared/utils/index.utils';
-import {
-  ApiBodyType,
-  ApiParamsType,
-  BASIC_TABS_INFO,
-  BodyContentType as ContentTypeEnum,
-  RequestMethod,
-  TabsConfig
-} from '../../constants/api.model';
+import { ApiBodyType, ApiParamsType, BASIC_TABS_INFO, RequestMethod, TabsConfig } from '../../constants/api.model';
 import { ApiParamsNumPipe } from '../../pipe/api-param-num.pipe';
 import { ApiTestUtilService } from '../../service/api-test-util.service';
 import { TestServerService } from '../../service/test-server/test-server.service';
@@ -144,6 +136,7 @@ export class ApiTestUiComponent implements AfterViewInit, OnDestroy, OnChanges {
     private project: ProjectApiService,
     private elementRef: ElementRef,
     private apiEdit: ApiEditUtilService,
+    private feedback: EoNgFeedbackMessageService,
     private trace: TraceService,
     @Inject(BASIC_TABS_INFO) public tabsConfig: TabsConfig
   ) {
@@ -275,12 +268,24 @@ export class ApiTestUiComponent implements AfterViewInit, OnDestroy, OnChanges {
   private fixedHeaderAndContentType() {
     const bodyType = this.model.request?.apiAttrInfo?.contentType;
     if (bodyType !== ApiBodyType.Binary) {
+      //* User customer headers first
+      const userCustomerHeader = this.model.request.requestParams.headerParams.find(
+        //@ts-ignore
+        val => val.name.toLowerCase() === 'content-type' && !val.disableEdit
+      );
+      if (userCustomerHeader) {
+        const contentType = this.getContentTypeByBodyType();
+        this.model.userSelectedContentType = contentType as ContentType;
+        return;
+      }
+
+      //* app set header default
       const contentType = this.getContentTypeByBodyType();
       this.model.request.requestParams.headerParams = this.apiTestUtil.addOrReplaceContentType(
         contentType,
         this.model.request.requestParams.headerParams
       );
-      this.model.userSelectedContentType ??= contentType as ContentType;
+      this.model.userSelectedContentType = contentType as ContentType;
       return;
     }
 
@@ -294,6 +299,7 @@ export class ApiTestUiComponent implements AfterViewInit, OnDestroy, OnChanges {
   }
   changeBodyType($event) {
     StorageUtil.set('api_test_body_type', $event);
+    this.fixedHeaderAndContentType();
   }
   handleBottomTabSelect(tab) {
     if (tab.index === 2) {
@@ -474,9 +480,14 @@ export class ApiTestUiComponent implements AfterViewInit, OnDestroy, OnChanges {
     this.validateForm = this.fb.group(controls);
 
     this.validateForm.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(x => {
-      //Watch uri changes
+      //Import curl when uri match
       if (x?.uri?.trim().startsWith('curl')) {
-        this.model = this.apiTestUtil.getTestDataFromCurl(x.uri, this.model);
+        const [result, err] = this.apiTestUtil.getTestDataFromCurl(x.uri, this.model);
+        if (err) {
+          this.feedback.error($localize`Curl text error: ${err}`);
+          return;
+        }
+        this.model = result;
         this.validateForm.patchValue({
           uri: this.model.request.uri,
           method: this.model.request.apiAttrInfo?.requestMethod

src/browser/src/app/pages/workspace/project/api/http/test/api-test.component.html

@@ -1,8 +1,8 @@
 <div class="h-full flex flex-col test-page-{{ currentPage }}">
   <ng-container *ngIf="currentPage === 'caseTest'">
-    <form nz-form nzLayout="inline" class="px-[15px] py-[8px]" *ngIf="model?.request" (ngSubmit)="saveName()">
+    <form nz-form nzLayout="inline" class="px-[15px] min-h-[50px]" *ngIf="model?.request" (ngSubmit)="saveName()">
       <nz-form-item class="flex items-center">
-        <nz-form-control i18n-nzErrorTip nzErrorTip="Please input case name" *ngIf="isNameEdit">
+        <nz-form-control *ngIf="isNameEdit">
           <input
             nz-input
             [(ngModel)]="name"