Merge pull request #6573 from topcoder-platform/develop

Release v1.17.8
topcoder-platform · Jul 1, 2022 · 18a82aa · 18a82aa
2 parents 0994dc0 + aa038e9
commit 18a82aa
Show file tree

Hide file tree

Showing 18 changed files with 1,078 additions and 77 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -356,7 +356,7 @@ workflows:
           filters:
             branches:
               only:
-                - tco23
+                - free
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global
@@ -370,7 +370,6 @@ workflows:
           filters:
             branches:
               only:
-                - footer-update
                 - reskin-profile
       # This is stage env for production QA releases
       - "build-prod-staging":
@@ -380,6 +379,7 @@ workflows:
               only:
                 - develop
                 - fix-security-headers
+                - tco23-BS-comps
       # Production builds are exectuted
       # when PR is merged to the master
       # Don't change anything in this configuration

diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap
@@ -36,7 +36,9 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-rank___3kfOx"
       >
-        1
+        <span>
+          1
+        </span>
       </td>
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-avatar___3VhCz"
@@ -55,7 +57,8 @@ exports[`Matches shallow shapshot 1`] = `
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
       >
         <a
-          href="undefined/members/undefined/"
+          href="https://www.topcoder-dev.com/members/undefined/"
+          rel="noreferrer"
           style={
             Object {
               "color": null,
@@ -71,7 +74,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -88,7 +91,9 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-rank___3kfOx"
       >
-        1
+        <span>
+          1
+        </span>
       </td>
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-avatar___3VhCz"
@@ -107,7 +112,8 @@ exports[`Matches shallow shapshot 1`] = `
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
       >
         <a
