Prod Release 2.18.0

.circleci/config.yml

@@ -128,7 +128,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['dev']
+              only: ['dev', 'feature/add_msg_for_taas_projects']
 
       - deployTest01:
           context : org-global

config/constants/dev.js

@@ -38,6 +38,7 @@ module.exports = {
   FILE_PICKER_ACCEPT: process.env.FILE_PICKER_ACCEPT_DEV,
 
   SALESFORCE_PROJECT_LEAD_LINK: 'https://c.cs18.visual.force.com/apex/ConnectLead?connectProjectId=',
+  SALESFORCE_BILLING_ACCOUNT_LINK: 'https://c.cs18.visual.force.com/apex/baredirect?id=',
 
   CONNECT_SEGMENT_KEY: process.env.DEV_SEGMENT_KEY,
   PREDIX_PROGRAM_ID         : 3448,

config/constants/master.js

@@ -39,6 +39,7 @@ module.exports = {
   FILE_PICKER_ACCEPT: process.env.FILE_PICKER_ACCEPT_PROD,
 
   SALESFORCE_PROJECT_LEAD_LINK: 'https://topcoder.my.salesforce.com/apex/ConnectLead?connectProjectId=',
+  SALESFORCE_BILLING_ACCOUNT_LINK: 'https://topcoder.my.salesforce.com/apex/baredirect?id=',
   CONNECT_SEGMENT_KEY: process.env.PROD_SEGMENT_KEY,
   PREDIX_PROGRAM_ID         : 3448,
   IBM_COGNITIVE_PROGRAM_ID  : 3449,

config/constants/qa.js

@@ -38,6 +38,7 @@ module.exports = {
   FILE_PICKER_ACCEPT: process.env.FILE_PICKER_ACCEPT_QA,
 
   SALESFORCE_PROJECT_LEAD_LINK: 'https://c.cs18.visual.force.com/apex/ConnectLead?connectProjectId=',
+  SALESFORCE_BILLING_ACCOUNT_LINK: 'https://c.cs18.visual.force.com/apex/baredirect?id=',
   CONNECT_SEGMENT_KEY: process.env.QA_SEGMENT_KEY,
   PREDIX_PROGRAM_ID         : 3448,
   IBM_COGNITIVE_PROGRAM_ID  : 3449,

src/actions/loadUser.js

@@ -3,6 +3,8 @@ import {
   ACCOUNTS_APP_CONNECTOR_URL,
   LOAD_USER_SUCCESS,
   LOAD_USER_FAILURE,
+  LOAD_USER_CREDENTIAL,
+  LOAD_USER_CREDENTIAL_FAILURE,
   LOAD_ORG_CONFIG_SUCCESS,
   LOAD_ORG_CONFIG_FAILURE,
   ROLE_ADMINISTRATOR,
@@ -16,7 +18,7 @@ import {
   ROLE_PRESALES, ROLE_PROJECT_MANAGER, ROLE_SOLUTION_ARCHITECT
 } from '../config/constants'
 import { getFreshToken, configureConnector, decodeToken } from 'tc-auth-lib'
-import { getUserProfile } from '../api/users'
+import { getUserProfile, getCredential } from '../api/users'
 import { fetchGroups } from '../api/groups'
 import { getOrgConfig } from '../api/orgConfig'
 import { EventTypes } from 'redux-segment'
@@ -26,6 +28,18 @@ configureConnector({
   frameId: 'tc-accounts-iframe'
 })
 
+export function getUserCredential(userId) {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_USER_CREDENTIAL,
+      payload: getCredential(userId)
+    }).catch((err) => {
+      console.log(err)
+      dispatch({ type: LOAD_USER_CREDENTIAL_FAILURE })
+    })
+  }
+}
+
 export function loadUser() {
   return ((dispatch, getState) => {
     const state = getState()
@@ -125,9 +139,9 @@ export function loadUserSuccess(dispatch, token) {
       loadGroups(dispatch, currentUser.userId)
     })
       .catch((err) => {
-      // if we fail to load user's profile, still dispatch user load success
-      // ideally it shouldn't happen, but if it is, we can render the page
-      // without profile information
+        // if we fail to load user's profile, still dispatch user load success
+        // ideally it shouldn't happen, but if it is, we can render the page
+        // without profile information
         console.log(err)
         dispatch({ type: LOAD_USER_SUCCESS, user : currentUser })
       })
@@ -161,7 +175,7 @@ function loadGroups(dispatch, userId) {
       }
     })
       .catch((err) => {
-      // if we fail to load groups
+        // if we fail to load groups
         console.log(err)
       })
   }

