Add bid_count feature flag to differentiate from bidding flag

public/config/config.json

@@ -10,6 +10,7 @@
     "notifications": true,
     "data_sync_admin": true,
     "available_positions": false,
+    "bid_count": true,
     "personalization": true,
     "persona_auth": true
   }

src/Components/BidCount/FeatureFlagWrapper.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Flag } from 'flag';
+import BidCount from './BidCount';
+
+// Only show bid count if bid_count flag === true
+const BidCountFeatureFlagWrapper = props => (
+  <Flag
+    name="flags.bid_count"
+    render={() => <BidCount {...props} />}
+  />
+);
+
+export default BidCountFeatureFlagWrapper;

src/Components/BidCount/index.js

@@ -1 +1 @@
-export { default } from './BidCount';
+export { default } from './FeatureFlagWrapper';

src/Components/BidListResultsCard/BidContent/__snapshots__/BidContent.test.jsx.snap

@@ -11,11 +11,9 @@ exports[`BidContentComponent matches snapshot 1`] = `
   <span
     className="bid-stats"
   >
-    <BidCount
+    <BidCountFeatureFlagWrapper
       altStyle={true}
       bidStatistics={null}
-      hideLabel={false}
-      isCondensed={false}
       label="Bid Count"
     />
   </span>

src/Components/BidTracker/BidTrackerCardTitle/__snapshots__/BidTrackerCardTitle.test.jsx.snap

@@ -38,7 +38,7 @@ exports[`BidTrackerCardTitleComponent matches snapshot when condensedView is tru
     <span
       className="bid-stats"
     >
