From 4f0a7db958b7c333ccf60147fe20ef6ac10a026a Mon Sep 17 00:00:00 2001
From: Guiqiang Zhang <skyhit@gmail.com>
Date: Mon, 28 Sep 2020 21:52:57 +0800
Subject: [PATCH 1/4] fix for job descriptionn

---
 package-lock.json                             | 165 ++++++----
 src/shared/components/Editor/index.jsx        |  77 +++--
 .../Profile/Work/List/Item/_mixin.scss        |  42 +++
 .../Settings/Profile/Work/List/Item/index.jsx |  37 ++-
 .../Profile/Work/List/Item/styles.scss        |  49 +++
 .../Settings/Profile/Work/Toolbar/index.jsx   | 156 +++++++++
 .../Settings/Profile/Work/Toolbar/style.scss  |  37 +++
 .../Settings/Profile/Work/index.jsx           | 306 +++++++++++++++++-
 .../Settings/Profile/Work/styles.scss         | 174 +++++++++-
 src/shared/containers/Settings.jsx            |   2 +
 src/shared/utils/settings.js                  |  18 +-
 11 files changed, 952 insertions(+), 111 deletions(-)
 create mode 100644 src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss
 create mode 100644 src/shared/components/Settings/Profile/Work/Toolbar/index.jsx
 create mode 100644 src/shared/components/Settings/Profile/Work/Toolbar/style.scss

diff --git a/package-lock.json b/package-lock.json
index 9835410199..3265c7d849 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8312,6 +8312,11 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "fast-safe-stringify": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz",
+      "integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA=="
+    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -20392,7 +20397,8 @@
     "semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "dev": true
     },
     "semver-regex": {
       "version": "2.0.0",
@@ -22377,17 +22383,14 @@
       }
     },
     "tc-accounts": {
-      "version": "git+https://github.com/appirio-tech/accounts-app.git#33f4aeb29d07dbe4e6d8206d718830fd54943f47",
+      "version": "git+https://github.com/appirio-tech/accounts-app.git#41529eab164d442cff0d43eeed07998c097a2afe",
       "from": "git+https://github.com/appirio-tech/accounts-app.git#dev",
       "requires": {
         "@uirouter/angularjs": "^1.0.0",
         "angucomplete-alt": "^2.1.0",
         "angular": "^1.4.8",
-        "angular-animate": "^1.7.9",
-        "angular-aria": "^1.7.9",
         "angular-auth0": "^3.0.0",
         "angular-cookies": "^1.5.1",
-        "angular-material": "^1.1.21",
         "angular-messages": "^1.5.2",
         "appirio-tech-ng-iso-constants": "github:appirio-tech/ng-iso-constants#v1.0.7",
         "appirio-tech-ng-ui-components": "^2.2.4",
@@ -22569,16 +22572,6 @@
           "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.2.tgz",
           "integrity": "sha512-JcKKJbBdybUsmQ6x1M3xWyTYQ/ioVKJhSByEAjqrhmlOfvMFdhfMqAx5KIo8rLGk4DFolYPcCSgssjgTVjCtRQ=="
         },
-        "angular-animate": {
-          "version": "1.7.9",
-          "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.9.tgz",
-          "integrity": "sha512-fV+AISy/HTzurQH2ngsJg+lLIvfu0ahc1h4AYKauaXVw97rZc2k4iUA1bMstiEyClsdayQX568kjQc1NK+oYhw=="
-        },
-        "angular-aria": {
-          "version": "1.7.9",
-          "resolved": "https://registry.npmjs.org/angular-aria/-/angular-aria-1.7.9.tgz",
-          "integrity": "sha512-luI3Jemd1AbOQW0krdzfEG3fM0IFtLY0bSSqIDEx3POE0XjKIC1MkrO8Csyq9PPgueLphyAPofzUwZ8YeZ88SA=="
-        },
         "angular-auth0": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/angular-auth0/-/angular-auth0-3.0.0.tgz",
@@ -22593,11 +22586,6 @@
           "resolved": "https://registry.npmjs.org/angular-cookies/-/angular-cookies-1.7.2.tgz",
           "integrity": "sha512-5+B6ypV51aRPbQaqC2R5pr96q946C662dQC8QC1UL+cAlLkgkKZXXXzFRhiaEnhntkSnURWVCPasLVHQdZ3YgA=="
         },
-        "angular-material": {
-          "version": "1.1.21",
-          "resolved": "https://registry.npmjs.org/angular-material/-/angular-material-1.1.21.tgz",
-          "integrity": "sha512-BiqvEu82dqQ4Sb4OjJHdVp/YJvFEMrtr7K2eS+6qlWPWUiF9K2K6IkX2H3p0wD7QlscjTz8n9W8uKL46PQjlCQ=="
-        },
         "angular-messages": {
           "version": "1.7.2",
           "resolved": "https://registry.npmjs.org/angular-messages/-/angular-messages-1.7.2.tgz",
@@ -22965,16 +22953,6 @@
               "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
               "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
             },
-            "libphonenumber-js": {
-              "version": "1.4.6",
-              "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.4.6.tgz",
-              "integrity": "sha512-TD1DyhPjVfNNiIxhwsooCO5j9L6JB60Qd+rlIEItgw8RKEqezu8Tva3V/4wrBiYMnBOHkp3uyzAe/PT9omyUdw==",
-              "requires": {
-                "minimist": "^1.2.0",
-                "semver-compare": "^1.0.0",
-                "xml2js": "^0.4.17"
-              }
-            },
             "loose-envify": {
               "version": "1.4.0",
               "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -22983,11 +22961,6 @@
                 "js-tokens": "^3.0.0 || ^4.0.0"
               }
             },
-            "minimist": {
-              "version": "1.2.5",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-            },
             "moment": {
               "version": "2.24.0",
               "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@@ -23049,20 +23022,6 @@
               "requires": {
                 "loose-envify": "^1.0.0"
               }
-            },
-            "xml2js": {
-              "version": "0.4.23",
-              "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-              "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-              "requires": {
-                "sax": ">=0.6.0",
-                "xmlbuilder": "~11.0.0"
-              }
-            },
-            "xmlbuilder": {
-              "version": "11.0.1",
-              "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-              "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
             }
           }
         },
@@ -31660,9 +31619,9 @@
               "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
             },
             "moment": {
-              "version": "2.27.0",
-              "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-              "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+              "version": "2.29.0",
+              "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
+              "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
             },
             "query-string": {
               "version": "3.0.3",
@@ -33204,9 +33163,9 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "topcoder-react-lib": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1.0.3.tgz",
-      "integrity": "sha512-cb4QLW2m3CqzJHWkfbx5TM/rV1bpJXk3FqetNIyKETipebkXtbL83mxtkaV3IEDYrpeKmfzDwjmbxwBh8Gopkw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1.0.5.tgz",
+      "integrity": "sha512-vit+BVaU5SbjwTzLDAqFxE2P539+huV6QspsV3Ud5fL12HQqu3cpJg8iZLmEcCPSXonocVyhtvqdrSgqF1oB4Q==",
       "requires": {
         "auth0-js": "^6.8.4",
         "config": "^3.2.0",
@@ -33258,13 +33217,21 @@
           }
         },
         "config": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/config/-/config-3.3.1.tgz",
