dev -> staging (#56)

* chore: remove unnecessary css file from the build output

* chore: update docs regarding apache compression config

* Update bid list due date to match site-wide format

* Use position id instead of position_number to query for position details

* chore: remove unused props from components

* chore: fix err due to incorrect favicon size in manifest

* chore: remove unused props from the Home container

* chore: remove unused props from the HomePagePositionsContainer component

* fix: update profile page based on qa

* Update styles and content in Position Details page based on QA feedback

* fix: add logo to saved search title

* fix: search page updates from qa

* chore: linter fix

* chore: fix linter issue

* fix: search page updates from qa

* chore: linter fix

* Remove feedback button site-wide

* Use object in state instead of array

* Minor edits to Homepage based on QA

* fix: make the pagination link clickable area larger

* fix: use the correct button style

* fix: better accessibility for active pagination tab selection

* fix: use correct button design

* fix: use lodash get so that non-existent nested property doesn't throw error  (#45)

* Use lodash get so that non-existent nested property doesn't throw error

* Check for details.id so that components don't render with an empty object

* Align bid count with data points in ResultsCondensedCard

* Show "Available" filter to all users, not just CDOs (#46)

* Update dashboard styles and content based on QA

* Fix style for bid list container

* Move Bid Count in-line with data points on ResultsCard

* View More -> View more

* Add disabled state for BidListButton based on proposed API updates

* Use real properties from API PR, combine strings

* Use white for button text color

* feature: add remove bid to the bid tracker for draft and submitted bids

* add additional status to the canDeleteBid function

* Add react-toastify and use with bid list additions/removals (#51)

* Add react-toastify and use with bid list additions/removals

* More tests for toast-related functionality

* Check if bid can be deleted and apply disabled status accordingly; update and optimize utility function

* feature: use the can_delete property from the bid rather than calculate client side

* Add loading spinner to Bid List button (#52)

* Compress us-flag.jpg (#53)

config/webpack.config.prod.js

@@ -243,7 +243,6 @@ module.exports = {
     ],
   },
   plugins: [
-    new ExtractTextPlugin('style.css'),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

deploy/DEPLOY.md

@@ -54,6 +54,14 @@ Add a `VirtualHost` entry in `/etc/httpd/conf/httpd.conf`. The web application u
 </VirtualHost>
 ```
 
+It is recommended to add the following to `/etc/httpd/conf/httpd.conf` to enable the compression of files served by Apache
+
+```http
+<IfModule mod_deflate.c>
+    SetOutputFilter DEFLATE
+</IfModule>
+```
+
 ## Clone repository
 
 Use `git` to clone the web app repository

package.json

@@ -41,6 +41,7 @@
     "react-select": "^1.1.0",
     "react-simple-dropdown": "^3.2.0",
     "react-tippy": "^1.2.2",
+    "react-toastify": "^4.5.1",
     "redux": "^3.7.1",
     "redux-form": "^7.2.0",
     "redux-saga": "^0.15.6",

public/manifest.json

@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
+      "sizes": "16x16",
       "type": "image/png"
     }
   ],

src/Components/BidCount/BidCount.jsx

@@ -30,7 +30,7 @@ BidCount.propTypes = {
 BidCount.defaultProps = {
   bidStatistics: {},
   hideLabel: false,
-  label: 'Bid Count:',
+  label: 'Bid count:',
   altStyle: false,
 };
 

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

@@ -8,7 +8,7 @@ exports[`BidCountComponent matches snapshot 1`] = `
     className="bid-count-label"
     id="bid-counts"
   >
-    Bid Count:
+    Bid count:
   </div>
   <ul
     aria-labelledby="bid-counts"
@@ -42,7 +42,7 @@ exports[`BidCountComponent matches snapshot when hideLabel is true 1`] = `
     className="bid-count-label usa-sr-only"
     id="bid-counts"
   >
-    Bid Count:
+    Bid count:
   </div>
   <ul
     aria-labelledby="bid-counts"

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

@@ -12,6 +12,7 @@ exports[`BidCycleList Component matches snapshot 1`] = `
     columns={12}
   >
     <ProfileSectionTitle
+      icon=""
       title="Bid Cycles"
     />
     <BidCycleCard

src/Components/BidListButton/BidListButton.jsx

@@ -1,42 +1,54 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import FontAwesome from 'react-fontawesome';
+import { get } from 'lodash';
 import { existsInNestedObject } from '../../utilities';
 import { BID_RESULTS } from '../../Constants/PropTypes';
 
 class BidListButton extends Component {
 
   constructor(props) {
     super(props);
+    this.getBidData = this.getBidData.bind(this);
     this.toggleSaved = this.toggleSaved.bind(this);
   }
 
-  getIsSaved() {
-    // Is the id in the array? If so, return true
+  getBidData() {
     const { compareArray, id } = this.props;
-    return existsInNestedObject(id, compareArray);
+    const exists = existsInNestedObject(id, compareArray);
+    return {
+      isSaved: exists,
+      canDelete: get(exists, 'can_delete', false),
+    };
   }
 
   toggleSaved() {
-    const { toggleBidPosition, id } = this.props;
+    const { disabled, toggleBidPosition, id, isLoading } = this.props;
+    const { isSaved } = this.getBidData();
     // pass the id and the "remove" param
-    toggleBidPosition(id, this.getIsSaved());
+    if (!isLoading && !disabled) {
+      toggleBidPosition(id, isSaved);
+    }
   }
 
   render() {
     // is the bid currently saved?
     // save value and avoid interrogating the array more than once
-    const bidIsSaved = this.getIsSaved();
-    const text = bidIsSaved ? 'Remove from Bid List' : 'Add to Bid List';
-    const iconClass = bidIsSaved ? 'minus-circle' : 'plus-circle';
+    const { isSaved, canDelete } = this.getBidData();
+    const text = isSaved ? 'Remove from Bid List' : 'Add to Bid List';
+    const iconClass = isSaved ? 'minus-circle' : 'plus-circle';
     const style = {
       pointerEvents: this.props.isLoading ? 'none' : 'inherit',
     };
-    const { className } = this.props;
+    const { className, disabled, isLoading } = this.props;
+    const disabled$ = disabled || !canDelete;
+    const disabledClass = disabled$ ? 'usa-button-disabled' : '';
     return (
-      <button className={className} style={style} onClick={this.toggleSaved}>
+      <button className={`${disabledClass} ${className}`} style={style} onClick={this.toggleSaved} disabled={disabled$}>
         <span className="button-icon">
-          <FontAwesome name={iconClass} />
+          {isLoading ?
+            (<span className="ds-c-spinner spinner-white" />) :
+            (<FontAwesome name={iconClass} />)}
         </span>
         <span>{text}</span>
       </button>
@@ -50,12 +62,14 @@ BidListButton.propTypes = {
   compareArray: BID_RESULTS,
   isLoading: PropTypes.bool,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 BidListButton.defaultProps = {
   compareArray: [],
   isLoading: false,
   className: 'bid-list-button',
+  disabled: false,
 };
 
 export default BidListButton;

src/Components/BidListButton/BidListButton.test.jsx

@@ -58,6 +58,47 @@ describe('BidListButtonComponent', () => {
     sinon.assert.calledOnce(spy);
   });
 
+  it('is disabled and correctly styled when disabled === true', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(
+      <BidListButton
+        id={1}
+        toggleBidPosition={spy}
+        compareArray={bidListFalse}
+        isLoading={false}
+        disabled
+      />,
+    );
+    wrapper.find('.usa-button-disabled').simulate('click');
+    sinon.assert.notCalled(spy);
+  });
+
+  it('displays the spinner when isLoading is true', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(
+      <BidListButton
+        id={1}
+        toggleBidPosition={spy}
+        compareArray={bidListFalse}
+        isLoading
+      />,
+    );
+    expect(wrapper.find('.ds-c-spinner').exists()).toBe(true);
+  });
+
+  it('hides the spinner when isLoading is false', () => {
+    const spy = sinon.spy();
+    const wrapper = shallow(
+      <BidListButton
+        id={1}
+        toggleBidPosition={spy}
+        compareArray={bidListFalse}
+        isLoading={false}
+      />,
+    );
+    expect(wrapper.find('.ds-c-spinner').exists()).toBe(false);
+  });
+
   it('matches snapshot when the user can add the position', () => {
     const wrapper = shallow(
       <BidListButton

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

@@ -2,7 +2,8 @@
 
 exports[`BidListButtonComponent matches snapshot when the user can add the position 1`] = `
 <button
-  className="bid-list-button"
+  className="usa-button-disabled bid-list-button"
+  disabled={true}
   onClick={[Function]}
   style={
     Object {
@@ -25,7 +26,8 @@ exports[`BidListButtonComponent matches snapshot when the user can add the posit
 
 exports[`BidListButtonComponent matches snapshot when the user can remove the position 1`] = `
 <button
-  className="bid-list-button"
+  className="usa-button-disabled bid-list-button"
+  disabled={true}
   onClick={[Function]}
   style={
     Object {

src/Components/BidListResultsCard/BidContent/BidContent.jsx

@@ -5,15 +5,15 @@ import BidStatus from '../BidStatus';
 import BidCount from '../../BidCount';
 import { BID_STATISTICS_OBJECT } from '../../../Constants/PropTypes';
 
-const BidContent = ({ status, positionNumber, postName, positionTitle, bidStatistics }) => (
+const BidContent = ({ id, status, positionNumber, postName, positionTitle, bidStatistics }) => (
   <div className="usa-grid-full bid-content-container">
     <BidStatus status={status} positionTitle={positionTitle} />
     <span className="bid-stats">
       <BidCount bidStatistics={bidStatistics} altStyle label="Bid Count" />
     </span>
     <div>
       <span className="bid-list-card-title-position">Position number </span>
-      <Link to={`/details/${positionNumber}`}>
+      <Link to={`/details/${id}`}>
         {positionNumber}
       </Link>
     </div>
@@ -25,6 +25,7 @@ const BidContent = ({ status, positionNumber, postName, positionTitle, bidStatis
 );
 
 BidContent.propTypes = {
+  id: PropTypes.number.isRequired,
   status: PropTypes.string.isRequired,
   positionNumber: PropTypes.string.isRequired,
   postName: PropTypes.string.isRequired,

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

@@ -9,6 +9,7 @@ describe('BidContentComponent', () => {
   it('is defined', () => {
     const wrapper = shallow(
       <BidContent
+        id={100}
         status={APPROVED.property}
         positionNumber="055A45"
         postName="Paris"
@@ -22,6 +23,7 @@ describe('BidContentComponent', () => {
   it('matches snapshot', () => {
     const wrapper = shallow(
       <BidContent
+        id={100}
         status={APPROVED.property}
         positionNumber="055A45"
         postName="Paris"

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

@@ -26,7 +26,7 @@ exports[`BidContentComponent matches snapshot 1`] = `
     </span>
     <Link
       replace={false}
-      to="/details/055A45"
+      to="/details/100"
     >
       055A45
     </Link>

src/Components/BidListResultsCard/BidListResultsCard.jsx

@@ -38,6 +38,7 @@ class BidListResultsCard extends Component {
               content={
                 <div>
                   <BidContent
+                    id={bid.position.id}
                     positionTitle={bid.position.title}
                     status={bid.status}
                     positionNumber={bid.position.position_number}

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

@@ -31,6 +31,7 @@ exports[`BidListResultsCardComponent matches snapshot 1`] = `
                   "user": "Jenny Townpost",
                 }
               }
+              id={2}
               positionNumber="05A"
               positionTitle="AO"
               postName="Paris"

src/Components/BidTracker/BidTrackerCard/BidTrackerCard.jsx

@@ -27,6 +27,7 @@ const BidTrackerCard = ({ bid, acceptBid, declineBid, submitBid, deleteBid, user
       <div>
         <BidTrackerCardTop
           bid={bid}
+          deleteBid={deleteBid}
         />
         <div className={`usa-grid-full padded-container-inner bid-tracker-bid-steps-container ${draftClass}`}>
           <BidSteps bid={bid} />

src/Components/BidTracker/BidTrackerCard/BidTrackerCard.test.jsx

@@ -24,6 +24,16 @@ describe('BidTrackerCardComponent', () => {
     expect(wrapper).toBeDefined();
   });
 
+  it('draft bid has draft class', () => {
+    const newProps = { ...props };
+    newProps.bid.status = 'draft';
+    const wrapper = shallow(
+      <BidTrackerCard {...newProps} />,
+    );
+    expect(wrapper).toBeDefined();
+    expect(wrapper.find('bid-tracker-bid-steps-container--draft')).toBeDefined();
+  });
+
   it('matches snapshot', () => {
     const wrapper = shallow(
       <BidTrackerCard {...props} />,