[PROD] TaaS Release 1.0

.circleci/config.yml

@@ -136,7 +136,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['feature/unified-permissions', 'feature/accept-reject-terms-in-profile']
+              only: ['feature/taas-jobs-2']
 
       - deployProd:
           context : org-global

config/constants/dev.js

@@ -54,5 +54,7 @@ module.exports = {
 
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
-  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID
+  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+
+  TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas'
 }

config/constants/master.js

@@ -54,5 +54,7 @@ module.exports = {
 
   DASHBOARD_FAQ_CONTENT_ID : process.env.DASHBOARD_FAQ_CONTENT_ID,
   CONTENTFUL_DELIVERY_KEY : process.env.CONTENTFUL_DELIVERY_KEY,
-  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID
+  CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,
+
+  TAAS_APP_URL: 'https://platform.topcoder.com/taas'
 }

config/constants/qa.js

@@ -49,5 +49,7 @@ module.exports = {
   TC_SYSTEM_USERID: process.env.QA_TC_SYSTEM_USERID,
   MAINTENANCE_MODE: process.env.QA_MAINTENANCE_MODE,
 
-  TC_CDN_URL: process.env.TC_CDN_URL
+  TC_CDN_URL: process.env.TC_CDN_URL,
+
+  TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas'
 }

src/api/skills.js

@@ -0,0 +1,49 @@
+import { TC_API_URL } from '../config/constants'
+import { axiosInstance as axios } from './requestInterceptor'
+
+const skillPageSize = 100
+let cachedSkillsAsPromise
+
+/**
+ * Loads and caches all the skills the first time. Returns the skills list from the cache from the second time.
+ */
+export function getSkills() {
+  cachedSkillsAsPromise = cachedSkillsAsPromise || getAllSkills().catch(ex => {
+    console.error('Error loading skills', ex)
+    cachedSkillsAsPromise = null
+    return []
+  })
+
+  return cachedSkillsAsPromise
+}
+
+/**
+ * Recursively loads all the pages from skills api.
+ */
+function getAllSkills() {
+  let skills = []
+
+  return new Promise((resolve, reject) => {
+    const loop = (page) => getSkillsPage(page)
+      .then((skillResponse) => {
+        skills = skills.concat(skillResponse.data)
+        if (skillResponse.data.length === skillPageSize) {
+          page++
+          loop(page)
+        } else {
+          resolve(skills)
+        }
+      })
+      .catch(ex => reject(ex))
+
+    loop(1)
+  })
+}
+
+/**
+ * Loads the skills in the given page.
+ * @param {number} page The page number to load
+ */
+function getSkillsPage(page) {
+  return axios.get(`${TC_API_URL}/v5/taas-teams/skills?perPage=${skillPageSize}&orderBy=name&page=${page}`)
+}

src/components/Feed/FeedComments.jsx

@@ -176,6 +176,21 @@ class FeedComments extends React.Component {
     }
   }
 
+  convertMdToHtml(markdown) {
+    try {
+      return (<div dangerouslySetInnerHTML={{__html: markdownToHTML(markdown)}} />)
+    } catch (e) {
+      return  ( 
+        <div>
+          <p>{markdown}</p>
+          <p styleName="comment-render-error">
+            This message could not be rendered properly, please contact Topcoder Support.
+          </p>
+        </div>
+      )
+    }
+  }
+
   render() {
     const {
       currentUser, onLoadMoreComments, isLoadingComments, hasMoreComments, onAddNewComment,
@@ -325,7 +340,7 @@ class FeedComments extends React.Component {
           canDelete={comments && (idx !== comments.length - 1)} // cannot delete the first post which is now shown as a last one
           commentAnchorPrefix={commentAnchorPrefix}
         >
-          <div dangerouslySetInnerHTML={{__html: markdownToHTML(itemContent)}} />
+          { this.convertMdToHtml(itemContent) }
         </Comment>
       )
     })

src/components/Feed/FeedComments.scss

@@ -32,6 +32,14 @@
   padding-bottom: 2 * $base-unit;
 }
 