-          "integrity": "sha512-+2/KaaaAzdwUBE3jgZON11L1ggLLhpf2FsGrfqYFHZW22ySGv/HqYIXrBwKKvn+XZh1UBUjHwAcrfsSkSygT+Q==",
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/config/-/config-3.3.2.tgz",
+          "integrity": "sha512-NlGfBn2565YA44Irn7GV5KHlIGC3KJbf0062/zW5ddP9VXIuRj0m7HVyFAWvMZvaHPEglyGfwmevGz3KosIpCg==",
           "requires": {
             "json5": "^2.1.1"
           }
         },
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
         "follow-redirects": {
           "version": "0.0.7",
           "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-0.0.7.tgz",
@@ -33272,6 +33239,31 @@
           "requires": {
             "debug": "^2.2.0",
             "stream-consume": "^0.1.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            },
+            "ms": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+            }
+          }
+        },
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
           }
         },
         "hoist-non-react-statics": {
@@ -33290,6 +33282,16 @@
             "minimist": "^1.2.5"
           }
         },
+        "mime": {
+          "version": "2.4.6",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
         "object-keys": {
           "version": "0.4.0",
           "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
@@ -33308,11 +33310,44 @@
             "react-is": "^16.8.2"
           }
         },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
+        },
         "serialize-javascript": {
           "version": "1.9.1",
           "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
           "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
         },
+        "superagent": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/superagent/-/superagent-5.3.1.tgz",
+          "integrity": "sha512-wjJ/MoTid2/RuGCOFtlacyGNxN9QLMgcpYLDQlWFIhhdJ93kNscFonGvrpAHSCVjRVj++DGCglocF7Aej1KHvQ==",
+          "requires": {
+            "component-emitter": "^1.3.0",
+            "cookiejar": "^2.1.2",
+            "debug": "^4.1.1",
+            "fast-safe-stringify": "^2.0.7",
+            "form-data": "^3.0.0",
+            "formidable": "^1.2.2",
+            "methods": "^1.1.2",
+            "mime": "^2.4.6",
+            "qs": "^6.9.4",
+            "readable-stream": "^3.6.0",
+            "semver": "^7.3.2"
+          }
+        },
         "tc-core-library-js": {
           "version": "github:appirio-tech/tc-core-library-js#d16413db30b1eed21c0cf426e185bedb2329ddab",
           "from": "github:appirio-tech/tc-core-library-js#v2.6",
@@ -33329,15 +33364,15 @@
           },
           "dependencies": {
             "auth0-js": {
-              "version": "9.13.4",
-              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.13.4.tgz",
-              "integrity": "sha512-G7wXTtEUe8OG5UMdcFPoS47odorEZ3WerNyWLLhoGlLqYcPgv0t+B0ECHv/rVLULbpctbSBrRFFYa43/bJV4+Q==",
+              "version": "9.14.0",
+              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.14.0.tgz",
+              "integrity": "sha512-40gIBUejmYAYse06ck6sxdNO0KU0pX+KDIQsWAkcyFtI0HU6dY5aeHxZfVYkYjtbArKr5s13LuZFdKrUiGyCqQ==",
               "requires": {
                 "base64-js": "^1.3.0",
                 "idtoken-verifier": "^2.0.3",
                 "js-cookie": "^2.2.0",
                 "qs": "^6.7.0",
-                "superagent": "^3.8.3",
+                "superagent": "^5.3.1",
                 "url-join": "^4.0.1",
                 "winchan": "^0.2.2"
               }
@@ -33436,9 +33471,9 @@
       }
     },
     "topcoder-react-ui-kit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/topcoder-react-ui-kit/-/topcoder-react-ui-kit-2.0.0.tgz",
-      "integrity": "sha512-9Ph8fRzRjVVB0VH13s8/N4+/ZWPLflrnW7D0fmS+oeDwnQe6k5wMknyFcBCI/pqWHr/11nhclXX7np3LdyWSwA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/topcoder-react-ui-kit/-/topcoder-react-ui-kit-2.0.1.tgz",
+      "integrity": "sha512-pl8tysSZYHDSbWn8srLZxV+8lK9f32ya8N+yt5C2XF2PKak30Qnqb3PCDhBO1fKmFF90p4ohJRsCi0IxLRyH/A==",
       "requires": {
         "prop-types": "^15.6.2",
         "react": "^16.4.1",
diff --git a/src/shared/components/Editor/index.jsx b/src/shared/components/Editor/index.jsx
index 40762b3513..58cc02b467 100644
--- a/src/shared/components/Editor/index.jsx
+++ b/src/shared/components/Editor/index.jsx
@@ -46,30 +46,27 @@ export default class EditorWrapper extends React.Component {
     this.customPlugin = createCustomPlugin({
       editor: this,
     });
+
+    this.onBeforeInput = this.onBeforeInput.bind(this);
+    this.onPasteText = this.onPasteText.bind(this);
   }
 
   componentDidMount() {
     const { connector, initialContent } = this.props;
     connector.addEditor(this);
-    if (initialContent) {
-      let editorState = convertFromHTML(initialContent);
-      editorState = ContentState.createFromBlockArray(
-        editorState.contentBlocks,
-        editorState.entityMap,
-      );
-      editorState = EditorState.createWithContent(editorState);
-      this.initialContent = editorState.getCurrentContent();
-      setImmediate(() => this.setState({ editor: editorState }));
-    }
+    this.setInitialContent(initialContent);
   }
 
-  componentWillReceiveProps({ connector, id }) {
-    const { connector: prevConnector } = this.props;
+  componentWillReceiveProps({ connector, id, initialContent }) {
+    const { connector: prevConnector, initialContent: prevInitialContent } = this.props;
     this.id = id;
     if (connector !== prevConnector) {
       if (prevConnector) prevConnector.removeEditor(this);
       if (connector) connector.addEditor(this);
     }
+    if (initialContent !== prevInitialContent) {
+      this.setInitialContent(initialContent);
+    }
   }
 
   componentWillUnmount() {
@@ -77,6 +74,41 @@ export default class EditorWrapper extends React.Component {
     connector.removeEditor(this);
   }
 
+  onBeforeInput() { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  onPasteText(text) { // eslint-disable-line consistent-return
+    const { maxLength } = this.props;
+    const { editor: editorState } = this.state;
+    if (maxLength !== -1 && maxLength <= text.length + editorState.getCurrentContent().getPlainText('').length) {
+      return 'handled';
+    }
+  }
+
+  setInitialContent(content) {
+    if (content) {
+      let editorState = convertFromHTML(content);
+      if (editorState.contentBlocks) {
+        editorState = ContentState.createFromBlockArray(
+          editorState.contentBlocks,
+          editorState.entityMap,
+        );
+        editorState = EditorState.createWithContent(editorState);
+        this.initialContent = editorState.getCurrentContent();
+        setImmediate(() => this.setState({ editor: editorState }));
+      }
+    } else {
+      let { editor: editorState } = this.state;
+      editorState = EditorState.push(editorState, ContentState.createFromText(''));
+      this.setState({ editor: editorState });
+    }
+  }
+
   getHtml() {
     const { editor } = this.state;
     return editorStateToHTML(editor.getCurrentContent());
@@ -98,10 +130,9 @@ export default class EditorWrapper extends React.Component {
    * @param {String} type The new block style
    */
   applyBlockStyle(type) {
-    const { editor } = this.state;
-    let editorState = editor;
+    let { editor: editorState } = this.state;
     editorState = RichUtils.toggleBlockType(editorState, type);
-    this.setState({ editorState }); // eslint-disable-line
+    this.setState({ editor: editorState }); // eslint-disable-line
   }
 
   /**
@@ -231,13 +262,16 @@ export default class EditorWrapper extends React.Component {
   }
 
   render() {
-    const { connector, theme } = this.props;
+    const { connector, theme, placeholder } = this.props;
 
     const st = this.state;
 
     let containerStyles = style.container;
     if (st.editor.getSelection().getHasFocus()) {
-      containerStyles += ` ${style.focused}`;
+      containerStyles += ` ${style.focused} is-focused`;
+    }
+    if (st.editor.getCurrentContent().hasText() || /<ol>|<ul>/.test(this.getHtml())) {
+      containerStyles += ' has-user-input';
     }
     if (theme.container) {
       containerStyles += ` ${theme.container}`;
@@ -253,6 +287,7 @@ export default class EditorWrapper extends React.Component {
         tabIndex={0}
       >
         <Editor
+          placeholder={placeholder}
           editorState={st.editor}
           handleKeyCommand={(command, state) => {
             const editorState = RichUtils.handleKeyCommand(state, command);
@@ -283,6 +318,8 @@ export default class EditorWrapper extends React.Component {
           ]}
           ref={(node) => { this.node = node; }}
           spellCheck
+          handleBeforeInput={this.onBeforeInput}
+          handlePastedText={this.onPasteText}
         />
       </div>
     );
@@ -292,8 +329,10 @@ export default class EditorWrapper extends React.Component {
 EditorWrapper.defaultProps = {
   connector: new Connector(),
   id: null,
-  initialContent: null,
+  initialContent: '',
   theme: {},
+  placeholder: '',
+  maxLength: -1,
 };
 
 EditorWrapper.propTypes = {
@@ -301,4 +340,6 @@ EditorWrapper.propTypes = {
   id: PT.string,
   initialContent: PT.string,
   theme: PT.shape(),
+  placeholder: PT.string,
+  maxLength: PT.number,
 };
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss b/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss
new file mode 100644
index 0000000000..806f6df3b6
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/List/Item/_mixin.scss
@@ -0,0 +1,42 @@
+@import "~styles/mixins";
+
+@mixin html-content-style() {
+  @include roboto-regular;
+
+  font-size: 15px;
+  color: #262628;
+
+  em {
+    font-style: italic;
+  }
+
+  p {
+    margin: 7px 0;
+    line-height: 25px;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul,
+  ol {
+    margin: 0 0 0 25px;
+
+    li {
+      min-height: auto;
+      line-height: 20px;
+      padding: 0 0 0 12px;
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+
+  @content;
+}
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
index a745a2fe6d..8438aed3b1 100644
--- a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx
@@ -7,6 +7,7 @@ import PT from 'prop-types';
 import ReactSVG from 'react-svg';
 import moment from 'moment';
 import { isomorphy } from 'topcoder-react-utils';
+import { isEmpty as isDateEmpty } from 'utils/settings';
 
 import './styles.scss';
 
@@ -23,8 +24,14 @@ export default function Item(props) {
     onEditItem,
   } = props;
 
+  const {
+    jobDescription,
+    technologies,
+    achievements,
+  } = work;
+
   const hasSecondLine = () => {
-    if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
+    if (isDateEmpty(work.timePeriodFrom) && isDateEmpty(work.timePeriodTo)
       && _.isEmpty(work.position) && !work.working) {
       return false;
     }
@@ -45,11 +52,11 @@ export default function Item(props) {
             { `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` }
           </div>
           <div styleName="parameter-second-line">
-            { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`} ${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
+            { `${!isDateEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!isDateEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`} ${!_.isEmpty(work.position) && (!isDateEmpty(work.timePeriodTo) || !isDateEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
           </div>
           <div styleName="parameter-second-line-mobile">
             <p>
-              {`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`}`}
+              {`${!isDateEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!isDateEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ` ${current}`}`}
             </p>
             <p>
               {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
@@ -83,6 +90,30 @@ export default function Item(props) {
           </p>
         </a>
       </div>
+      { !_.isEmpty(jobDescription)
+        && (
+          <div styleName="job-description">
+            <h4 styleName="title">Job Description</h4>
+            <div styleName="html-content" dangerouslySetInnerHTML={{ __html: jobDescription /* eslint-disable-line react/no-danger */ }} />
+          </div>
+        )
+      }
+      { !_.isEmpty(technologies)
+        && (
+          <div styleName="technologies">
+            <h4 styleName="title">Technologies</h4>
+            <div>{technologies.map(item => item.name).join(', ')}</div>
+          </div>
+        )
+      }
+      { !_.isEmpty(achievements)
+        && (
+          <div styleName="achievements">
+            <h4 styleName="title">Outputs and Achievements Within the Role</h4>
+            <div styleName="html-content" dangerouslySetInnerHTML={{ __html: achievements /* eslint-disable-line react/no-danger */ }} />
+          </div>
+        )
+      }
     </div>
   );
 }
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
index d419082362..5b2ac9f208 100644
--- a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss
@@ -1,8 +1,10 @@
 @import "../../../../style";
