Fix the CI Errors Found in the GH Action

RetrospectiveExtension.Frontend/components/__tests__/feedbackItem.test.tsx

@@ -60,7 +60,7 @@ describe('Feedback Item', () => {
     // Expect basic values of the Feedback Item to be propagated in multiple areas of the rendered component.
     expect(component.findWhere((child) =>
       child.prop("className") === "anonymous-created-date").text()).
-      toEqual(moment(testFeedbackItem.createdDate).format('MMM Do, YYYY h:mm a'));
+      toEqual(moment(testFeedbackItem.createdDate).format('MMMM D, YYYY [at] h:mm A'));
 
     expect(component.findWhere((child) =>
       child.prop("className") === "card-id").text()).
@@ -88,4 +88,4 @@ describe('Feedback Item', () => {
     expect(component.findWhere((child) =>
       child.prop("title") === "Timer").html()).toContain(`${formatTimer} elapsed`);
   });
-});
+});

RetrospectiveExtension.Frontend/components/boardSummary.tsx

@@ -57,8 +57,12 @@ class BoardSummary extends React.Component<IBoardSummaryProps, IBoardSummaryStat
         maxWidth: 16,
         minWidth: 16,
         name: 'Work Item Icon',
-        onRender: (props: IActionItemsTableProps) => {
-          return <Image src={props.icon.url} className="work-item-type-icon" alt={`${props.type} icon`} />;
+        onRender: ({ icon, type }: IActionItemsTableProps) => {
+          return <Image
+            src={icon.url}
+            className="work-item-type-icon"
+            alt={`${type} icon`}
+          />;
         }
       },
       {
@@ -70,8 +74,14 @@ class BoardSummary extends React.Component<IBoardSummaryProps, IBoardSummaryStat
         minWidth: 100,
         name: 'Title',
         onColumnClick: this.onColumnClick,
-        onRender: (props: IActionItemsTableProps) => {
-          return <div onClick={async () => { await props.onActionItemClick(props.id); }} className="work-item-title overflow-ellipsis">{props.title}</div>;
+        onRender: ({ id, title, onActionItemClick }: IActionItemsTableProps) => {
+          return <div
+            onClick={async () => {
+              await onActionItemClick(id);
+            }}
+            className="work-item-title overflow-ellipsis">
+            {title}
+          </div>;
         }
       },
       {
@@ -102,9 +112,14 @@ class BoardSummary extends React.Component<IBoardSummaryProps, IBoardSummaryStat
         maxWidth: 150,
         isResizable: true,
         ariaLabel: 'Work item changed date.',
-        onRender: (props: IActionItemsTableProps) => {
-          const changedDate = new Date(props.changedDate);
-          return <div className="overflow-ellipsis">{new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }).format(changedDate)}</div>;
+        onRender: ({ changedDate }: IActionItemsTableProps) => {
+          const changedDateAsDate = new Date(changedDate);
+          return <div
+            className="overflow-ellipsis">
+            {new Intl.DateTimeFormat('en-US',
+              { year: 'numeric', month: 'short', day: 'numeric' }
+            ).format(changedDateAsDate)}
+          </div>;
         },
         onColumnClick: this.onColumnClick,
       },

RetrospectiveExtension.Frontend/components/extensionSettingsMenu.tsx

@@ -171,11 +171,11 @@ class ExtensionSettingsMenu extends React.Component<IExtensionSettingsMenuProps,
             <br /><br />
             The Team Assessment addition to the retrospective guides teams through a set of questions that highlight strengths and opportunities. Teams can then utilize specific retrospective templates to identify the top opportunities for improvement.
             <br /><br />
