Merge pull request #1620 from topcoder-platform/develop

PROD RELEASE - Features and fixes in WM related to deprecating Connect & Submission Review UI apps

Author: kkartunov

.circleci/config.yml

@@ -152,7 +152,7 @@ workflows:
           context: org-global
           filters: &filters-dev
             branches:
-              only: ["develop", "PM-803_wm-regression-fixes"]
+              only: ["develop", "PM-803_wm-regression-fixes", "PM-902_show-all-projects-on-challenge-page"]
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

config/constants/development.js

@@ -25,6 +25,7 @@ module.exports = {
   RESOURCES_API_URL: `${DEV_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${DEV_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${DEV_API_HOSTNAME}/v5/submissions`,
+  REVIEW_TYPE_API_URL: `${DEV_API_HOSTNAME}/v5/reviewTypes`,
   SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
   STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,

config/constants/production.js

@@ -24,6 +24,7 @@ module.exports = {
   RESOURCES_API_URL: `${PROD_API_HOSTNAME}/v5/resources`,
   RESOURCE_ROLES_API_URL: `${PROD_API_HOSTNAME}/v5/resource-roles`,
   SUBMISSIONS_API_URL: `${PROD_API_HOSTNAME}/v5/submissions`,
+  REVIEW_TYPE_API_URL: `${PROD_API_HOSTNAME}/v5/reviewTypes`,
   SUBMISSION_REVIEW_APP_URL: `https://submission-review.${DOMAIN}/challenges`,
   STUDIO_URL: `https://studio.${DOMAIN}`,
   CONNECT_APP_URL: `https://connect.${DOMAIN}`,

package-lock.json

@@ -115,7 +115,7 @@
     "terser": "^3.16.1",
     "terser-webpack-plugin": "1.1.0",
     "topcoder-healthcheck-dropin": "^1.0.3",
-    "topcoder-react-lib": "^1.2.10",
+    "topcoder-react-lib": "github:topcoder-platform/topcoder-react-lib#1.2.18",
     "url-loader": "1.1.1",
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0",

package.json

@@ -57,6 +57,7 @@ import {
 } from '../config/constants'
 import { loadProject } from './projects'
 import { removeChallengeFromPhaseProduct, saveChallengeAsPhaseProduct } from '../services/projects'
+import { checkAdmin } from '../util/tc'
 
 /**
  * Member challenges related redux actions
@@ -158,7 +159,7 @@ export function loadChallengesByPage (
       filters['projectId'] = projectId
     } else if (_.isObject(projectId) && projectId.value > 0) {
       filters['projectId'] = projectId.value
-    } else if (userId) {
+    } else if (!checkAdmin(getState().auth.token) && userId) {
       // Note that we only add the memberId field if *no* project ID is given,
       // so that the list of *all challenges shows only those that the member is on
       filters['memberId'] = userId

src/actions/challenges.js

@@ -1,4 +1,12 @@
+import _ from 'lodash'
+
 import {
+  PROJECT_TYPE_TAAS,
+  PROJECTS_PAGE_SIZE,
+  LOAD_PROJECTS_PENDING,
+  LOAD_PROJECTS_SUCCESS,
+  UNLOAD_PROJECTS_SUCCESS,
+  LOAD_PROJECTS_FAILURE,
   LOAD_PROJECT_BILLING_ACCOUNT,
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
   LOAD_PROJECT_DETAILS,
@@ -21,8 +29,96 @@ import {
   getProjectTypes,
   createProjectApi,
   fetchBillingAccounts,
+  fetchMemberProjects,
   updateProjectApi
 } from '../services/projects'
+import { checkAdmin } from '../util/tc'
+
+function _loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: LOAD_PROJECTS_PENDING
+    })
+
+    const filters = {
+      sort: 'lastActivityAt desc',
+      perPage: PROJECTS_PAGE_SIZE,
+      ...paramFilters
+    }
+
+    if (!_.isEmpty(projectNameOrIdFilter)) {
+      if (!isNaN(projectNameOrIdFilter)) { // if it is number
+        filters['id'] = parseInt(projectNameOrIdFilter, 10)
+      } else { // text search
+        filters['keyword'] = decodeURIComponent(projectNameOrIdFilter)
+      }
+    }
+
+    if (!checkAdmin(getState().auth.token)) {
+      filters['memberOnly'] = true
+    }
+
+    // eslint-disable-next-line no-debugger
+    const state = getState().projects
+    fetchMemberProjects(filters).then(({ projects, pagination }) => dispatch({
+      filters,
+      type: LOAD_PROJECTS_SUCCESS,
+      projects: _.uniqBy((filters.page ? state.projects || [] : []).concat(projects), 'id'),
+      total: pagination.xTotal,
+      page: pagination.xPage
+    })).catch(() => dispatch({
+      type: LOAD_PROJECTS_FAILURE
+    }))
+  }
+}
+
+export function loadProjects (projectNameOrIdFilter = '', paramFilters = {}) {
+  return async (dispatch, getState) => {
+    const _filters = _.assign({}, paramFilters)
+    if (_.isEmpty(_filters) || !_filters.type) {
+      let projectTypes = getState().projects.projectTypes
+
+      if (!projectTypes.length) {
+        dispatch({
+          type: LOAD_PROJECTS_PENDING
+        })
+        await loadProjectTypes()(dispatch)
+        projectTypes = getState().projects.projectTypes
+      }
+
+      _.assign(_filters, {
+        type: projectTypes.filter(d => d.key !== PROJECT_TYPE_TAAS).map(d => d.key)
+      })
+    }
+
+    return _loadProjects(projectNameOrIdFilter, _filters)(dispatch, getState)
+  }
+}
+
+/**
+ * Load more projects for the authenticated user
+ */
+export function loadMoreProjects () {
+  return (dispatch, getState) => {
+    const { projectFilters, projectsPage } = getState().projects
+
+    loadProjects('', _.assign({}, projectFilters, {
+      perPage: PROJECTS_PAGE_SIZE,
+      page: projectsPage + 1
+    }))(dispatch, getState)
+  }
+}
+
+/**
+ * Unloads projects of the authenticated user
+ */
+export function unloadProjects () {
+  return (dispatch) => {
+    dispatch({
+      type: UNLOAD_PROJECTS_SUCCESS
+    })
+  }
+}
 
 /**
  * Loads project details

src/actions/projects.js

@@ -37,6 +37,7 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
     })
 
     const filters = {
+      status: 'active',
       sort: 'lastActivityAt desc',
       perPage: PROJECTS_PAGE_SIZE,
       ...paramFilters
@@ -66,26 +67,18 @@ export function loadProjects (filterProjectName = '', paramFilters = {}) {
   }
 }
 
-/**
- * Load more projects for the authenticated user
- */
-export function loadMoreProjects (filterProjectName = '', paramFilters = {}) {
+// Load next page of projects
+export function loadNextProjects () {
   return (dispatch, getState) => {
-    const state = getState().sidebar
+    const { projectFilters, projectsPage } = getState().sidebar
 
-    loadProjects(filterProjectName, _.assignIn({}, paramFilters, {
+    loadProjects('', _.assign({}, projectFilters, {
       perPage: PROJECTS_PAGE_SIZE,
-      page: state.page + 1
+      page: projectsPage + 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/sidebar.js

@@ -0,0 +1,53 @@
+@import "../../../styles/includes";
+
+.container {
+  box-sizing: border-box;
+  background: $white;
+  opacity: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border-radius: 6px;
+  margin: 0 auto;
+  width: 800px;
+  min-height: 350px;
+  padding-top: 60px;
+  .list {
+    .header {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      font-weight: 500;
+
+      .header-title {
+        flex: 1;
+      }
+    }
+    .list-item {
+      border-bottom: 1px solid $tc-gray-60;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      display: flex;
+      padding-left: 40px;
+      padding-right: 40px;
+      color: $tc-gray-70;
+      .artifact-name {
+        display: flex;
+        flex: 1;
+      }
+      .icon-download {
+        cursor: pointer;
+      }
+    }
+    .no-artifacts {
+      @include roboto;
+
+      margin-top: 40px;
+      text-align: center;
+    }
+  }
+}

src/assets/images/IconDownloadArtifacts.svg

@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import Modal from '../../Modal'
+
+import styles from './ArtifactsListModal.module.scss'
+import PropTypes from 'prop-types'
+import ReactSVG from 'react-svg'
+import { getTopcoderReactLib, isValidDownloadFile } from '../../../util/topcoder-react-lib'
+import Loader from '../../Loader'
+const assets = require.context('../../../assets/images', false, /svg/)
+
+export const ArtifactsListModal = ({ onClose, submissionId, token, theme }) => {
+  const [artifacts, setArtifacts] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  const getArtifacts = useCallback(async () => {
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.submissions
+    const submissionsService = getService(token)
+    const { artifacts: resp } = await submissionsService.getSubmissionArtifacts(submissionId)
+    setArtifacts(resp)
+    setLoading(false)
+  }, [submissionId, token])
+
+  const getExtensionFromMime = useCallback((mimeType) => {
+    const mimeMap = {
+      'application/zip': 'zip',
+      'application/pdf': 'pdf',
+      'image/jpeg': 'jpg',
+      'image/png': 'png',
+      'text/plain': 'txt'
+    }
+    return mimeMap[mimeType] || 'zip'
+  }, [])
+
+  useEffect(() => {
+    setLoading(true)
+    getArtifacts()
+  }, [submissionId])
+
+  const onDownloadArtifact = useCallback((item) => {
+    // download submission
+    const reactLib = getTopcoderReactLib()
+    const { getService } = reactLib.services.submissions
+    const submissionsService = getService(token)
+    submissionsService.downloadSubmissionArtifact(submissionId, item)
+      .then((blob) => {
+        isValidDownloadFile(blob).then((isValidFile) => {
+          if (isValidFile.success) {
+            // eslint-disable-next-line no-undef
+            const blobFile = new Blob([blob])
+            const url = window.URL.createObjectURL(blobFile)
+            const link = document.createElement('a')
+            link.href = url
+            const extension = getExtensionFromMime(blob.type)
+            const fileName = `${submissionId}.${extension}`
+            link.setAttribute('download', `${fileName}`)
+            document.body.appendChild(link)
+            link.click()
+            link.parentNode.removeChild(link)
+          } else {
+            console.log('failed to download artifact')
+          }
+        })
+      })
+  }, [submissionId, token])
+
+  return (
+    <Modal theme={theme} onCancel={onClose}>
+      <div className={styles['container']}>
+        <div className={styles['list']}>
+          <div className={styles['header']}>
+            <div className={styles['header-title']}>Artifact ID</div>
+            <div className={styles['header-action']}>Action</div>
+          </div>
+          {
+            !loading && artifacts.map((item) => {
+              return (
+                <div className={styles['list-item']}>
+                  <div className={styles['artifact-name']}>{item}</div>
+                  <ReactSVG
+                    className={styles['icon-download']}
+                    path={assets('./IconSquareDownload.svg')}
+                    onClick={() => onDownloadArtifact(item)}
+                  />
+                </div>
+              )
+            })
+          }
+
+          {
+            !loading && artifacts.length === 0 && <div className={styles['no-artifacts']}>No artifacts found</div>
+          }
+
+          {
+            loading && <Loader />
+          }
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+ArtifactsListModal.defaultProps = {
+  onClose: () => {},
+  submissionId: '',
+  token: '',
+  theme: ''
+}
+
+ArtifactsListModal.propTypes = {
+  onClose: PropTypes.func,
+  submissionId: PropTypes.string,
+  token: PropTypes.string,
+  theme: PropTypes.shape()
+}