+@import './mixin';
 
 .container {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-items: center;
   justify-content: space-between;
   height: 100%;
@@ -151,3 +153,50 @@
     }
   }
 }
+
+.operation-container + div {
+  margin-top: 15px;
+  padding-top: 20px;
+  border-top: 1px solid #ededf2;
+}
+
+.job-description,
+.technologies,
+.achievements {
+  @include roboto-regular;
+
+  width: 100%;
+  margin: 0 0 20px;
+  margin-left: 66px;
+  font-size: 15px;
+  color: #262628;
+
+  .title {
+    @include roboto-medium;
+
+    line-height: 25px;
+    margin-bottom: 4px;
+  }
+}
+
+.technologies {
+  .title {
+    margin: 0;
+    line-height: 1;
+  }
+
+  div {
+    line-height: 25px;
+  }
+}
+
+.achievements {
+  margin-bottom: 5px;
+}
+
+.job-description,
+.achievements {
+  .html-content {
+    @include html-content-style;
+  }
+}
diff --git a/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx b/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx
new file mode 100644
index 0000000000..e94232e7d9
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/Toolbar/index.jsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import PT from 'prop-types';
+import Connector from 'components/Editor/Connector';
+import { RichUtils } from 'draft-js';
+
+import './style.scss';
+
+export default class Toolbar extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editor: null,
+      bold: false,
+      italic: false,
+      underline: false,
+      unorderedList: false,
+      orderedList: false,
+      hidden: true,
+    };
+
+    this.onClickBoldButton = this.onClickBoldButton.bind(this);
+    this.onClickItalicButton = this.onClickItalicButton.bind(this);
+    this.onClickUnderlineButton = this.onClickUnderlineButton.bind(this);
+    this.onClickUnorderedListButton = this.onClickUnorderedListButton.bind(this);
+    this.onClickOrderedListButton = this.onClickOrderedListButton.bind(this);
+  }
+
+  componentDidMount() {
+    const { connector } = this.props;
+    connector.setToolbar(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { connector: prevConnector } = this.props;
+    const { connector: newConnector } = nextProps;
+
+    if (newConnector !== prevConnector) {
+      if (prevConnector) prevConnector.setToolbar(null);
+      if (newConnector) newConnector.setToolbar(this);
+    }
+  }
+
+  componentWillUnmount() {
+    const { connector } = this.props;
+    connector.setToolbar(null);
+  }
+
+  onClickBoldButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('BOLD');
+    this.setState({ bold: newStyle.has('BOLD') });
+  }
+
+  onClickItalicButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('ITALIC');
+    this.setState({ italic: newStyle.has('ITALIC') });
+  }
+
+  onClickUnderlineButton(event) {
+    event.preventDefault();
+    const { editor } = this.state;
+    const newStyle = editor.toggleInlineStyle('UNDERLINE');
+    this.setState({ underline: newStyle.has('UNDERLINE') });
+  }
+
+  onClickUnorderedListButton(event) {
+    event.preventDefault();
+    const { editor, unorderedList: prevUnorderedList } = this.state;
+    this.setState({ unorderedList: !prevUnorderedList, orderedList: false }, () => {
+      const { unorderedList } = this.state;
+      if (unorderedList) {
+        editor.applyBlockStyle('unordered-list-item');
+      } else {
+        editor.applyBlockStyle('unstyled');
+      }
+    });
+  }
+
+  onClickOrderedListButton(event) {
+    event.preventDefault();
+    const { editor, orderedList: prevOrderedList } = this.state;
+    this.setState({ unorderedList: false, orderedList: !prevOrderedList }, () => {
+      const { orderedList } = this.state;
+      if (orderedList) {
+        editor.applyBlockStyle('ordered-list-item');
+      } else {
+        editor.applyBlockStyle('unstyled');
+      }
+    });
+  }
+
+  onFocusedEditorChanged(newState) {
+    const { connector, onEditorChange } = this.props;
+    const editor = connector.focusedEditor;
+    if (editor) {
+      const inlineStyle = newState.getCurrentInlineStyle();
+      const block = RichUtils.getCurrentBlockType(newState);
+      this.setState({
+        editor,
+        bold: inlineStyle.has('BOLD'),
+        italic: inlineStyle.has('ITALIC'),
+        underline: inlineStyle.has('UNDERLINE'),
+        unorderedList: block === 'unordered-list-item',
+        orderedList: block === 'ordered-list-item',
+        hidden: false,
+      }, () => {
+        onEditorChange(editor);
+      });
+    } else {
+      this.setState({
+        bold: false,
+        italic: false,
+        underline: false,
+        unorderedList: false,
+        orderedList: false,
+        hidden: true,
+      });
+    }
+  }
+
+  render() {
+    const {
+      hidden,
+      bold,
+      italic,
+      underline,
+      orderedList,
+      unorderedList,
+    } = this.state;
+
+    return (
+      <div styleName="container" style={{ display: hidden ? 'none' : 'flex' }}>
+        <button type="button" onMouseDown={this.onClickBoldButton} styleName={bold ? 'is-pressed' : ''}>B</button>
+        <button type="button" onMouseDown={this.onClickItalicButton} styleName={italic ? 'is-pressed' : ''}>I</button>
+        <button type="button" onMouseDown={this.onClickUnderlineButton} styleName={underline ? 'is-pressed' : ''}>U</button>
+        <span styleName="separator" />
+        <button type="button" onMouseDown={this.onClickOrderedListButton} styleName={orderedList ? 'is-pressed' : ''}>OL</button>
+        <button type="button" onMouseDown={this.onClickUnorderedListButton} styleName={unorderedList ? 'is-pressed' : ''}>UL</button>
+      </div>
+    );
+  }
+}
+
+Toolbar.defaultProps = {
+  connector: new Connector(),
+  onEditorChange: () => {},
+};
+
+Toolbar.propTypes = {
+  connector: PT.instanceOf(Connector),
+  onEditorChange: PT.func,
+};
diff --git a/src/shared/components/Settings/Profile/Work/Toolbar/style.scss b/src/shared/components/Settings/Profile/Work/Toolbar/style.scss
new file mode 100644
index 0000000000..65f5e6a113
--- /dev/null
+++ b/src/shared/components/Settings/Profile/Work/Toolbar/style.scss
@@ -0,0 +1,37 @@
+@import "~styles/mixins";
+
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  background: $tc-gray-neutral-light;
+  border: 1px solid #c3c3c8;
+  border-radius: 4px 4px 0 0;
+
+  button {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    margin: 0 13px;
+    padding: 0;
+    font-size: 13px;
+    font-weight: bold;
+    color: $tc-gray-80;
+    text-align: center;
+    appearance: none;
+    background: none;
+    border: 0;
+
+    &.is-pressed {
+      box-shadow: 0 0 0 1px #c3c3c8;
+    }
+  }
+
+  .separator {
+    display: block;
+    width: 1px;
+    height: 20px;
+    background: $tc-gray-80;
+  }
+}
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index 0bbfa631bf..4f8029f143 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -6,6 +6,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/label-has-for */
 /* eslint-disable no-undef */