-            Research from the <a href="https://services.google.com/fh/files/misc/state-of-devops-2018.pdf" target="_blank">2018 State of DevOps</a> report indicates that Elite teams are 1.5 times more likely to consistently hold retrospectives and use them to improve their work. Furthermore, a <a href="https://journals.sagepub.com/doi/full/10.1177/0018720812448394" target="_blank">2013 meta-analysis on teams</a> indicates that teams that effectively debrief are 20-25% more effective.
+            Research from the <a href="https://services.google.com/fh/files/misc/state-of-devops-2018.pdf" target="_blank" rel="noreferrer">2018 State of DevOps</a> report indicates that Elite teams are 1.5 times more likely to consistently hold retrospectives and use them to improve their work. Furthermore, a <a href="https://journals.sagepub.com/doi/full/10.1177/0018720812448394" target="_blank" rel="noreferrer">2013 meta-analysis on teams</a> indicates that teams that effectively debrief are 20-25% more effective.
           </DialogContent>
           <DialogFooter>
             <DefaultButton onClick={() => {
-              window.open('https://github.com/microsoft/vsts-extension-retrospectives/blob/main/README.md', '_blank');
+              window.open('https://github.com/microsoft/vsts-extension-retrospectives/blob/main/README.md', '_blank', 'noreferrer');
             }}
               text="Get more information" />
             <PrimaryButton onClick={() => {

RetrospectiveExtension.Frontend/components/feedbackBoardContainer.tsx

@@ -165,7 +165,7 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
     }
 
     try {
-      this.setSupportedWorkItemTypesForProject();
+      await this.setSupportedWorkItemTypesForProject();
     } catch (error) {
       console.error({ m: "setSupportedWorkItemTypesForProject", error });
     }
@@ -1570,34 +1570,34 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
           }}>
           {this.state.currentBoard &&
             <>
-              <section className='retro-summary-section'>
-                <div className='retro-summary-section-header'>Basic Settings</div>
+              <section className="retro-summary-section">
+                <div className="retro-summary-section-header">Basic Settings</div>
                 <div id="retro-summary-session-date">Session date: {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: 'numeric' }).format(this.state.currentBoard.startDate)}</div>
-                <div id='retro-summary-created-by'>Created by <img className="avatar" src={this.state.currentBoard?.createdBy.imageUrl} /> {this.state.currentBoard?.createdBy.displayName} </div>
+                <div id="retro-summary-created-by">Created by <img className="avatar" src={this.state.currentBoard?.createdBy.imageUrl} /> {this.state.currentBoard?.createdBy.displayName} </div>
               </section>
-              <section className='retro-summary-section'>
-                <div className='retro-summary-section-header'>Participant Summary</div>
-                <div className='retro-summary-section-item'>Team Size: {this.state.members.length} member(s)</div>
-                <div className='retro-summary-section-item'>Contributors: {this.state.contributors.length} participant(s)</div>
+              <section className="retro-summary-section">
+                <div className="retro-summary-section-header">Participant Summary</div>
+                <div className="retro-summary-section-item">Team Size: {this.state.members.length} member(s)</div>
+                <div className="retro-summary-section-item">Contributors: {this.state.contributors.length} participant(s)</div>
 
                 {!this.state.currentBoard.isAnonymous && this.state.contributors.length > 0 &&
-                  <div className='retro-summary-contributors-section'>
+                  <div className="retro-summary-contributors-section">
                     {this.state.contributors.map((contributor, index) =>
-                      <div key={index} className='retro-summary-contributor'>
+                      <div key={index} className="retro-summary-contributor">
                         <img className="avatar" src={contributor.imageUrl} /> {contributor.name}
                       </div>
                     )}
                   </div>
                 }
