fix: open challenge's tab in new tab from register and submission count

#3620

Author: veshu

src/shared/components/challenge-detail/RecommendedActiveChallenges/ChallengesCard/index.jsx

@@ -99,7 +99,7 @@ export default function ChallengesCard({
               challengesUrl={challengesUrl}
               detailLink={challengeDetailLink}
               newChallengeDetails
-              openChallengesInNewTabs={false}
+              openChallengesInNewTabs
               selectChallengeDetailsTab={selectChallengeDetailsTab}
               userHandle={userHandle}
               className={styles['challenge-status-container']}

src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/index.jsx

@@ -22,6 +22,7 @@ export default function NumRegistrants({
   challengesUrl,
   newChallengeDetails,
   selectChallengeDetailsTab,
+  openChallengesInNewTabs,
 }) {
   let tip;
   switch (numRegistrants) {
@@ -41,7 +42,7 @@ export default function NumRegistrants({
           <div styleName="tooltip">
             {tip}
           </div>
-)}
+        )}
       >
         <Link
           disabled={!numRegistrants}
@@ -51,6 +52,7 @@ export default function NumRegistrants({
           )}
           styleName="link"
           to={link}
+          openNewTab={openChallengesInNewTabs}
           aria-label={`Number of registrants ${numRegistrants}`}
         >
           <RegistrantsIcon />
@@ -63,6 +65,10 @@ export default function NumRegistrants({
   );
 }
 
+NumRegistrants.defaultProps = {
+  openChallengesInNewTabs: false,
+};
+
 NumRegistrants.propTypes = {
   challenge: PT.shape({
     id: PT.oneOfType([PT.number, PT.string]).isRequired,
@@ -72,4 +78,5 @@ NumRegistrants.propTypes = {
   challengesUrl: PT.string.isRequired,
   newChallengeDetails: PT.bool.isRequired,
   selectChallengeDetailsTab: PT.func.isRequired,
+  openChallengesInNewTabs: PT.bool,
 };

src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/index.jsx

@@ -22,6 +22,7 @@ export default function NumSubmissions({
   challengesUrl,
   newChallengeDetails,
   selectChallengeDetailsTab,
+  openChallengesInNewTabs,
 }) {
   let tip;
   switch (numSubmissions) {
@@ -42,7 +43,7 @@ export default function NumSubmissions({
           <div styleName="tooltip">
             {tip}
           </div>
-)}
+        )}
       >
         <Link
           onClick={() => (
@@ -51,6 +52,7 @@ export default function NumSubmissions({
           )}
           styleName="link"
           to={link}
+          openNewTab={openChallengesInNewTabs}
         >
           <SubmissionsIcon />
           <span styleName="number">
@@ -61,6 +63,9 @@ export default function NumSubmissions({
     </div>
   );
 }
+NumSubmissions.defaultProps = {
+  openChallengesInNewTabs: false,
+};
 
 NumSubmissions.propTypes = {
   challenge: PT.shape({
@@ -72,4 +77,5 @@ NumSubmissions.propTypes = {
   challengesUrl: PT.string.isRequired,
   newChallengeDetails: PT.bool.isRequired,
   selectChallengeDetailsTab: PT.func.isRequired,
+  openChallengesInNewTabs: PT.bool,
 };

src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx

@@ -60,14 +60,14 @@ export default function ChallengeStatus(props) {
     newChallengeDetails,
     selectChallengeDetailsTab,
     userHandle,
+    openChallengesInNewTabs,
   } = props;
 
   /* TODO: Split into a separate ReactJS component! */
   function renderLeaderboard() {
     const {
       challenge,
       detailLink,
-      openChallengesInNewTabs,
     } = props;
 
     let winners = _.map(
@@ -121,7 +121,7 @@ export default function ChallengeStatus(props) {
         )}
         to={detailLink}
       >
-Results
+        Results
       </Link>
     );
   }
@@ -130,7 +130,6 @@ Results
     const {
       challenge,
       detailLink,
-      openChallengesInNewTabs,
     } = props;
     const timeDiff = getTimeLeft(challenge.allPhases.find(p => p.phaseType === 'Registration'));
     let timeNote = timeDiff.text;
@@ -149,10 +148,10 @@ Results
         target={openChallengesInNewTabs ? '_blank' : undefined}
       >
         <span>
-          { timeNote }
+          {timeNote}
         </span>
         <span styleName="to-register">
-to register
+          to register
         </span>
       </a>
     );
@@ -174,6 +173,7 @@ to register
               challengesUrl={challengesUrl}
               newChallengeDetails={newChallengeDetails}
               selectChallengeDetailsTab={selectChallengeDetailsTab}
+              openChallengesInNewTabs={openChallengesInNewTabs}
             />
           </div>
           <div styleName="spacing">
@@ -182,16 +182,17 @@ to register
               challengesUrl={challengesUrl}
               newChallengeDetails={newChallengeDetails}
               selectChallengeDetailsTab={selectChallengeDetailsTab}
+              openChallengesInNewTabs={openChallengesInNewTabs}
             />
           </div>
           {
             challenge.myChallenge
             && (
-            <div styleName="spacing">
-              <a styleName="link-forum past" href={`${FORUM_URL}${challenge.forumId}`}>
-                <ForumIcon />
-              </a>
-            </div>
+              <div styleName="spacing">
+                <a styleName="link-forum past" href={`${FORUM_URL}${challenge.forumId}`}>
+                  <ForumIcon />
+                </a>
+              </div>
             )
           }
         </span>
@@ -234,7 +235,7 @@ to register
     return (
       <div styleName={showRegisterInfo ? 'challenge-progress with-register-button' : 'challenge-progress'}>
         <span styleName="current-phase">
-          { phaseMessage }
+          {phaseMessage}
         </span>
         <span styleName="challenge-stats">
           <div styleName="spacing">
@@ -243,6 +244,7 @@ to register
               challengesUrl={challengesUrl}
               newChallengeDetails={newChallengeDetails}
               selectChallengeDetailsTab={selectChallengeDetailsTab}
+              openChallengesInNewTabs={openChallengesInNewTabs}
             />
           </div>
           <div styleName="spacing">
@@ -251,16 +253,17 @@ to register
               challengesUrl={challengesUrl}
               newChallengeDetails={newChallengeDetails}
               selectChallengeDetailsTab={selectChallengeDetailsTab}
+              openChallengesInNewTabs={openChallengesInNewTabs}
             />
           </div>
           {
             myChallenge
             && (
-            <div styleName="spacing">
-              <a styleName="link-forum" href={`${FORUM_URL}${forumId}`}>
-                <ForumIcon />
-              </a>
-            </div>
+              <div styleName="spacing">
+                <a styleName="link-forum" href={`${FORUM_URL}${forumId}`}>
+                  <ForumIcon />
+                </a>
+              </div>
             )
           }
         </span>