PM-803 wm regression fixes

.circleci/config.yml

@@ -152,7 +152,7 @@ workflows:
           context: org-global
           filters: &filters-dev
             branches:
-              only: ["develop", "PM-690_asset-library-management"]
+              only: ["develop", "PM-803_wm-regression-fixes"]
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

src/actions/sidebar.js

@@ -8,8 +8,10 @@ import {
   LOAD_PROJECTS_PENDING,
   LOAD_PROJECTS_SUCCESS,
   RESET_SIDEBAR_ACTIVE_PARAMS,
-  UNLOAD_PROJECTS_SUCCESS
+  UNLOAD_PROJECTS_SUCCESS,
+  PROJECTS_PAGE_SIZE
 } from '../config/constants'
+import { checkAdmin } from '../util/tc'
 import _ from 'lodash'
 
 /**
@@ -28,15 +30,15 @@ export function setActiveProject (projectId) {
 /**
  * Loads projects of the authenticated user
  */
-export function loadProjects (filterProjectName = '', myProjects = true, paramFilters = {}) {
-  return (dispatch) => {
+export function loadProjects (filterProjectName = '', paramFilters = {}) {
+  return (dispatch, getState) => {
     dispatch({
       type: LOAD_PROJECTS_PENDING
     })
 
     const filters = {
-      status: 'active',
       sort: 'lastActivityAt desc',
+      perPage: PROJECTS_PAGE_SIZE,
       ...paramFilters
     }
     if (!_.isEmpty(filterProjectName)) {
@@ -47,21 +49,43 @@ export function loadProjects (filterProjectName = '', myProjects = true, paramFi
       }
     }
 
-    // filters['perPage'] = 20
-    // filters['page'] = 1
-    if (myProjects) {
+    if (!checkAdmin(getState().auth.token)) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    // eslint-disable-next-line no-debugger
+    const state = getState().sidebar
+    fetchMemberProjects(filters).then(({ projects, pagination }) => dispatch({
       type: LOAD_PROJECTS_SUCCESS,
-      projects
+      projects: _.uniqBy((state.projects || []).concat(projects), 'id'),
+      total: pagination.xTotal,
+      page: pagination.xPage
     })).catch(() => dispatch({
       type: LOAD_PROJECTS_FAILURE
     }))
   }
 }
 
+/**
+ * Load more projects for the authenticated user
+ */
+export function loadMoreProjects (filterProjectName = '', paramFilters = {}) {
+  return (dispatch, getState) => {
+    const state = getState().sidebar
+
+    loadProjects(filterProjectName, _.assignIn({}, paramFilters, {
+      perPage: PROJECTS_PAGE_SIZE,
+      page: state.page + 1
+    }))(dispatch, getState)
+  }
+}
+
+export function loadTaasProjects (filterProjectName = '', paramFilters = {}) {
+  return loadProjects(filterProjectName, Object.assign({
+    type: 'talent-as-a-service'
+  }, paramFilters))
+}
+
 /**
  * Unloads projects of the authenticated user
  */

src/actions/users.js

@@ -28,7 +28,7 @@ export function loadAllUserProjects (isAdmin = true) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    fetchMemberProjects(filters).then(({ projects }) => dispatch({
       type: LOAD_ALL_USER_PROJECTS_SUCCESS,
       projects
     })).catch(() => dispatch({
@@ -66,7 +66,7 @@ export function searchUserProjects (isAdmin = true, keyword) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    fetchMemberProjects(filters).then(({ projects }) => dispatch({
       type: SEARCH_USER_PROJECTS_SUCCESS,
       projects
     })).catch(() => dispatch({

src/components/ChallengeEditor/ChallengeView/index.js

@@ -20,7 +20,6 @@ import { getResourceRoleByName } from '../../../util/tc'
 import { loadGroupDetails } from '../../../actions/challenges'
 import {
   REVIEW_TYPES,
-  CONNECT_APP_URL,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
   MULTI_ROUND_CHALLENGE_TEMPLATE_ID,
   DS_TRACK_ID
@@ -118,12 +117,7 @@ const ChallengeView = ({
               </div>
               {selectedMilestone &&
                 <div className={styles.col}>
-                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
-                    <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
-                      rel='noopener noreferrer'>
-                      {selectedMilestone.name}
-                    </a>
-                  ) : ''}</span>
+                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? selectedMilestone.name : ''}</span>
                 </div>
               }
               <div className={styles.col}>

src/components/ChallengeEditor/Milestone-Field/index.js

@@ -4,8 +4,6 @@ import _ from 'lodash'
 import Select from '../../Select'
 import cn from 'classnames'
 import styles from './Milestone-Field.module.scss'
-import { CONNECT_APP_URL } from '../../../config/constants'
-import PrimaryButton from '../../Buttons/PrimaryButton'
 
 const MilestoneField = ({ milestones, onUpdateSelect, disabled, projectId, selectedMilestoneId }) => {
   const options = milestones.map(type => ({ label: type.name, value: type.id }))
@@ -28,10 +26,6 @@ const MilestoneField = ({ milestones, onUpdateSelect, disabled, projectId, selec
             isDisabled={disabled}
           />
         </div>
-        <a className={cn(styles.field, styles.manageLink)} href={`${CONNECT_APP_URL}/projects/${projectId}`} target='_blank'
-          rel='noopener noreferrer'>
-          <PrimaryButton type='successDark' text='MANAGE MILESTONES' />
-        </a>
       </div>
     </>
   )

src/components/ChallengesComponent/ProjectStatus/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
-import { PROJECT_STATUS } from '../../../config/constants'
+import { PROJECT_STATUSES } from '../../../config/constants'
 import styles from './ProjectStatus.module.scss'
 
 const ProjectStatus = ({ status }) => {
   return (
     <div className={cn(styles.container, styles[status])}>
-      <div>{PROJECT_STATUS.find(item => item.value === status).label}</div>
+      <div>{PROJECT_STATUSES.find(item => item.value === status).label}</div>
     </div>
   )
 }

src/components/ChallengesComponent/index.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
 import ProjectStatus from './ProjectStatus'
-import { PROJECT_ROLES, TYPEFORM_URL } from '../../config/constants'
+import { PROJECT_ROLES, TYPEFORM_URL, PROJECT_STATUS } from '../../config/constants'
 import { PrimaryButton, OutlineButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
@@ -50,7 +50,7 @@ const ChallengesComponent = ({
 }) => {
   const [loginUserRoleInProject, setLoginUserRoleInProject] = useState('')
   const isReadOnly = checkReadOnlyRoles(auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
-  const isAdminOrCopilot = checkAdminOrCopilot(auth.token)
+  const isAdminOrCopilot = checkAdminOrCopilot(auth.token, activeProject)
 
   useEffect(() => {
     const loggedInUser = auth.user
@@ -101,11 +101,15 @@ const ChallengesComponent = ({
                 target={'_blank'}
               />
             )}
-            <Link
-              to={`/projects/${activeProject.id}/challenges/new`}
-            >
-              <PrimaryButton text={'Launch New'} type={'info'} />
-            </Link>
+            {activeProject.status === PROJECT_STATUS.ACTIVE ? (
+              <Link
+                to={`/projects/${activeProject.id}/challenges/new`}
+              >
+                <PrimaryButton text={'Launch New'} type={'info'} />
+              </Link>
+            ) : (
+              <PrimaryButton text={'Launch New'} type={'info'} disabled />
+            )}
           </div>
         ) : (
           <span />

src/components/InfiniteLoadTrigger/InfiniteLoadTrigger.module.scss

@@ -0,0 +1,11 @@
+.loader {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    > * {
+        width: auto;
+        min-width: 130px;
+    }
+}

src/components/InfiniteLoadTrigger/index.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useCallback } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './InfiniteLoadTrigger.module.scss'
+import { OutlineButton } from '../Buttons'
+
+const InfiniteLoadTrigger = ({ onLoadMore, rootMargin = '100px', threshold = 0.1 }) => {
+  const triggerRef = useRef(null)
+
+  const observerCallback = useCallback(
+    (entries) => {
+      const [entry] = entries
+      if (entry.isIntersecting) {
+        onLoadMore()
+      }
+    },
+    [onLoadMore]
+  )
+
+  useEffect(() => {
+    // eslint-disable-next-line no-undef
+    const observer = new IntersectionObserver(observerCallback, {
+      root: null, // Observe relative to viewport
+      rootMargin,
+      threshold
+    })
+
+    if (triggerRef.current) {
+      observer.observe(triggerRef.current)
+    }
+
+    return () => {
+      if (triggerRef.current) {
+        observer.unobserve(triggerRef.current)
+      }
+    }
+  }, [observerCallback, rootMargin, threshold])
+
+  return (
+    <div ref={triggerRef} className={styles.loader}>
+      <OutlineButton type='info' text='Load More' onClick={() => onLoadMore()} />
+    </div>
+  )
+}
+
+InfiniteLoadTrigger.propTypes = {
+  onLoadMore: PropTypes.func.isRequired,
+  rootMargin: PropTypes.string,
+  threshold: PropTypes.number
+}
+
+export default InfiniteLoadTrigger

src/components/ProjectCard/ProjectCard.module.scss

@@ -44,9 +44,13 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    //display: flex;
-    //justify-content: space-between;
-    //align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .status {
+      opacity: 0.7;
+    }
   }
 
   .icon {

src/components/ProjectCard/index.js

@@ -2,24 +2,31 @@ import React from 'react'
 import PT from 'prop-types'
 import { Link } from 'react-router-dom'
 import cn from 'classnames'
+import { find } from 'lodash'
+
+import { PROJECT_STATUSES } from '../../config/constants'
 
 import styles from './ProjectCard.module.scss'
 
-const ProjectCard = ({ projectName, projectId, selected, setActiveProject }) => {
+const ProjectCard = ({ projectName, projectStatus, projectId, selected, setActiveProject }) => {
   return (
     <div className={styles.container}>
       <Link
         to={`/projects/${projectId}/challenges`}
         className={cn(styles.projectName, { [styles.selected]: selected })}
         onClick={() => setActiveProject(parseInt(projectId))}
       >
-        <div className={styles.name}>{projectName}</div>
+        <div className={styles.name}>
+          <span>{projectName}</span>
+          <span className={styles.status}>{find(PROJECT_STATUSES, { value: projectStatus }).label}</span>
+        </div>
       </Link>
     </div>
   )
 }
 
 ProjectCard.propTypes = {
+  projectStatus: PT.string.isRequired,
   projectId: PT.number.isRequired,
   projectName: PT.string.isRequired,
   selected: PT.bool.isRequired,