Additional QA fixes

#1487

#1486

#1485

#1484

Author: jmgasper

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

@@ -26,6 +26,10 @@
     flex: 2;
     flex-direction: column;
     justify-content: center;
+
+    span {
+      word-break: break-all;
+    }
   }
 
   .col3 {

src/components/ChallengesComponent/ChallengeList/index.js

@@ -23,27 +23,39 @@ import SortIcon from '../../../assets/images/sort-icon.svg'
 import Select from '../../Select'
 import Loader from '../../Loader'
 
-import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS } from '../../../config/constants'
-import { checkAdmin } from '../../../util/tc'
+import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS, PROJECT_ROLES } from '../../../config/constants'
+import { checkAdmin, checkReadOnlyRoles } from '../../../util/tc'
 
 require('bootstrap/scss/bootstrap.scss')
 
+const defaultSearchParam = {
+  searchText: '',
+  challengeProjectOption: null,
+  challengeStatus: '',
+  challengeType: null,
+  sortBy: 'startDate',
+  sortOrder: 'desc',
+  challengeDate: {}
+}
+
 const theme = {
   container: styles.modalContainer
 }
 
 class ChallengeList extends Component {
   constructor (props) {
     super(props)
+
+    const defaultSearchParamClone = _.cloneDeep(defaultSearchParam)
     this.state = {
-      searchText: this.props.filterChallengeName,
+      searchText: this.props.filterChallengeName || defaultSearchParamClone.searchText,
       errorMessage: null,
-      sortBy: this.props.filterSortBy || 'startDate',
-      sortOrder: this.props.filterSortOrder || 'desc',
-      challengeProjectOption: this.props.filterProjectOption,
-      challengeStatus: this.props.status,
-      challengeType: this.props.filterChallengeType,
-      challengeDate: this.props.filterDate
+      sortBy: this.props.filterSortBy || defaultSearchParamClone.sortBy,
+      sortOrder: this.props.filterSortOrder || defaultSearchParamClone.sortOrder,
+      challengeProjectOption: this.props.filterProjectOption || defaultSearchParamClone.challengeProjectOption,
+      challengeStatus: this.props.status || defaultSearchParamClone.challengeStatus,
+      challengeType: this.props.filterChallengeType || defaultSearchParamClone.challengeType,
+      challengeDate: this.props.filterDate || defaultSearchParamClone.challengeDate
     }
     this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
     this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
@@ -312,22 +324,14 @@ class ChallengeList extends Component {
       loadChallengesByPage
     } = this.props
 
-    this.setState({
-      searchText: '',
-      challengeProjectOption: null,
-      challengeStatus: '',
-      challengeType: null,
-      sortBy: '',
-      sortOrder: 'asc',
-      challengeDate: {}
-    })
+    this.setState(_.cloneDeep(defaultSearchParam))
 
     let projectId = dashboard ? filterProjectOption : activeProjectId
 
     loadChallengesByPage(
       1,
       projectId,
-      null,
+      'all',
       '',
       selfService,
       this.getHandle(),
@@ -372,6 +376,8 @@ class ChallengeList extends Component {
       challengeTypes,
       loginUserRoleInProject
     } = this.props
+    const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
     }
@@ -688,7 +694,8 @@ class ChallengeList extends Component {
         </div>
         <div className={styles.header}>
           <div
-            className={cn(styles.col5)}
+            className={cn(styles.col5, styles.sortable)}
+            onClick={() => this.updateSort('type')}
           >
             <span className={styles.filterItem}>
                       Type
@@ -741,14 +748,15 @@ class ChallengeList extends Component {
             </span>
           </div>
           <div
-            className={cn(styles.col3)}
+            className={cn(styles.col3, styles.sortable)}
+            onClick={() => this.updateSort('status')}
           >
             <span className={styles.filterItem}>
                       Status
               {this.renderSortIcon('status')}
             </span>
           </div>
-          <div className={styles.col6}>&nbsp;</div>
+          {!isReadOnly ? (<div className={styles.col6}>&nbsp;</div>) : null}
           <div className={styles.col6}>&nbsp;</div>
           <div className={styles.col6}>&nbsp;</div>
         </div>

src/containers/Challenges/index.js

@@ -6,7 +6,6 @@ import React, { Component, Fragment } from 'react'
 // import { Redirect } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { DebounceInput } from 'react-debounce-input'
 import ChallengesComponent from '../../components/ChallengesComponent'
 import ProjectCard from '../../components/ProjectCard'
 // import Loader from '../../components/Loader'
@@ -29,11 +28,8 @@ class Challenges extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      searchProjectName: '',
       onlyMyProjects: true
     }
-    this.updateProjectName = this.updateProjectName.bind(this)
-    this.toggleMyProjects = this.toggleMyProjects.bind(this)
   }
 
   componentDidMount () {
@@ -104,20 +100,6 @@ class Challenges extends Component {
     }
   }
 
-  updateProjectName (val) {
-    this.setState({ searchProjectName: val })
-    this.props.loadProjects(val, this.state.onlyMyProjects)
-  }
-
-  toggleMyProjects (evt) {
-    this.setState({ onlyMyProjects: evt.target.checked }, () => {
-      this.props.loadProjects(
-        this.state.searchProjectName,
-        this.state.onlyMyProjects
-      )
-    })
-  }
-
   render () {
     const {
       challenges,
@@ -150,7 +132,6 @@ class Challenges extends Component {
       auth,
       metadata
     } = this.props
-    const { searchProjectName } = this.state
     const { challengeTypes = [] } = metadata
     const projectInfo = _.find(projects, { id: activeProjectId }) || {}
     const projectComponents =
@@ -167,29 +148,16 @@ class Challenges extends Component {
       ))
     return (
       <Fragment>
-        <div className={!dashboard && styles.projectSearch}>
-          {!selfService && (
-            <div className={styles.projectSearchHeader}>
-              {!dashboard && <label>Switch Project</label>}
-              {!dashboard && (
-                <DebounceInput
-                  minLength={2}
-                  debounceTimeout={300}
-                  placeholder='Search projects (Enter project id or project title in double quotes or any text from project)'
-                  onChange={e => this.updateProjectName(e.target.value)}
-                  value={searchProjectName}
-                />
+        {!dashboard &&
+        (!!projectComponents.length ||
+          (activeProjectId === -1 && !selfService)) ? (
+            <div className={!dashboard && styles.projectSearch}>
+              {activeProjectId === -1 && !selfService && (
+                <div>No project selected. Select one below</div>
               )}
-            </div>
-          )}
-          {!dashboard && activeProjectId === -1 && !selfService && (
-            <div>No project selected. Select one below</div>
-          )}
-          {dashboard ? null
-            : (
               <ul>{projectComponents}</ul>
-            )}
-        </div>
+            </div>
+          ) : null}
         {(dashboard || activeProjectId !== -1 || selfService) && (
           <ChallengesComponent
             activeProject={{
@@ -259,7 +227,6 @@ Challenges.propTypes = {
   page: PropTypes.number.isRequired,
   perPage: PropTypes.number.isRequired,
   totalChallenges: PropTypes.number.isRequired,
-  loadProjects: PropTypes.func.isRequired,
   setActiveProject: PropTypes.func.isRequired,
   partiallyUpdateChallengeDetails: PropTypes.func.isRequired,
   deleteChallenge: PropTypes.func.isRequired,

src/containers/Tab/index.js

@@ -33,7 +33,7 @@ class TabContainer extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    const { projectId, isLoading, selfService, projects } = nextProps
+    const { projectId, isLoading, selfService, projects, isLoadProjectsSuccess } = nextProps
 
     if (nextProps.history.location.pathname === '/') {
       this.setState({ currentTab: 1 })
@@ -61,7 +61,7 @@ class TabContainer extends Component {
 
     // if we already have projects in the list,
     // don't load the projects again
-    if (!!projects && !!projects.length) {
+    if ((!!projects && !!projects.length) || isLoadProjectsSuccess) {
       return
     }
 
@@ -100,6 +100,7 @@ class TabContainer extends Component {
 TabContainer.propTypes = {
   projects: PropTypes.arrayOf(PropTypes.shape()),
   isLoading: PropTypes.bool,
+  isLoadProjectsSuccess: PropTypes.bool,
   loadProjects: PropTypes.func,
   unloadProjects: PropTypes.func,
   activeProjectId: PropTypes.number,

src/reducers/sidebar.js

@@ -12,15 +12,16 @@ import {
 const initialState = {
   activeProjectId: -1,
   isLoading: false,
-  projects: []
+  projects: [],
+  isLoadProjectsSuccess: false
 }
 
 export default function (state = initialState, action) {
   switch (action.type) {
     case SET_ACTIVE_PROJECT:
       return { ...state, activeProjectId: action.projectId, projects: [], isLoading: false }
     case LOAD_PROJECTS_SUCCESS:
-      return { ...state, projects: action.projects, isLoading: false, isLoggedIn: true }
+      return { ...state, projects: action.projects, isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: true }
     case LOAD_PROJECTS_PENDING:
       return { ...state, isLoading: true }
     case LOAD_PROJECTS_FAILURE: