fix: improvements for the Skills Field

ref issue #4269

Author: maxceem

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

@@ -7,73 +7,87 @@ import {SALESFORCE_PROJECT_LEAD_LINK} from '../../../../config/constants'
 
 import styles from './styles.module.scss'
 
+/**
+ * Build Select option from Billing Account object
+ * @param {{ name: string, tcBillingAccountId: number }} billingAccountObj billing account object
+ *
+ * @returns {{ label: string, value: number }} option for Select
+ */
+const buildOption = (billingAccountObj) => ({
+  label: `${billingAccountObj.name} (${billingAccountObj.tcBillingAccountId})`,
+  value: billingAccountObj.tcBillingAccountId
+})
+
 class BillingAccountField extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
+      isLoading: true,
       billingAccounts: [],
-      selectedBillingAccount: this.props.billingAccountId
+      selectedBillingAccount: null,
     }
 
     this.handleChange = this.handleChange.bind(this)
-    this.mapOpts = this.mapOpts.bind(this)
   }
 
   componentDidMount() {
     fetchBillingAccounts(this.props.projectId)
-      .then(({data: billingAccounts}) => this.setState({billingAccounts}))
-      .then(() => {
-        if (this.props.billingAccountId) {
-          this.setState(state => {
-            const existentBillingAccount = _.find(state.billingAccounts, {
-              tcBillingAccountId: this.props.billingAccountId
-            })
-            if (!existentBillingAccount) {
-              const billingAccountObj = {
-                name: '<Assigned Account>',
-                tcBillingAccountId: this.props.billingAccountId
-              }
-              return {
-                billingAccounts: [...state.billingAccounts, billingAccountObj],
-                selectedBillingAccount: this.mapOpts(billingAccountObj)
-              }
-            } else {
-              return {
-                selectedBillingAccount: this.mapOpts(existentBillingAccount)
-              }
-            }
+      .catch(error => {
+        // in case of error during loading billing accounts list
+        // still show the empty list or currently selected value
+        // and just log error to console
+        console.error(error)
+        return { data: [] }
+      })
+      .then(({ data }) => {
+        let billingAccounts = data.map(buildOption)
+        let selectedBillingAccount = null
+
+        // if some value is already selected we have to find and select the option for it
+        if (this.props.value) {
+          selectedBillingAccount = _.find(billingAccounts, {
+            value: this.props.value
           })
+
+          // if option is not on the list, then create such option
+          // this is needed if the user doesn't have access to the selected account
+          if (!selectedBillingAccount) {
+            selectedBillingAccount = buildOption({
+              name: '<Assigned Account>',
+              tcBillingAccountId: this.props.value
+            })
+
+            billingAccounts = [selectedBillingAccount, ...billingAccounts]
+          }
         }
+
+        this.setState({
+          isLoading: false,
+          billingAccounts,
+          selectedBillingAccount,
+        })
       })
-      .catch(console.error)
   }
 
   handleChange(value) {
-    this.setState({selectedBillingAccount: value})
+    this.setState({ selectedBillingAccount: value })
     this.props.setValue(value.value)
   }
 
-  mapOpts(opt) {
-    return {
-      label: `${opt.name} (${opt.tcBillingAccountId})`,
-      value: opt.tcBillingAccountId
-    }
-  }
-
   render() {
+    const placeholder = this.state.billingAccounts.length > 0
+      ? 'Select billing account'
+      : 'No Billing Account Available'
+
     return (
       <div className={styles.container}>
         <div className={styles.fieldName}>Choose a Billing Account</div>
         <Select
-          placeholder={
-            this.state.billingAccounts.length > 0
-              ? 'Select billing account'
-              : 'No Billing Account Available'
-          }
+          placeholder={this.state.isLoading ? 'Loading...' : placeholder}
           onChange={this.handleChange}
           value={this.state.selectedBillingAccount}
-          options={this.state.billingAccounts.map(this.mapOpts)}
+          options={this.state.billingAccounts}
           isDisabled={this.state.billingAccounts.length === 0}
         />
         <div className={styles.manageBillingAccountLinkWrapper}>

src/projects/detail/components/EditProjectDefaultsForm/EditProjectDefaultsForm.jsx

@@ -84,7 +84,7 @@ class EditProjectDefaultsForm extends React.Component {
             <BillingAccountField
               name="billingAccountId"
               projectId={this.state.project.id}
-              billingAccountId={this.state.project.billingAccountId}
+              value={this.state.project.billingAccountId}
             />
           </div>
           <div className="section-footer section-footer-spec">