Merge pull request #5104 from topcoder-platform/dedywahyudi/4029-4994-5102

PR for 4029, 4994, 5102

Author: luizrrodrigues

config/default.js

@@ -135,6 +135,9 @@ module.exports = {
       STUDIO_FONTS_POLICY:
         'http://help.topcoder.com/hc/en-us/articles/217959447-Font-Policy-for-Design-Challenges',
       TOPCODER_TERMS: 'https://www.topcoder.com/community/how-it-works/terms/',
+      HOWTOCOMPETEINMARATHON: 'https://www.topcoder.com/thrive/articles/How%20To%20Compete%20in%20a%20Marathon%20Match',
+      USABLECODEDEV: 'https://www.topcoder.com/thrive/articles/Usable%20Code%20in%20Dev%20Challenges',
+      EXTENSIONVSCODE: 'https://marketplace.visualstudio.com/items?itemName=Topcoder.topcoder-workflow&ssr=false#overview',
     },
 
     IOS: 'https://ios.topcoder-dev.com',

src/shared/components/challenge-detail/Specification/SideBar/index.jsx

@@ -88,6 +88,28 @@ export default function SideBar({
     </div>
   );
 
+  const usableCodeArticle = (
+    <div styleName="tctooltiptext tooltiptextapproval">
+      <h4>
+        Useable Code Rules
+      </h4>
+      <p>
+        A set of guidelines to help determine if code is acceptable or not.
+      </p>
+    </div>
+  );
+
+  const vscodeTip = (
+    <div styleName="tctooltiptext tooltiptextapproval">
+      <h4>
+        Topcoder Extension for VSCode
+      </h4>
+      <p>
+        Shortcuts to perform actions related to Topcoder platform without having to open a browser
+      </p>
+    </div>
+  );
+
   return (
     <div styleName="challenge-spec-sidebar">
       <div styleName="challenge-sidebar-inner">
@@ -197,9 +219,45 @@ export default function SideBar({
               </span>
               )
             }
+            {
+              !isDesign && (
+              <span styleName="link-like-paragraph tooltip-container">
+                <a
+                  href={config.URL.INFO.USABLECODEDEV}
+                  title="Useable Code Rules"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Useable Code Rules
+                </a>
+                <Tooltip id="usablecode-tip" content={usableCodeArticle} className={styles['tooltip-overlay']} trigger={['hover', 'focus']}>
+                  <div styleName="tctooltip" tabIndex="0" role="button" aria-describedby="usablecode-tip">
+                    ?
+                  </div>
+                </Tooltip>
+              </span>
+              )
+            }
           </div>
           )
         }
+        { isMM && (
+          <div>
+            <h2>
+              CHALLENGE LINKS:
+            </h2>
+            <p styleName="link-like-paragraph">
+              <a
+                href={config.URL.INFO.HOWTOCOMPETEINMARATHON}
+                title="How To Compete in a Marathon Match"
+                target="_blank"
+                rel="noreferrer"
+              >
+                How To Compete in a Marathon Match
+              </a>
+            </p>
+          </div>
+        )}
         {
           isDesign
           && (
@@ -331,6 +389,26 @@ export default function SideBar({
           </div>
           )
         }
+        <div>
+          <h2>
+            TOOLBOX:
+          </h2>
+          <span styleName="link-like-paragraph tooltip-container">
+            <a
+              href={config.URL.INFO.EXTENSIONVSCODE}
+              title="Topcoder Extension for VSCode"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Topcoder Extension <br /> for VSCode
+            </a>
+            <Tooltip id="vscode-tip" content={vscodeTip} className={styles['tooltip-overlay']} trigger={['hover', 'focus']}>
+              <div styleName="tctooltip" tabIndex="0" role="button" aria-describedby="vscode-tip">
+                ?
+              </div>
+            </Tooltip>
+          </span>
+        </div>
         { shareable && (
           <div>
             <h2>

src/shared/components/challenge-detail/Specification/SideBar/styles.scss

@@ -1,5 +1,9 @@
 @import "mixins";
 
+.no-margin-top {
+  margin-top: -10px !important;
+}
+
 .challenge-spec-sidebar {
   background: $tc-dark-blue-10;
   width: 245px;