-          href="undefined/members/undefined/"
+          href="https://www.topcoder-dev.com/members/undefined/"
+          rel="noreferrer"
           style={
             Object {
               "color": null,
@@ -123,7 +129,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -140,7 +146,9 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-rank___3kfOx"
       >
-        1
+        <span>
+          1
+        </span>
       </td>
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-avatar___3VhCz"
@@ -159,7 +167,8 @@ exports[`Matches shallow shapshot 1`] = `
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
       >
         <a
-          href="undefined/members/undefined/"
+          href="https://www.topcoder-dev.com/members/undefined/"
+          rel="noreferrer"
           style={
             Object {
               "color": null,
@@ -175,7 +184,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>
@@ -192,7 +201,9 @@ exports[`Matches shallow shapshot 1`] = `
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-rank___3kfOx"
       >
-        1
+        <span>
+          1
+        </span>
       </td>
       <td
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-avatar___3VhCz"
@@ -211,7 +222,8 @@ exports[`Matches shallow shapshot 1`] = `
         className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__col-handle___1wDhG"
       >
         <a
-          href="undefined/members/undefined/"
+          href="https://www.topcoder-dev.com/members/undefined/"
+          rel="noreferrer"
           style={
             Object {
               "color": null,
@@ -227,7 +239,7 @@ exports[`Matches shallow shapshot 1`] = `
              points
           </span>
           <span>
-             challenges
+            undefined challenges
           </span>
         </div>
       </td>

diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap
@@ -2,18 +2,18 @@
 
 exports[`Matches shallow shapshot 1`] = `
 <div
-  className="src-shared-components-Leaderboard-Podium-___styles__Podium___2rb4T"
+  className="src-shared-components-Leaderboard-Podium-themes-___default__Podium___1qIZm"
 >
   <div
-    className="src-shared-components-Leaderboard-Podium-___styles__PodiumWrap___2Czwe"
+    className="src-shared-components-Leaderboard-Podium-themes-___default__PodiumWrap___2hDWP"
     style={
       Object {
         "justify-content": "space-between",
       }
     }
   >
     <div
-      className="src-shared-components-Leaderboard-Podium-___styles__podium-column___rPHl-"
+      className="src-shared-components-Leaderboard-Podium-themes-___default__podium-column___2Zi0Z"
     >
       <PodiumSpot
         competitor={
@@ -33,7 +33,7 @@ exports[`Matches shallow shapshot 1`] = `
       />
     </div>
     <div
-      className="src-shared-components-Leaderboard-Podium-___styles__podium-column___rPHl-"
+      className="src-shared-components-Leaderboard-Podium-themes-___default__podium-column___2Zi0Z"
     >
       <PodiumSpot
         competitor={
@@ -53,7 +53,7 @@ exports[`Matches shallow shapshot 1`] = `
       />
     </div>
     <div
-      className="src-shared-components-Leaderboard-Podium-___styles__podium-column___rPHl-"
+      className="src-shared-components-Leaderboard-Podium-themes-___default__podium-column___2Zi0Z"
     >
       <PodiumSpot
         competitor={
@@ -73,7 +73,7 @@ exports[`Matches shallow shapshot 1`] = `
       />
     </div>
     <div
-      className="src-shared-components-Leaderboard-Podium-___styles__podium-column___rPHl-"
+      className="src-shared-components-Leaderboard-Podium-themes-___default__podium-column___2Zi0Z"
     >
       <PodiumSpot
         competitor={
@@ -98,10 +98,10 @@ exports[`Matches shallow shapshot 1`] = `
 
 exports[`Matches shallow shapshot 2`] = `
 <div
-  className="src-shared-components-Leaderboard-Podium-___styles__Podium___2rb4T"
+  className="src-shared-components-Leaderboard-Podium-themes-___default__Podium___1qIZm"
 >
   <div
-    className="src-shared-components-Leaderboard-Podium-___styles__PodiumWrap___2Czwe"
+    className="src-shared-components-Leaderboard-Podium-themes-___default__PodiumWrap___2hDWP"
     style={Object {}}
   />
 </div>

diff --git a/src/shared/components/Contentful/Tabs/themes/underline.scss b/src/shared/components/Contentful/Tabs/themes/underline.scss
@@ -8,7 +8,7 @@ $text-color-pannel: #4a4a4a;
 .container {
   @include roboto-regular;
 
-  max-width: $screen-md;
+  max-width: $screen-lg;
   margin: auto;
 }
 
@@ -98,6 +98,6 @@ $text-color-pannel: #4a4a4a;
   display: block;
 
   @include xs-to-sm {
-    padding: 0 15px;
+    // padding: 0 15px;
   }
 }
diff --git a/src/shared/components/Contentful/_brackets.scss b/src/shared/components/Contentful/_brackets.scss
@@ -154,6 +154,10 @@
     color: #0d61bf;
     text-decoration: none;
 
+    @include sm {
+      text-decoration: underline;
+    }
+
     &:hover {
       text-decoration: none;
       color: #0d61bf;

diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx
@@ -5,9 +5,16 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import { config } from 'topcoder-react-utils';
 import cn from 'classnames';
 import _ from 'lodash';
-import theme from './styles.scss';
 import PodiumSpot from '../PodiumSpot';
 
+import defaultTheme from './themes/styles.scss';
+import tco23Theme from './themes/tco23.scss';
+
+const THEMES = {
+  Default: defaultTheme,
+  TCO23: tco23Theme,
+};
+
 class ChallengeHistoryModal extends Component {
   constructor(props) {
     super(props);
@@ -34,31 +41,49 @@ class ChallengeHistoryModal extends Component {
     const challengesOrdered = _.orderBy(challenges, [sortParam.field], [sortParam.order]);
     const placeLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.placement' : 'place';
     const pointsLabel = competitor['member_profile_basic.handle'] ? 'tco_leaderboard.tco_points' : 'points';
+    const styles = THEMES[themeName] || THEMES.Default;
+    /* eslint-disable no-confusing-arrow */
+    const sortInner = () => themeName === 'TCO23' ? (
+      <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fillRule="evenodd" clipRule="evenodd" d="M3.26721 0.267169C3.48786 0.046523 3.84559 0.046523 4.06624 0.267169L6.73291 2.93384C6.95355 3.15448 6.95355 3.51222 6.73291 3.73287C6.51226 3.95351 6.15452 3.95351 5.93388 3.73287L4.23173 2.03072V8.66668C4.23173 8.97873 3.97877 9.23168 3.66673 9.23168C3.35468 9.23168 3.10173 8.97873 3.10173 8.66668V2.03072L1.39957 3.73287C1.17893 3.95351 0.821189 3.95351 0.600543 3.73287C0.379897 3.51222 0.379897 3.15448 0.600543 2.93384L3.26721 0.267169ZM9.76839 3.33335C9.76839 3.02131 10.0214 2.76835 10.3334 2.76835C10.6454 2.76835 10.8984 3.02131 10.8984 3.33335V9.96932L12.6005 8.26717C12.8212 8.04652 13.1789 8.04652 13.3996 8.26717C13.6202 8.48781 13.6202 8.84555 13.3996 9.0662L10.7329 11.7329C10.5123 11.9535 10.1545 11.9535 9.93388 11.7329L7.26721 9.0662C7.04656 8.84555 7.04656 8.48781 7.26721 8.26717C7.48786 8.04652 7.84559 8.04652 8.06624 8.26717L9.76839 9.96932V3.33335Z" fill="#767676" />
+      </svg>
+    ) : (
+      <div>
+        <div className={cn(styles['sort-up'], {
+          active: sortParam.field === pointsLabel && sortParam.order === styles.asc,
+        })}
+        />
+        <div className={cn(styles['sort-down'], {
+          active: sortParam.field === pointsLabel && sortParam.order === styles.desc,
+        })}
+        />
+      </div>
+    );
 
     return (
-      <Modal onCancel={onCancel} theme={theme}>
+      <Modal onCancel={onCancel} theme={THEMES[themeName] || THEMES.Default}>
         <h3>
           Completed Challenges History
         </h3>
-        <div styleName="podium-spot-wrapper">
+        <div className={styles['podium-spot-wrapper']}>
           <PodiumSpot
             competitor={competitor}
             isCopilot={isCopilot}
             isAlgo={isAlgo}
             themeName={themeName}
           />
         </div>
-        <table styleName="history-table">
+        <table className={styles['history-table']}>
           <thead>
             <tr>
               <th>Challenge Name</th>
               {
                 !isCopilot ? (
                   <th>
-                    <div styleName="header-table-content">
+                    <div className={styles['header-table-content']}>
                       <span>Placement</span>
                       <button
-                        styleName="sort-container"
+                        className={styles['sort-container']}
                         onClick={() => {
                           if (!sortParam.field || sortParam.field !== placeLabel) {
                             sortParam.field = placeLabel;
@@ -70,24 +95,17 @@ class ChallengeHistoryModal extends Component {
                         }}
                         type="button"
                       >
-                        <div styleName={cn('sort-up', {
-                          active: sortParam.field === placeLabel && sortParam.order === 'asc',
-                        })}
-                        />
-                        <div styleName={cn('sort-down', {
-                          active: sortParam.field === placeLabel && sortParam.order === 'desc',
-                        })}
-                        />
+                        { sortInner() }
                       </button>
                     </div>
                   </th>
                 ) : null
               }
               <th>
-                <div styleName="header-table-content">
+                <div className={styles['header-table-content']}>
                   <span>Points</span>
                   <button
-                    styleName="sort-container"
+                    className={styles['sort-container']}
                     onClick={() => {
                       if (!sortParam.field || sortParam.field !== pointsLabel) {
                         sortParam.field = pointsLabel;
@@ -99,14 +117,7 @@ class ChallengeHistoryModal extends Component {
                     }}
                     type="button"
                   >
-                    <div styleName={cn('sort-up', {
-                      active: sortParam.field === pointsLabel && sortParam.order === 'asc',
-                    })}
-                    />
-                    <div styleName={cn('sort-down', {
-                      active: sortParam.field === pointsLabel && sortParam.order === 'desc',
-                    })}
-                    />
+                    { sortInner() }
                   </button>
                 </div>
               </th>
@@ -115,19 +126,19 @@ class ChallengeHistoryModal extends Component {
           <tbody>
             {
               challengesOrdered.map(challenge => (
-                <tr styleName="row" key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
-                  <td styleName="name">
-                    <a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} styleName="link" target="_blank" rel="noopener noreferrer">
+                <tr className={styles.row} key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
+                  <td className={styles.name}>
+                    <a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} className={styles.link} target="_blank" rel="noopener noreferrer">
                       {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}
                     </a>
                   </td>
                   {
                     !isCopilot ? (
-                      <td styleName="placement">{challenge['tco_leaderboard.placement'] || challenge.place}</td>
+                      <td className={styles.placement}>{challenge['tco_leaderboard.placement'] || challenge.place}<span>placement</span></td>
                     ) : null
                   }
-                  <td styleName="points">
-                    {challenge['tco_leaderboard.tco_points'] || challenge.points}
+                  <td className={styles.points}>
+                    {challenge['tco_leaderboard.tco_points'] || challenge.points}<span>points</span>
                   </td>
                 </tr>
               ))
@@ -142,8 +153,8 @@ class ChallengeHistoryModal extends Component {
             <center><strong>No data available.</strong></center>
           )
         }
-        <div styleName="buttons">
-          <button onClick={onCancel} type="button" styleName="close-btn">
+        <div className={styles.buttons}>
+          <button onClick={onCancel} type="button" className={styles['close-btn']}>
             Return to page
           </button>
         </div>