Prod Update - Disable activate and legacy links on listing page

package.json

@@ -91,7 +91,7 @@
     "sass-loader": "7.1.0",
     "simplemde": "^1.11.2",
     "style-loader": "0.23.0",
-    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.1",
+    "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.3",
     "terser": "^3.16.1",
     "terser-webpack-plugin": "1.1.0",
     "topcoder-healthcheck-dropin": "^1.0.3",

src/components/ChallengeEditor/ChallengeView/index.js

@@ -22,6 +22,7 @@ import LegacyLinks from '../../LegacyLinks'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
 import Tooltip from '../../Tooltip'
+import { MESSAGE } from '../../../config/constants'
 
 const ChallengeView = ({
   projectDetail,
@@ -78,7 +79,7 @@ const ChallengeView = ({
               {challenge.legacyId ? (
                 <PrimaryButton text={'Launch'} type={'info'} onClick={onLaunchChallenge} />
               ) : (
-                <Tooltip content='Legacy project is not yet created'>
+                <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
                   {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
                   <PrimaryButton text={'Launch'} type={'disabled'} />
                 </Tooltip>

src/components/ChallengeEditor/index.js

@@ -16,7 +16,8 @@ import {
   DEFAULT_TERM_UUID,
   DEFAULT_NDA_UUID,
   SUBMITTER_ROLE_UUID,
-  CREATE_FORUM_TYPE_IDS
+  CREATE_FORUM_TYPE_IDS,
+  MESSAGE
 } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
 import TrackField from './Track-Field'
@@ -1200,7 +1201,7 @@ class ChallengeEditor extends Component {
                   {challenge.legacyId ? (
                     <PrimaryButton text={'Launch as Active'} type={'info'} onClick={this.toggleLaunch} />
                   ) : (
-                    <Tooltip content='Legacy project is not yet created'>
+                    <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
                       {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
                       <PrimaryButton text={'Launch as Active'} type={'disabled'} />
                     </Tooltip>

src/components/ChallengesComponent/ChallengeCard/ChallengeCard.module.scss

@@ -49,6 +49,13 @@
           text-decoration-line: underline;
         }
 
+        span.link,
+        span.link:hover,
+        span.link:visited {
+          color: $inactive;
+          cursor: default;
+        }
+
         &.onlyOne {
           justify-content: center;
         }
@@ -160,6 +167,13 @@
       text-decoration-line: underline;
     }
 
+    span.link,
+    span.link:hover,
+    span.link:visited {
+      color: $inactive;
+      cursor: default;
+    }
+
     &.onlyOne {
       justify-content: center;
     }
@@ -171,14 +185,19 @@
       height: 100%;
       justify-content: center;
 
-      span {
+      span.linkDivider {
         margin: 0 5px;
       }
 
       .linkGroupLeftBottom {
-        a {
+        a,
+        span {
           font-size: 12px;
         }
+
+        span.linkDivider {
+          font-size: 16px;
+        }
       }
     }
   }
@@ -227,6 +246,15 @@
     align-items: center;
     color: $status-green;
   }
+
+  &.activateButtonDisabled {
+    border-color: $inactive;
+    cursor: default;
+
+    > span {
+      color: $inactive;
+    }
+  }
 }
 
 .icon {

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -14,10 +14,11 @@ import ChallengeStatus from '../ChallengeStatus'
 import ChallengeTag from '../ChallengeTag'
 import styles from './ChallengeCard.module.scss'
 import { getFormattedDuration, formatDate } from '../../../util/date'
-import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, ONLINE_REVIEW_URL } from '../../../config/constants'
+import { CHALLENGE_STATUS, COMMUNITY_APP_URL, DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../../config/constants'
 import { patchChallenge } from '../../../services/challenges'
 import ConfirmationModal from '../../Modal/ConfirmationModal'
 import AlertModal from '../../Modal/AlertModal'
+import Tooltip from '../../Tooltip'
 
 const theme = {
   container: styles.modalContainer
@@ -96,68 +97,58 @@ const getPhaseInfo = (c) => {
  * @param onUpdateLaunch
  * @returns {*}
  */
-const hoverComponents = (challenge, onUpdateLaunch, showError) => {
+const hoverComponents = (challenge, onUpdateLaunch) => {
   const communityAppUrl = `${COMMUNITY_APP_URL}/challenges/${challenge.id}`
   const directUrl = `${DIRECT_PROJECT_URL}/contest/detail?projectId=${challenge.legacyId}`
   const orUrl = `${ONLINE_REVIEW_URL}/review/actions/ViewProjectDetails?pid=${challenge.legacyId}`
-  const showLegacyError = () => {
-    if (showError) {
-      showError((<span>The legacy processor has not yet given this challenge a legacy ID. Please wait a few minutes or contact <a href='mailto: support@topcoder.com'>support@topcoder.com</a></span>))
-    }
+
+  // NEW projects never have Legacy challenge created, so don't show links and "Activate" button for them at all
+  if (challenge.status.toUpperCase() === CHALLENGE_STATUS.NEW) {
+    return null
   }
 
-  switch (challenge.status.toUpperCase()) {
-    case CHALLENGE_STATUS.DRAFT:
-    case CHALLENGE_STATUS.ACTIVE:
-    default:
-      return challenge.legacyId ? (
-        <div className={styles.linkGroup}>
-          <div className={styles.linkGroupLeft} onClick={() => {
-            window.location.href = communityAppUrl
-          }}>
-            <a className={styles.link} href={communityAppUrl}>View Challenge</a>
-            <div className={styles.linkGroupLeftBottom}>
-              <a onClick={(e) => e.stopPropagation()} className={styles.link} href={directUrl} target='_blank'>Direct</a>
-              <span>|</span>
-              <a onClick={(e) => e.stopPropagation()} className={styles.link} href={orUrl} target='_blank'>OR</a>
-            </div>
-          </div>
-          {
-            challenge.status === 'Draft' && (
-              <button className={styles.activateButton} onClick={() => onUpdateLaunch()}>
-                <span>Activate</span>
-              </button>
-            )
-          }
+  return challenge.legacyId ? (
+    <div className={styles.linkGroup}>
+      <div className={styles.linkGroupLeft}>
+        <a className={styles.link} href={communityAppUrl} target='_blank'>View Challenge</a>
+        <div className={styles.linkGroupLeftBottom}>
+          <a className={styles.link} href={directUrl} target='_blank'>Direct</a>
+          <span className={styles.linkDivider}>|</span>
+          <a className={styles.link} href={orUrl} target='_blank'>OR</a>
         </div>
-      ) : (
-        <div className={styles.linkGroup}>
-          <div className={styles.linkGroupLeft} onClick={() => {
-            window.location.href = communityAppUrl
-          }}>
-            <a className={styles.link} href={communityAppUrl}>View Challenge</a>
-            <div className={styles.linkGroupLeftBottom}>
-              <a onClick={(e) => {
-                e.stopPropagation()
-                showLegacyError()
-              }} className={styles.link}>Direct</a>
-              <span>|</span>
-              <a onClick={(e) => {
-                e.stopPropagation()
-                showLegacyError()
-              }} className={styles.link}>OR</a>
-            </div>
-          </div>
-          {
-            challenge.status === 'Draft' && (
-              <button className={styles.activateButton} onClick={() => onUpdateLaunch()}>
-                <span>Activate</span>
-              </button>
-            )
-          }
+      </div>
+      {challenge.status.toUpperCase() === CHALLENGE_STATUS.DRAFT && (
+        <button className={styles.activateButton} onClick={() => onUpdateLaunch()}>
+          <span>Activate</span>
+        </button>
+      )}
+    </div>
+  ) : (
+    <div className={styles.linkGroup}>
+      <div className={styles.linkGroupLeft}>
+        <a className={styles.link} href={communityAppUrl}>View Challenge</a>
+        <div className={styles.linkGroupLeftBottom}>
+          <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
+            <span className={styles.link}>Direct</span>
+          </Tooltip>
+          <span className={styles.linkDivider}>|</span>
+          <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
+            <span className={styles.link}>OR</span>
+          </Tooltip>
         </div>
-      )
-  }
+      </div>
+      {
+        challenge.status === 'Draft' && (
+          <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
+            {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
+            <button className={cn(styles.activateButton, styles.activateButtonDisabled)}>
+              <span>Activate</span>
+            </button>
+          </Tooltip>
+        )
+      }
+    </div>
+  )
 }
 
 const renderStatus = (status) => {

src/components/LegacyLinks/index.js

@@ -4,7 +4,7 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styles from './LegacyLinks.module.scss'
-import { DIRECT_PROJECT_URL, ONLINE_REVIEW_URL } from '../../config/constants'
+import { DIRECT_PROJECT_URL, MESSAGE, ONLINE_REVIEW_URL } from '../../config/constants'
 import PrimaryButton from '../Buttons/PrimaryButton'
 import Tooltip from '../Tooltip'
 
@@ -28,11 +28,11 @@ const LegacyLinks = ({ challenge }) => {
         </>
       ) : (
         <>
-          <Tooltip content='Legacy project is not yet created'>
+          <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
             {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
             <PrimaryButton text={'Direct'} type={'disabled'} />
           </Tooltip>
-          <Tooltip content='Legacy project is not yet created'>
+          <Tooltip content={MESSAGE.NO_LEGACY_CHALLENGE}>
             {/* Don't disable button for real inside tooltip, otherwise mouseEnter/Leave events work not good */}
             <PrimaryButton text={'Online Review'} type={'disabled'} />
           </Tooltip>

src/config/constants.js

@@ -176,3 +176,12 @@ export const GROUPS_DROPDOWN_PER_PAGE = 1000000 // make sure we are getting all
  * The list of challenge types which can have multiple prizes
  */
 export const CHALLENGE_TYPES_WITH_MULTIPLE_PRIZES = ['Challenge']
+
+/**
+ * All the repeating messages.
+ *
+ * To have the same wording across the app.
+ */
+export const MESSAGE = {
+  NO_LEGACY_CHALLENGE: 'Legacy challenge is not yet created'
+}