Merge pull request #8781 from BeHappyF/fix-8684

fix UI bug for Webhooks

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

@@ -1,4 +1,5 @@
 <div class="align-center">
+  <inline-alert class="modal-title"></inline-alert>
   <form #webhookForm="ngForm">
     <section class="form-block webhook-section">
       <!-- endpoint URL -->
@@ -39,7 +40,7 @@
       <button type="button" [clrLoading]="checkBtnState" class="btn btn-outline" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
   </div>
   <div *ngIf="isModify">
-      <button type="button" [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" (click)="onTestEndpoint()" [disabled]="checking || enpointURL.errors">{{'WEBHOOK.TEST_ENDPOINT_BUTTON' | translate}}</button>
       <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
       <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SAVE' | translate}}</button>
   </div>

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

@@ -14,6 +14,7 @@ import {ClrLoadingState} from "@clr/angular";
 import { finalize } from "rxjs/operators";
 import { WebhookService } from "../webhook.service";
 import { WebhookEventTypes } from '../../../shared/shared.const';
+import { InlineAlertComponent } from "../../../shared/inline-alert/inline-alert.component";
 import { MessageHandlerService } from "../../../shared/message-handler/message-handler.service";
 
 @Component({
@@ -37,6 +38,7 @@ export class AddWebhookFormComponent implements OnInit, OnChanges {
   @Output() edit = new EventEmitter<boolean>();
   @Output() close = new EventEmitter<boolean>();
   @ViewChild("webhookForm") currentForm: NgForm;
+  @ViewChild(InlineAlertComponent) inlineAlert: InlineAlertComponent;
 
 
   constructor(
@@ -64,11 +66,21 @@ export class AddWebhookFormComponent implements OnInit, OnChanges {
       .pipe(finalize(() => (this.checking = false)))
       .subscribe(
         response => {
-          this.checkBtnState = ClrLoadingState.SUCCESS;
+          if (this.isModify) {
+            this.inlineAlert.showInlineSuccess({
+              message: "WEBHOOK.TEST_ENDPOINT_SUCCESS"
+            });
+          } else {
+            this.checkBtnState = ClrLoadingState.SUCCESS;
+          }
         },
         error => {
-          this.checkBtnState = ClrLoadingState.DEFAULT;
+          if (this.isModify) {
-          this.messageHandlerService.handleError(error);
+            this.inlineAlert.showInlineError("WEBHOOK.TEST_ENDPOINT_FAILURE");
+          } else {
+            this.checkBtnState = ClrLoadingState.DEFAULT;
+            this.messageHandlerService.handleError(error);
+          }
         }
       );
   }
@@ -92,7 +104,9 @@ export class AddWebhookFormComponent implements OnInit, OnChanges {
           this.edit.emit(this.isModify);
         },
         error => {
-          this.messageHandlerService.handleError(error);
+          this.isModify
+            ? this.inlineAlert.showInlineError(error)
+            : this.messageHandlerService.handleError(error);
         }
       );
   }

src/portal/src/i18n/lang/en-us-lang.json

@@ -362,6 +362,8 @@
         "TEST_ENDPOINT_BUTTON": "TEST ENDPOINT",
         "CANCEL_BUTTON": "CANCEL",
         "SAVE_BUTTON": "SAVE",
+        "TEST_ENDPOINT_SUCCESS": "Connection tested successfully.",
+        "TEST_ENDPOINT_FAILURE": "Failed to ping endpoint.",
         "ENABLED_WEBHOOK_TITLE": "Enable Project Webhooks",
         "ENABLED_WEBHOOK_SUMMARY": "Do you want to enable webhooks for project ",
         "DISABLED_WEBHOOK_TITLE": "Disable Project Webhooks",

src/portal/src/i18n/lang/es-es-lang.json

@@ -363,6 +363,8 @@
         "TEST_ENDPOINT_BUTTON": "TEST ENDPOINT",
         "CANCEL_BUTTON": "CANCEL",
         "SAVE_BUTTON": "SAVE",
+        "TEST_ENDPOINT_SUCCESS": "Connection tested successfully.",
+        "TEST_ENDPOINT_FAILURE": "Failed to ping endpoint.",
         "ENABLED_WEBHOOK_TITLE": "Enable Project Webhooks",
         "ENABLED_WEBHOOK_SUMMARY": "Do you want to enable webhooks for project ",
         "DISABLED_WEBHOOK_TITLE": "Disable Project Webhooks",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -355,6 +355,8 @@
         "TEST_ENDPOINT_BUTTON": "TEST ENDPOINT",
         "CANCEL_BUTTON": "CANCEL",
         "SAVE_BUTTON": "SAVE",
+        "TEST_ENDPOINT_SUCCESS": "Connection tested successfully.",
+        "TEST_ENDPOINT_FAILURE": "Failed to ping endpoint.",
         "ENABLED_WEBHOOK_TITLE": "Enable Project Webhooks",
         "ENABLED_WEBHOOK_SUMMARY": "Do you want to enable webhooks for project ",
         "DISABLED_WEBHOOK_TITLE": "Disable Project Webhooks",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -389,6 +389,8 @@
         "TEST_ENDPOINT_BUTTON": "TEST ENDPOINT",
         "CANCEL_BUTTON": "CANCEL",
         "SAVE_BUTTON": "SAVE",
+        "TEST_ENDPOINT_SUCCESS": "Connection tested successfully.",
+        "TEST_ENDPOINT_FAILURE": "Failed to ping endpoint.",
         "ENABLED_WEBHOOK_TITLE": "Enable Project Webhooks",
         "ENABLED_WEBHOOK_SUMMARY": "Do you want to enable webhooks for project ",
         "DISABLED_WEBHOOK_TITLE": "Disable Project Webhooks",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -362,6 +362,8 @@
         "TEST_ENDPOINT_BUTTON": "UÇ NOKTAYI DOĞRULA",
         "CANCEL_BUTTON": "İPTAL ET",
         "SAVE_BUTTON": "KAYDET",
+        "TEST_ENDPOINT_SUCCESS": "Connection tested successfully.",
+        "TEST_ENDPOINT_FAILURE": "Failed to ping endpoint.",
         "ENABLED_WEBHOOK_TITLE": "Proje Ağ Kancalarını Etkinleştir",
         "ENABLED_WEBHOOK_SUMMARY": "Proje için ağ kancalarını etkinleştirmek istiyor musunuz?",
         "DISABLED_WEBHOOK_TITLE": "Proje Ağ kancalarını Devre Dışı Bırak",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -361,6 +361,8 @@
         "TEST_ENDPOINT_BUTTON": "测试 ENDPOINT",
         "CANCEL_BUTTON": "取消",
         "SAVE_BUTTON": "保存",
+        "TEST_ENDPOINT_SUCCESS": "测试连接成功。",
+        "TEST_ENDPOINT_FAILURE": "测试连接失败。",
         "ENABLED_WEBHOOK_TITLE": "启用项目的 Webhooks",
         "ENABLED_WEBHOOK_SUMMARY": "你希望开启项目的 Webhooks 吗？",
         "DISABLED_WEBHOOK_TITLE": "停用项目的 Webhooks",