-                <div className='retro-summary-item-horizontal-group'>
-                  <div className='retro-summary-section-item horizontal-group-item'>{Object.keys(this.state.currentBoard?.boardVoteCollection || {}).length} participant(s) casted {this.state.castedVoteCount} vote(s)</div>
-                  <div className='retro-summary-section-item horizontal-group-item'>{this.state.feedbackItems.length} feedback item(s) created</div>
-                  <div className='retro-summary-section-item horizontal-group-item'>{this.state.actionItemIds.length} action item(s) created</div>
+                <div className="retro-summary-item-horizontal-group">
+                  <div className="retro-summary-section-item horizontal-group-item">{Object.keys(this.state.currentBoard?.boardVoteCollection || {}).length} participant(s) casted {this.state.castedVoteCount} vote(s)</div>
+                  <div className="retro-summary-section-item horizontal-group-item">{this.state.feedbackItems.length} feedback item(s) created</div>
+                  <div className="retro-summary-section-item horizontal-group-item">{this.state.actionItemIds.length} action item(s) created</div>
                 </div>
               </section>
               {this.state.currentBoard.isIncludeTeamEffectivenessMeasurement &&
-                <section className='retro-summary-section'>
-                  <div className='retro-summary-section-header'>Team Assessment</div>
+                <section className="retro-summary-section">
+                  <div className="retro-summary-section-header">Team Assessment</div>
                   <div>
                     Assessment with favorability percentages and average score <br />
                     ({teamEffectivenessResponseCount} {teamEffectivenessResponseCount == 1 ? 'person' : 'people'} responded)
@@ -1609,14 +1609,14 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
                           const yellowScore = (data.yellow * 100) / teamEffectivenessResponseCount;
                           const redScore = ((data.red * 100) / teamEffectivenessResponseCount);
                           return (
-                            <li className='chart-question-block' key={index}>
-                              <div className='chart-question'>
+                            <li className="chart-question-block" key={index}>
+                              <div className="chart-question">
                                 <i className={getQuestionFontAwesomeClass(data.questionId)} /> &nbsp;
                                 {getQuestionShortName(data.questionId)}
                               </div>
                               {data.red > 0 &&
                                 <div
-                                  className='red-chart-response chart-response'
+                                  className="red-chart-response chart-response"
                                   style={{ width: `${redScore}%` }}
                                   title={`Unfavorable percentage is ${redScore}%`}
                                   aria-label={`Unfavorable percentage is ${redScore}%`}
@@ -1626,7 +1626,7 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
                               }
                               {data.yellow > 0 &&
                                 <div
-                                  className='yellow-chart-response chart-response'
+                                  className="yellow-chart-response chart-response"
                                   style={{ width: `${yellowScore}%` }}
                                   title={`Neutral percentage is ${yellowScore}%`}
                                   aria-label={`Neutral percentage is ${yellowScore}%`}
@@ -1636,7 +1636,7 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
                               }
                               {data.green > 0 &&
                                 <div
-                                  className='green-chart-response chart-response'
+                                  className="green-chart-response chart-response"
                                   style={{ width: `${greenScore}%` }}
                                   title={`Favorable percentage is ${greenScore}%`}
                                   aria-label={`Favorable percentage is ${greenScore}%`}
@@ -1656,7 +1656,7 @@ class FeedbackBoardContainer extends React.Component<FeedbackBoardContainerProps
                         }
                       </ul>
                       <div className="chart-legend-section">
-                        <div className='chart-legend-group'>
+                        <div className="chart-legend-group">
                           <section >
                             <div style={{ backgroundColor: "#d6201f" }}></div>
                             <span>Unfavorable</span>

RetrospectiveExtension.Frontend/components/feedbackItem.tsx

@@ -14,9 +14,9 @@ import { WorkItem, WorkItemType } from 'azure-devops-extension-api/WorkItemTrack
 import localStorageHelper from '../utilities/localStorageHelper';
 import { reflectBackendService } from '../dal/reflectBackendService';
 import { WebApiTeam } from 'azure-devops-extension-api/Core';
-import { IColumn, IColumnItem } from './feedbackBoard';
+import { IColumn } from './feedbackBoard';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import FeedbackColumn, { FeedbackColumnProps } from './feedbackColumn';
+import { FeedbackColumnProps } from './feedbackColumn';
 import { getUserIdentity } from '../utilities/userIdentityHelper';
 import { withAITracking } from '@microsoft/applicationinsights-react-js';
 import { reactPlugin } from '../utilities/telemetryClient';

RetrospectiveExtension.Frontend/components/selectorCombo.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FocusTrapCallout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { Dialog } from 'office-ui-fabric-react/lib/Dialog';
 import { List } from 'office-ui-fabric-react/lib/List';
 import { Shimmer } from 'office-ui-fabric-react/lib/Shimmer';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';