ROENROLL-1957 what if stepper fixes

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html

@@ -114,10 +114,6 @@
       <p>To provide a more accurate audit, specify the number of credits you plan to take in the following courses:</p>
 
       <form [formGroup]="chosenCreditSettings">
-          <!-- skip variable credits select if not using planned courses -->
-          <!-- <div *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value !== 'planned'">
-              <p><strong>No variable credits found. The audit is ready to be run.</strong></p>
-          </div> -->
           <ng-container *ngIf="variableCreditCourses$ | async as variableCreditCourses; else loading">
               <ng-container *ngIf="variableCreditCourses.length > 0; else noVariableCreditCourses">
                 <div class="credit-selector" *ngFor="let course of variableCreditCourses; let i = index" [formGroupName]="i">

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.ts

@@ -161,12 +161,10 @@ export class NewDegreeAuditDialogComponent implements OnInit {
     );
 
     if (degreePlanFormControl) {
-      degreePlanFormControl.valueChanges.pipe();
-
       degreePlanFormControl.valueChanges.subscribe(currentPlan => {
         this.chosenRoadmapId$.next(currentPlan.roadmapId);
 
-        this.variableCreditCourses$ = this.variableCreditCourses$ = this.chosenRoadmapId$.pipe(
+        this.variableCreditCourses$ = this.chosenRoadmapId$.pipe(
           distinctUntilChanged(),
           flatMap(roadmapId =>
             forkJoinWithKeys({

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html

@@ -92,9 +92,9 @@
             User picks which of their degree plans to use as a basis for the what-if audit
            -->
           <ng-container *ngIf="degreePlans$ | async as degreePlans; else loading">
-            <mat-form-field>
+            <mat-form-field *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
               <mat-label>Degree Plan</mat-label>
-              <mat-select id="what-if-degree-plan-select" formControlName="degreePlan" [compareWith]="comparePlans">
+              <mat-select id="what-if-degree-plan-select" formControlName="degreePlan">
                 <mat-select-trigger *ngIf="chosenAuditSettings.get('degreePlan')?.value; let plan">
                   <mat-icon
                     class="primary-star"
@@ -128,12 +128,13 @@
 
         <div class="step-actions">
           <button mat-button matStepperPrevious>Back</button>
-          <button mat-stroked-button matStepperNext [disabled]="!chosenAuditSettings.valid">Next</button>
+          <button mat-stroked-button matStepperNext [disabled]="!chosenAuditSettings.valid" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">Next</button>
+          <button mat-raised-button color="primary" (click)="submitAudit()" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value !== 'planned'">Request audit</button>
         </div>
       </form>
     </mat-step>
 
-    <mat-step [stepControl]="chosenCreditSettings" label="Select credits">
+    <mat-step [stepControl]="chosenCreditSettings" label="Select credits" *ngIf="chosenAuditSettings.get('includeCoursesFrom')?.value === 'planned'">
       <p>To provide a more accurate audit, specify the number of credits you plan to take in the following courses:</p>
 
       <form [formGroup]="chosenCreditSettings">

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss

@@ -5,6 +5,13 @@
   flex-direction: column;
 }
 
+.mat-stepper-vertical {
+  width: 731px;
+  @media screen and (max-width: 960px) {
+    width: auto;
+  }
+}
+
 .mat-radio-button {
   margin: 5px;
 }

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.ts

@@ -164,22 +164,12 @@ export class NewWhatIfAuditDialogComponent implements OnInit {
     const includeCoursesFrom = this.chosenAuditSettings.get(
       'includeCoursesFrom',
     );
-    if (includeCoursesFrom && degreePlanFormControl) {
-      includeCoursesFrom.valueChanges.subscribe(selected => {
-        if (selected !== 'planned') {
-          degreePlanFormControl.reset();
-          degreePlanFormControl.disable();
-        } else {
-          degreePlanFormControl.enable();
-        }
-      });
 
+    if (degreePlanFormControl) {
       degreePlanFormControl.valueChanges.subscribe(plan => {
         this.chosenRoadmapId$.next(plan.roadmapId);
       });
-    }
 
-    if (degreePlanFormControl) {
       this.variableCreditCourses$ = this.chosenRoadmapId$.pipe(
         distinctUntilChanged(),
         flatMap(roadmapId =>