Update survey titles and labels for clarity: reflect focus on Copilot…

… impact and time savings

frontend/src/app/main/copilot/copilot-surveys/copilot-survey-details/copilot-survey.component.html

@@ -1,6 +1,6 @@
 <div class="page-container" *ngIf="survey">
   <div class="page-header">
-    <h1>Survey #{{ survey.id }}</h1>
+    <h1>Estimate of Copilot Impact #{{ survey.id }}</h1>
   </div>
   <mat-card appearance="outlined">
     <mat-card-header>

frontend/src/app/main/copilot/copilot-surveys/copilot-surveys.component.html

@@ -1,10 +1,10 @@
 <div class="page-container">
   <div class="page-header">
-    <h1>Surveys</h1>
+    <h1>Estimate Time Saved and Share Expertise</h1>
     <span class="spacer"></span>
-    <!-- <p>
+    <p>
       <a mat-flat-button color="primary" routerLink="/copilot/surveys/new">New Survey</a>
-    </p> -->
+    </p>
   </div>
   <app-table [data]="surveys!" [columns]="surveysColumns" [defaultSort]="{id: 'dateTime', start: 'desc', disableClear: false}" (rowClick)="onSurveyClick($event)"></app-table>
 </div>

frontend/src/app/main/copilot/copilot-surveys/new-copilot-survey/new-copilot-survey.component.html

@@ -1,14 +1,14 @@
 <div class="page-container">
   <div class="page-header">
-    <h1>Developer Survey</h1>
+    <h1>Estimate Time Saved and Share Expertise</h1>
   </div>
   <form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
     <label for="usedCopilot">Did you use Copilot for this PR?</label>
     <mat-radio-group id="usedCopilot" formControlName="usedCopilot" aria-labelledby="example-radio-group-label" class="example-radio-group">
       <mat-radio-button class="example-radio-button" [value]="true">Yes</mat-radio-button>
       <mat-radio-button class="example-radio-button" [value]="false">No</mat-radio-button>
     </mat-radio-group>
-    <label for="percentTimeSavedSlider">How much less time did the actual coding take with Copilot?</label>
+    <label for="percentTimeSavedSlider">How much less time did the PR take with Copilot?</label>
     <div>
       <mat-slider class="example-mat-slider" id="percentTimeSavedSlider" [max]="100" [min]="0" [step]="5" discrete="true" tickInterval="5" showTickMarks  [displayWith]="formatPercent">
         <input matSliderThumb formControlName="percentTimeSaved">
@@ -23,11 +23,9 @@ <h1>Developer Survey</h1>
         </div>
       </div>
     </div>
-    <!-- <label>Describe your thought process for calculating (or estimating) the {{surveyForm.get('percentTimeSaved')?.value}}% time
-      saved</label> -->
     <mat-form-field class="example-form-field">
-      <mat-label>{{surveyForm.get('percentTimeSaved')?.value ? 'I chose ' + surveyForm.get('percentTimeSaved')?.value + '% because Copilot enabled me to' : 'I didn\'t use Copilot because'}}...</mat-label>
-      <textarea formControlName="reason" placeholder="Ex. Write boilerplate code more quickly, freeing up time to focus on complex logic." matInput></textarea>
+      <mat-label>If possible, Explain how copilot enabled that level of Time Savings </mat-label>
+      <textarea formControlName="reason" placeholder="Ex. Write boilerplate code more quickly, freeing up time to focus on complex logic." matInput (focus)="onReasonFocus()"></textarea>
       <mat-hint>Describe your thought process for calculating (or estimating) the {{surveyForm.get('percentTimeSaved')?.value}}% time saved</mat-hint>
     </mat-form-field>
     <br><br>

frontend/src/app/main/copilot/copilot-surveys/new-copilot-survey/new-copilot-survey.component.ts

