From 93674aade111d0cd3bdfc912465e39934c273309 Mon Sep 17 00:00:00 2001
From: Cagdas U <cagdasugurlu01@gmail.com>
Date: Tue, 21 Jul 2020 19:23:24 +0300
Subject: [PATCH] feat(challenge-detail): add legacy challenge id

Add legacy challenge id at the bottom right corner of the
challenge-detail/Specification/SideBar component.

Addresses topcoder-platform/community-app#4658
---
 package-lock.json                                  | 14 +++++++-------
 .../Specification/SideBar/index.jsx                |  8 ++++++++
 .../Specification/SideBar/styles.scss              |  9 +++++++++
 .../challenge-detail/Specification/index.jsx       |  3 +++
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3122e01993..aa252ca38d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33086,9 +33086,9 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "topcoder-react-lib": {
-      "version": "1000.19.4",
-      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1000.19.4.tgz",
-      "integrity": "sha512-dFvF1J0JLsI26v4+s9JzS7gRUYzrb1zGeRTlFk+rGkV+PP0LuXZdAwQqpNMYk3CE/qUtt9brdtAljIFu9g+tJg==",
+      "version": "1000.19.35",
+      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1000.19.35.tgz",
+      "integrity": "sha512-oic46dl2f5FeJp2BPacWj6xgFmvvP07P8t/L/rHjn0SvmIc977TDSHrHD3yrZisd3NiAnd6YfNJnfj4zS/mfRA==",
       "requires": {
         "auth0-js": "^6.8.4",
         "config": "^3.2.0",
@@ -33211,12 +33211,12 @@
           },
           "dependencies": {
             "auth0-js": {
-              "version": "9.13.2",
-              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.13.2.tgz",
-              "integrity": "sha512-gWlf+X3XhCT9JboYpGviflv0pHcaHFPGtkLXiebyJohHDKddiu2rZkezp9kZHEoXqxhtNqgWuuaXkcla5JtnXg==",
+              "version": "9.13.4",
+              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.13.4.tgz",
+              "integrity": "sha512-G7wXTtEUe8OG5UMdcFPoS47odorEZ3WerNyWLLhoGlLqYcPgv0t+B0ECHv/rVLULbpctbSBrRFFYa43/bJV4+Q==",
               "requires": {
                 "base64-js": "^1.3.0",
-                "idtoken-verifier": "^2.0.2",
+                "idtoken-verifier": "^2.0.3",
                 "js-cookie": "^2.2.0",
                 "qs": "^6.7.0",
                 "superagent": "^3.8.3",
diff --git a/src/shared/components/challenge-detail/Specification/SideBar/index.jsx b/src/shared/components/challenge-detail/Specification/SideBar/index.jsx
index 1c1ed3841e..c945832dbb 100644
--- a/src/shared/components/challenge-detail/Specification/SideBar/index.jsx
+++ b/src/shared/components/challenge-detail/Specification/SideBar/index.jsx
@@ -16,6 +16,7 @@ import styles from './styles.scss';
 
 export default function SideBar({
   challengesUrl,
+  legacyId,
   documents,
   eventDetail,
   shareable,
@@ -338,6 +339,11 @@ export default function SideBar({
             <ShareSocial />
           </div>
         )}
+        { legacyId && (
+          <div styleName="legacy-challenge-id">
+            <h3>ID: {legacyId}</h3>
+          </div>
+        )}
       </div>
     </div>
   );
@@ -357,10 +363,12 @@ SideBar.defaultProps = {
   metadata: {},
   reviewScorecardId: '',
   screeningScorecardId: '',
+  legacyId: '',
 };
 
 SideBar.propTypes = {
   challengesUrl: PT.string.isRequired,
+  legacyId: PT.string,
   eventDetail: PT.shape({
     eventName: PT.string.isRequired,
     description: PT.string.isRequired,
diff --git a/src/shared/components/challenge-detail/Specification/SideBar/styles.scss b/src/shared/components/challenge-detail/Specification/SideBar/styles.scss
index 3dd89ef03e..21f565ec82 100644
--- a/src/shared/components/challenge-detail/Specification/SideBar/styles.scss
+++ b/src/shared/components/challenge-detail/Specification/SideBar/styles.scss
@@ -117,6 +117,15 @@
     @include linkLikeParagraph;
   }
 
+  .legacy-challenge-id {
+    h3 {
+      color: $tc-gray-10;
+      font-style: italic;
+    }
+
+    text-align: right;
+  }
+
   ol {
     @include roboto-regular;
 
diff --git a/src/shared/components/challenge-detail/Specification/index.jsx b/src/shared/components/challenge-detail/Specification/index.jsx
index fcaa3ce798..a3f4fca66c 100644
--- a/src/shared/components/challenge-detail/Specification/index.jsx
+++ b/src/shared/components/challenge-detail/Specification/index.jsx
@@ -43,6 +43,7 @@ export default function ChallengeDetailsView(props) {
     privateDescription,
     descriptionFormat,
     legacy,
+    legacyId,
     documents,
     finalSubmissionGuidelines,
     userDetails,
@@ -365,6 +366,7 @@ export default function ChallengeDetailsView(props) {
         </div>
         <SideBar
           challengesUrl={challengesUrl}
+          legacyId={legacyId}
           forumLink={forumLink}
           documents={documents}
           hasRegistered={hasRegistered}
@@ -421,6 +423,7 @@ ChallengeDetailsView.propTypes = {
       screeningScorecardId: PT.string,
       forumId: PT.number,
     }),
+    legacyId: PT.string,
     groups: PT.any,
     reviewType: PT.string,
     tags: PT.arrayOf(PT.string),