SFD-171: Persist form state

src/app/carbon-estimator-form/carbon-estimator-form.component.html

@@ -145,7 +145,8 @@
             class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed tce-px-3 tce-py-2"
             formControlName="monthlyCloudBill"
             name="monthlyCloudBill"
-            required>
+            required
+            [compareWith]="compareCostRanges">
             @for (range of costRanges; track $index) {
               <option [ngValue]="range">{{ range | formatCostRange }}</option>
             }

src/app/carbon-estimator-form/carbon-estimator-form.component.spec.ts

@@ -1,6 +1,23 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CarbonEstimatorFormComponent } from './carbon-estimator-form.component';
+import { StorageService } from '../services/storage.service';
+
+class MockStorageService {
+  storage = new Map<string, string>();
+
+  get(key: string): string | null {
+    return this.storage.get(key) || null;
+  }
+
+  set(key: string, value: string): void {
+    this.storage.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.storage.delete(key);
+  }
+}
 
 describe('CarbonEstimatorFormComponent', () => {
   let component: CarbonEstimatorFormComponent;
@@ -9,6 +26,7 @@ describe('CarbonEstimatorFormComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [CarbonEstimatorFormComponent],
+      providers: [{ provide: StorageService, useClass: MockStorageService }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CarbonEstimatorFormComponent);
@@ -18,7 +36,6 @@ describe('CarbonEstimatorFormComponent', () => {
 
   it('should create component form in a valid state', () => {
     expect(component).toBeTruthy();
-    component.ngOnInit();
     expect(component.estimatorForm.valid).toBeTruthy();
   });
 
@@ -32,14 +49,12 @@ describe('CarbonEstimatorFormComponent', () => {
 
   describe('Downstream', () => {
     it('should invalidate form when monthly active users are zero', () => {
-      component.ngOnInit();
       component.estimatorForm.get('downstream.monthlyActiveUsers')?.setValue(0);
       fixture.detectChanges();
       expect(component.estimatorForm.valid).toBeFalsy();
     });
 
     it('should validate form when downstream is excluded and monthly active users are zero', () => {
-      component.ngOnInit();
       component.estimatorForm.get('downstream.monthlyActiveUsers')?.setValue(0);
       component.estimatorForm.get('downstream.noDownstream')?.setValue(true);
       fixture.detectChanges();
@@ -49,21 +64,18 @@ describe('CarbonEstimatorFormComponent', () => {
 
   describe('headCount()', () => {
     it('should not return null once the component is initialized', () => {
-      component.ngOnInit();
       expect(component.headCount).not.toBeNull();
     });
   });
 
   describe('numberOfServers()', () => {
     it('should not return null once the component is initialized', () => {
-      component.ngOnInit();
       expect(component.numberOfServers).not.toBeNull();
     });
   });
 
   describe('monthlyActiveUsers()', () => {
     it('should not return null once the component is initialized', () => {
-      component.ngOnInit();
       expect(component.monthlyActiveUsers).not.toBeNull();
     });
   });

src/app/carbon-estimator-form/carbon-estimator-form.component.ts

@@ -1,5 +1,15 @@
 import { CommonModule, JsonPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output, ViewChild, input } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  input,
+} from '@angular/core';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { EstimatorFormValues, EstimatorValues, WorldLocation, locationArray } from '../types/carbon-estimator';
 import {
@@ -10,6 +20,9 @@ import {
   locationDescriptions,
   ValidationError,
   errorConfig,
+  ControlState,
+  ErrorSummaryState,
+  FormState,
 } from './carbon-estimator-form.constants';
 import { NoteComponent } from '../note/note.component';
 import { CarbonEstimationService } from '../services/carbon-estimation.service';
@@ -18,6 +31,8 @@ import { FormatCostRangePipe } from '../pipes/format-cost-range.pipe';
 import { InvalidatedPipe } from '../pipes/invalidated.pipe';
 import { ErrorSummaryComponent } from '../error-summary/error-summary.component';
 import { ExternalLinkDirective } from '../directives/external-link.directive';
+import { StorageService } from '../services/storage.service';
+import { compareCostRanges } from '../utils/cost-range';
 
 @Component({
   selector: 'carbon-estimator-form',
@@ -37,14 +52,19 @@ import { ExternalLinkDirective } from '../directives/external-link.directive';
     ExternalLinkDirective,
   ],
 })
-export class CarbonEstimatorFormComponent implements OnInit {
+export class CarbonEstimatorFormComponent implements OnInit, OnDestroy {
   public formValue = input<EstimatorValues>();
 
   @Output() public formSubmit: EventEmitter<EstimatorValues> = new EventEmitter<EstimatorValues>();
   @Output() public formReset: EventEmitter<void> = new EventEmitter();
 
   @ViewChild(ErrorSummaryComponent) errorSummary?: ErrorSummaryComponent;
 
+  @HostListener('window:beforeunload', ['$event'])
+  onBeforeUnload(): void {
+    this.storeFormState();
+  }
+
   public estimatorForm!: FormGroup<EstimatorFormValues>;
 
   public formContext = formContext;
@@ -76,10 +96,13 @@ export class CarbonEstimatorFormComponent implements OnInit {
   public showErrorSummary = false;
   public validationErrors: ValidationError[] = [];
 
+  public compareCostRanges = compareCostRanges;
+
   constructor(
     private formBuilder: FormBuilder,
     private changeDetector: ChangeDetectorRef,
-    private estimationService: CarbonEstimationService
+    private estimationService: CarbonEstimationService,
+    private storageService: StorageService
   ) {}
 
   public ngOnInit() {
@@ -161,6 +184,19 @@ export class CarbonEstimatorFormComponent implements OnInit {
     if (formValue !== undefined) {
       this.estimatorForm.setValue(formValue);
     }
+
+    const storedFormState = this.getStoredFormState();
+
+    if (storedFormState) {
+      this.estimatorForm.setValue(storedFormState.formValue);
+      this.setControlStates(storedFormState.controlStates);
+      this.showErrorSummary = storedFormState.errorSummaryState.showErrorSummary;
+      this.validationErrors = storedFormState.errorSummaryState.validationErrors;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.storeFormState();
   }
 
   public handleSubmit() {
@@ -187,6 +223,7 @@ export class CarbonEstimatorFormComponent implements OnInit {
 
   public resetForm() {
     this.estimatorForm.reset();
+    this.clearStoredFormState();
     this.formReset.emit();
   }
 
@@ -224,4 +261,57 @@ export class CarbonEstimatorFormComponent implements OnInit {
 
     return validationErrors;
   }
+
+  private getControlStates() {
+    const controlStates: Record<string, ControlState> = {};
+
+    for (const [groupName, formGroup] of Object.entries(this.estimatorForm.controls)) {
+      for (const [controlName, control] of Object.entries(formGroup.controls)) {
+        if (control.dirty || control.touched) {
+          controlStates[`${groupName}.${controlName}`] = {
+            dirty: control.dirty,
+            touched: control.touched,
+          };
+        }
+      }
+    }
+
+    return controlStates;
+  }
+
+  private setControlStates(controlStates: Record<string, ControlState>) {
+    for (const [controlKey, controlState] of Object.entries(controlStates)) {
+      const control = this.estimatorForm.get(controlKey);
+      if (controlState.dirty) {
+        control?.markAsDirty();
+      }
+      if (controlState.touched) {
+        control?.markAsTouched();
+      }
+    }
+  }
+
+  private storeFormState() {
+    const formValue = this.estimatorForm.getRawValue();
+    const controlStates = this.getControlStates();
+    const errorSummaryState: ErrorSummaryState = {
+      showErrorSummary: this.showErrorSummary,
+      validationErrors: this.validationErrors,
+    };
+    const formState: FormState = {
+      formValue,
+      controlStates,
+      errorSummaryState,
+    };
+    this.storageService.set('formState', JSON.stringify(formState));
+  }
+
+  private getStoredFormState() {
+    const storedFormState = this.storageService.get('formState');
+    return storedFormState ? (JSON.parse(storedFormState) as FormState) : null;
+  }
+
+  private clearStoredFormState() {
+    this.storageService.removeItem('formState');
+  }
 }

src/app/carbon-estimator-form/carbon-estimator-form.constants.ts

@@ -1,6 +1,6 @@
+import { FormGroup } from '@angular/forms';
 import { ExpansionPanelConfig } from '../expansion-panel/expansion-panel.constants';
-import { CostRange, EstimatorValues } from '../types/carbon-estimator';
-import { WorldLocation } from '../types/carbon-estimator';
+import { CostRange, EstimatorFormValues, EstimatorValues, WorldLocation } from '../types/carbon-estimator';
 
 export const costRanges: CostRange[] = [
   { min: 0, max: 1000 },
@@ -129,3 +129,21 @@ export const errorConfig = {
     errorMessage: 'The number of monthly active users must be greater than 0',
   },
 };
+
+export type EstimatorFormRawValue = ReturnType<FormGroup<EstimatorFormValues>['getRawValue']>;
+
+export type ControlState = {
+  dirty: boolean;
+  touched: boolean;
+};
+
+export type ErrorSummaryState = {
+  showErrorSummary: boolean;
+  validationErrors: ValidationError[];
+};
+
+export type FormState = {
+  formValue: EstimatorFormRawValue;
+  controlStates: Record<string, ControlState>;
+  errorSummaryState: ErrorSummaryState;
+};

src/app/services/storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StorageService } from './storage.service';
+
+describe('StorageService', () => {
+  let service: StorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/storage.service.ts

@@ -0,0 +1,25 @@
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+
+export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
+  providedIn: 'root',
+  factory: () => sessionStorage,
+});
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {}
+
+  get(key: string): string | null {
+    return this.storage.getItem(key);
+  }
+
+  set(key: string, value: string): void {
+    this.storage.setItem(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.storage.removeItem(key);
+  }
+}

src/app/utils/cost-range.spec.ts

@@ -0,0 +1,43 @@
+import { CostRange } from '../types/carbon-estimator';
+import { compareCostRanges } from './cost-range';
+
+describe('compareCostRanges', () => {
+  it('should return true when the cost ranges are the same', () => {
+    const range1: CostRange = {
+      min: 10,
+      max: 20,
+    };
+    const range2: CostRange = {
+      min: 10,
+      max: 20,
+    };
+
+    expect(compareCostRanges(range1, range2)).toBeTrue();
+  });
+
+  it('should return false when the cost ranges have different min values', () => {
+    const range1: CostRange = {
+      min: 5,
+      max: 20,
+    };
+    const range2: CostRange = {
+      min: 10,
+      max: 20,
+    };
+
+    expect(compareCostRanges(range1, range2)).toBeFalse();
+  });
+
+  it('should return false when the cost ranges have different max values', () => {
+    const range1: CostRange = {
+      min: 10,
+      max: 20,
+    };
+    const range2: CostRange = {
+      min: 10,
+      max: 30,
+    };
+
+    expect(compareCostRanges(range1, range2)).toBeFalse();
+  });
+});

src/app/utils/cost-range.ts

@@ -0,0 +1,5 @@
+import { CostRange } from '../types/carbon-estimator';
+
+export const compareCostRanges = (r1: CostRange, r2: CostRange) => {
+  return r1.min === r2.min && r1.max === r2.max;
+};