Merge pull request #4737 from seotts/team-new-tabs

In the Annual Report Team section, open link to Scratch Team members in new tab

src/components/people-grid/people-grid.jsx

@@ -13,7 +13,11 @@ const PeopleGrid = props => (
             >
                 <div>
                     {person.userName ? (
-                        <a href={`https://scratch.mit.edu/users/${person.userName}/`}>
+                        <a
+                            href={`https://scratch.mit.edu/users/${person.userName}/`}
+                            rel="noreferrer noopener"
+                            target={props.linkToNewTab ? '_blank' : '_self'}
+                        >
                             <Avatar
                                 alt=""
                                 src={`https://cdn.scratch.mit.edu/get_image/user/${person.userId || 'default'}_80x80.png`}
@@ -36,6 +40,7 @@ const PeopleGrid = props => (
 );
 
 PeopleGrid.propTypes = {
+    linkToNewTab: PropTypes.bool,
     people: PropTypes.arrayOf(PropTypes.shape({
         name: PropTypes.string,
         userId: PropTypes.number,
@@ -43,4 +48,8 @@ PeopleGrid.propTypes = {
     }))
 };
 
+PeopleGrid.defaultProps = {
+    linkToNewTab: false
+};
+
 module.exports = PeopleGrid;

src/views/annual-report/annual-report.jsx

@@ -2178,6 +2178,7 @@ class AnnualReport extends React.Component {
                                 </h3>
                                 <div className="executive-director">
                                     <PeopleGrid
+                                        linkToNewTab
                                         people={[{
                                             userName: 'Champ99',
                                             userId: 900283,
@@ -2186,7 +2187,10 @@ class AnnualReport extends React.Component {
                                     />
                                     <FormattedMessage id="annualReport.leadershipInterim" />
                                 </div>
-                                <PeopleGrid people={People} />
+                                <PeopleGrid
+                                    linkToNewTab
+                                    people={People}
+                                />
                             </div>
                         </div>
                     </div>