+.comment-render-error {
+  border: 1px dashed $tc-orange-70;
+  color: $tc-orange-70;
+  text-align: center;
+  padding: 2px;
+  margin-top: 5px;
+}
+
 .load-more {
   background-color: $tc-white;
   padding: 2 * $base-unit 0 $base-unit;

src/config/constants.js

@@ -729,7 +729,7 @@ export const SEGMENT_KEY = process.env.CONNECT_SEGMENT_KEY
  */
 export const DOMAIN = process.env.domain || 'topcoder.com'
 export const CONNECT_DOMAIN = `connect.${DOMAIN}`
-export const CONNECT_MAIN_PAGE_URL = `http://connect.${DOMAIN}`
+export const CONNECT_MAIN_PAGE_URL = `https://connect.${DOMAIN}`
 export const ACCOUNTS_APP_CONNECTOR_URL = process.env.ACCOUNTS_APP_CONNECTOR_URL
 export const ACCOUNTS_APP_LOGIN_URL = process.env.ACCOUNTS_APP_LOGIN_URL || `https://accounts-auth0.${DOMAIN}`
 export const ACCOUNTS_APP_REGISTER_URL = process.env.ACCOUNTS_APP_REGISTER_URL || `https://accounts-auth0.${DOMAIN}`
@@ -1109,7 +1109,7 @@ export const PROJECT_TYPE_TALENT_AS_A_SERVICE = 'talent-as-a-service'
 /**
  * URL to the Topcoder TaaS App
  */
-export const TAAS_APP_URL = process.env.TAAS_APP_URL || 'https://mfe.topcoder-dev.com/taas'
+export const TAAS_APP_URL = process.env.TAAS_APP_URL || 'https://platform.topcoder-dev.com/taas'
 
 /**
  * Milestone Types

src/helpers/markdownToState.js

@@ -1,6 +1,5 @@
 import {convertFromRaw} from 'draft-js'
 import sanitizeHtml from 'sanitize-html'
-import Alert from 'react-s-alert'
 const Remarkable = require('remarkable')
 
 // Block level items, key is Remarkable's key for them, value returned is
@@ -363,13 +362,11 @@ function markdownToState(markdown, options = {}) {
     // If any error occurs set value to plain text
     const plainTextBlock = getNewBlock(BlockTypes['paragraph_open']())
     plainTextBlock.text = markdown
-
+    
     result = convertFromRaw({
       entityMap: [],
       blocks: [plainTextBlock],
     })
-
-    Alert.warning('Some message could not be rendered properly, please contact Topcoder Support')
   }
 
   return result

src/projects/create/components/ProjectSubmitted.jsx

@@ -1,37 +1,104 @@
 import React from 'react'
 import PT from 'prop-types'
+import qs from 'query-string'
 
 require('./ProjectSubmitted.scss')
+import {
+  CONNECT_MAIN_PAGE_URL, PROJECT_TYPE_TALENT_AS_A_SERVICE, TAAS_APP_URL
+} from '../../../config/constants'
+
 class ProjectSubmitted extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      url: `projects/${props.params.status || props.projectId}`
+  /**
+   * Build project URL based on the `type` query param in URL.
+   *
+   * @param {boolean} isTaas
+   * @param {String} projectId project id
+   */
+  getProjectUrl(isTaas, projectId = '') {
+    const url = isTaas
+      // if the project type is TaaS, then use link to TaaS App
+      ? `${TAAS_APP_URL}/myteams/${projectId}`
+      // otherwise use link inside Connect App
+      : `${CONNECT_MAIN_PAGE_URL}/projects/${projectId}`
+
+    return url
+  }
+
+  getPageConfiguration() {
+    const { type } = qs.parse(window.location.search)
+    const isTaas  = type === PROJECT_TYPE_TALENT_AS_A_SERVICE
+
+    const projectId = this.props.params.status || this.props.projectId
+
+    const project = {
+      headerSubTitle: 'Your project has been created',
+      textBody: (
+        <div className="content">
+            Topcoder will be contacting you soon to discuss your project proposal.
+          <br />
+          <br />
+          <span>
+In the meantime, get a jump on the process by inviting your coworkers to your project and securely share any detailed requirements documents you have inside your project.
+          </span>
+        </div>
+      ),
+      leftButton: {
+        header: 'All Projects',
+        subText: 'View all of your projects',
+        url: this.getProjectUrl(isTaas)
+      },
+      rightButton: {
+        header: 'Go to Project',
+        subText: 'Invite your team members and share requirements',
+        url: this.getProjectUrl(isTaas, projectId)
+      },
     }
+
+    const taas = {
+      headerSubTitle: 'Your talent request has been created',
+      textBody: (
+        <div className="content">
+            Topcoder will be contacting you soon to discuss your talent needs.
+        </div>
+      ),
+      leftButton: {
+        header: 'All Projects',
+        subText: 'View all of your projects',
+        url: this.getProjectUrl(false) // also showing link to Connect App Project List
+      },
+      rightButton: {
+        header: 'View Talent Request',
+        subText: 'Modify your request and track fulfillment',
+        url: this.getProjectUrl(isTaas, projectId)
+      },
+    }
+
+    return isTaas? taas: project
   }
 
   render() {
+
+    const {
+      headerSubTitle,
+      textBody,
+      leftButton,
+      rightButton
+    } = this.getPageConfiguration()
+
     return (
       <div className="ProjectSubmitted flex column middle center tc-ui">
         <div className="container flex column middle center">
           <div className="title">Congratulations!</div>
-          <div className="sub-title">Your project has been created</div>
-          <div className="content">
-            Topcoder will be contacting you soon to discuss your project proposal. 
-            <br />
-            <br />
-            <span>
-In the meantime, get a jump on the process by inviting your coworkers to your project and securely share any detailed requirements documents you have inside your project.
-            </span>
-          </div>
+          <div className="sub-title">{headerSubTitle}</div>
+          {textBody}
           <div className="button-container flex row middle center">
-            <a type="button" href={this.state.url} className="go-to-project-btn tc-btn tc-btn-sm tc-btn-default flex middle center" disabled={false}>
-              Go to Project
-              <small>Invite your team members and share requirements</small>
+            <a type="button" href={leftButton.url} className="go-to-project-btn tc-btn tc-btn-sm tc-btn-default flex middle center">
+              {leftButton.header}
+              <small>{leftButton.subText}</small>
             </a>
-            <a href="projects" type="button" className="go-to-project-dashboard-btn tc-btn tc-btn-sm tc-btn-primary flex middle center" disabled={false}>
-              All Projects
-              <small>View all of your projects</small>
+            <a href={rightButton.url} type="button" className="go-to-project-dashboard-btn tc-btn tc-btn-sm tc-btn-primary flex middle center">
+              {rightButton.header}
+              <small>{rightButton.subText}</small>
             </a>
           </div>
         </div>
@@ -41,7 +108,6 @@ In the meantime, get a jump on the process by inviting your coworkers to your pr
 }
 
 ProjectSubmitted.defaultProps = {
-  vm: {},
   params: {},
 }
 

src/projects/create/components/ProjectWizard.jsx

@@ -605,9 +605,6 @@ class ProjectWizard extends Component {
         />
         <div />
         <ProjectSubmitted
-          project={ project }
-          projectTemplates={ projectTemplates }
-          dirtyProject={ dirtyProject }
           params={ params }
           projectId={ projectId }
         />

src/projects/create/containers/CreateContainer.jsx

@@ -124,11 +124,12 @@ class CreateContainer extends React.Component {
         projectId: nextProjectId,
         isProjectDirty: false
       }, () => {
+        const type = _.get(this.state, 'updatedProject.type')
         // go to submitted state
         console.log('go to submitted state')
         window.localStorage.removeItem(LS_INCOMPLETE_PROJECT)
         window.localStorage.removeItem(LS_INCOMPLETE_WIZARD)
-        this.props.history.push('/new-project/submitted/' + nextProjectId)
+        this.props.history.push('/new-project/submitted/' + nextProjectId + (type ? `?type=${type}` : ''))
       })
 
     } else if (this.state.creatingProject !== nextProps.processing) {

src/projects/detail/components/Accordion/Accordion.jsx

@@ -33,6 +33,7 @@ const TYPE = {
   SELECT_DROPDOWN: 'select-dropdown',
   TALENT_PICKER: 'talent-picker',
   TALENT_PICKER_V2: 'talent-picker-v2',
+  JOBS_PICKER: 'jobs-picker',
 }
 
 /**
@@ -180,6 +181,9 @@ class Accordion extends React.Component {
       const totalPeoplePerRole = _.mapValues(_.groupBy(value, v => v.role), valuesUnderGroup => _.sumBy(valuesUnderGroup, v => Number(v.people)))
       return _.toPairs(totalPeoplePerRole).filter(([, people]) => people > 0).map(([role, people]) => `${getRoleName(role)}: ${people}`).join(', ')
     }
+    case TYPE.JOBS_PICKER: {
+      return _.map(value, 'title').join(', ')
+    }
     default: return value
     }
   }