+/* eslint-disable react/jsx-boolean-value */
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
@@ -14,9 +15,13 @@ import ConsentComponent from 'components/Settings/ConsentComponent';
 import { PrimaryButton } from 'topcoder-react-ui-kit';
 import DatePicker from 'components/challenge-listing/Filters/DatePicker';
 import ErrorMessage from 'components/Settings/ErrorMessage';
-import { validateStartDate, validateEndDate } from 'utils/settings';
+import { validateStartDate, validateEndDate, isEmpty as isDateEmpty } from 'utils/settings';
+import Connector from 'components/Editor/Connector';
+import Select from 'components/Select';
+import Editor from 'components/Editor';
 import ConfirmationModal from '../../CofirmationModal';
 import WorkList from './List';
+import Toolbar from './Toolbar';
 
 import './styles.scss';
 
@@ -34,6 +39,9 @@ export default class Work extends ConsentComponent {
     this.updatePredicate = this.updatePredicate.bind(this);
     this.onUpdateDate = this.onUpdateDate.bind(this);
     this.onCancelEditStatus = this.onCancelEditStatus.bind(this);
+    this.onUpdateJobDescription = this.onUpdateJobDescription.bind(this);
+    this.onUpdateAchievements = this.onUpdateAchievements.bind(this);
+    this.onUpdateTechnologies = this.onUpdateTechnologies.bind(this);
 
     const { userTraits } = props;
     this.state = {
@@ -54,6 +62,14 @@ export default class Work extends ConsentComponent {
         timePeriodTo: '',
         industry: '',
         working: false,
+        jobDescription: '',
+        achievements: '',
+        technologies: [],
+        initialJobDescription: '',
+        initialAchievements: '',
+        numJobDescription: 0,
+        numAchievements: 0,
+        numTechnologies: 0,
       },
       isMobileView: false,
       screenSM: 767,
@@ -61,6 +77,11 @@ export default class Work extends ConsentComponent {
       indexNo: null,
       showConfirmation: false,
     };
+
+    this.connectorJobDescription = new Connector();
+    this.connectorAchievements = new Connector();
+    this.connectorJobDescriptionMobile = new Connector();
+    this.connectorAchievementsMobile = new Connector();
   }
 
   componentDidMount() {
@@ -89,6 +110,14 @@ export default class Work extends ConsentComponent {
         timePeriodTo: '',
         industry: '',
         working: false,
+        jobDescription: '',
+        achievements: '',
+        technologies: [],
+        initialJobDescription: '',
+        initialAchievements: '',
+        numJobDescription: 0,
+        numAchievements: 0,
+        numTechnologies: 0,
       },
     });
   }
@@ -151,7 +180,7 @@ export default class Work extends ConsentComponent {
     if (date) {
       const { newWork: oldWork } = this.state;
       const newWork = { ...oldWork };
-      newWork[timePeriod] = date;
+      newWork[timePeriod] = date.toISOString();
       this.setState({ newWork, isSubmit: false });
     }
   }
