Fix the unexpected confirmation dialog in 'Create from *'

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,
+        },
       });
     }
 

src/app/frontend/common/services/guard/candeactivate.ts

@@ -14,23 +14,23 @@
 
 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 = {
       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();

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,11 +41,7 @@ export class CreateFromFileComponent extends ICanDeactivate {
   }
 
   create(): void {
-    this.creating_ = true;
-    this.create_
-      .createContent(this.file.content, true, this.file.name)
-      .then(() => (this.creating_ = false))
-      .finally(() => (this.creating_ = false));
+    this.create_.createContent(this.file.content, true, this.file.name);
   }
 
   onFileLoad(file: KdFile): void {
@@ -64,6 +57,6 @@ export class CreateFromFileComponent extends ICanDeactivate {
   }
 
   canDeactivate(): boolean {
-    return this.isCreateDisabled() && !this.creating_;
+    return this.isCreateDisabled();
   }
 }

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

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.creating_ = false))
-      .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;
   }
 }

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.creating_ = false))
-      .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();
   }
 }