src/api/users.js

@@ -17,6 +17,23 @@ export function getUserProfile(handle) {
     })
 }
 
+
+/**
+ * Gets credential for the specified user id.
+ *
+ * NOTE: Only admins are authorized to use the underlying endpoint.
+ *
+ * @param {Number} userId The user id
+ * @return {Promise} Resolves to the linked accounts array.
+ */
+export  function getCredential(userId) {
+  return axios.get(`${TC_API_URL}/v3/users/${userId}?fields=credential`)
+    .then(resp => {
+      return _.get(resp.data, 'result.content', {})
+    })
+}
+
+
 /**
  * Update user profile
  *

src/components/MobileMenu/MobileMenu.jsx

@@ -52,7 +52,7 @@ const MobileMenu = ({ user, onClose, menu }) => {
             </ul>
           ))}
         </div>
-        <div styleName="footer">Topcoder &copy; 2018</div>
+        <div styleName="footer">Topcoder &copy; {new Date().getFullYear()}</div>
       </div>
     </MobilePage>
   )

src/components/Select/Select.jsx

@@ -26,6 +26,7 @@ const Select = (props) => {
         {...props}
         createOptionPosition="first"
         className={containerclass}
+        ref={props.createSelectRef}
         classNamePrefix="react-select"
       />
     )
@@ -36,6 +37,7 @@ const Select = (props) => {
         createOptionPosition="first"
         className={containerclass}
         classNamePrefix="react-select"
+        isClearable
       />
     )
   }

src/components/TeamManagement/AutocompleteInput.jsx

@@ -16,14 +16,18 @@ class AutocompleteInput extends React.Component {
     const {
       placeholder,
       selectedMembers,
-      disabled
+      createSelectRef,
+      disabled,
+      onBlur
     } = this.props
 
     return (
       <div className="autocomplete-wrapper">
         <Select
           isMulti
+          onBlur={onBlur}
           closeMenuOnSelect
+          createSelectRef={createSelectRef}
           showDropdownIndicator={false}
           createOption
           placeholder={placeholder}
@@ -41,6 +45,7 @@ class AutocompleteInput extends React.Component {
 AutocompleteInput.defaultProps = {
   placeholder: 'Enter one or more user handles',
   selectedMembers: [],
+  createSelectRef: () => {},
   disabled: false
 }
 
@@ -50,6 +55,16 @@ AutocompleteInput.propTypes = {
    */
   onUpdate: PropTypes.func,
 
