From 86650e1ce95e726198ff6cf839c2ba218716a54d Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Mon, 7 Dec 2020 12:43:01 -0500
Subject: [PATCH] open link to Scratch Team member in new tab

---
 src/components/people-grid/people-grid.jsx | 11 ++++++++++-
 src/views/annual-report/annual-report.jsx  |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/people-grid/people-grid.jsx b/src/components/people-grid/people-grid.jsx
index adbbd5473..3ed83f6e3 100644
--- a/src/components/people-grid/people-grid.jsx
+++ b/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;
diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index d0d461071..a7980a00b 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/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>