Update survey titles and labels for clarity: reflect focus on Copilot impact and time savings

backend/src/controllers/survey.controller.ts

@@ -6,47 +6,17 @@ import app from '../index.js';
 
 class SurveyController {
   async createSurvey(req: Request, res: Response): Promise<void> {
-    let survey: Survey;
     try {
-      const _survey = await surveyService.updateSurvey({
+      const survey = await surveyService.createSurvey({
         ...req.body,
         status: 'completed'
       })
-      if (!_survey) throw new Error('Survey not found');
-      survey = _survey;
       res.status(201).json(survey);
     } catch (error) {
+      console.log(error);
       res.status(500).json(error);
       return;
     }
-    try {
-      const { installation, octokit } = await app.github.getInstallation(survey.org);
-      const surveyUrl = new URL(`copilot/surveys/${survey.id}`, app.baseUrl);
-
-      if (!survey.repo || !survey.org || !survey.prNumber) {
-        logger.warn('Cannot process survey comment: missing survey data');
-        return;
-      }
-      const comments = await octokit.rest.issues.listComments({
-        owner: survey.org,
-        repo: survey.repo,
-        issue_number: survey.prNumber
-      });
-      const comment = comments.data.find(comment => comment.user?.login.startsWith(installation.app_slug));
-      if (comment) {
-        octokit.rest.issues.updateComment({
-          owner: survey.org,
-          repo: survey.repo,
-          comment_id: comment.id,
-          body: `Thanks for filling out the [copilot survey](${surveyUrl.toString()}) @${survey.userId}!`
-        });
-      } else {
-        logger.info(`No comment found for survey from ${survey.org}`);
-      }
-    } catch (error) {
-      logger.error('Error updating survey comment', error);
-      throw error;
-    }
   }
 
   async getAllSurveys(req: Request, res: Response): Promise<void> {
@@ -63,6 +33,16 @@ class SurveyController {
     }
   }
 
+  async getRecentSurveysWithGoodReasons(req: Request, res: Response): Promise<void> {
+    try {
+      const minReasonLength = parseInt(req.query.minReasonLength as string) || 20;
+      const surveys = await surveyService.getRecentSurveysWithGoodReasons(minReasonLength);
+      res.status(200).json(surveys);
+    } catch (error) {
+      res.status(500).json(error);
+    }
+  }
+
   async getSurveyById(req: Request, res: Response): Promise<void> {
     try {
       const { id } = req.params;
@@ -96,6 +76,50 @@ class SurveyController {
     }
   }
 
+  async updateSurveyGitHub(req: Request, res: Response): Promise<void> {
+    let survey: Survey;
+    try {
+      const _survey = await surveyService.updateSurvey({
+        ...req.body,
+        status: 'completed'
+      })
+      if (!_survey) throw new Error('Survey not found');
+      survey = _survey;
+      res.status(201).json(survey);
+    } catch (error) {
+      res.status(500).json(error);
+      return;
+    }
+    try {
+      const { installation, octokit } = await app.github.getInstallation(survey.org);
+      const surveyUrl = new URL(`copilot/surveys/${survey.id}`, app.baseUrl);
+
+      if (!survey.repo || !survey.org || !survey.prNumber) {
+        logger.warn('Cannot process survey comment: missing survey data');
+        return;
+      }
+      const comments = await octokit.rest.issues.listComments({
+        owner: survey.org,
+        repo: survey.repo,
+        issue_number: survey.prNumber
+      });
+      const comment = comments.data.find(comment => comment.user?.login.startsWith(installation.app_slug));
+      if (comment) {
+        octokit.rest.issues.updateComment({
+          owner: survey.org,
+          repo: survey.repo,
+          comment_id: comment.id,
+          body: `Thanks for filling out the [copilot survey](${surveyUrl.toString()}) @${survey.userId}!`
+        });
+      } else {
+        logger.info(`No comment found for survey from ${survey.org}`);
+      }
+    } catch (error) {
+      logger.error('Error updating survey comment', error);
+      throw error;
+    }
+  }
+
   async deleteSurvey(req: Request, res: Response): Promise<void> {
     try {
       const { id } = req.params;

backend/src/models/survey.model.ts

@@ -12,7 +12,9 @@ type SurveyType = {
   percentTimeSaved: number;
   timeUsedFor: string;
   reason: string;
+  kudos?: number; // Add kudos property
   createdAt?: Date;
+  kudos: number;
   updatedAt?: Date;
 }
 
@@ -28,8 +30,10 @@ class Survey extends Model<SurveyType> {
   declare percentTimeSaved: number;
   declare timeUsedFor: string;
   declare reason: string;
+  declare kudos: number;
   declare createdAt: CreationOptional<Date>;
   declare updatedAt: CreationOptional<Date>;
+  declare kudos?: number; // Add kudos property
 
   static initModel(sequelize: Sequelize) {
     Survey.init({
@@ -81,6 +85,10 @@ class Survey extends Model<SurveyType> {
         type: DataTypes.INTEGER,
         allowNull: true,
       },
+      kudos: {
+        type: DataTypes.INTEGER,
+        allowNull: true
+      },
       createdAt: DataTypes.DATE,
       updatedAt: DataTypes.DATE
     }, {

backend/src/routes/index.ts

@@ -17,8 +17,10 @@ router.get('/', (req: Request, res: Response) => {
 router.get('/survey', surveyController.getAllSurveys);
 router.post('/survey', surveyController.createSurvey);
 router.get('/survey/:id', surveyController.getSurveyById);
-router.put('/survey/:id', surveyController.updateSurvey);
+router.put('/survey/:id', surveyController.updateSurvey); // put github survey logic here
 router.delete('/survey/:id', surveyController.deleteSurvey);
+router.get('/survey/recent-good-reasons/:minReasonLength', surveyController.getRecentSurveysWithGoodReasons);
+router.put('/survey/:id/github', surveyController.updateSurveyGitHub);
 
 router.get('/usage', usageController.getUsage);
 

backend/src/services/survey.service.ts

@@ -1,4 +1,5 @@
 import { Survey, SurveyType } from "../models/survey.model.js";
+import { Op } from 'sequelize';
 
 class SurveyService {
   async createSurvey(survey: SurveyType) {
@@ -11,6 +12,20 @@ class SurveyService {
     });
     return await Survey.findByPk(survey.id);
   }
+
+  async getRecentSurveysWithGoodReasons(minReasonLength: number = 20) {
+    return await Survey.findAll({
+      where: {
+        reason: {
+          [Op.and]: [
+            { [Op.ne]: null },
+            { [Op.length]: { [Op.gt]: minReasonLength } }
+          ]
+        }
+      },
+      order: [['updatedAt', 'DESC']]
+    });
+  }
 }
 
 export default new SurveyService();

frontend/src/app/app.routes.ts

@@ -31,6 +31,7 @@ export const routes: Routes = [
       { path: 'copilot/seats', component: CopilotSeatsComponent, title: 'Seats' },
       { path: 'copilot/seats/:id', component: CopilotSeatComponent, title: 'Seat' },
       { path: 'copilot/surveys', component: CopilotSurveysComponent, title: 'Surveys' },
+      { path: 'copilot/surveys/new', component: NewCopilotSurveyComponent, title: 'New Survey' },
       { path: 'copilot/surveys/new/:id', component: NewCopilotSurveyComponent, title: 'New Survey' },
       { path: 'copilot/surveys/:id', component: CopilotSurveyComponent, title: 'Survey' },
       { path: 'copilot/predictive-modeling', component: PredictiveModelingComponent, title: 'Predictive Modeling' },

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>
@@ -17,7 +17,7 @@ <h1>Survey #{{ survey.id }}</h1>
       <ng-container *ngIf="survey.status !== 'pending'">
         <p><strong>Used Copilot: </strong>{{ survey.usedCopilot ? 'Yes' : 'No' }}</p>
         <p><strong>Time Saved: </strong>{{ survey.percentTimeSaved }}%</p>
-        <p><strong>Reason: </strong>{{ survey.reason }}</p>
+        <p><strong>Reason: </strong><span matLine>{{ survey.reason }}</span></p>
         <p><strong>Time Used For: </strong>{{ survey.timeUsedFor }}</p>
       </ng-container>
       <p><strong>PR: </strong><a [href]="'https://github.com/' + survey.org + '/' + survey.repo + '/pull/' + survey.prNumber">{{ survey.repo }}#{{ survey.prNumber }}</a></p>

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,47 +1,69 @@
 <div class="page-container">
   <div class="page-header">
-    <h1>Developer Survey</h1>
+    <h2>Estimate Time Saved With Copilot & <br> Share Insights with your colleagues</h2>
   </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>
-    <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">
-      </mat-slider>
-      <div class="slider-labels-container">
-        <div class="slider-labels">
-          <span style="left: 0%">0%</span>
-          <span style="left: 25%">25%</span>
-          <span style="left: 50%">50%</span>
-          <span style="left: 75%">75%</span>
-          <span style="left: 100%">100%</span>
+  <div class="two-column-layout">
+    <div class="column" [style.width.%]="formColumnWidth">
+      <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 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">
+          </mat-slider>
+          <div class="slider-labels-container">
+            <div class="slider-labels">
+              <span style="left: 0%">0%</span>
+              <span style="left: 25%">25%</span>
+              <span style="left: 50%">50%</span>
+              <span style="left: 75%">75%</span>
+              <span style="left: 100%">100%</span>
+            </div>
+          </div>
         </div>
-      </div>
+        <mat-form-field class="example-form-field">
+          <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-form-field>
+        <br><br>
+        <label for="timeUsedForGroup">Given the context, where would the Copilot time savings most likely show up?</label>
+        <mat-radio-group id="timeUsedForGroup" formControlName="timeUsedFor" aria-labelledby="example-radio-group-label" class="example-radio-group">
+          <mat-radio-button class="example-radio-button" value="fasterPRs">Faster PR's 🚀</mat-radio-button>
+          <mat-radio-button class="example-radio-button" value="fasterReleases">Faster Releases 📦</mat-radio-button>
+          <mat-radio-button class="example-radio-button" value="repoHousekeeping">Repo/Team Housekeeping 🧹</mat-radio-button>
+          <mat-radio-button class="example-radio-button" value="techDebt">Tech Debt, Reduce Defects and Vulns
+            🛠️</mat-radio-button>
+          <mat-radio-button class="example-radio-button" value="experimentLearn">Experiment, Learn, or Work on Something NEW
+            🧪</mat-radio-button>
+          <mat-radio-button class="example-radio-button" value="other">Other 🤔</mat-radio-button>
+        </mat-radio-group>
+        <button mat-raised-button color="primary" type="submit">Submit</button>
+      </form>
     </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-hint>Describe your thought process for calculating (or estimating) the {{surveyForm.get('percentTimeSaved')?.value}}% time saved</mat-hint>
-    </mat-form-field>
-    <br><br>
-    <label for="timeUsedForGroup">Given the context, where would the Copilot time savings most likely show up?</label>
-    <mat-radio-group id="timeUsedForGroup" formControlName="timeUsedFor" aria-labelledby="example-radio-group-label" class="example-radio-group">
-      <mat-radio-button class="example-radio-button" value="fasterPRs">Faster PR's 🚀</mat-radio-button>
-      <mat-radio-button class="example-radio-button" value="fasterReleases">Faster Releases 📦</mat-radio-button>
-      <mat-radio-button class="example-radio-button" value="repoHousekeeping">Repo/Team Housekeeping 🧹</mat-radio-button>
-      <mat-radio-button class="example-radio-button" value="techDebt">Tech Debt, Reduce Defects and Vulns
-        🛠️</mat-radio-button>
-      <mat-radio-button class="example-radio-button" value="experimentLearn">Experiment, Learn, or Work on Something NEW
-        🧪</mat-radio-button>
-      <mat-radio-button class="example-radio-button" value="other">Other 🤔</mat-radio-button>
-    </mat-radio-group>
-    <button mat-raised-button color="primary" type="submit">Submit</button>
-  </form>
-</div>
+    <div class="column" [style.width.%]="historyColumnWidth">
+      <h3>What colleagues are sharing...</h3>
+      <mat-card class="scrollable-card">
+        <mat-card-content class="scrollable-card-content">
+          <div *ngFor="let reason of historicalReasons; let i = index">
+            "{{ reason }}"
+            <a href="#" (click)="addKudos($event, i)">
+              <mat-icon>thumb_up</mat-icon>
+            </a>
+            <span class="kudos-count">{{ surveys[i].kudos || 0 }}</span>
+          </div>
+          <div *ngFor="let reason of historicalReasons; let i = index">
+            "{{ reason }}"
+            <a href="#" (click)="addKudos($event, i)">
+              <mat-icon>thumb_up</mat-icon>
+            </a>
+            <span class="kudos-count">{{ surveys[i].kudos || 0 }}</span>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>```