Self Service App -- approved challenges tab

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -89,13 +89,17 @@ const ChallengeViewTabs = ({
   const isSelfServiceCopilot = challenge.legacy.selfServiceCopilot === loggedInUser.handle
   const isAdmin = checkAdmin(token)
   const canApprove = isSelfServiceCopilot && isDraft && isSelfService
-  // only the copilot can launch AND
+  const hasBillingAccount = _.get(projectDetail, 'billingAccountId') !== null
+  // only challenges that have a billing account can be launched AND
   // if this isn't self-service, permit launching if the challenge is draft
-  // OR if this is self-service, permit launching if the challenge is approved
-  const hasBA = _.get(projectDetail, 'billingAccountId') !== null
-  const canLaunch = hasBA && ((!isSelfService && isDraft) || ((isSelfServiceCopilot || isAdmin) && challenge.status.toUpperCase() === CHALLENGE_STATUS.APPROVED))
-  console.log(`can launch ${_.isEmpty(_.get(projectDetail, 'billingAccountId'))}`)
-  console.log(_.get(projectDetail, 'billingAccountId'))
+  // OR if this isn't a non-self-service draft, permit launching if:
+  // a) the current user is either the self-service copilot or is an admin AND
+  // b) the challenge is approved
+  const canLaunch = hasBillingAccount &&
+    ((!isSelfService && isDraft) ||
+      ((isSelfServiceCopilot || isAdmin) &&
+        challenge.status.toUpperCase() === CHALLENGE_STATUS.APPROVED))
+
   return (
     <div className={styles.list}>
       <Helmet title='View Details' />

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -166,6 +166,7 @@ const hoverComponents = (challenge, onUpdateLaunch, deleteModalLaunch) => {
 const renderStatus = (status, getStatusText) => {
   switch (status) {
     case CHALLENGE_STATUS.ACTIVE:
+    case CHALLENGE_STATUS.APPROVED:
     case CHALLENGE_STATUS.NEW:
     case CHALLENGE_STATUS.DRAFT:
     case CHALLENGE_STATUS.COMPLETED:

src/components/ChallengesComponent/ChallengeList/index.js

@@ -129,11 +129,12 @@ class ChallengeList extends Component {
 
     let selectedTab = 0
     switch (status) {
+      case CHALLENGE_STATUS.APPROVED:
       case CHALLENGE_STATUS.NEW:
         selectedTab = 1
         break
       case CHALLENGE_STATUS.DRAFT:
-        selectedTab = selfService ? 1 : 2
+        selectedTab = 2
         break
       case CHALLENGE_STATUS.COMPLETED:
         selectedTab = 3
@@ -184,7 +185,7 @@ class ChallengeList extends Component {
                 break
               }
               case 1: {
-                const status = selfService ? CHALLENGE_STATUS.DRAFT : CHALLENGE_STATUS.NEW
+                const status = selfService ? CHALLENGE_STATUS.APPROVED : CHALLENGE_STATUS.NEW
                 this.directUpdateSearchParam(searchText, status)
                 break
               }
@@ -204,14 +205,14 @@ class ChallengeList extends Component {
           }}>
           <TabList>
             <Tab>{(selfService ? 'Assigned challenges' : 'Active')}</Tab>
-            {(!selfService && <Tab>New</Tab>)}
+            <Tab>{(selfService ? 'Approved' : 'New')}</Tab>
             <Tab>{this.getStatusTextFunc(selfService)(CHALLENGE_STATUS.DRAFT)}</Tab>
             {(!selfService && <Tab>Completed</Tab>)}
             {(!selfService && <Tab>Cancelled</Tab>)}
           </TabList>
           <TabPanel />
           <TabPanel />
-          {(!selfService && <TabPanel />)}
+          <TabPanel />
         </Tabs>)}
         {
           challenges.length === 0 && (

src/components/ChallengesComponent/ChallengeStatus/index.js

@@ -12,6 +12,7 @@ import styles from './ChallengeStatus.module.scss'
 
 const statuses = {
   [CHALLENGE_STATUS.ACTIVE]: styles.green,
+  [CHALLENGE_STATUS.APPROVED]: styles.yellow,
   [CHALLENGE_STATUS.NEW]: styles.yellow,
   [CHALLENGE_STATUS.DRAFT]: styles.gray,
   [CHALLENGE_STATUS.COMPLETED]: styles.blue