Remove test button for webhook

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.html

@@ -90,14 +90,12 @@
       </div>
     </section>
   </form>
-  <div class="mt-1" *ngIf="!isModify">
+  <div class="mt-1 bottom-btn" *ngIf="!isModify">
-      <button type="button" id="webhook-test-add" [clrLoading]="checkBtnState" class="btn btn-outline" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
       <button type="button" class="btn btn-outline" id="add-webhook-cancel" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
       <button type="button" id="new-webhook-continue" class="btn btn-primary" [disabled]="!isValid" (click)="add()">{{'BUTTON.ADD' | translate}}</button>
   </div>
   <div class="mt-1 bottom-btn" *ngIf="isModify">
-      <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" id="webhook-test" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
       <button type="button" class="btn btn-outline" id="edit-webhook-cancel" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
-      <button type="button" class="btn btn-primary" id="edit-webhook-save" [disabled]="!isValid" (click)="save()">{{'BUTTON.SAVE' | translate}}</button>
+      <button type="button" class="btn btn-primary" id="edit-webhook-save" [disabled]="!isValid || !hasChange()" (click)="save()">{{'BUTTON.SAVE' | translate}}</button>
   </div>
-</div>
+</div>

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.scss

@@ -6,7 +6,6 @@
 }
 .bottom-btn {
   text-align: right;
-  margin-right: 3.4rem;
 }
 .width-238 {
   width: 238px;
@@ -16,4 +15,4 @@
 }
 .clr-control-label {
   width: 9rem !important;
-}
+}

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.spec.ts

@@ -128,14 +128,6 @@ describe('AddWebhookFormComponent', () => {
         const errorEle: HTMLElement = fixture.nativeElement.querySelector("clr-control-error");
         expect(errorEle.innerText).toEqual('WEBHOOK.NAME_REQUIRED');
     });
-    it("test button should work", async () => {
-        const spy: jasmine.Spy = spyOn(component, 'onTestEndpoint').and.returnValue(undefined);
-        const testButton: HTMLButtonElement = fixture.nativeElement.querySelector("#webhook-test-add");
-        testButton.dispatchEvent(new Event('click'));
-        fixture.detectChanges();
-        await fixture.whenStable();
-        expect(spy.calls.count()).toEqual(1);
-    });
     it("add button should work", async () => {
         const spy: jasmine.Spy = spyOn(component, 'add').and.returnValue(undefined);
         component.webhook = mockedWehook;

src/portal/src/app/project/webhook/add-webhook-form/add-webhook-form.component.ts

@@ -12,6 +12,7 @@ import { ClrLoadingState } from "@clr/angular";
 import { finalize } from "rxjs/operators";
 import { WebhookService } from "../webhook.service";
 import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
+import { compareValue } from '../../../../lib/utils/utils';
 
 @Component({
   selector: 'add-webhook-form',
@@ -20,13 +21,13 @@ import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.
 })
 export class AddWebhookFormComponent implements OnInit {
   closable: boolean = true;
-  staticBackdrop: boolean = true;
   checking: boolean = false;
   checkBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
   webhookForm: NgForm;
   submitting: boolean = false;
   @Input() projectId: number;
   webhook: Webhook = new Webhook();
+  originValue: Webhook;
   isModify: boolean;
   @Input() isOpen: boolean;
   @Output() close = new EventEmitter<boolean>();
@@ -41,27 +42,6 @@ export class AddWebhookFormComponent implements OnInit {
 
   ngOnInit() {
   }
-  onTestEndpoint() {
-    this.checkBtnState = ClrLoadingState.LOADING;
-    this.checking = true;
-
-    this.webhookService
-      .testEndpoint(this.projectId, {
-        targets: this.webhook.targets
-      })
-      .pipe(finalize(() => (this.checking = false)))
-      .subscribe(
-        response => {
-          this.inlineAlert.showInlineSuccess({message: "WEBHOOK.TEST_ENDPOINT_SUCCESS"});
-          this.checkBtnState = ClrLoadingState.SUCCESS;
-        },
-        error => {
-          this.inlineAlert.showInlineError("WEBHOOK.TEST_ENDPOINT_FAILURE");
-          this.checkBtnState = ClrLoadingState.DEFAULT;
-        }
-      );
-  }
-
   onCancel() {
     this.close.emit(false);
     this.currentForm.reset();
@@ -111,6 +91,9 @@ export class AddWebhookFormComponent implements OnInit {
         this.hasEventType()
     );
   }
+  hasChange(): boolean {
+    return !compareValue(this.originValue, this.webhook);
+  }
 
   setEventType(eventType) {
     if (this.webhook.event_types.indexOf(eventType) === -1) {

src/portal/src/app/project/webhook/webhook.component.ts

@@ -206,6 +206,7 @@ export class WebhookComponent implements OnInit {
       this.addWebhookComponent.isEdit = true;
       this.addWebhookComponent.addWebhookFormComponent.isModify = true;
       this.addWebhookComponent.addWebhookFormComponent.webhook = clone(this.selectedRow[0]);
+      this.addWebhookComponent.addWebhookFormComponent.originValue = clone(this.selectedRow[0]);
       this.addWebhookComponent.addWebhookFormComponent.webhook.event_types = clone(this.selectedRow[0].event_types);
     }
   }

src/portal/src/lib/utils/utils.ts

@@ -53,7 +53,7 @@ export const DEFAULT_LANG_COOKIE_KEY = 'harbor-lang';
 /**
  * Declare what languages are supported now.
  */
-export const DEFAULT_SUPPORTING_LANGS = ['en-us', 'zh-cn', 'es-es', 'fr-fr', 'pt-br', 'tr-tr'];
+export const DEFAULT_SUPPORTING_LANGS = ['en-us', 'zh-cn', 'zh-tw', 'es-es', 'fr-fr', 'pt-br', 'tr-tr'];
 
 /**
  * The default language.