pr review fixes

Author: CDharmateja

src/api/billingAccounts.js

@@ -2,7 +2,7 @@ import { axiosInstance as axios } from './requestInterceptor'
 import { TC_API_URL } from '../config/constants'
 
 /**
- * Get a user groups based on it's member id and membership type
+ * Get billing accounts based on project id
  *
  * @param {String} projectId Id of the project
  *

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

@@ -26,11 +26,10 @@ class BillingAccountField extends React.Component {
       .then(() => {
         if (this.props.billingAccountId) {
           this.setState(state => {
-            const filteredArray = state.billingAccounts.filter(
-              ({tcBillingAccountId}) =>
-                tcBillingAccountId === this.props.billingAccountId
-            )
-            if (filteredArray.length === 0) {
+            const existentBillingAccount = _.find(state.billingAccounts, {
+              tcBillingAccountId: this.props.billingAccountId
+            })
+            if (!existentBillingAccount) {
               const billingAccountObj = {
                 name: '<Assigned Account>',
                 tcBillingAccountId: this.props.billingAccountId
@@ -41,7 +40,7 @@ class BillingAccountField extends React.Component {
               }
             } else {
               return {
-                selectedBillingAccount: this.mapOpts(filteredArray[0])
+                selectedBillingAccount: this.mapOpts(existentBillingAccount)
               }
             }
           })
@@ -63,27 +62,22 @@ class BillingAccountField extends React.Component {
   }
 
   render() {
-    const mapOpts = opt => ({
-      label: `${opt.name} (${opt.tcBillingAccountId})`,
-      value: opt.tcBillingAccountId
-    })
     return (
       <div className={styles.container}>
-        <div>Choose a Billing Account</div>
+        <div className={styles.fieldName}>Choose a Billing Account</div>
         <Select
           placeholder={
             this.state.billingAccounts.length > 0 
               ? 'Select billing account'
               : 'No Billing Account Available'
           }
-          heightAuto
           onChange={this.handleChange}
           value={this.state.selectedBillingAccount}
-          options={this.state.billingAccounts.map(mapOpts)}
+          options={this.state.billingAccounts.map(this.mapOpts)}
           isDisabled={this.state.billingAccounts.length === 0}
         />
         <a
-          className="tc-link"
+          className={styles.manageBillingAccountLink}
           href={`${SALESFORCE_PROJECT_LEAD_LINK}${this.props.projectId}`}
           target="_blank"
           rel="noopener noreferrer"

src/projects/detail/components/BillingAccountField/styles.module.scss

@@ -1,5 +1,15 @@
+@import '~tc-ui/src/styles/tc-includes';
+
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  .fieldName {
+    margin-bottom: 10px;
+  }
+  .manageBillingAccountLink {
+    display: block;
+    color: $tc-dark-blue-110;
+    margin-top: 10px;
+    &:hover {
+      color: inherit;
+    }
+  }
 }

src/projects/detail/components/EditProjectDefaultsForm/EditProjectDefaultsForm.scss

@@ -6,9 +6,6 @@
     .container {
       padding: 50px 0 70px 0;
       margin: 0 50px 20px 50px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
     }
     .radio-group-options {
       flex-direction: column;

src/projects/detail/components/GroupsField/GroupsField.module.scss

@@ -1,5 +1,6 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  margin: 10px 0 20px 0;
+  .fieldName {
+    margin-bottom: 10px;
+  }
+}

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

@@ -67,7 +67,7 @@ class GroupsField extends React.Component {
   render() {
     return (
       <div className={styles.container}>
-        <div>Intended Work Groups</div>
+        <div className={styles.fieldName}>Intended Work Groups</div>
         <FormsySelect
           name="groups-field"
           isMulti