From a08c4b68d6996154551da49bf4d2d89526a74da6 Mon Sep 17 00:00:00 2001
From: Xiaoyang Liu <siujoeng.lau@gmail.com>
Date: Fri, 8 Apr 2022 21:02:05 -0700
Subject: [PATCH 1/3] Fix the unexpected confirmation dialog in 'Create from *'

Signed-off-by: Xiaoyang Liu <siujoeng.lau@gmail.com>
---
 .../common/services/guard/candeactivate.ts        |  2 +-
 src/app/frontend/create/from/file/component.ts    | 15 ++++++++++-----
 src/app/frontend/create/from/file/template.html   |  2 +-
 src/app/frontend/create/from/form/component.ts    |  4 +++-
 src/app/frontend/create/from/input/component.ts   | 12 +++++++-----
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/app/frontend/common/services/guard/candeactivate.ts b/src/app/frontend/common/services/guard/candeactivate.ts
index 9f9c2e16b176..bfd82ef5f29d 100644
--- a/src/app/frontend/common/services/guard/candeactivate.ts
+++ b/src/app/frontend/common/services/guard/candeactivate.ts
@@ -30,7 +30,7 @@ export class CanDeactivateGuard implements CanDeactivate<ICanDeactivate> {
 
     const config = {
       title: 'Unsaved changes',
-      message: 'The form has not been submitted yet, do you really want to leave?',
+      message: 'The form has not been submitted yet. Do you really want to leave?',
     } as ConfirmDialogConfig;
 
     return this.dialog_.open(ConfirmDialog, {data: config}).afterClosed();
diff --git a/src/app/frontend/create/from/file/component.ts b/src/app/frontend/create/from/file/component.ts
index 729ccb720b75..7048890f1caf 100644
--- a/src/app/frontend/create/from/file/component.ts
+++ b/src/app/frontend/create/from/file/component.ts
@@ -43,12 +43,17 @@ export class CreateFromFileComponent extends ICanDeactivate {
     return !this.file || this.file.content.length === 0 || this.create_.isDeployDisabled();
   }
 
-  create(): void {
+  async create(): Promise<void> {
     this.creating_ = true;
-    this.create_
-      .createContent(this.file.content, true, this.file.name)
-      .then(() => (this.creating_ = false))
-      .finally(() => (this.creating_ = false));
+    try {
+      await this.create_.createContent(this.file.content, true, this.file.name);
+      this.file = {
+        name: '',
+        content: '',
+      };
+    } finally {
+      this.creating_ = false;
+    }
   }
 
   onFileLoad(file: KdFile): void {
diff --git a/src/app/frontend/create/from/file/template.html b/src/app/frontend/create/from/file/template.html
index ddf67a75e923..a947324a98d6 100644
--- a/src/app/frontend/create/from/file/template.html
+++ b/src/app/frontend/create/from/file/template.html
@@ -36,7 +36,7 @@
                   label="Choose YAML or JSON file"
                   i18n-label> </kd-upload-file>
 
-  <button type="button"
+  <button type="submit"
           [disabled]="isCreateDisabled()"
           color="primary"
           mat-raised-button
diff --git a/src/app/frontend/create/from/form/component.ts b/src/app/frontend/create/from/form/component.ts
index 1f239302c634..9cb65ab94d39 100644
--- a/src/app/frontend/create/from/form/component.ts
+++ b/src/app/frontend/create/from/form/component.ts
@@ -297,7 +297,9 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
 
     this.create_
       .deploy(spec)
-      .then(() => (this.creating_ = false))
+      .then(() => {
+        this.form.markAsPristine();
+      })
       .finally(() => (this.creating_ = false));
   }
 
diff --git a/src/app/frontend/create/from/input/component.ts b/src/app/frontend/create/from/input/component.ts
index 3a2ed3df7ab2..c0238507ac42 100644
--- a/src/app/frontend/create/from/input/component.ts
+++ b/src/app/frontend/create/from/input/component.ts
@@ -40,12 +40,14 @@ export class CreateFromInputComponent extends ICanDeactivate {
     return !this.inputData || this.inputData.length === 0 || this.create_.isDeployDisabled();
   }
 
-  create(): void {
+  async create(): Promise<void> {
     this.creating_ = true;
-    this.create_
-      .createContent(this.inputData)
-      .then(() => (this.creating_ = false))
-      .finally(() => (this.creating_ = false));
+    try {
+      await this.create_.createContent(this.inputData);
+      this.inputData = '';
+    } finally {
+      this.creating_ = false;
+    }
   }
 
   cancel(): void {

From 8af3f995ab64c407256a944bfff5592ba93bee67 Mon Sep 17 00:00:00 2001
From: Xiaoyang Liu <siujoeng.lau@gmail.com>
Date: Sun, 10 Apr 2022 11:53:17 -0700
Subject: [PATCH 2/3] Replace async/await with Promise chain

Signed-off-by: Xiaoyang Liu <siujoeng.lau@gmail.com>
---
 .../frontend/create/from/file/component.ts    | 20 +++++++++----------
 .../frontend/create/from/form/component.ts    |  4 +---
 .../frontend/create/from/input/component.ts   | 12 +++++------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/app/frontend/create/from/file/component.ts b/src/app/frontend/create/from/file/component.ts
index 7048890f1caf..7f0721c3bf94 100644
--- a/src/app/frontend/create/from/file/component.ts
+++ b/src/app/frontend/create/from/file/component.ts
@@ -43,17 +43,17 @@ export class CreateFromFileComponent extends ICanDeactivate {
     return !this.file || this.file.content.length === 0 || this.create_.isDeployDisabled();
   }
 
-  async create(): Promise<void> {
+  create(): void {
     this.creating_ = true;
-    try {
-      await this.create_.createContent(this.file.content, true, this.file.name);
-      this.file = {
-        name: '',
-        content: '',
-      };
-    } finally {
-      this.creating_ = false;
-    }
+    this.create_
+      .createContent(this.file.content, true, this.file.name)
+      .then(() => {
+        this.file = {
+          name: '',
+          content: '',
+        };
+      })
+      .finally(() => (this.creating_ = false));
   }
 
   onFileLoad(file: KdFile): void {
diff --git a/src/app/frontend/create/from/form/component.ts b/src/app/frontend/create/from/form/component.ts
index 9cb65ab94d39..bb689705f6a3 100644
--- a/src/app/frontend/create/from/form/component.ts
+++ b/src/app/frontend/create/from/form/component.ts
@@ -297,9 +297,7 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
 
     this.create_
       .deploy(spec)
-      .then(() => {
-        this.form.markAsPristine();
-      })
+      .then(() => this.form.markAsPristine())
       .finally(() => (this.creating_ = false));
   }
 
diff --git a/src/app/frontend/create/from/input/component.ts b/src/app/frontend/create/from/input/component.ts
index c0238507ac42..2233e4d7f47b 100644
--- a/src/app/frontend/create/from/input/component.ts
+++ b/src/app/frontend/create/from/input/component.ts
@@ -40,14 +40,12 @@ export class CreateFromInputComponent extends ICanDeactivate {
     return !this.inputData || this.inputData.length === 0 || this.create_.isDeployDisabled();
   }
 
-  async create(): Promise<void> {
+  create(): void {
     this.creating_ = true;
-    try {
-      await this.create_.createContent(this.inputData);
-      this.inputData = '';
-    } finally {
-      this.creating_ = false;
-    }
+    this.create_
+      .createContent(this.inputData)
+      .then(() => (this.inputData = ''))
+      .finally(() => (this.creating_ = false));
   }
 
   cancel(): void {

From 956fd3ad12fe71cd6be99597e13bd2b0d29a1ffe Mon Sep 17 00:00:00 2001
From: Xiaoyang Liu <siujoeng.lau@gmail.com>
Date: Sun, 10 Apr 2022 13:44:58 -0700
Subject: [PATCH 3/3] Implement 'bypassGuard' state in the navigation

Signed-off-by: Xiaoyang Liu <siujoeng.lau@gmail.com>
---
 .../frontend/common/services/create/service.ts |  3 +++
 .../common/services/guard/candeactivate.ts     | 12 ++++++------
 src/app/frontend/create/from/file/component.ts | 18 +++---------------
 src/app/frontend/create/from/form/component.ts | 16 +++-------------
 .../frontend/create/from/input/component.ts    |  9 ++-------
 5 files changed, 17 insertions(+), 41 deletions(-)

diff --git a/src/app/frontend/common/services/create/service.ts b/src/app/frontend/common/services/create/service.ts
index af29f2508284..2803a4c97c46 100644
--- a/src/app/frontend/common/services/create/service.ts
+++ b/src/app/frontend/common/services/create/service.ts
@@ -90,6 +90,9 @@ export class CreateService {
     } else {
       this.router_.navigate(['overview'], {
         queryParams: {[NAMESPACE_STATE_PARAM]: this.namespace_.current()},
+        state: {
+          bypassGuard: true,
+        },
       });
     }
 
diff --git a/src/app/frontend/common/services/guard/candeactivate.ts b/src/app/frontend/common/services/guard/candeactivate.ts
index bfd82ef5f29d..cf2db7ab9371 100644
--- a/src/app/frontend/common/services/guard/candeactivate.ts
+++ b/src/app/frontend/common/services/guard/candeactivate.ts
@@ -14,18 +14,18 @@
 
 import {Injectable} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {CanDeactivate} from '@angular/router';
+import {CanDeactivate, Router} from '@angular/router';
 import {ConfirmDialog, ConfirmDialogConfig} from '@common/dialogs/config/dialog';
 import {ICanDeactivate} from '@common/interfaces/candeactivate';
-import {Observable, of} from 'rxjs';
+import {Observable} from 'rxjs';
 
 @Injectable()
 export class CanDeactivateGuard implements CanDeactivate<ICanDeactivate> {
-  constructor(private readonly dialog_: MatDialog) {}
+  constructor(private readonly dialog_: MatDialog, private router: Router) {}
 
-  canDeactivate(component: ICanDeactivate): Observable<boolean> {
-    if (component.canDeactivate()) {
-      return of(true);
+  canDeactivate(component: ICanDeactivate): boolean | Observable<boolean> {
+    if (component.canDeactivate() || this.router.getCurrentNavigation()?.extras?.state?.bypassGuard) {
+      return true;
     }
 
     const config = {
diff --git a/src/app/frontend/create/from/file/component.ts b/src/app/frontend/create/from/file/component.ts
index 7f0721c3bf94..c01faef97f60 100644
--- a/src/app/frontend/create/from/file/component.ts
+++ b/src/app/frontend/create/from/file/component.ts
@@ -12,8 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Component, ViewChild} from '@angular/core';
-import {NgForm} from '@angular/forms';
+import {Component} from '@angular/core';
 import {KdFile} from '@api/root.ui';
 import {ICanDeactivate} from '@common/interfaces/candeactivate';
 
@@ -28,8 +27,6 @@ import {NamespaceService} from '@common/services/global/namespace';
 })
 export class CreateFromFileComponent extends ICanDeactivate {
   file: KdFile;
-  @ViewChild(NgForm, {static: true}) private readonly ngForm: NgForm;
-  private creating_ = false;
 
   constructor(
     private readonly namespace_: NamespaceService,
@@ -44,16 +41,7 @@ export class CreateFromFileComponent extends ICanDeactivate {
   }
 
   create(): void {
-    this.creating_ = true;
-    this.create_
-      .createContent(this.file.content, true, this.file.name)
-      .then(() => {
-        this.file = {
-          name: '',
-          content: '',
-        };
-      })
-      .finally(() => (this.creating_ = false));
+    this.create_.createContent(this.file.content, true, this.file.name);
   }
 
   onFileLoad(file: KdFile): void {
@@ -69,6 +57,6 @@ export class CreateFromFileComponent extends ICanDeactivate {
   }
 
   canDeactivate(): boolean {
-    return this.isCreateDisabled() && !this.creating_;
+    return this.isCreateDisabled();
   }
 }
diff --git a/src/app/frontend/create/from/form/component.ts b/src/app/frontend/create/from/form/component.ts
index bb689705f6a3..8f4217ec5ea5 100644
--- a/src/app/frontend/create/from/form/component.ts
+++ b/src/app/frontend/create/from/form/component.ts
@@ -59,8 +59,6 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
   labelArr: DeployLabel[] = [];
   form: FormGroup;
 
-  private creating_ = false;
-
   constructor(
     private readonly namespace_: NamespaceService,
     private readonly create_: CreateService,
@@ -178,10 +176,6 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
     this.imagePullSecret.patchValue('');
   }
 
-  hasUnsavedChanges(): boolean {
-    return this.form.dirty;
-  }
-
   isCreateDisabled(): boolean {
     return !this.form.valid || this.create_.isDeployDisabled();
   }
@@ -292,13 +286,9 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
   }
 
   deploy(): void {
-    this.creating_ = true;
+    this.form.markAsPristine();
     const spec = this.getSpec();
-
-    this.create_
-      .deploy(spec)
-      .then(() => this.form.markAsPristine())
-      .finally(() => (this.creating_ = false));
+    this.create_.deploy(spec);
   }
 
   private getSpec(): AppDeploymentSpec {
@@ -325,6 +315,6 @@ export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
   }
 
   canDeactivate(): boolean {
-    return !this.hasUnsavedChanges() && !this.creating_;
+    return this.form.pristine;
   }
 }
diff --git a/src/app/frontend/create/from/input/component.ts b/src/app/frontend/create/from/input/component.ts
index 2233e4d7f47b..adea8e7a4c68 100644
--- a/src/app/frontend/create/from/input/component.ts
+++ b/src/app/frontend/create/from/input/component.ts
@@ -26,7 +26,6 @@ import {NamespaceService} from '@common/services/global/namespace';
 })
 export class CreateFromInputComponent extends ICanDeactivate {
   inputData = '';
-  private creating_ = false;
 
   constructor(
     private readonly namespace_: NamespaceService,
@@ -41,11 +40,7 @@ export class CreateFromInputComponent extends ICanDeactivate {
   }
 
   create(): void {
-    this.creating_ = true;
-    this.create_
-      .createContent(this.inputData)
-      .then(() => (this.inputData = ''))
-      .finally(() => (this.creating_ = false));
+    this.create_.createContent(this.inputData);
   }
 
   cancel(): void {
@@ -57,6 +52,6 @@ export class CreateFromInputComponent extends ICanDeactivate {
   }
 
   canDeactivate(): boolean {
-    return this.isCreateDisabled() && !this.creating_;
+    return this.isCreateDisabled();
   }
 }