GUIKit prod fixes and implement of #4890

Author: kkartunov

__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap

@@ -65,13 +65,12 @@ exports[`Default render 1`] = `
       valueComponent={[Function]}
       valueKey="value"
     />
-    <IconDown
+    <img
+      alt="dropdown-arraow-icon"
       className="src-shared-components-GUIKit-Dropdown-___style__iconDropdown___2bPox"
       height="9"
-      viewBox="0 0 22 13"
+      src="/community-app-assets/images/e740c51bb099110dff2900fa4fc94d72.png"
       width="15"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </div>

__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap

@@ -59,13 +59,12 @@ exports[`Default render 1`] = `
         ]
       }
     />
-    <IconDown
+    <img
+      alt="dropdown-arrow-icon"
       className="src-shared-components-GUIKit-DropdownTerms-___style__iconDropdown___25Wtg"
       height="9"
-      viewBox="0 0 22 13"
+      src="/community-app-assets/images/e740c51bb099110dff2900fa4fc94d72.png"
       width="15"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </div>

src/assets/images/dropdown-arrow.png

@@ -7,7 +7,7 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import ReactSelect from 'react-select';
 import './style.scss';
-import IconDown from 'assets/images/minimal-down.svg';
+import iconDown from 'assets/images/dropdown-arrow.png';
 import { config } from 'topcoder-react-utils';
 
 
@@ -59,7 +59,7 @@ function Dropdown({
           placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
           clearable={false}
         />
-        <IconDown width="15" height="9" styleName="iconDropdown" />
+        <img width="15" height="9" styleName="iconDropdown" src={iconDown} alt="dropdown-arraow-icon" />
       </div>
       {label ? (
         <span styleName="label">

src/shared/components/GUIKit/Dropdown/index.jsx

@@ -6,7 +6,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
 import { Creatable } from 'react-select';
-import IconDown from 'assets/images/minimal-down.svg';
+import iconDown from 'assets/images/dropdown-arrow.png';
 import './style.scss';
 
 import { config } from 'topcoder-react-utils';
@@ -149,7 +149,7 @@ function DropdownTerms({
             internalTerms, t => !_.find(selectedOption, { label: t.label }),
           ).map(o => ({ value: o.label, label: o.label }))}
         />
-        <IconDown width="15" height="9" styleName="iconDropdown" />
+        <img width="15" height="9" styleName="iconDropdown" src={iconDown} alt="dropdown-arrow-icon" />
       </div>
       {label ? (
         <span styleName="label">

src/shared/components/GUIKit/DropdownTerms/index.jsx

@@ -30,12 +30,9 @@
       z-index: 0;
       top: 8px;
       left: 15px;
-
-      @include xs-to-sm {
-        max-width: 250px;
-        overflow: hidden;
-        white-space: nowrap;
-      }
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: calc(100% - 20px);
     }
 
     .clear-search {

src/shared/components/GUIKit/SearchCombo/style.scss

@@ -8,12 +8,22 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import SearchCombo from 'components/GUIKit/SearchCombo';
 import Paginate from 'components/GUIKit/Paginate';
 import JobListCard from 'components/GUIKit/JobListCard';
+import Dropdown from 'components/GUIKit/Dropdown';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import './jobLisingStyles.scss';
 
 const GIGS_PER_PAGE = 10;
+// Sort by dropdown
+const sortByOptions = [
+  { label: 'Latest Added Descending', selected: true },
+  { label: 'Latest Updated Descending', selected: false },
+];
+// Locations
+const locations = [{
+  label: 'Anywhere', selected: true,
+}];
 
 class RecruitCRMJobsContainer extends React.Component {
   constructor(props) {
@@ -23,11 +33,14 @@ class RecruitCRMJobsContainer extends React.Component {
       term: '',
       page: 0,
       sortBy: 'created_on',
+      location: 'Anywhere',
     };
-
+    // binds
     this.onSearch = this.onSearch.bind(this);
     this.onPaginate = this.onPaginate.bind(this);
     this.onFilter = this.onFilter.bind(this);
+    this.onLocation = this.onLocation.bind(this);
+    this.onSort = this.onSort.bind(this);
   }
 
   componentDidMount() {
@@ -69,6 +82,22 @@ class RecruitCRMJobsContainer extends React.Component {
     });
   }
 
+  onLocation(newLocation) {
+    const selected = _.find(newLocation, { selected: true });
+    this.onFilter({
+      location: selected.label,
+      page: 0,
+    });
+  }
+
+  onSort(newSort) {
+    const selected = _.find(newSort, { selected: true });
+    this.onFilter({
+      sortBy: selected.label === 'Latest Updated Descending' ? 'updated_on' : 'created_on',
+      page: 0,
+    });
+  }
+
   render() {
     const {
       loading,
@@ -78,16 +107,29 @@ class RecruitCRMJobsContainer extends React.Component {
       term,
       page,
       sortBy,
+      location,
     } = this.state;
 
     if (loading) {
       return <LoadingIndicator />;
     }
 
     let jobsToDisplay = jobs;
+    // build current locations dropdown based on all data
+    // and filter by selected location
+    jobsToDisplay = _.filter(jobs, (job) => {
+      // build dropdown
+      const found = _.find(locations, { label: job.country });
+      if (!found) {
+        locations.push({ label: job.country, selected: location === job.country });
+      }
+      // filter
+      if (location === 'Anywhere' || location === 'Any' || location === 'Any Location') return true;
+      return location.toLowerCase() === job.country.toLowerCase();
+    });
     // Filter by term
     if (term) {
-      jobsToDisplay = _.filter(jobs, (job) => {
+      jobsToDisplay = _.filter(jobsToDisplay, (job) => {
         // eslint-disable-next-line no-underscore-dangle
         const _term = term.toLowerCase();
         // name search
@@ -115,6 +157,8 @@ class RecruitCRMJobsContainer extends React.Component {
       <div styleName="container">
         <div styleName="filters">
           <SearchCombo placeholder="Search Gig Listings by Name, Skills, or Location" onSearch={this.onSearch} term={term} />
+          <Dropdown label="Location" onChange={this.onLocation} options={locations} size="xs" />
+          <Dropdown label="Sort by" onChange={this.onSort} options={sortByOptions} size="xs" />
         </div>
         <div styleName="jobs-list-container">
           {

src/shared/containers/Gigs/RecruitCRMJobs.jsx

@@ -10,6 +10,28 @@
 
   .filters {
     display: flex;
+    align-items: flex-end;
+
+    @include xs-to-sm {
+      flex-direction: column;
+    }
+
+    > div {
+      margin-right: 30px;
+      flex: 1;
+
+      @include xs-to-sm {
+        margin-right: 0;
+      }
+
+      &:first-child {
+        flex: 3;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 
   .jobs-list-container {