Adding support for updating Ibiza dirty state (#1910)

Author: ehamai

AzureFunctions.AngularClient/src/app/shared/directives/is-dirty.directive.ts

@@ -0,0 +1,48 @@
+import { PortalService } from './../services/portal.service';
+import { Directive, Input, SimpleChange, OnChanges, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/switchMap';
+
+
+@Directive({
+    selector: '[is-dirty]',
+})
+export class IsDirtyDirective implements OnChanges, OnDestroy {
+
+    @Input('is-dirty') dirty: boolean;
+
+    // If dirtyMessage is null, we'll just use the default Ibiza message
+    @Input('is-dirty-message') dirtyMessage: string;
+
+    private _dirtyStream = new Subject<boolean>();
+    private _ngUnsubscribe = new Subject();
+
+    constructor(private _portalService: PortalService) {
+
+        this._dirtyStream
+            .takeUntil(this._ngUnsubscribe)
+            .debounceTime(100)          // Give some time for message changes
+            .subscribe(dirty => {
+
+                this._portalService.updateDirtyState(
+                    dirty,
+                    this.dirtyMessage);
+
+            });
+    }
+
+    ngOnChanges(changes: { [key: string]: SimpleChange }) {
+        if (this.dirty !== undefined) {
+            this._dirtyStream.next(this.dirty);
+        }
+    }
+
+    ngOnDestroy() {
+        this._portalService.updateDirtyState(
+            false,
+            this.dirtyMessage);
+
+        this._ngUnsubscribe.next();
+    }
+}

AzureFunctions.AngularClient/src/app/shared/models/portal.ts

@@ -64,7 +64,8 @@ export class Verbs {
     public static logAction = 'log-action';
     public static logMessage = 'log-message';
     public static logTimerEvent = 'log-timer-event';
-    public static setDirtyState = 'set-dirtystate';
+    public static setDirtyState = 'set-dirtystate';     // Deprecated
+    public static updateDirtyState = 'update-dirtystate';
     public static setupOAuth = 'setup-oauth';
     public static pinPart = 'pin-part';
     public static setNotification = 'set-notification';
@@ -127,6 +128,11 @@ export interface NotificationStartedInfo {
     id: string
 }
 
+export interface DirtyStateInfo{
+    dirty: boolean;
+    message?: string;
+}
+
 export enum PartSize {
     /**
      * A tile that is 1 column x 1 row.

AzureFunctions.AngularClient/src/app/shared/services/portal.service.ts

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 
-import { PinPartInfo, GetStartupInfo, NotificationInfo, NotificationStartedInfo, DataMessage, BladeResult } from './../models/portal';
+import { PinPartInfo, GetStartupInfo, NotificationInfo, NotificationStartedInfo, DataMessage, BladeResult, DirtyStateInfo } from './../models/portal';
 import { Event, Data, Verbs, Action, LogEntryLevel, Message, UpdateBladeInfo, OpenBladeInfo, StartupInfo, TimerEvent } from '../models/portal';
 import { ErrorEvent } from '../models/error-event';
 import { BroadcastService } from './broadcast.service';
@@ -308,10 +308,20 @@ export class PortalService {
         this.postMessage(Verbs.logAction, actionStr);
     }
 
+    // Deprecated
     setDirtyState(dirty: boolean): void {
         this.postMessage(Verbs.setDirtyState, JSON.stringify(dirty));
     }
 
+    updateDirtyState(dirty: boolean, message?: string): void {
+        const info: DirtyStateInfo = {
+            dirty: dirty,
+            message: message
+        };
+
+        this.postMessage(Verbs.updateDirtyState, JSON.stringify(info));
+    }
+
     logMessage(level: LogEntryLevel, message: string, ...restArgs: any[]) {
         const messageStr = JSON.stringify(<Message>{
             level: level,

AzureFunctions.AngularClient/src/app/shared/shared.module.ts

@@ -1,3 +1,4 @@
+import { IsDirtyDirective } from './directives/is-dirty.directive';
 import { LoadImageDirective } from './../controls/load-image/load-image.directive';
 import { SlideToggleComponent } from './../controls/slide-toggle/slide-toggle.component';
 import { TryNowBusyStateComponent } from './../try-now-busy-state/try-now-busy-state.component';
@@ -79,6 +80,7 @@ export function AiServiceFactory() {
         CommandComponent,
         CheckScenarioDirective,
         DynamicLoaderDirective,
+        IsDirtyDirective,
         RadioSelectorComponent,
         PopOverComponent,
         TextboxComponent,
@@ -107,6 +109,7 @@ export function AiServiceFactory() {
         CommandComponent,
         CheckScenarioDirective,
         DynamicLoaderDirective,
+        IsDirtyDirective,
         RadioSelectorComponent,
         PopOverComponent,
         TextboxComponent,

AzureFunctions.AngularClient/src/app/site/site-config/site-config.component.html

@@ -15,18 +15,22 @@
 
 <!-- <a (click)="scaleUp()" >SCALE UP!!!</a> -->
 
-<div *ngIf="!!mainForm" id="site-config-wrapper">
+<div
+  *ngIf="!!mainForm"
+  id="site-config-wrapper"
+  [is-dirty]="mainForm.dirty"
+  [is-dirty-message]="dirtyMessage">
 
-<general-settings [mainForm]="mainForm" [resourceId]="resourceId"></general-settings>
+  <general-settings [mainForm]="mainForm" [resourceId]="resourceId"></general-settings>
 
-<app-settings [mainForm]="mainForm" [resourceId]="resourceId"></app-settings>
+  <app-settings [mainForm]="mainForm" [resourceId]="resourceId"></app-settings>
 
-<connection-strings [mainForm]="mainForm" [resourceId]="resourceId"></connection-strings>
+  <connection-strings [mainForm]="mainForm" [resourceId]="resourceId"></connection-strings>
 
-<default-documents [mainForm]="mainForm" [resourceId]="resourceId"></default-documents>
+  <default-documents [mainForm]="mainForm" [resourceId]="resourceId"></default-documents>
 
-<handler-mappings [mainForm]="mainForm" [resourceId]="resourceId"></handler-mappings>
+  <handler-mappings [mainForm]="mainForm" [resourceId]="resourceId"></handler-mappings>
 
-<virtual-directories [mainForm]="mainForm" [resourceId]="resourceId"></virtual-directories>
+  <virtual-directories [mainForm]="mainForm" [resourceId]="resourceId"></virtual-directories>
 
 </div>

AzureFunctions.AngularClient/src/app/site/site-config/site-config.component.ts

@@ -45,6 +45,7 @@ export class SiteConfigComponent implements OnDestroy {
   private _valueSubscription: RxSubscription;
   public resourceId: string;
   public resourceType: string;
+  public dirtyMessage: string;
 
   private _busyManager: BusyStateScopeManager;
 
@@ -178,6 +179,8 @@ export class SiteConfigComponent implements OnDestroy {
   }
 
   save() {
+    this.dirtyMessage = this._translateService.instant(PortalResources.saveOperationInProgressWarning);
+
     this.generalSettings.validate();
     this.appSettings.validate();
     this.connectionStrings.validate();
@@ -241,6 +244,7 @@ export class SiteConfigComponent implements OnDestroy {
           );
         })
         .do(null, error => {
+          this.dirtyMessage = null;
           this._logService.error(LogCategories.siteConfig, '/site-config', error);
           this._busyManager.clearBusy();
           if (saveAttempted) {
@@ -253,6 +257,7 @@ export class SiteConfigComponent implements OnDestroy {
             this._translateService.instant(PortalResources.configUpdateFailure) + JSON.stringify(error));
         })
         .subscribe(r => {
+          this.dirtyMessage = null;
           this._busyManager.clearBusy();
 
           const saveResults: SaveOrValidationResult[] = [

AzureFunctions/ResourcesPortal/Resources.resx

@@ -331,6 +331,9 @@
   <data name="save" xml:space="preserve">
     <value>Save</value>
   </data>
+  <data name="saveOperationInProgressWarning" xml:space="preserve">
+    <value>A save operation is currently in progress.  Navigating away may cause some changes to be lost.</value>
+  </data>
   <data name="addNewSetting" xml:space="preserve">
     <value>+ Add new setting</value>
   </data>