PROD - Nov 29 prod deploy

.circleci/config.yml

@@ -353,7 +353,7 @@ workflows:
                 - PROD-4183
                 - changelog
                 - remove_submission_review
-                - standardised_skills
+                - skills_updates
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global

config/backup-default.js

@@ -453,7 +453,7 @@ module.exports = {
   GUIKIT: {
     DEBOUNCE_ON_CHANGE_TIME: 150,
   },
-  ENABLE_RECOMMENDER: true,
+  ENABLE_RECOMMENDER: false,
   OPTIMIZELY: {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },

config/default.js

@@ -454,7 +454,7 @@ module.exports = {
   GUIKIT: {
     DEBOUNCE_ON_CHANGE_TIME: 150,
   },
-  ENABLE_RECOMMENDER: true,
+  ENABLE_RECOMMENDER: false,
   OPTIMIZELY: {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },

config/production.js

@@ -229,7 +229,7 @@ module.exports = {
   TC_EDU_ARTICLES_PATH: '/articles',
   TC_EDU_SEARCH_PATH: '/search',
   TC_EDU_SEARCH_BAR_MAX_RESULTS_EACH_GROUP: 3,
-  ENABLE_RECOMMENDER: true,
+  ENABLE_RECOMMENDER: false,
   PLATFORM_SITE_URL: 'https://platform.topcoder.com',
   PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder.com',
   DICE_VERIFY_URL: 'https://accounts-auth0.topcoder.com',

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

@@ -0,0 +1,134 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Dropdown terms component.
+ */
+import React, {
+  useRef,
+  useEffect,
+} from 'react';
+import PT from 'prop-types';
+import { AsyncCreatable } from 'react-select';
+import './style.scss';
+
+function DropdownSingleSkills({
+  terms,
+  placeholder,
+  label,
+  required,
+  onChange,
+  errorMsg,
+  cacheOptions,
+  loadOptions,
+  createText,
+}) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const selectInput = containerRef.current.getElementsByClassName('Select-input');
+    if (selectInput && selectInput.length) {
+      const inputField = selectInput[0].getElementsByTagName('input');
+      inputField[0].style.border = 'none';
+      inputField[0].style.boxShadow = 'none';
+      selectInput[0].style.borderTop = 'none';
+    }
+  }, [terms]);
+
+  const CustomReactSelectRow = React.forwardRef(({
+    className,
+    option,
+    children,
+    onSelect,
+  }, ref) => (children ? (
+    <a
+      ref={ref}
+      role="button"
+      className={className}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(option, event);
+      }}
+      title={option.title}
+      tabIndex={-1}
+    >
+      {children}
+    </a>
+  ) : null));
+
+  CustomReactSelectRow.defaultProps = {
+    children: null,
+    className: '',
+    onSelect: () => {},
+  };
+
+  CustomReactSelectRow.propTypes = {
+    children: PT.node,
+    className: PT.string,
+    onSelect: PT.func,
+    option: PT.object.isRequired,
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="dropdownContainer"
+      styleName={`container ${
+        terms ? 'haveValue' : ''
+      } ${errorMsg ? 'haveError' : ''}`}
+    >
+      <div styleName="relative">
+        <AsyncCreatable
+          autosize={false}
+          optionComponent={CustomReactSelectRow}
+          value={terms ? {
+            value: terms,
+            label: terms,
+          } : null}
+          onChange={(value) => {
+            onChange(value ? (value.value || '') : '');
+          }}
+          defaultValue={terms ? {
+            value: terms,
+            label: terms,
+          } : null}
+          promptTextCreator={value => `${createText} "${value}"`}
+          placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+          cacheOptions={cacheOptions}
+          loadOptions={loadOptions}
+        />
+      </div>
+      {label ? (
+        <span styleName="label">
+          {label}
+          {required ? <span>&nbsp;*</span> : null}
+        </span>
+      ) : null}
+      {errorMsg ? <span styleName="errorMessage">{errorMsg}</span> : null}
+    </div>
+  );
+}
+
+DropdownSingleSkills.defaultProps = {
+  terms: '',
+  placeholder: '',
+  label: '',
+  required: false,
+  cacheOptions: false,
+  onChange: () => {},
+  errorMsg: '',
+  createText: 'Select',
+  loadOptions: undefined,
+};
+
+DropdownSingleSkills.propTypes = {
+  terms: PT.string,
+  placeholder: PT.string,
+  label: PT.string,
+  required: PT.bool,
+  cacheOptions: PT.bool,
+  onChange: PT.func,
+  errorMsg: PT.string,
+  createText: PT.string,
+  loadOptions: PT.func,
+};
+
+export default DropdownSingleSkills;

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

