Merge branch 'dev' into feature/TM-518-compare-from-favorites, resolv…

…e conflicts

* dev:
  Chore/autodeploy config (#132)
  Pull css-box-shadow repo into app to force es6 to compile
  Refactor section headers in profile, static UI for projected vacancy notifications for favorites and bid list (#126)
  Projected Vacancy - Saved Search + Results cards (#123)
  Move "No Language" filter to top of list (#129)
  dev -> staging (#98) (#127)
  Add condensed card layouts for projected vacancy and recently available (#122)
  Add toggle component, use static toggle filter in search results (#121)
  Sprint 6 merge conflicts (#120)

# Conflicts:
#	src/Components/FavoritePositions/FavoritePositions.jsx
#	src/Components/HomePagePositionsList/HomePagePositionsList.jsx
#	src/Components/ResultsCondensedCard/ResultsCondensedCard.jsx
#	src/Components/ResultsCondensedCardBottom/ResultsCondensedCardBottom.jsx
#	src/Components/ResultsContainer/__snapshots__/ResultsContainer.test.jsx.snap
#	src/Components/ResultsList/ResultsList.jsx
#	src/Components/ResultsList/__snapshots__/ResultsList.test.jsx.snap

.circleci/config.yml

@@ -153,6 +153,12 @@ jobs:
             docker pull talentmap/$DOCKER_HUB_REPO:$TAG
             docker tag talentmap/$DOCKER_HUB_REPO:$TAG talentmap/$DOCKER_HUB_REPO:$BRANCH
             docker push talentmap/$DOCKER_HUB_REPO:$BRANCH
+  deploy:
+    <<: *default-docker-node
+    steps:
+      - add_ssh_keys
+      - run:
+          command: ssh -o StrictHostKeyChecking=no ec2-user@ec2-52-204-49-159.compute-1.amazonaws.com ./deploy.sh
 workflows:
   version: 2
   build_and_test:
@@ -167,6 +173,12 @@ workflows:
       # Disabled see 1368 - pa11y:
       #    requires:
       #      - docker-build
+      - deploy:
+          requires:
+            - yarn
+          filters:
+            branches:
+              only: dev
       - zap:
           requires:
             - docker-build

deploy/deploy.sh

@@ -1,5 +1,3 @@
-#! /bin/bash
-
 # "Automation" of the front end app deployment.
 # * Gets code from the `dev` branch
 # * generates certs
@@ -9,10 +7,10 @@
 # * copies static build dir to apache dir
 # * restarts apache and pm2
 
-curr_date=`date "+%Y-%m-%d_%H-%M-%S"`
-
+# delete backup if exists
+[ -d State-TalentMAP-dev-BACKUP ] && rm -rf State-TalentMAP-dev-BACKUP
 # backup current version if it exists
-[ -d State-TalentMAP-dev ] && mv State-TalentMAP-dev State-TalentMAP-dev-$curr_date
+[ -d State-TalentMAP-dev ] && cp -r  State-TalentMAP-dev State-TalentMAP-dev-BACKUP
 
 # get code
 wget -O dev.zip https://github.com/MetaPhase-Consulting/State-TalentMAP/archive/dev.zip
@@ -58,11 +56,11 @@ export NODE_ENV=production
 yarn build
 
 # backup the html dir if present
-[ -d /var/www/html ] && sudo mv /var/www/html /var/www/html-$curr_date
+[ -d /var/www/html ] && sudo mv /var/www/html /var/www/html-BACKUP
 # move build to html
 sudo cp -R build /var/www/html
 # restart apache
 sudo apachectl restart
 
 # restart the pm2 process
-pm2 restart all
+pm2 restart all --update-env

src/Components/BoxShadow/BoxShadow.jsx

@@ -1,7 +1,7 @@
 // forked from https://github.com/lachlanjc/react-box-shadow
 import React from 'react';
 import PropTypes from 'prop-types';
-import cssShadow from 'css-box-shadow';
+import cssShadow from './BoxShadowUtility';
 
 const BoxShadow = ({ is, inset, offsetX, offsetY, blurRadius, spreadRadius, color, style,
 ...props }) => {

src/Components/BoxShadow/BoxShadowUtility.js

@@ -0,0 +1,70 @@
+// from https://www.npmjs.com/package/css-box-shadow
+
+/* eslint-disable */
+
+const VALUES_REG = /,(?![^\(]*\))/;
+const PARTS_REG = /\s(?![^(]*\))/;
+const LENGTH_REG = /^[0-9]+[a-zA-Z%]+?$/;
+
+const parseValue = (str) => {
+  const parts = str.split(PARTS_REG);
+  const inset = parts.includes('inset');
+  const last = parts.slice(-1)[0];
+  const color = !isLength(last) ? last : undefined;
+
+  const nums = parts
+    .filter(n => n !== 'inset')
+    .filter(n => n !== color)
+    .map(toNum);
+  const [offsetX, offsetY, blurRadius, spreadRadius] = nums;
+
+  return {
+    inset,
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color,
+  };
+};
+
+const stringifyValue = (obj) => {
+  const {
+    inset,
+    offsetX = 0,
+    offsetY = 0,
+    blurRadius = 0,
+    spreadRadius,
+    color,
+  } = obj || {};
+
+  return [
+    (inset ? 'inset' : null),
+    offsetX,
+    offsetY,
+    blurRadius,
+    spreadRadius,
+    color,
+  ].filter(v => v !== null && v !== undefined)
+    .map(toPx)
+    .map(s => (`${s}`).trim())
+    .join(' ');
+};
+
+const isLength = v => v === '0' || LENGTH_REG.test(v);
+const toNum = (v) => {
+  if (!/px$/.test(v) && v !== '0') return v;
+  const n = parseFloat(v);
+  return !isNaN(n) ? n : v;
+};
+const toPx = n => typeof n === 'number' && n !== 0 ? (`${n}px`) : n;
+
+const parse = str => str.split(VALUES_REG).map(s => s.trim()).map(parseValue);
+const stringify = arr => arr.map(stringifyValue).join(', ');
+
+module.exports = {
+  parse,
+  stringify,
+};
+
+/* eslint-enable */

src/Components/ProfileDashboard/BidList/BidListHeader/BidListHeader.jsx

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import FontAwesome from 'react-fontawesome';
 import dateFns from 'date-fns';
 import { formatDate } from '../../../../utilities';
+import SectionHeader from '../../SectionHeader';
 
 // Due date is static for now
-const BidListHeader = ({ date }) => (
-  <div className="usa-grid-full bid-list-header section-padded-inner-container-narrow">
-    <div className="usa-width-two-thirds bid-list-header-text">
-      <FontAwesome name="clock-o" />{` All bids are due ${formatDate(date)}`}
-    </div>
-    <div className="usa-width-one-third bid-list-header-button-container">
-      <button className="bid-list-header-button">More Info</button>
-    </div>
-  </div>
-);
+const BidListHeader = ({ date }) => {
+  const title = ` All bids are due ${formatDate(date)}`;
+  const buttonText = 'More Info';
+  const icon = 'clock-o';
+  const props = { title, buttonText, icon };
+  return (
+    <SectionHeader {...props} />
+  );
+};
 
 BidListHeader.propTypes = {
   date: PropTypes.string,

src/Components/ProfileDashboard/BidList/BidListHeader/__snapshots__/BidListHeader.test.jsx.snap

@@ -1,25 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BidListHeaderComponent matches snapshot 1`] = `
-<div
-  className="usa-grid-full bid-list-header section-padded-inner-container-narrow"
->
-  <div
-    className="usa-width-two-thirds bid-list-header-text"
-  >
-    <FontAwesome
-      name="clock-o"
-    />
-     All bids are due 07/15/2019
-  </div>
-  <div
-    className="usa-width-one-third bid-list-header-button-container"
-  >
-    <button
-      className="bid-list-header-button"
-    >
-      More Info
-    </button>
-  </div>
-</div>
+<SectionHeader
+  buttonText="More Info"
+  icon="clock-o"
+  onButtonClick={[Function]}
+  title=" All bids are due 07/15/2019"
+/>
 `;

src/Components/ProfileDashboard/Favorites/FavoritesList.jsx

@@ -5,6 +5,8 @@ import SectionTitle from '../SectionTitle';
 import BorderedList from '../../BorderedList';
 import FavoriteListResultsCard from './FavoritesListResultsCard';
 import NoFavorites from '../../EmptyListAlert/NoFavorites';
+import SectionHeader from '../SectionHeader';
+import StaticDevContent from '../../StaticDevContent';
 
 const FavoriteList = ({ favorites }) => {
   const positionArray = [];
@@ -20,6 +22,9 @@ const FavoriteList = ({ favorites }) => {
   ));
   return (
     <div className="usa-grid-full profile-section-container">
+      <StaticDevContent>
+        <SectionHeader title="3 projected vacancies are now available" buttonText="View Favorites" icon="globe" />
+      </StaticDevContent>
       <div className="usa-grid-full section-padded-inner-container">
         <div className="usa-width-one-whole">
           <SectionTitle title="Favorites" icon="star" len={favorites.length} />

src/Components/ProfileDashboard/Favorites/__snapshots__/FavoritesList.test.jsx.snap

@@ -4,6 +4,14 @@ exports[`FavoritesListComponent matches snapshot 1`] = `
 <div
   className="usa-grid-full profile-section-container"
 >
+  <Connect(StaticDevContent)>
+    <SectionHeader
+      buttonText="View Favorites"
+      icon="globe"
+      onButtonClick={[Function]}
+      title="3 projected vacancies are now available"
+    />
+  </Connect(StaticDevContent)>
   <div
     className="usa-grid-full section-padded-inner-container"
   >
@@ -225,6 +233,14 @@ exports[`FavoritesListComponent matches snapshot when there are no bids 1`] = `
 <div
   className="usa-grid-full profile-section-container"
 >
+  <Connect(StaticDevContent)>
+    <SectionHeader
+      buttonText="View Favorites"
+      icon="globe"
+      onButtonClick={[Function]}
+      title="3 projected vacancies are now available"
+    />
+  </Connect(StaticDevContent)>
   <div
     className="usa-grid-full section-padded-inner-container"
   >

src/Components/ProfileDashboard/SavedSearches/SavedSearchesList.jsx

@@ -8,6 +8,8 @@ import BorderedList from '../../BorderedList';
 import SavedSearchesListResultsCard from './SavedSearchesListResultsCard';
 import Spinner from '../../Spinner';
 import NoSavedSearches from '../../EmptyListAlert/NoSavedSearches';
+import SectionHeader from '../SectionHeader';
+import StaticDevContent from '../../StaticDevContent';
 
 const SavedSearchesList = ({ savedSearches, goToSavedSearch, mappedParams, filtersIsLoading }) => {
   const savedSearchArray = [];
@@ -28,6 +30,9 @@ const SavedSearchesList = ({ savedSearches, goToSavedSearch, mappedParams, filte
         <Spinner type="saved-searches" size="big" />
         :
         <div className="usa-grid-full">
+          <StaticDevContent>
+            <SectionHeader title="3 projected vacancies are now available" buttonText="View Saved Searches" icon="globe" />
+          </StaticDevContent>
           <div className="usa-grid-full section-padded-inner-container">
             <div className="usa-width-one-whole">
               <SectionTitle title="Saved Searches" icon="clock-o" len={get(savedSearches, 'results.length')} />

src/Components/ProfileDashboard/SavedSearches/SavedSearchesListResultsCard/__snapshots__/SavedSearchesListResultsCard.test.jsx.snap

@@ -21,6 +21,8 @@ exports[`SavedSearchesListResultsCardComponent matches snapshot 1`] = `
         />
       </InteractiveElement>
       <SavedSearchPillList
+        highlightedString="Projected Vacancy"
+        isProjectedVacancy={false}
         pills={
           Array [
             "german",

src/Components/ProfileDashboard/SavedSearches/__snapshots__/SavedSearchesList.test.jsx.snap

@@ -7,6 +7,14 @@ exports[`SavedSearchesListComponent matches snapshot 1`] = `
   <div
     className="usa-grid-full"
   >
+    <Connect(StaticDevContent)>
+      <SectionHeader
+        buttonText="View Saved Searches"
+        icon="globe"
+        onButtonClick={[Function]}
+        title="3 projected vacancies are now available"
+      />
+    </Connect(StaticDevContent)>
     <div
       className="usa-grid-full section-padded-inner-container"
     >
@@ -141,6 +149,14 @@ exports[`SavedSearchesListComponent matches snapshot when there are no saved sea
   <div
     className="usa-grid-full"
   >
+    <Connect(StaticDevContent)>
+      <SectionHeader
+        buttonText="View Saved Searches"
+        icon="globe"
+        onButtonClick={[Function]}
+        title="3 projected vacancies are now available"
+      />
+    </Connect(StaticDevContent)>
     <div
       className="usa-grid-full section-padded-inner-container"
     >

src/Components/ProfileDashboard/SectionHeader/SectionHeader.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FontAwesome from 'react-fontawesome';
+import { EMPTY_FUNCTION } from '../../../Constants/PropTypes';
+
+const SectionHeader = ({ title, buttonText, icon, onButtonClick }) => (
+  <div className="usa-grid-full section-header section-padded-inner-container-narrow">
+    <div className="usa-width-two-thirds section-header-text">
+      <FontAwesome name={icon} />{title}
+    </div>
+    {
+      buttonText &&
+        <div className="usa-width-one-third section-header-button-container">
+          <button className="section-header-button" onClick={onButtonClick}>{buttonText}</button>
+        </div>
+    }
+  </div>
+);
+
+SectionHeader.propTypes = {
+  title: PropTypes.node,
+  buttonText: PropTypes.node,
+  icon: PropTypes.string,
+  onButtonClick: PropTypes.func,
+};
+
+SectionHeader.defaultProps = {
+  title: '',
+  buttonText: '',
+  icon: 'clock-o',
+  onButtonClick: EMPTY_FUNCTION,
+};
+
+export default SectionHeader;

src/Components/ProfileDashboard/SectionHeader/SectionHeader.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import SectionHeader from './SectionHeader';
+
+describe('SectionHeaderComponent', () => {
+  const props = {
+    title: 'Title',
+    buttonText: 'click me',
+    icon: 'clock-o',
+  };
+
+  it('is defined', () => {
+    const wrapper = shallow(<SectionHeader {...props} />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it('matches snapshot', () => {
+    const wrapper = shallow(<SectionHeader {...props} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+});

src/Components/ProfileDashboard/SectionHeader/__snapshots__/SectionHeader.test.jsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionHeaderComponent matches snapshot 1`] = `
+<div
+  className="usa-grid-full section-header section-padded-inner-container-narrow"
+>
+  <div
+    className="usa-width-two-thirds section-header-text"
+  >
+    <FontAwesome
+      name="clock-o"
+    />
+    Title
+  </div>
+  <div
+    className="usa-width-one-third section-header-button-container"
+  >
+    <button
+      className="section-header-button"
+      onClick={[Function]}
+    >
+      click me
+    </button>
+  </div>
+</div>
+`;

src/Components/ProfileDashboard/SectionHeader/index.js

@@ -0,0 +1 @@
+export { default } from './SectionHeader';