GAME-224 merge skills on skill picker

Author: kkartunov

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/index.jsx

@@ -8,16 +8,8 @@ import IconClose from 'assets/images/icon-close.svg';
 import RemoveTagIcon from 'assets/images/icon-x-cancel.svg';
 import styles from './styles.scss';
 
-const CATEGORIES = {
-  design: 'design',
-  develop: 'develop',
-  data_science: 'data_science',
-  qa: 'qa',
-};
-
 export default function AddSkillsModal({
   disabled,
-  category: intialCategory,
   editingSkills,
   lookupSkills,
   userSkills,
@@ -26,17 +18,14 @@ export default function AddSkillsModal({
   setEditingSkills,
 }) {
   const [tempStr, setTempStr] = React.useState('');
-  const [tab, setTab] = React.useState(intialCategory);
   const [displayingSkills, setDisplayingSkills] = React.useState([]);
-  const category = tab;
 
   // onInit
   React.useEffect(() => {
     setEditingSkills([...userSkills]);
     setDisplayingSkills([...userSkills]);
   }, [userSkills]);
 
-  const find = (arr, i) => arr && _.findIndex(arr, e => e.toLowerCase() === i.toLowerCase()) !== -1;
   const findSkill = (arr, skill) => arr && arr.find(a => a.id === skill.id);
 
   const handleSkillSelect = (skill) => {
@@ -62,19 +51,13 @@ export default function AddSkillsModal({
 
   const lookupSkillsOptions = lookupSkills
     .filter(skill => !findSkill(allDisplayingSkills, skill))
-    .filter(skill => find(skill.categories, category))
     .sort((a, b) => {
       if (a.name.toLowerCase() < b.name.toLowerCase()) return -1;
       if (a.name.toLowerCase() > b.name.toLowerCase()) return 1;
       return 0;
     });
 
   const skillList = allDisplayingSkills.map((skill) => {
-    const isOtherCategorySkill = s => !find(s.categories, category);
-    if (isOtherCategorySkill(skill)) {
-      return null;
-    }
-
     const selected = findSkill(editingSkills, skill);
     return (
       <li key={skill.id} styleName={`skillListItem non-removable ${selected ? 'selected' : ''}`}>
@@ -99,14 +82,6 @@ export default function AddSkillsModal({
     );
   });
 
-  const getTabName = (tabname) => {
-    if (tabname === CATEGORIES.design) return 'Design / UX';
-    if (tabname === CATEGORIES.develop) return 'Development';
-    if (tabname === CATEGORIES.data_science) return 'Data Science';
-    if (tabname === CATEGORIES.qa) return 'QA';
-    return '';
-  };
-
   return (
     <Modal theme={{ container: styles.modal, overlay: styles['modal-overlay'] }}>
       <div styleName="modal-dialog">
@@ -118,68 +93,30 @@ export default function AddSkillsModal({
             </GhostButton>
           </h3>
           <div styleName="modal-body">
-            <nav styleName="tabs">
-              <ul>
-                <li
-                  styleName={tab === CATEGORIES.design ? 'active' : ''}
-                  role="presentation"
-                  onClick={() => setTab(CATEGORIES.design)}
-                  onKeyDown={() => { }}
-                >
-                  {getTabName(CATEGORIES.design)}
-                </li>
-                <li
-                  styleName={tab === CATEGORIES.develop ? 'active' : ''}
-                  role="presentation"
-                  onClick={() => setTab(CATEGORIES.develop)}
-                  onKeyDown={() => { }}
-                >
-                  {getTabName(CATEGORIES.develop)}
-                </li>
-                <li
-                  styleName={tab === CATEGORIES.data_science ? 'active' : ''}
-                  role="presentation"
-                  onClick={() => setTab(CATEGORIES.data_science)}
-                  onKeyDown={() => { }}
-                >
-                  {getTabName(CATEGORIES.data_science)}
-                </li>
-                <li
-                  styleName={tab === CATEGORIES.qa ? 'active' : ''}
-                  role="presentation"
-                  onClick={() => setTab(CATEGORIES.qa)}
-                  onKeyDown={() => { }}
-                >
-                  {getTabName(CATEGORIES.qa)}
-                </li>
-              </ul>
-            </nav>
-            <div styleName="tabContent">
-              <h4 styleName="title">Select {getTabName(tab)} Skills</h4>
+            <h4 styleName="title">Select Skills</h4>
 
-              <FormField label="Skill">
-                <FormInputSelect
-                  options={lookupSkillsOptions}
-                  onChange={(skill) => {
-                    handleSkillSelect(skill);
-                    setTempStr(skill.name);
-                    updateDisplayingSkills(skill);
-                  }}
-                  matchPos="any"
-                  matchProp="name"
-                  labelKey="name"
-                  valueKey="name"
-                  placeholder="Add new skill"
-                  clearable={false}
-                  disabled={disabled}
-                  value={tempStr}
-                />
-              </FormField>
+            <FormField label="Skill">
+              <FormInputSelect
+                options={lookupSkillsOptions}
+                onChange={(skill) => {
+                  handleSkillSelect(skill);
+                  setTempStr(skill.name);
+                  updateDisplayingSkills(skill);
+                }}
+                matchPos="any"
+                matchProp="name"
+                labelKey="name"
+                valueKey="name"
+                placeholder="Add new skill"
+                clearable={false}
+                disabled={disabled}
+                value={tempStr}
+              />
+            </FormField>
 
-              <ul styleName="skillList">
-                {skillList}
-              </ul>
-            </div>
+            <ul styleName="skillList">
+              {skillList}
+            </ul>
           </div>
           <div styleName="modal-footer">
             <PrimaryButton theme={{ button: styles['button-save'] }} onClick={onSave} disabled={disabled}>
@@ -194,7 +131,6 @@ export default function AddSkillsModal({
 
 AddSkillsModal.propTypes = {
   disabled: PT.bool.isRequired,
-  category: PT.string.isRequired,
   editingSkills: PT.arrayOf(PT.shape()).isRequired,
   lookupSkills: PT.arrayOf(PT.shape()).isRequired,
   userSkills: PT.arrayOf(PT.shape()).isRequired,

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/AddSkillsModal/styles.scss

@@ -65,6 +65,7 @@
   flex: auto;
   display: flex;
   padding: 0 $pad-xxxxl;
+  flex-direction: column;
 }
 
 .modal-footer {

src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Skills/index.jsx

@@ -365,7 +365,6 @@ export default class Skills extends ConsentComponent {
             disabled={!canModifyTrait}
             setEditingSkills={this.setEditingSkills}
             editingSkills={editingSkills}
-            category={showAddSkillsModal}
             onClose={this.onModalClose}
             onSave={this.onModalSave}
           />