-      <BidCount
+      <BidCountFeatureFlagWrapper
         altStyle={true}
         bidStatistics={
           Object {
@@ -58,9 +58,6 @@ exports[`BidTrackerCardTitleComponent matches snapshot when condensedView is tru
             "total_positions": 251,
           }
         }
-        hideLabel={false}
-        isCondensed={false}
-        label="Bid count:"
       />
     </span>
   </div>
@@ -105,7 +102,7 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "approved"
     <span
       className="bid-stats"
     >
-      <BidCount
+      <BidCountFeatureFlagWrapper
         altStyle={true}
         bidStatistics={
           Object {
@@ -125,9 +122,6 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "approved"
             "total_positions": 251,
           }
         }
-        hideLabel={false}
-        isCondensed={false}
-        label="Bid count:"
       />
     </span>
   </div>
@@ -172,7 +166,7 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "submitted
     <span
       className="bid-stats"
     >
-      <BidCount
+      <BidCountFeatureFlagWrapper
         altStyle={true}
         bidStatistics={
           Object {
@@ -192,9 +186,6 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "submitted
             "total_positions": 251,
           }
         }
-        hideLabel={false}
-        isCondensed={false}
-        label="Bid count:"
       />
     </span>
   </div>
@@ -239,7 +230,7 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "submitted
     <span
       className="bid-stats"
     >
-      <BidCount
+      <BidCountFeatureFlagWrapper
         altStyle={true}
         bidStatistics={
           Object {
@@ -259,9 +250,6 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is "submitted
             "total_positions": 251,
           }
         }
-        hideLabel={false}
-        isCondensed={false}
-        label="Bid count:"
       />
     </span>
   </div>
@@ -306,7 +294,7 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is not "submi
     <span
       className="bid-stats"
     >
-      <BidCount
+      <BidCountFeatureFlagWrapper
         altStyle={true}
         bidStatistics={
           Object {
@@ -326,9 +314,6 @@ exports[`BidTrackerCardTitleComponent matches snapshot when status is not "submi
             "total_positions": 251,
           }
         }
-        hideLabel={false}
-        isCondensed={false}
-        label="Bid count:"
       />
     </span>
   </div>

src/Components/CompareList/CompareList.jsx

@@ -165,7 +165,7 @@ class CompareList extends Component {
                       }
                     </tr>
                     <Flag
-                      name="flags.static_content"
+                      name="flags.bid_count"
                       render={() => renderBidCounts(compareArray, emptyArray)}
                     />
                     <tr>

src/Components/CompareList/__snapshots__/CompareList.test.jsx.snap

@@ -203,7 +203,7 @@ exports[`CompareListComponent matches snapshot 1`] = `
             />
           </tr>
           <Flag
-            name="flags.static_content"
+            name="flags.bid_count"
             render={[Function]}
           />
           <tr>
@@ -710,7 +710,7 @@ exports[`CompareListComponent matches snapshot when there is an obc id 1`] = `
             />
           </tr>
           <Flag
-            name="flags.static_content"
+            name="flags.bid_count"
             render={[Function]}
           />
           <tr>

src/Components/PositionTitle/PositionTitle.jsx

@@ -13,9 +13,11 @@ import { getAssetPath, propOrDefault, getPostName } from '../../utilities';
 import { CANNOT_BID_DEFAULT, CANNOT_BID_SUFFIX, NO_POST } from '../../Constants/SystemMessages';
 import PermissionsWrapper from '../../Containers/PermissionsWrapper';
 import BidCount from '../BidCount';
+import { checkFlag } from '../../flags';
 
 
 const seal = getAssetPath('/assets/img/us-flag.jpg');
+const useBidding = () => checkFlag('flags.bidding');
 
 class PositionTitle extends Component {
   constructor(props) {
@@ -91,28 +93,30 @@ class PositionTitle extends Component {
             src={seal}
           />
         </div>
-        <div className="offset-bid-button-container">
+        <div className={useBidding() ? 'offset-bid-button-container' : 'offset-bid-button-container-no-button'}>
           {
             !isProjectedVacancy &&
-            <Flag
-              name="flags.bidding"
-              render={this.renderBidCount}
-            />
+              this.renderBidCount()
           }
           {
             !get(details, 'availability.availability', true) &&
-              <div className="unavailable-tooltip">
-                <Tooltip
-                  title={availablilityText}
-                  arrow
-                  position="bottom"
-                  tabIndex="0"
-                  theme="light"
-                >
-                  <FontAwesome name="question-circle" />
-                  {'Why can\'t I add this position to my bid list?'}
-                </Tooltip>
-              </div>
+            <Flag
+              name="flags.bidding"
+              render={() => (
+                <div className="unavailable-tooltip">
+                  <Tooltip
+                    title={availablilityText}
+                    arrow
+                    position="bottom"
+                    tabIndex="0"
+                    theme="light"
+                  >
+                    <FontAwesome name="question-circle" />
+                    {'Why can\'t I add this position to my bid list?'}
+                  </Tooltip>
+                </div>
+              )}
+            />
           }
           {
             !isProjectedVacancy &&

src/Components/PositionTitle/__snapshots__/PositionTitle.test.jsx.snap

@@ -75,9 +75,10 @@ exports[`PositionTitleComponent matches snapshot 1`] = `
   <div
     className="offset-bid-button-container"
   >
-    <Flag
-      name="flags.bidding"
-      render={[Function]}
+    <BidCountFeatureFlagWrapper
+      altStyle={true}
+      hideLabel={true}
+      isCondensed={true}
     />
     <Flag
       name="flags.bidding"

src/Components/ResultsCard/ResultsCard.jsx

@@ -179,7 +179,7 @@ class ResultsCard extends Component {
                     {
                       !isProjectedVacancy &&
                       <Flag
-                        name="flags.bidding"
+                        name="flags.bid_count"
                         render={() => renderBidCountMobile(stats)}
                       />
                     }
@@ -199,7 +199,7 @@ class ResultsCard extends Component {
                     {
                       !isProjectedVacancy &&
                       <Flag
-                        name="flags.bidding"
+                        name="flags.bid_count"
                         render={() => renderBidCount(stats)}
                       />
                     }

src/Components/ResultsCondensedCardBottom/ResultsCondensedCardBottom.jsx

@@ -20,7 +20,10 @@ class ResultsCondensedCardBottom extends Component {
     const { showBidCount, position } = this.props;
     const pos = position.position || position;
     return showBidCount ?
-      <ResultsCondensedCardStats bidStatisticsArray={pos.bid_statistics} />
+      <Flag
+        name="flags.bid_count"
+        render={() => <ResultsCondensedCardStats bidStatisticsArray={pos.bid_statistics} />}
+      />
     :
     null;
   }

src/Components/ResultsCondensedCardStats/__snapshots__/ResultsCondensedCardStats.test.jsx.snap

@@ -7,8 +7,7 @@ exports[`ResultsCondensedCardStatsComponent matches snapshot 1`] = `
   <div
     className="usa-grid-full condensed-card-statistics-inner"
   >
-    <BidCount
-      altStyle={false}
+    <BidCountFeatureFlagWrapper
       bidStatistics={
         Object {
           "at_skill": 5,
@@ -17,9 +16,6 @@ exports[`ResultsCondensedCardStatsComponent matches snapshot 1`] = `
           "total_bids": 5,
         }
       }
-      hideLabel={false}
-      isCondensed={false}
-      label="Bid count:"
     />
   </div>
 </div>

src/sass/_details.scss

@@ -289,6 +289,21 @@
       white-space: nowrap;
     }
   }
+
+  .bid-count-container {
+    margin-right: 7.5px;
+  }
+}
+
+.offset-bid-button-container-no-button {
+  bottom: 17%;
+  left: 71%;
+  position: absolute;
+
+  @media screen and (max-width: $screen-xs-max) {
+    min-width: 0px;
+    left: 63%;
+  }
 }
 
 .offset-bid-count-container {