@@ -23,9 +23,14 @@
 export class NewCopilotSurveyComponent implements OnInit {
   surveyForm: FormGroup;
   params: Params = {};
-  defaultPercentTimeSaved = 30;
+  defaultPercentTimeSaved = 25;
   id: number;
 
+  initializationReason = 'I chose ' + this.defaultPercentTimeSaved + '% because Copilot enabled me to...';
+  didNotUsedCopilotReason = 'I did not use Copilot...';
+  usedCopilotWithPercentTimeSaved = (percent: number) => `I chose ${percent}% because Copilot enabled me to...`;
+  usedCopilotWithPercentTimeSavedZero = 'I chose 0% because Copilot did not help me...';
+
   constructor(
     private fb: FormBuilder,
     private copilotSurveyService: CopilotSurveyService,
@@ -43,15 +48,54 @@
 
   ngOnInit() {
     this.route.queryParams.subscribe(params => this.params = params);
+
+    // Page Initialization
+    this.setReasonDefault();
+
     this.surveyForm.get('usedCopilot')?.valueChanges.subscribe((value) => {
       if (!value) {
         this.surveyForm.get('percentTimeSaved')?.setValue(0);
+        this.setReasonDefault();
       } else {
         this.surveyForm.get('percentTimeSaved')?.setValue(this.defaultPercentTimeSaved);
+        this.setReasonDefault();
+      }
+    });
+
+    this.surveyForm.get('percentTimeSaved')?.valueChanges.subscribe((value) => {
+      if (!this.surveyForm.get('reason')?.dirty) {
+        this.setReasonDefault();
+      } else {
+        this.promptUserForConfirmation();
       }
     });
   }
 
+  setReasonDefault() {
+    const reasonControl = this.surveyForm.get('reason');
+    if (reasonControl && !reasonControl.dirty) {
+      const percentTimeSaved = this.surveyForm.get('percentTimeSaved')?.value;
+      const usedCopilot = this.surveyForm.get('usedCopilot')?.value;
+      reasonControl.setValue(
+        usedCopilot
+          ? (percentTimeSaved === 0 ? this.usedCopilotWithPercentTimeSavedZero : this.usedCopilotWithPercentTimeSaved(percentTimeSaved))
+          : this.didNotUsedCopilotReason
+      );
+    }
+  }
+
+  onReasonFocus() {
+    const reasonControl = this.surveyForm.get('reason');
+    if (reasonControl && !reasonControl.value) {
+      this.setReasonDefault();
+    }
+  }
+
+  promptUserForConfirmation() {
+    // Implement the logic to prompt the user with a warning
+    alert("Confirm that reason and percentTimeSaved are correct.");
+  }
+
   parseGitHubPRUrl(url: string) {
     let urlObj;
     try {

frontend/src/app/main/main.component.html

@@ -30,7 +30,7 @@
       <a mat-list-item routerLink="/copilot/surveys">
         <mat-icon matListItemIcon>merge</mat-icon>
         <!-- <mat-icon matListItemIcon>feedback</mat-icon> -->
-        <span>Surveys</span>
+        <span>Developer Estimates</span>
       </a>
       <a mat-list-item routerLink="/copilot/predictive-modeling">
         <mat-icon matListItemIcon>calculate</mat-icon>
@@ -45,19 +45,19 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-    @if (isHandset$ | async) {
-      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
-    }
-    <ng-container *ngIf="installation.owner as owner">
-      <div class="header">
-        <div class="mat-card-avatar" mat-card-avatar style="background-size: cover;" [style.background-image]="'url(' + owner.avatar_url + ')'"></div>
-        <h1>{{owner.login}}</h1>
-      </div>
-    </ng-container>
-    <span class="spacer"></span>
-  </mat-toolbar>
+      <ng-container *ngIf="isHandset$ | async">
+        <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+      </ng-container>
+      <ng-container *ngIf="installation.owner as owner">
+        <div class="header">
+          <div class="mat-card-avatar" mat-card-avatar style="background-size: cover;" [style.background-image]="'url(' + owner.avatar_url + ')'"></div>
+          <h1>{{owner.login}}</h1>
+        </div>
+      </ng-container>
+      <span class="spacer"></span>
+    </mat-toolbar>
     <div class="sidenav-content">
       <router-outlet />
     </div>