@@ -205,10 +234,34 @@ export default class Work extends ConsentComponent {
         company: workTrait.traits.data[indexNo].company,
         position: _.isEmpty(workTrait.traits.data[indexNo].position) ? '' : workTrait.traits.data[indexNo].position,
         cityTown: _.isEmpty(workTrait.traits.data[indexNo].cityTown) ? '' : workTrait.traits.data[indexNo].cityTown,
-        timePeriodFrom: _.isEmpty(workTrait.traits.data[indexNo].timePeriodFrom) ? '' : workTrait.traits.data[indexNo].timePeriodFrom,
-        timePeriodTo: _.isEmpty(workTrait.traits.data[indexNo].timePeriodTo) ? '' : workTrait.traits.data[indexNo].timePeriodTo,
+        timePeriodFrom: isDateEmpty(workTrait.traits.data[indexNo].timePeriodFrom) ? '' : workTrait.traits.data[indexNo].timePeriodFrom,
+        timePeriodTo: isDateEmpty(workTrait.traits.data[indexNo].timePeriodTo) ? '' : workTrait.traits.data[indexNo].timePeriodTo,
         industry: _.isEmpty(workTrait.traits.data[indexNo].industry) ? '' : workTrait.traits.data[indexNo].industry,
         working: workTrait.traits.data[indexNo].working,
+        jobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? ''
+          : workTrait.traits.data[indexNo].jobDescription,
+        achievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? ''
+          : workTrait.traits.data[indexNo].achievements,
+        technologies: _.isEmpty(workTrait.traits.data[indexNo].technologies)
+          ? []
+          : workTrait.traits.data[indexNo].technologies,
+        initialJobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? ''
+          : workTrait.traits.data[indexNo].jobDescription,
+        initialAchievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? ''
+          : workTrait.traits.data[indexNo].achievements,
+        numJobDescription: _.isEmpty(workTrait.traits.data[indexNo].jobDescription)
+          ? 0
+          : workTrait.traits.data[indexNo].jobDescription.length,
+        numAchievements: _.isEmpty(workTrait.traits.data[indexNo].achievements)
+          ? 0
+          : workTrait.traits.data[indexNo].achievements.length,
+        numTechnologies: _.isEmpty(workTrait.traits.data[indexNo].technologies)
+          ? 0
+          : workTrait.traits.data[indexNo].technologies.length,
       },
       isEdit: true,
       indexNo,