@@ -0,0 +1,71 @@
+@import '../Dropdown/style.scss';
+
+.label {
+  z-index: 6;
+}
+
+.relative {
+  position: relative;
+}
+
+.errorMessage,
+.haveValue,
+.haveError {
+  font-family: Roboto, sans-serif;
+}
+
+.container {
+  font-family: Roboto, sans-serif;
+
+  :global {
+    .Select-control {
+      min-height: 52px;
+      height: auto;
+      display: flex !important;
+      overflow: visible !important;
+    }
+
+    .Select-clear-zone,
+    .Select-clear {
+      font-size: 21px;
+      line-height: 40px;
+
+      &:hover {
+        color: $dashboard-teal;
+      }
+    }
+
+    .Select-value {
+      font-size: 14px !important;
+      padding-right: 42px !important;
+      overflow: hidden;
+
+      .Select-value-label {
+        font-size: 14px;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+
+    .Select-input {
+      input {
+        font-size: 14px;
+
+        &::-webkit-input-placeholder {
+          /* Edge */
+          color: $gui-kit-gray-30;
+        }
+
+        &:-ms-input-placeholder {
+          /* Internet Explorer 10-11 */
+          color: $gui-kit-gray-30;
+        }
+
+        &::placeholder {
+          color: $gui-kit-gray-30;
+        }
+      }
+    }
+  }
+}

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

@@ -54,7 +54,7 @@ function JobListCard({
           <IconBlackLocation /> {job.country}
         </div>
         <div styleName="icon-val">
-          <IconBlackPayment /> ${job.min_annual_salary} - {job.max_annual_salary} (USD) / {getSalaryType(job.salary_type)}
+          <IconBlackPayment /> ${job.min_annual_salary} - {job.max_annual_salary} (USD) / {getSalaryType(job.salary_type || {})}
         </div>
         <div styleName="icon-val">
           <IconBlackDuration /> {/^\d+$/.test(duration) ? `${duration} Weeks` : duration}

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

@@ -1,58 +1,67 @@
 /**
  * SearchCombo component.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
+import DropdownSingleSkills from 'components/GUIKit/DropdownSingleSkills';
 import PT from 'prop-types';
+import _ from 'lodash';
 import './style.scss';
-import IconClearSearch from 'assets/images/icon-clear-search.svg';
+import { getService } from 'services/skills';
 
 function SearchCombo({
   term,
   placeholder,
-  btnText,
   onSearch,
+  auth,
 }) {
-  const [inputVal, setVal] = useState(term);
-  useEffect(() => setVal(term), [term]);
-  const clearSearch = () => {
-    setVal('');
-    onSearch('');
-  };
-  const onKeyDown = (e) => {
-    if (e.which === 13) {
-      onSearch(inputVal);
+  const [skills, setSkills] = useState(term);
+
+  const fetchSkills = useMemo(() => _.debounce((inputValue, callback) => {
+    if (!inputValue) {
+      callback(null);
+    } else {
+      getService(auth.tokenV3).getSkills(inputValue).then(
+        (response) => {
+          const suggestedOptions = (response || []).map(skillItem => ({
+            label: skillItem.name,
+            value: skillItem.name,
+          }));
+          return callback(null, {
+            options: suggestedOptions,
+          });
+        },
+      ).catch(() => callback(null));
     }
-  };
+  }, 150), [auth.tokenV3]);
 
   return (
     <div styleName="container">
-      <div styleName="input-wrap">
-        {
-          !inputVal ? <span styleName="search-placeholder">{placeholder}</span> : null
-        }
-        <input type="text" styleName="input" value={inputVal} onChange={event => setVal(event.target.value)} onKeyDown={onKeyDown} />
-        {
-          inputVal ? <IconClearSearch onClick={clearSearch} styleName="clear-search" /> : null
-        }
-      </div>
-      <button type="button" styleName="primary-green-md" onClick={() => onSearch(inputVal)} disabled={!inputVal}>
-        {btnText}
-      </button>
+      <DropdownSingleSkills
+        terms={skills}
+        placeholder={placeholder}
+        onChange={(newSkill) => {
+          setSkills(newSkill);
+          onSearch(newSkill);
+        }}
+        cacheOptions
+        loadOptions={fetchSkills}
+        createText="Search"
+      />
     </div>
   );
 }
 
 SearchCombo.defaultProps = {
   term: '',
   placeholder: '',
-  btnText: 'SEARCH',
+  auth: {},
 };
 
 SearchCombo.propTypes = {
   term: PT.string,
   placeholder: PT.string,
-  btnText: PT.string,
   onSearch: PT.func.isRequired,
+  auth: PT.object,
 };
 
 export default SearchCombo;