+  /**
+   * Callback fired when input blur
+   */
+  onBlur: PropTypes.func,
+
+  /**
+   * Callback for pass select Ref to parent component
+   */
+  createSelectRef : PropTypes.func,
+
   /**
    * The current logged in user in the app.
    * Used to determinate "You" label and access

src/components/TeamManagement/AutocompleteInputContainer.jsx

@@ -11,8 +11,11 @@ class AutocompleteInputContainer extends React.Component {
   constructor(props) {
     super(props)
     this.debounceTimer = null
+    this.selectInstance = null
 
     this.clearUserSuggestions = this.clearUserSuggestions.bind(this)
+    this.handleInputBlur = this.handleInputBlur.bind(this)
+    this.createSelectRef = this.createSelectRef.bind(this)
   }
 
   /**
@@ -66,13 +69,36 @@ class AutocompleteInputContainer extends React.Component {
     this.clearUserSuggestions()
   }
 
+  handleInputBlur(event) {
+    const {
+      selectedMembers
+    } = this.props
+    const value = event.target.value
+    const innerSelectInstance = this.selectInstance.select
+
+    if (value) {
+      const hasExist = _.find(selectedMembers, ({label}) => label === value)
+      if (!hasExist) {
+        // format new option from input value
+        const newOption = {value, label: value}
+        innerSelectInstance.select.selectOption(newOption)
+      }
+    }
+  }
+
+  createSelectRef(ref) {
+    this.selectInstance = ref
+  }
+
   render() {
 
     const { placeholder, currentUser, selectedMembers, disabled } = this.props
 
     return (
       <AutocompleteInput
+        createSelectRef={this.createSelectRef}
         placeholder={placeholder ? placeholder:''}
+        onBlur={this.handleInputBlur}
         onInputChange={this.onInputChange.bind(this)}
         onUpdate={this.onUpdate.bind(this)}
         suggestedMembers={this.props.suggestedMembers}

src/components/TopBar/TopBarContainer.js

@@ -88,14 +88,8 @@ class TopBarContainer extends React.Component {
           { label: 'Account and security', link: '/settings/account' },
           { label: 'Notification settings', link: '/settings/notifications' },
         ]
-      }, {
-        items: [
-          { label: 'About', link: 'https://www.topcoder.com/company/', absolute: true },
-          { label: 'Contact us', link: 'https://www.topcoder.com/contact-us/', absolute: true },
-          { label: 'Privacy', link: 'https://www.topcoder.com/privacy-policy/', absolute: true },
-          { label: 'Terms', link: 'https://connect.topcoder.com/terms', absolute: true },
-        ]
-      }, {
+      }, 
+      {
         items: [
           { label: 'Log Out', link: logoutLink, absolute: true, onClick: logoutClick },
         ]

src/config/constants.js

@@ -7,6 +7,12 @@ import { getCookie } from '../helpers/cookie'
 export const LOAD_USER_SUCCESS     = 'LOAD_USER_SUCCESS'
 export const LOAD_USER_FAILURE     = 'LOAD_USER_FAILURE'
 
+export const LOAD_USER_CREDENTIAL     = 'LOAD_USER_CREDENTIAL'
+export const LOAD_USER_CREDENTIAL_PENDING     = 'LOAD_USER_CREDENTIAL_PENDING'
+export const LOAD_USER_CREDENTIAL_SUCCESS     = 'LOAD_USER_CREDENTIAL_SUCCESS'
+export const LOAD_USER_CREDENTIAL_FAILURE     = 'LOAD_USER_CREDENTIAL_FAILURE'
+
+
 // Load organization configs
 export const LOAD_ORG_CONFIG_SUCCESS     = 'LOAD_ORG_CONFIG_SUCCESS'
 export const LOAD_ORG_CONFIG_FAILURE     = 'LOAD_ORG_CONFIG_FAILURE'
@@ -738,6 +744,7 @@ export const TC_API_URL = `https://api.${DOMAIN}`
 export const DIRECT_PROJECT_URL = `https://www.${DOMAIN}/direct/projectOverview?formData.projectId=`
 export const WORK_MANAGER_APP = `https://challenges.${DOMAIN}/projects`
 export const SALESFORCE_PROJECT_LEAD_LINK = process.env.SALESFORCE_PROJECT_LEAD_LINK
+export const SALESFORCE_BILLING_ACCOUNT_LINK = process.env.SALESFORCE_BILLING_ACCOUNT_LINK
 export const TC_NOTIFICATION_URL = process.env.TC_NOTIFICATION_URL || `${TC_API_URL}/v5/notifications`
 // Uncomment if you run TC Notifications locally
 // export const TC_NOTIFICATION_URL = 'http://localstho:4000/v5/notifications'

src/projects/create/components/FillProjectDetails.scss

@@ -78,7 +78,7 @@
         @include flexBox;
         background-color: transparent;
         display: flex;
-        max-width: 760px;
+        max-width: 880px;
         margin: 20px auto;
 
         .left-area {

src/projects/create/components/HeaderWithProgress.scss

@@ -13,7 +13,7 @@
 
 .content {
   margin: 0 auto;
-  max-width: 600px;
+  max-width: 720px;
 }
 
 .title-estimate {

src/projects/detail/components/BillingAccountField/index.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import moment from 'moment'
 import {HOC as hoc} from 'formsy-react'
 
 import Select from '../../../../components/Select/Select'
 import {fetchBillingAccounts} from '../../../../api/billingAccounts'
-// import {SALESFORCE_PROJECT_LEAD_LINK} from '../../../../config/constants'
+import {SALESFORCE_BILLING_ACCOUNT_LINK} from '../../../../config/constants'
 
 import styles from './styles.module.scss'
 
@@ -14,7 +15,7 @@ import styles from './styles.module.scss'
  * @returns {{ label: string, value: number }} option for Select
  */
 const buildOption = (billingAccountObj) => ({
-  label: `${billingAccountObj.name} (${billingAccountObj.tcBillingAccountId})`,
+  label: `${billingAccountObj.name} (${billingAccountObj.tcBillingAccountId}) ${billingAccountObj.endDate ? ' - '+ moment(billingAccountObj.endDate).format('DD MMM YYYY'): ''}`,
   value: billingAccountObj.tcBillingAccountId
 })
 
