Merge pull request #1272 from doctorhilarius/self-service-opps

Self-Service Opportunities List

Author: ThomasKranitsas

package-lock.json

@@ -58,7 +58,7 @@ import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '..
 /**
  * Loads active challenges of project by page
  */
-export function loadChallengesByPage (page, projectId, status, filterChallengeName = null) {
+export function loadChallengesByPage (page, projectId, status, filterChallengeName = null, selfService = false) {
   return (dispatch, getState) => {
     dispatch({
       type: LOAD_CHALLENGES_PENDING,
@@ -85,6 +85,9 @@ export function loadChallengesByPage (page, projectId, status, filterChallengeNa
     } else if (!(_.isInteger(projectId) && projectId > 0)) {
       filters['status'] = 'Active'
     }
+    if (selfService) {
+      filters.selfService = true
+    }
 
     return fetchChallenges(filters, {
       page,

src/actions/challenges.js

@@ -52,6 +52,18 @@ export function loadProjects (filterProjectName = '', myProjects = true) {
   }
 }
 
+/**
+ * Unlads projects of the authenticated user
+ */
+export function unloadProjects () {
+  return (dispatch) => {
+    dispatch({
+      type: LOAD_PROJECTS_SUCCESS,
+      projects: []
+    })
+  }
+}
+
 /**
  * Reset active params. e.g activeProjectId
  */

src/actions/sidebar.js

@@ -276,7 +276,7 @@ class ChallengeCard extends React.Component {
 
   render () {
     const { isLaunch, isConfirm, isSaving, isDeleteLaunch, isCheckChalengePermission, hasEditChallengePermission } = this.state
-    const { challenge, shouldShowCurrentPhase, reloadChallengeList, isBillingAccountExpired } = this.props
+    const { challenge, shouldShowCurrentPhase, reloadChallengeList, isBillingAccountExpired, disableHover } = this.props
     const { phaseMessage, endTime } = getPhaseInfo(challenge)
     const deleteMessage = isCheckChalengePermission
       ? 'Checking permissions...'
@@ -313,7 +313,7 @@ class ChallengeCard extends React.Component {
           />
         )
         }
-        { isLaunch && isConfirm && (
+        {isLaunch && isConfirm && (
           <AlertModal
             title='Success'
             message={`Challenge "${challenge.name}" is activated successfuly`}
@@ -324,7 +324,7 @@ class ChallengeCard extends React.Component {
             okLink={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}
             onClose={this.resetModal}
           />
-        ) }
+        )}
 
         <Link className={styles.col1} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
           <div className={styles.name}>
@@ -342,7 +342,7 @@ class ChallengeCard extends React.Component {
           <span className='block light-text'>{endTime}</span>
         </Link>)}
         <div className={cn(styles.col4, styles.editingContainer)}>
-          {hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch)}
+          {(!disableHover && hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch))}
         </div>
         <div className={cn(styles.col4, styles.iconsContainer)}>
           <div className={styles.faIconContainer}>
@@ -361,7 +361,7 @@ class ChallengeCard extends React.Component {
 
 ChallengeCard.defaultPrps = {
   shouldShowCurrentPhase: true,
-  reloadChallengeList: () => {}
+  reloadChallengeList: () => { }
 }
 
 ChallengeCard.propTypes = {
@@ -370,7 +370,8 @@ ChallengeCard.propTypes = {
   reloadChallengeList: PropTypes.func,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  disableHover: PropTypes.bool
 }
 
 export default withRouter(ChallengeCard)

src/components/ChallengesComponent/ChallengeCard/index.js

@@ -48,10 +48,10 @@ class ChallengeList extends Component {
    * @param {String} projectStatus project status
    */
   updateSearchParam (searchText, projectStatus) {
-    const { status, filterChallengeName, loadChallengesByPage, activeProjectId } = this.props
+    const { status, filterChallengeName, loadChallengesByPage, activeProjectId, selfService } = this.props
     this.setState({ searchText }, () => {
       if (status !== projectStatus || searchText !== filterChallengeName) {
-        loadChallengesByPage(1, activeProjectId, projectStatus, searchText)
+        loadChallengesByPage(1, activeProjectId, projectStatus, searchText, selfService)
       }
     })
   }
@@ -62,9 +62,9 @@ class ChallengeList extends Component {
    */
   handlePageChange (pageNumber) {
     const { searchText } = this.state
-    const { page, loadChallengesByPage, activeProjectId, status } = this.props
+    const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
     if (page !== pageNumber) {
-      loadChallengesByPage(pageNumber, activeProjectId, status, searchText)
+      loadChallengesByPage(pageNumber, activeProjectId, status, searchText, selfService)
     }
   }
 
@@ -73,8 +73,8 @@ class ChallengeList extends Component {
    */
   reloadChallengeList () {
     const { searchText } = this.state
-    const { page, loadChallengesByPage, activeProjectId, status } = this.props
-    loadChallengesByPage(page, activeProjectId, status, searchText)
+    const { page, loadChallengesByPage, activeProjectId, status, selfService } = this.props
+    loadChallengesByPage(page, activeProjectId, status, searchText, selfService)
   }
 
   /**
@@ -104,7 +104,8 @@ class ChallengeList extends Component {
       totalChallenges,
       partiallyUpdateChallengeDetails,
       deleteChallenge,
-      isBillingAccountExpired
+      isBillingAccountExpired,
+      selfService
     } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
@@ -167,7 +168,8 @@ class ChallengeList extends Component {
                 break
               }
               case 1: {
-                this.directUpdateSearchParam(searchText, CHALLENGE_STATUS.NEW)
+                const status = selfService ? CHALLENGE_STATUS.DRAFT : CHALLENGE_STATUS.NEW
+                this.directUpdateSearchParam(searchText, status)
                 break
               }
               case 2: {
@@ -186,18 +188,21 @@ class ChallengeList extends Component {
           }}>
           <TabList>
             <Tab>Active</Tab>
-            <Tab>New</Tab>
+            {(!selfService && <Tab>New</Tab>)}
             <Tab>Draft</Tab>
-            <Tab>Completed</Tab>
-            <Tab>Cancelled</Tab>
+            {(!selfService && <Tab>Completed</Tab>)}
+            {(!selfService && <Tab>Cancelled</Tab>)}
           </TabList>
           <TabPanel />
           <TabPanel />
           <TabPanel />
         </Tabs>)}
         {
           challenges.length === 0 && (
-            <NoChallenge activeProject={activeProject} />
+            <NoChallenge
+              activeProject={activeProject}
+              selfService={selfService}
+            />
           )
         }
         {
@@ -225,6 +230,7 @@ class ChallengeList extends Component {
                         partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
                         deleteChallenge={deleteChallenge}
                         isBillingAccountExpired={isBillingAccountExpired}
+                        disableHover={selfService}
                       />
                     </li>
                   )
@@ -269,7 +275,8 @@ ChallengeList.propTypes = {
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  selfService: PropTypes.bool
 }
 
 export default ChallengeList

src/components/ChallengesComponent/ChallengeList/index.js

@@ -5,13 +5,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './NoChallenge.module.scss'
 
-const NoChallenge = ({ activeProject }) => {
+const NoChallenge = ({
+  activeProject,
+  selfService
+}) => {
+  let noChallengeMessage
+  if (selfService || !!activeProject) {
+    noChallengeMessage = selfService ? 'There are' : 'You have'
+    noChallengeMessage += ' no challenges at the moment'
+  } else {
+    noChallengeMessage = 'Please select a project to view challenges'
+  }
+
   return (
     <div className={styles.noChallenge}>
-      {
-        activeProject
-          ? (<p>You have no challenges at the moment</p>) : (<p>Please select a project to view challenges</p>)
-      }
+      <p>{noChallengeMessage}</p>
     </div>
   )
 }
@@ -24,7 +32,8 @@ NoChallenge.propTypes = {
   activeProject: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string
-  })
+  }),
+  selfService: PropTypes.bool
 }
 
 export default NoChallenge

src/components/ChallengesComponent/NoChallenge/index.js

@@ -27,7 +27,8 @@ const ChallengesComponent = ({
   totalChallenges,
   partiallyUpdateChallengeDetails,
   deleteChallenge,
-  isBillingAccountExpired
+  isBillingAccountExpired,
+  selfService
 }) => {
   return (
     <Sticky top={10}>
@@ -41,7 +42,7 @@ const ChallengesComponent = ({
                 __html: xss(activeProject ? activeProject.name : '')
               }}
             />
-            { activeProject && activeProject.id && (
+            {activeProject && activeProject.id && (
               <span>
                 (<a href={`${CONNECT_APP_URL}/projects/${activeProject.id}`} target='_blank' rel='noopener noreferrer'>View Project</a>)
               </span>
@@ -76,6 +77,7 @@ const ChallengesComponent = ({
               partiallyUpdateChallengeDetails={partiallyUpdateChallengeDetails}
               deleteChallenge={deleteChallenge}
               isBillingAccountExpired={isBillingAccountExpired}
+              selfService={selfService}
             />
           )}
         </div>
@@ -101,7 +103,8 @@ ChallengesComponent.propTypes = {
   totalChallenges: PropTypes.number.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,
-  isBillingAccountExpired: PropTypes.bool
+  isBillingAccountExpired: PropTypes.bool,
+  selfService: PropTypes.bool
 }
 
 ChallengesComponent.defaultProps = {

src/components/ChallengesComponent/index.js

@@ -11,7 +11,9 @@ import styles from './Sidebar.module.scss'
 import { isBetaMode } from '../../util/cookie'
 
 const Sidebar = ({
-  projectId, resetSidebarActiveParams
+  projectId,
+  resetSidebarActiveParams,
+  selfService
 }) => {
   return (
     <div className={styles.sidebar}>
@@ -21,12 +23,17 @@ const Sidebar = ({
         {isBetaMode() && <span className={styles.beta}>beta</span>}
       </div>
       <Link to='/'>
-        <div className={cn(styles.homeLink, { [styles.active]: !projectId })} onClick={resetSidebarActiveParams}>
+        <div className={cn(styles.homeLink, { [styles.active]: !projectId && !selfService })} onClick={resetSidebarActiveParams}>
           All Work
         </div>
       </Link>
+      <Link to='/self-service'>
+        <div className={cn(styles.homeLink, { [styles.active]: !projectId && selfService })} onClick={resetSidebarActiveParams}>
+          Self-Service Opportunities
+        </div>
+      </Link>
       <a href='https://github.com/topcoder-platform/work-manager/issues/new' target='_blank' rel='noopener noreferrer' className='chameleon-feedback'>
-        <div className={cn(styles.homeLink, { [styles.active]: !projectId })}>
+        <div className={cn(styles.homeLink, {})}>
           Give Application Feedback
         </div>
       </a>
@@ -40,7 +47,8 @@ const Sidebar = ({
 
 Sidebar.propTypes = {
   projectId: PropTypes.string,
-  resetSidebarActiveParams: PropTypes.func
+  resetSidebarActiveParams: PropTypes.func,
+  selfService: PropTypes.bool
 }
 
 export default Sidebar