PLAN-1908: Create treatment dialog

src/interface/src/app/plan/create-scenarios/create-scenarios.component.html

@@ -113,7 +113,7 @@
         icon="add"
         class="new-treatment"
         [disabled]="creatingTreatment"
-        (click)="createTreatment()">
+        (click)="openTreatmentDialog()">
         New Treatment Plan
       </button>
     </section>

src/interface/src/app/plan/create-scenarios/create-scenarios.component.ts

@@ -24,6 +24,8 @@ import { MetricsService } from '@services/metrics.service';
 import { processScenarioResultsToChartData } from '../scenario-helpers';
 import { TreatmentsService } from '@services/treatments.service';
 import { canAddTreatmentPlan } from '../permissions';
+import { MatDialog } from '@angular/material/dialog';
+import { CreateTreatmentDialogComponent } from './create-treatment-dialog/create-treatment-dialog.component';
 
 enum ScenarioTabs {
   CONFIG,
@@ -84,7 +86,8 @@ export class CreateScenariosComponent implements OnInit {
     private featureService: FeatureService,
     private goalOverlayService: GoalOverlayService,
     private metricsService: MetricsService,
-    private treatmentsService: TreatmentsService
+    private treatmentsService: TreatmentsService,
+    private dialog: MatDialog
   ) {}
 
   createForms() {
@@ -353,15 +356,27 @@ export class CreateScenariosComponent implements OnInit {
     return this.showTreatmentsTab && !!plan && canAddTreatmentPlan(plan);
   }
 
-  createTreatment() {
+  openTreatmentDialog() {
+    this.dialog
+      .open(CreateTreatmentDialogComponent)
+      .afterClosed()
+      .pipe(take(1))
+      .subscribe((name) => {
+        if (name) {
+          this.createTreatment(name);
+        }
+      });
+  }
+
+  createTreatment(name: string) {
     this.creatingTreatment = true;
     const scenarioId = this.scenarioId;
     if (!scenarioId) {
       return;
     }
 
     this.treatmentsService
-      .createTreatmentPlan(Number(scenarioId), 'New Treatment Plan')
+      .createTreatmentPlan(Number(scenarioId), name)
       .subscribe({
         next: (result) => {
           this.goToTreatment(result.id);

src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.html

@@ -0,0 +1,35 @@
+<h3 mat-dialog-title class="title">Name Your Treatment Plan</h3>
+<form [formGroup]="treatmentForm" (ngSubmit)="submit()">
+  <mat-dialog-content>
+    <mat-form-field class="name-field">
+      <mat-label>Name</mat-label>
+      <input matInput formControlName="treatmentName" />
+    </mat-form-field>
+    <mat-error
+      *ngIf="
+        treatmentForm.get('treatmentName')?.touched &&
+        treatmentForm.get('treatmentName')?.invalid
+      ">
+      Treatment name is required.
+    </mat-error>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button
+      mat-button
+      color="primary"
+      type="button"
+      (click)="cancel()"
+      [disabled]="submitting">
+      CANCEL
+    </button>
+    <button
+      mat-button
+      type="submit"
+      color="primary"
+      data-id="save"
+      [disabled]="submitting || treatmentForm.get('treatmentName')?.invalid">
+      <mat-spinner *ngIf="submitting" diameter="24"></mat-spinner>
+      <span *ngIf="!submitting">SAVE</span>
+    </button>
+  </mat-dialog-actions>
+</form>

src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.scss

@@ -0,0 +1,19 @@
+:host {
+    display: block;
+}
+
+mat-form-field {
+    min-width: 480px;
+}
+
+.name-field {
+    margin-top: 32px;
+}
+
+.title {
+    margin: 24px 24px 0;
+}
+
+mat-dialog-actions {
+    padding: 0 24px 16px;
+}

src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTreatmentDialogComponent } from './create-treatment-dialog.component';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { LegacyMaterialModule } from 'src/app/material/legacy-material.module';
+import { MockProvider } from 'ng-mocks';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('CreateTreatmentDialogComponent', () => {
+  let component: CreateTreatmentDialogComponent;
+  let fixture: ComponentFixture<CreateTreatmentDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CreateTreatmentDialogComponent,
+        CommonModule,
+        ReactiveFormsModule,
+        LegacyMaterialModule,
+        BrowserAnimationsModule,
+      ],
+      providers: [MockProvider(MatDialogRef)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CreateTreatmentDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/interface/src/app/plan/create-scenarios/create-treatment-dialog/create-treatment-dialog.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { LegacyMaterialModule } from 'src/app/material/legacy-material.module';
+
+@Component({
+  selector: 'app-create-treatment-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    LegacyMaterialModule,
+  ],
+  templateUrl: './create-treatment-dialog.component.html',
+  styleUrl: './create-treatment-dialog.component.scss',
+})
+export class CreateTreatmentDialogComponent {
+  submitting: boolean = false;
+  treatmentForm = new FormGroup({
+    treatmentName: new FormControl('', [Validators.required]),
+  });
+
+  constructor(
+    private dialogRef: MatDialogRef<CreateTreatmentDialogComponent>
+  ) {}
+
+  async submit() {
+    if (this.treatmentForm.valid) {
+      this.submitting = true;
+      const treatmentName =
+        this.treatmentForm.get('treatmentName')?.value || '';
+      this.dialogRef.close(treatmentName);
+      this.submitting = false;
+    }
+  }
+
+  cancel(): void {
+    this.submitting = false;
+    this.dialogRef.close();
+  }
+}