@@ -72,7 +73,7 @@ class BillingAccountField extends React.Component {
 
   handleChange(value) {
     this.setState({ selectedBillingAccount: value })
-    this.props.setValue(value.value)
+    this.props.setValue(value ? value.value : null)
   }
 
   render() {
@@ -89,18 +90,20 @@ class BillingAccountField extends React.Component {
           value={this.state.selectedBillingAccount}
           options={this.state.billingAccounts}
           isDisabled={this.state.billingAccounts.length === 0}
+          showDropdownIndicator
         />
-        {/* Hide this link because we haven't implemented a required page in SFDC yet */}
-        {/* <div className={styles.manageBillingAccountLinkWrapper}>
-          <a
-            className={styles.manageBillingAccountLink}
-            href={`${SALESFORCE_PROJECT_LEAD_LINK}${this.props.projectId}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        {this.state.selectedBillingAccount && (
+          <div className={styles.manageBillingAccountLinkWrapper}>
+            <a
+              className={styles.manageBillingAccountLink}
+              href={`${SALESFORCE_BILLING_ACCOUNT_LINK}${this.state.selectedBillingAccount.value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
             Manage the billing account in Salesforce
-          </a>
-        </div> */}
+            </a>
+          </div>
+        )}
       </div>
     )
   }

src/projects/detail/components/JobPickerRow/JobPickerRow.jsx

@@ -46,9 +46,7 @@ class JobPickerRow extends React.PureComponent {
       { value: 'designer', title: 'Designer'},
       { value: 'software-developer', title: 'Software Developer'},
       { value: 'data-scientist', title: 'Data Scientist'},
-      { value: 'data-engineer', title: 'Data Engineer'},
-      { value: 'qa', title: 'QA Tester'},
-      { value: 'qa-engineer', title: 'QA Engineer'}
+      { value: 'data-engineer', title: 'Data Engineer'}
     ]
   }
   handleJobTitleChange(evt) {

src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss

@@ -12,6 +12,10 @@
   }
 
   .spec-question-list-item {
+    &.question-type-jobs-picker {
+      margin-left: -12.5px;
+      margin-right: -12.5px;
+    }
     padding: 0;
     margin-bottom: 30px;
 
@@ -170,7 +174,7 @@
         .dropdown-wrap.default {
           background: $tc-gray-neutral-light;
           border-color: $tc-gray-20;
-          max-width: 300px;
+          max-width: 352px;
           margin-left: 0px;
 
           &.error {

src/projects/detail/components/TaasProjectWelcome/TaasProjectWelcome.jsx

@@ -5,8 +5,13 @@ import './TaasProjectWelcome.scss'
 const TaasProjectWelcome = ({ projectId }) => {
   const url = `${TAAS_APP_URL}/myteams/${projectId}`
   return (
-    <div styleName="container">
-      <a href={url} className="tc-btn tc-btn-lg tc-btn-primary">Go to your Talent Team</a>
+    <div>
+      <div styleName="text-container">
+        <p>This is a Talent as a Service project. Click this button to navigate to a TaaS focused experience where you can get information specific to your TaaS team.</p>
+      </div>
+      <div styleName="container">
+        <a href={url} className="tc-btn tc-btn-lg tc-btn-primary">Go to your Talent Team</a>
+      </div>
     </div>
   )
 }