@@ -247,12 +300,12 @@ export default class Work extends ConsentComponent {
     if (_.isEmpty(work.cityTown)) {
       delete work.cityTown;
     }
-    if (_.isEmpty(work.timePeriodFrom)) {
+    if (isDateEmpty(work.timePeriodFrom)) {
       delete work.timePeriodFrom;
     } else {
       work.timePeriodFrom = new Date(work.timePeriodFrom).getTime();
     }
-    if (_.isEmpty(work.timePeriodTo)) {
+    if (isDateEmpty(work.timePeriodTo)) {
       delete work.timePeriodTo;
     } else {
       work.timePeriodTo = new Date(work.timePeriodTo).getTime();
@@ -260,6 +313,20 @@ export default class Work extends ConsentComponent {
     if (_.isEmpty(work.industry)) {
       delete work.industry;
     }
+    if (_.isEmpty(work.jobDescription)) {
+      delete work.jobDescription;
+    }
+    if (_.isEmpty(work.achievements)) {
+      delete work.achievements;
+    }
+    if (_.isEmpty(work.technologies)) {
+      delete work.technologies;
+    }
+    delete work.initialJobDescription;
+    delete work.initialAchievements;
+    delete work.numJobDescription;
+    delete work.numAchievements;
+    delete work.numTechnologies;
 
     if (workTrait.traits && workTrait.traits.data.length > 0) {
       const newWorkTrait = _.cloneDeep(workTrait);
@@ -353,6 +420,14 @@ export default class Work extends ConsentComponent {
           timePeriodTo: '',
           industry: '',
           working: false,
+          jobDescription: '',
+          achievements: '',
+          technologies: [],
+          initialJobDescription: '',
+          initialAchievements: '',
+          numJobDescription: 0,
+          numAchievements: 0,
+          numTechnologies: 0,
         },
         formInvalid: false,
         startDateInvalid: false,
@@ -364,9 +439,39 @@ export default class Work extends ConsentComponent {
     }
   }
 
+  onUpdateJobDescription(editor) {
+    const html = editor.getHtml();
+    const length = editor.state.editor.getCurrentContent().getPlainText('').length; // eslint-disable-line prefer-destructuring
+    const { newWork: oldWork } = this.state;
+
+    const newWork = { ...oldWork, jobDescription: html, numJobDescription: length };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
+  onUpdateAchievements(editor) {
+    const { newWork: oldWork } = this.state;
+    const newWork = { ...oldWork, achievements: editor.getHtml(), numAchievements: editor.state.editor.getCurrentContent().getPlainText('').length };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
+  onUpdateTechnologies(value) {
+    if (value.length > 3) {
+      value.shift();
+    }
+
+    const { newWork: oldWork } = this.state;
+    const newWork = {
+      ...oldWork,
+      technologies: value.map(val => ({ id: val.id, name: val.name })),
+      numTechnologies: value.length,
+    };
+    this.setState({ newWork, isSubmit: false, endDateDisabled: newWork.working });
+  }
+
   render() {
     const {
       settingsUI,
+      lookupData,
     } = this.props;
     const {
       workTrait,
@@ -388,6 +493,16 @@ export default class Work extends ConsentComponent {
     const workItems = workTrait.traits
       ? workTrait.traits.data.slice() : [];
     const { newWork } = this.state;
+    const {
+      initialJobDescription,
+      initialAchievements,
+      technologies,
+      numJobDescription,
+      numTechnologies,
+      numAchievements,
+    } = newWork;
+    const techTags = lookupData.technologies
+      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
 
     return (
       <div styleName={containerStyle}>
@@ -493,7 +608,11 @@ export default class Work extends ConsentComponent {
                     readOnly
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
+                    date={
+                      isDateEmpty(newWork.timePeriodFrom)
+                        ? null
+                        : moment(newWork.timePeriodFrom)
+                    }
                     id="date-from1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
@@ -521,7 +640,7 @@ export default class Work extends ConsentComponent {
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
+                    date={isDateEmpty(newWork.timePeriodTo) ? null : moment(newWork.timePeriodTo)}
                     id="date-to1"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
@@ -537,13 +656,12 @@ export default class Work extends ConsentComponent {
                 </div>
               </div>
               <div styleName="row">
-                <div styleName="field col-long-text">
-                  <label htmlFor="working">
+                <div styleName="field col-long-text">&nbsp;</div>
+                <div styleName="field col-2">
+                  <label htmlFor="working" styleName="label-checkbox-working">
                     I am currently working in this role
                     <input type="hidden" />
                   </label>
-                </div>
-                <div styleName="field col-2">
                   <div styleName="tc-checkbox">
                     <input
                       name="working"
@@ -561,6 +679,87 @@ export default class Work extends ConsentComponent {
                   </div>
                 </div>
               </div>
+              <div styleName="row">
+                <div styleName="field col-long-text align-top">
+                  <label htmlFor="jobDescription">
+                    Job Description
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numJobDescription} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorJobDescription}
+                        onEditorChange={this.onUpdateJobDescription}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorJobDescription}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Job description"
+                      maxLength={400}
+                      initialContent={initialJobDescription}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text align-top">
+                  <label styleName="label-achievements" htmlFor="achievements">
+                    Outputs and Achievements Within the Role
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numAchievements} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorAchievements}
+                        onEditorChange={this.onUpdateAchievements}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorAchievements}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Outputs and achievements within the role"
+                      maxLength={400}
+                      initialContent={initialAchievements}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label htmlFor="technologies ">
+                    Technologies
+                    <input type="hidden" />
+                  </label>
+                </div>
+                <div styleName="field col-2">
+                  <span styleName="char-num">{numTechnologies} / 3 technologies</span>
+                  <div styleName="select-technologies-container">
+                    <Select
+                      name="technologies"
+                      multi
+                      options={techTags}
+                      value={technologies}
+                      onChange={this.onUpdateTechnologies}
+                      labelKey="name"
+                      valueKey="id"
+                      className="select-technologies"
+                      clearable={false}
+                      placeholder="Select technologies from list"
+                      joinValues={true}
+                      removeSelected={false}
+                      searchable={false}
+                      valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}
+                    />
+                  </div>
+                </div>
+              </div>
             </form>
             <div styleName="button-container">
               <div styleName="button-save">
@@ -644,7 +843,11 @@ export default class Work extends ConsentComponent {
                     readOnly
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodFrom}
+                    date={
+                      isDateEmpty(newWork.timePeriodFrom)
+                        ? null
+                        : moment(newWork.timePeriodFrom)
+                    }
                     id="date-from2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
                     placeholder="dd/mm/yyyy"
@@ -668,7 +871,7 @@ export default class Work extends ConsentComponent {
                     disabled={endDateDisabled}
                     numberOfMonths={1}
                     isOutsideRange={moment().subtract(1, 'd')}
-                    date={newWork.timePeriodTo}
+                    date={isDateEmpty(newWork.timePeriodTo) ? null : moment(newWork.timePeriodTo)}
                     id="date-to2"
                     onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
                     placeholder="dd/mm/yyyy"
@@ -702,6 +905,81 @@ export default class Work extends ConsentComponent {
                   </div>
                 </div>
               </div>
+              <div styleName="row">
+                <div styleName="field col-long-text col-checkbox-sibling-next">
+                  <label htmlFor="jobDescription">
+                    Job Description
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numJobDescription} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorJobDescriptionMobile}
+                        onEditorChange={this.onUpdateJobDescription}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorJobDescriptionMobile}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Job description"
+                      maxLength={400}
+                      initialContent={initialJobDescription}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label styleName="label-achievements" htmlFor="achievements">
+                    Outputs and Achievements Within the Role
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numAchievements} / 400</span>
+                  <div styleName="editor-outer-container">
+                    <div styleName="toolbar-wrapper">
+                      <Toolbar
+                        connector={this.connectorAchievementsMobile}
+                        onEditorChange={this.onUpdateAchievements}
+                      />
+                    </div>
+                    <Editor
+                      connector={this.connectorAchievementsMobile}
+                      theme={{ container: 'editor-container' }}
+                      placeholder="Outputs and achievements within the role"
+                      maxLength={400}
+                      initialContent={initialAchievements}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div styleName="row">
+                <div styleName="field col-long-text">
+                  <label htmlFor="technologies ">
+                    Technologies
+                    <input type="hidden" />
+                  </label>
+                  <span styleName="char-num">{numTechnologies} / 3 technologies</span>
+                  <div styleName="select-technologies-container">
+                    <Select
+                      name="technologies"
+                      multi
+                      options={techTags}
+                      value={technologies}
+                      onChange={this.onUpdateTechnologies}
+                      labelKey="name"
+                      valueKey="id"
+                      className="select-technologies"
+                      clearable={false}
+                      placeholder="Select technologies from list"
+                      joinValues={true}
+                      removeSelected={false}
+                      searchable={false}
+                      valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}
+                    />
+                  </div>
+                </div>
+              </div>
             </form>
             <div styleName="button-container">
               <div styleName="button-save">
diff --git a/src/shared/components/Settings/Profile/Work/styles.scss b/src/shared/components/Settings/Profile/Work/styles.scss
index 937adc83e5..a158aedc30 100644
--- a/src/shared/components/Settings/Profile/Work/styles.scss
+++ b/src/shared/components/Settings/Profile/Work/styles.scss
@@ -1,4 +1,5 @@
 @import "../../style";
+@import "./List//Item/mixin";
 
 $checkbox-size: $base-unit * 4;
 $checkbox-bg-empty: $tc-gray-neutral-light;
@@ -140,6 +141,10 @@ label {
     user-select: none;
     cursor: pointer;
   }
+
+  .row .field.align-top {
+    margin-top: 25px;
+  }
 }
 
 .form-container-mobile {
@@ -283,6 +288,14 @@ label {
           top: 25px;
         }
       }
+
+      &.col-checkbox-sibling-next {
+        padding-top: 30px;
+
+        @include upto-sm {
+          padding-top: 55px;
+        }
+      }
     }
   }
 
@@ -390,6 +403,163 @@ label {
   }
 }
 
+.editor-outer-container {
+  position: relative;
+
+  @include upto-sm {
+    margin-top: 5px;
+  }
+
+  .toolbar-wrapper {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+  }
+
+  :global {
+    .editor-container {
+      height: 254px;
+      margin: 0;
+      padding: 0;
+      background: $tc-white;
+      border: 1px solid #c3c3c8;
+      border-radius: 4px;
+    }
+
+    .DraftEditor-root {
+      margin-top: 0;
+      padding: 10px 10px 0 10px;
+      height: calc(100% - 10px);
+      overflow: auto;
+    }
+
+    .editor-container.is-focused .DraftEditor-root {
+      margin-top: 40px;
+      height: calc(100% - 40px);
+    }
+
+    .editor-container.is-focused .public-DraftEditorPlaceholder-root,
+    .editor-container.has-user-input .public-DraftEditorPlaceholder-root {
+      display: none;
+    }
+
+    .public-DraftEditorPlaceholder-inner {
+      line-height: 20px;
+    }
+
+    .public-DraftEditor-content {
+      @include html-content-style {
+        ol li {
+          list-style-type: decimal;
+        }
+
+        ol li::before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.char-num {
+  @include roboto-medium;
+
+  margin-bottom: 2px;
+  line-height: 15px;
+  font-size: 11px;
+  color: $tc-dark-blue-100;
+  text-align: right;
+
+  @include upto-sm {
+    position: relative;
+    top: -15px;
+    margin-bottom: -3px;
+    height: 0;
+  }
+}
+
+.label-achievements {
+  width: 134px;
+  white-space: normal;
+
+  @include upto-sm {
+    width: auto;
+  }
+}
+
+.label-checkbox-working {
+  margin-left: 29px;
+}
+
+.select-technologies-container {
+  @include upto-sm {
+    margin-top: 5px;
+  }
+
+  .selected-value-text {
+    @include roboto-regular;
+
+    font-size: 15px;
+    color: #262628;
+
+    &:not(:first-child) {
+      &::before {
+        content: ', ';
+      }
+    }
+  }
+
+  :global {
+    .select-technologies {
+      .Select-control {
+        height: 40px;
+      }
+
+      .Select-placeholder {
+        line-height: 40px;
+        padding: 0 15px;
+      }
+
+      .Select-multi-value-wrapper {
+        padding: 0 15px;
+        line-height: 40px;
+      }
+
+      .Select-option {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 15px;
+
+        &.is-selected {
+          position: relative;
+          background-color: white;
+
+          &::after {
+            content: '';
+            position: absolute;
+            right: 15px;
+            bottom: 22px;
+            display: block;
+            width: 15px;
+            height: 8px;
+            border-left: 2px solid $tc-gray-90;
+            border-bottom: 2px solid $tc-gray-90;
+            transform: rotate(-45deg);
+          }
+        }
+
+        &.is-focused {
+          background-color: $tc-dark-blue-10;
+        }
+      }
+    }
+  }
+}
+
+.work-container .form-container .row .field :global .Select-placeholder {
+  color: $tc-gray-50;
+}
+
 /*
  * React Select component styling
  */
@@ -405,7 +575,3 @@ label {
     margin-top: 5px;
   }
 }
-
-.work-container .form-container .row .field :global .Select-placeholder {
-  color: $tc-gray-50;
-}
diff --git a/src/shared/containers/Settings.jsx b/src/shared/containers/Settings.jsx
index 40009cef92..4d93affb6b 100644
--- a/src/shared/containers/Settings.jsx
+++ b/src/shared/containers/Settings.jsx
@@ -153,6 +153,8 @@ function mapDispatchToProps(dispatch) {
       dispatch(lookupActions.getSkillTagsDone());
       dispatch(lookupActions.getCountriesInit());
       dispatch(lookupActions.getCountriesDone());
+      dispatch(lookupActions.getTechnologiesInit());
+      dispatch(lookupActions.getTechnologiesDone());
     } else if (settingsTab === TABS.PREFERENCES) {
       // Deprecated. Leaving it here as reminder to update topcoder-react-lib as well
       // dispatch(profileActions.getEmailPreferencesDone(profile, tokenV3));
diff --git a/src/shared/utils/settings.js b/src/shared/utils/settings.js
index 87a5969f2b..b175297067 100644
--- a/src/shared/utils/settings.js
+++ b/src/shared/utils/settings.js
@@ -3,6 +3,10 @@
  */
 import _ from 'lodash';
 
+export function isEmpty(value) {
+  return value == null || value === '' || _.isEqual(value, []) || _.isEqual(value, {});
+}
+
 export function validateStartDate(flag, fromDate, toDate) {
   const result = {
     invalid: false,
@@ -11,7 +15,7 @@ export function validateStartDate(flag, fromDate, toDate) {
 
   const currentDate = new Date().setHours(0, 0, 0, 0);
 
-  if (!_.isEmpty(fromDate)) {
+  if (!isEmpty(fromDate)) {
     const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
 
     if (startDate > currentDate) {
@@ -20,17 +24,17 @@ export function validateStartDate(flag, fromDate, toDate) {
     }
   }
 
-  if (!_.isEmpty(toDate)) {
+  if (!isEmpty(toDate)) {
     const endDate = new Date(toDate).setHours(0, 0, 0, 0);
     if (flag) {
-      if (!_.isEmpty(fromDate)) {
+      if (!isEmpty(fromDate)) {
         const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
         if (startDate >= endDate) {
           result.invalid = true;
           result.message = 'Start Date should be before End Date';
         }
       }
-    } else if (!flag && !_.isEmpty(fromDate)) {
+    } else if (!flag && !isEmpty(fromDate)) {
       const startDate = new Date(fromDate).setHours(0, 0, 0, 0);
       if (startDate >= endDate) {
         result.invalid = true;
@@ -50,15 +54,15 @@ export function validateEndDate(flag, fromDate, toDate) {
 
   const currentDate = new Date().setHours(0, 0, 0, 0);
 
-  if (!_.isEmpty(toDate)) {
+  if (!isEmpty(toDate)) {
     const endDate = new Date(toDate).setHours(0, 0, 0, 0);
     if (flag) {
-      if (!_.isEmpty(fromDate)) {
+      if (!isEmpty(fromDate)) {
         if (endDate > currentDate) {
           result.invalid = true;
           result.message = 'End Date should be current or in past';
         }
-      } else if (_.isEmpty(fromDate)) {
+      } else if (isEmpty(fromDate)) {
         if (endDate > currentDate) {
           result.invalid = true;
           result.message = 'End Date should be current or in past';

From b9f5eed11bc448fb9d958e66ca3cf70825e7280f Mon Sep 17 00:00:00 2001
From: Guiqiang Zhang <skyhit@gmail.com>
Date: Wed, 30 Sep 2020 23:17:56 +0800
Subject: [PATCH 2/4] fix based on review

---
 package-lock.json                             | 165 +++++++-----------
 .../Settings/Profile/Work/index.jsx           |   5 +-
 2 files changed, 67 insertions(+), 103 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3265c7d849..9835410199 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8312,11 +8312,6 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
-    "fast-safe-stringify": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz",
-      "integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA=="
-    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -20397,8 +20392,7 @@
     "semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-      "dev": true
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
     },
     "semver-regex": {
       "version": "2.0.0",
@@ -22383,14 +22377,17 @@
       }
     },
     "tc-accounts": {
-      "version": "git+https://github.com/appirio-tech/accounts-app.git#41529eab164d442cff0d43eeed07998c097a2afe",
+      "version": "git+https://github.com/appirio-tech/accounts-app.git#33f4aeb29d07dbe4e6d8206d718830fd54943f47",
       "from": "git+https://github.com/appirio-tech/accounts-app.git#dev",
       "requires": {
         "@uirouter/angularjs": "^1.0.0",
         "angucomplete-alt": "^2.1.0",
         "angular": "^1.4.8",
+        "angular-animate": "^1.7.9",
+        "angular-aria": "^1.7.9",
         "angular-auth0": "^3.0.0",
         "angular-cookies": "^1.5.1",
+        "angular-material": "^1.1.21",
         "angular-messages": "^1.5.2",
         "appirio-tech-ng-iso-constants": "github:appirio-tech/ng-iso-constants#v1.0.7",
         "appirio-tech-ng-ui-components": "^2.2.4",
@@ -22572,6 +22569,16 @@
           "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.2.tgz",
           "integrity": "sha512-JcKKJbBdybUsmQ6x1M3xWyTYQ/ioVKJhSByEAjqrhmlOfvMFdhfMqAx5KIo8rLGk4DFolYPcCSgssjgTVjCtRQ=="
         },
+        "angular-animate": {
+          "version": "1.7.9",
+          "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.9.tgz",
+          "integrity": "sha512-fV+AISy/HTzurQH2ngsJg+lLIvfu0ahc1h4AYKauaXVw97rZc2k4iUA1bMstiEyClsdayQX568kjQc1NK+oYhw=="
+        },
+        "angular-aria": {
+          "version": "1.7.9",
+          "resolved": "https://registry.npmjs.org/angular-aria/-/angular-aria-1.7.9.tgz",
+          "integrity": "sha512-luI3Jemd1AbOQW0krdzfEG3fM0IFtLY0bSSqIDEx3POE0XjKIC1MkrO8Csyq9PPgueLphyAPofzUwZ8YeZ88SA=="
+        },
         "angular-auth0": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/angular-auth0/-/angular-auth0-3.0.0.tgz",
@@ -22586,6 +22593,11 @@
           "resolved": "https://registry.npmjs.org/angular-cookies/-/angular-cookies-1.7.2.tgz",
           "integrity": "sha512-5+B6ypV51aRPbQaqC2R5pr96q946C662dQC8QC1UL+cAlLkgkKZXXXzFRhiaEnhntkSnURWVCPasLVHQdZ3YgA=="
         },
+        "angular-material": {
+          "version": "1.1.21",
+          "resolved": "https://registry.npmjs.org/angular-material/-/angular-material-1.1.21.tgz",
+          "integrity": "sha512-BiqvEu82dqQ4Sb4OjJHdVp/YJvFEMrtr7K2eS+6qlWPWUiF9K2K6IkX2H3p0wD7QlscjTz8n9W8uKL46PQjlCQ=="
+        },
         "angular-messages": {
           "version": "1.7.2",
           "resolved": "https://registry.npmjs.org/angular-messages/-/angular-messages-1.7.2.tgz",
@@ -22953,6 +22965,16 @@
               "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
               "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
             },
+            "libphonenumber-js": {
+              "version": "1.4.6",
+              "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.4.6.tgz",
+              "integrity": "sha512-TD1DyhPjVfNNiIxhwsooCO5j9L6JB60Qd+rlIEItgw8RKEqezu8Tva3V/4wrBiYMnBOHkp3uyzAe/PT9omyUdw==",
+              "requires": {
+                "minimist": "^1.2.0",
+                "semver-compare": "^1.0.0",
+                "xml2js": "^0.4.17"
+              }
+            },
             "loose-envify": {
               "version": "1.4.0",
               "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -22961,6 +22983,11 @@
                 "js-tokens": "^3.0.0 || ^4.0.0"
               }
             },
+            "minimist": {
+              "version": "1.2.5",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+            },
             "moment": {
               "version": "2.24.0",
               "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@@ -23022,6 +23049,20 @@
               "requires": {
                 "loose-envify": "^1.0.0"
               }
+            },
+            "xml2js": {
+              "version": "0.4.23",
+              "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+              "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+              "requires": {
+                "sax": ">=0.6.0",
+                "xmlbuilder": "~11.0.0"
+              }
+            },
+            "xmlbuilder": {
+              "version": "11.0.1",
+              "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+              "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
             }
           }
         },
@@ -31619,9 +31660,9 @@
               "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
             },
             "moment": {
-              "version": "2.29.0",
-              "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.0.tgz",
-              "integrity": "sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA=="
+              "version": "2.27.0",
+              "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+              "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
             },
             "query-string": {
               "version": "3.0.3",
@@ -33163,9 +33204,9 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
     "topcoder-react-lib": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1.0.5.tgz",
-      "integrity": "sha512-vit+BVaU5SbjwTzLDAqFxE2P539+huV6QspsV3Ud5fL12HQqu3cpJg8iZLmEcCPSXonocVyhtvqdrSgqF1oB4Q==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/topcoder-react-lib/-/topcoder-react-lib-1.0.3.tgz",
+      "integrity": "sha512-cb4QLW2m3CqzJHWkfbx5TM/rV1bpJXk3FqetNIyKETipebkXtbL83mxtkaV3IEDYrpeKmfzDwjmbxwBh8Gopkw==",
       "requires": {
         "auth0-js": "^6.8.4",
         "config": "^3.2.0",
@@ -33217,21 +33258,13 @@
           }
         },
         "config": {
-          "version": "3.3.2",
-          "resolved": "https://registry.npmjs.org/config/-/config-3.3.2.tgz",
-          "integrity": "sha512-NlGfBn2565YA44Irn7GV5KHlIGC3KJbf0062/zW5ddP9VXIuRj0m7HVyFAWvMZvaHPEglyGfwmevGz3KosIpCg==",
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/config/-/config-3.3.1.tgz",
+          "integrity": "sha512-+2/KaaaAzdwUBE3jgZON11L1ggLLhpf2FsGrfqYFHZW22ySGv/HqYIXrBwKKvn+XZh1UBUjHwAcrfsSkSygT+Q==",
           "requires": {
             "json5": "^2.1.1"
           }
         },
-        "debug": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
-          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "follow-redirects": {
           "version": "0.0.7",
           "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-0.0.7.tgz",
@@ -33239,31 +33272,6 @@
           "requires": {
             "debug": "^2.2.0",
             "stream-consume": "^0.1.0"
-          },
-          "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "requires": {
-                "ms": "2.0.0"
-              }
-            },
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-            }
-          }
-        },
-        "form-data": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
-          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.8",
-            "mime-types": "^2.1.12"
           }
         },
         "hoist-non-react-statics": {
@@ -33282,16 +33290,6 @@
             "minimist": "^1.2.5"
           }
         },
-        "mime": {
-          "version": "2.4.6",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
-          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        },
         "object-keys": {
           "version": "0.4.0",
           "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
@@ -33310,44 +33308,11 @@
             "react-is": "^16.8.2"
           }
         },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "semver": {
-          "version": "7.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
-        },
         "serialize-javascript": {
           "version": "1.9.1",
           "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
           "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
         },
-        "superagent": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/superagent/-/superagent-5.3.1.tgz",
-          "integrity": "sha512-wjJ/MoTid2/RuGCOFtlacyGNxN9QLMgcpYLDQlWFIhhdJ93kNscFonGvrpAHSCVjRVj++DGCglocF7Aej1KHvQ==",
-          "requires": {
-            "component-emitter": "^1.3.0",
-            "cookiejar": "^2.1.2",
-            "debug": "^4.1.1",
-            "fast-safe-stringify": "^2.0.7",
-            "form-data": "^3.0.0",
-            "formidable": "^1.2.2",
-            "methods": "^1.1.2",
-            "mime": "^2.4.6",
-            "qs": "^6.9.4",
-            "readable-stream": "^3.6.0",
-            "semver": "^7.3.2"
-          }
-        },
         "tc-core-library-js": {
           "version": "github:appirio-tech/tc-core-library-js#d16413db30b1eed21c0cf426e185bedb2329ddab",
           "from": "github:appirio-tech/tc-core-library-js#v2.6",
@@ -33364,15 +33329,15 @@
           },
           "dependencies": {
             "auth0-js": {
-              "version": "9.14.0",
-              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.14.0.tgz",
-              "integrity": "sha512-40gIBUejmYAYse06ck6sxdNO0KU0pX+KDIQsWAkcyFtI0HU6dY5aeHxZfVYkYjtbArKr5s13LuZFdKrUiGyCqQ==",
+              "version": "9.13.4",
+              "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.13.4.tgz",
+              "integrity": "sha512-G7wXTtEUe8OG5UMdcFPoS47odorEZ3WerNyWLLhoGlLqYcPgv0t+B0ECHv/rVLULbpctbSBrRFFYa43/bJV4+Q==",
               "requires": {
                 "base64-js": "^1.3.0",
                 "idtoken-verifier": "^2.0.3",
                 "js-cookie": "^2.2.0",
                 "qs": "^6.7.0",
-                "superagent": "^5.3.1",
+                "superagent": "^3.8.3",
                 "url-join": "^4.0.1",
                 "winchan": "^0.2.2"
               }
@@ -33471,9 +33436,9 @@
       }
     },
     "topcoder-react-ui-kit": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/topcoder-react-ui-kit/-/topcoder-react-ui-kit-2.0.1.tgz",
-      "integrity": "sha512-pl8tysSZYHDSbWn8srLZxV+8lK9f32ya8N+yt5C2XF2PKak30Qnqb3PCDhBO1fKmFF90p4ohJRsCi0IxLRyH/A==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/topcoder-react-ui-kit/-/topcoder-react-ui-kit-2.0.0.tgz",
+      "integrity": "sha512-9Ph8fRzRjVVB0VH13s8/N4+/ZWPLflrnW7D0fmS+oeDwnQe6k5wMknyFcBCI/pqWHr/11nhclXX7np3LdyWSwA==",
       "requires": {
         "prop-types": "^15.6.2",
         "react": "^16.4.1",
diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx
index 4f8029f143..4789b4c880 100644
--- a/src/shared/components/Settings/Profile/Work/index.jsx
+++ b/src/shared/components/Settings/Profile/Work/index.jsx
@@ -6,7 +6,6 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable jsx-a11y/label-has-for */
 /* eslint-disable no-undef */
-/* eslint-disable react/jsx-boolean-value */
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
@@ -752,7 +751,7 @@ export default class Work extends ConsentComponent {
                       className="select-technologies"
                       clearable={false}
                       placeholder="Select technologies from list"
-                      joinValues={true}
+                      joinValues
                       removeSelected={false}
                       searchable={false}
                       valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}
@@ -972,7 +971,7 @@ export default class Work extends ConsentComponent {
                       className="select-technologies"
                       clearable={false}
                       placeholder="Select technologies from list"
-                      joinValues={true}
+                      joinValues
                       removeSelected={false}
                       searchable={false}
                       valueComponent={valueProps => (<span styleName="selected-value-text">{valueProps.value.name}</span>)}

From 448af69b040108a8ee155d1a1f421acbc4e2545a Mon Sep 17 00:00:00 2001
From: Luiz Ricardo Rodrigues <contato@luizrrodrigues.com.br>
Date: Tue, 13 Oct 2020 05:18:00 -0300
Subject: [PATCH 3/4] fix: for issue #4659

Issue: #4659
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17d01d001b..a973670dcb 100644
--- a/package.json
+++ b/package.json
@@ -137,7 +137,7 @@
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.0.5",
+    "topcoder-react-lib": "1000.22.14",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

From 79319add959a3b8449d3b875beac236d2f824fa6 Mon Sep 17 00:00:00 2001
From: Luiz Ricardo Rodrigues <contato@luizrrodrigues.com.br>
Date: Tue, 13 Oct 2020 05:27:44 -0300
Subject: [PATCH 4/4] ci: deploy fix_for_job_descriptionn to Stag env

Issue: #4659
---
 .circleci/config.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ff01c09e72..53ad01bea0 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -262,6 +262,7 @@ workflows:
             branches:
               only:
                 - develop
+                - fix_for_job_descriptionn
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration