TSJR-217 - add principal skills to user profile

[vas3a]

Related JIRA Ticket:
https://topcoder.atlassian.net/browse/TSJR-217
https://topcoder.atlassian.net/browse/TSJR-214

What's in this PR?

Updates the user profile page to allow the users to move skills to Principal/additional skill sections.

Here's a note about the UX for this, taken from the ticket comments:

in regards to the ticket description about the UX for this:

A skill can only appear in one either Principal Skills or Additional Skills. If it already appears in one it will not be returned in the autocomplete skill list.

→ a skill will only appear in one of the principal/additional list. BUT there is no way of removing a skill from one list if it is “verified”. So to make it possible to move the skills around:

let’s say user has “angular” skill already existent in “Additional” section

user types “angular” in “principal” section input, and selects it

“angular” is now moved from “Additional” to “Principal”

So you’re basically presented with all the options in any of the section, and this allows you to move skills around. (it won’t show you “angular” if you already have it in the section you’re typing in).

[testflyjets]

@vas3a One comment before I review this. I was thinking that this might be a bit confusing to users the first time they see it without any further explanation, and I don't see anything from the UX team to address this. My thought is that we show do two things:

• Show a pop-up the first time folks come to their profiles after this launches. The pop-up explains the point of "Principal Skills" and how it they work (basically the way the conversation in this PR describes a skill showing up in one or the other areas but not both). Users can dismiss this pop-up.
• Add a "What is this" or similar link near "Principal skills" (or anywhere on the dialog) that shows the same pop-up anytime.

Thoughts?

[testflyjets]

Would "best opportunities" be better than "right opportunities"? Just a thought.

[testflyjets]

I'm really glad you are very good at building front-end apps like this. React tends to bend my brain!

[testflyjets]

Let me know what you think about having an explanatory pop-up.

[vas3a]

@testflyjets what do you think?

The Highlight your Principal skills modal will automatically show up when you see your own profile first time after we launch this.
NOTE: we don't have a way to store in the api somewhere the fact that the user has seen this modal, so for now I'm storing this info in the local storage, separate for each user (meaning if you log in with other account, you'll still see this modal if you haven't seen it yet).
Should be a good experience IMO, only downside is that you don't have an option to dismiss it forever (it will re-appear if you log in incognito/private session or a new browser, or manually delete local storage).

[testflyjets]

Let's modify the capitalization of "Principal Skills" and "Additional Skills" to use two leading caps wherever they appear.