Talent Picker Component

[maxceem]

Implement a new component for project creation form to choose talents:

Functionality

• The user needs to enter # People, Duration, and Skills for a minimum of one row for the question to be considered “answered.”
• The user does not need to complete all rows for the question to be considered “answered.”
• Clicking the + button at the end of a row should generate another row for the same role.
  Example: Clicking + at the end of the Designer row should create a second Designer row where the user can enter different numbers of people required/duration required/skills required.
• Clicking the X button at the end of a row deletes a row created by the user. They cannot delete the default rows, but they can leave these default rows as blank (as long as one row is completed, to fulfill the required answer functionality).

Design

https://marvelapp.com/89h2ch3/screen/68335433/handoff with the following adjustments:

• don't show "months" inside, just a number. Add "months" to column header: "Duration (months)"
• If we enter too many skills, let the height of the input of the skills become multiline and grow down
• Reuse the existent style of inputs for peoples, duration and skills, don't implement a new design for inputs
• Don't make the component wide as on design, it should be the same width as other components in the project creation form
• As there is not enough space for "skills" component on one line, put it to the second line, and make the duration and people inputs take the whole space

Read-optimized mode

• When we answer questions and click Next button, we render them in read-optimized mode inside an Accordion, see https://monosnap.com/file/5tHApYK9YEXh5IWXXXRdu2PTohEhJQ. We can open accordion and edit the values using normal UI https://monosnap.com/file/bkSCib1FWEovlfOGf60NutP7x0ZYPp.
• For this component it should display the quantity of people per role: e.g. "Designer: 9, Developer: 5".
• When we open the accordion, it should show the normal UI to edit question as we implemented above. Similar to other question types.

QA guidelines

This new component should support some general form feature, and we should verify that they work:

• When we select some skills and click Back and after Next - the selected values should persist.
• When we select some skills and click Next and after Back - the selected values should persist.
• If we started filling the form, select some specialists, closed the browser tab and after follow project creation link again https://connect.topcoder-dev.com/new-project/talent-as-a-service-specialists we restore the form on the last place where the user left it. Selected specialists should be properly restored.
• After we create a project we can edit project scope on the Scope tab like this. We should make sure that after we created a project with selected specialists they are displayed properly on the Scope tab and we can edit them and Save changes.

Known Issues

• value is not updated in read-optimized mode Talent Picker Component - Issue: value is not updated in read-optimized mode #3951 fixed

[lakshmiathreya]

cc @drasticdpk

[maxceem]

This feature is ready of QA:

• Project Creation form with this component https://connect.topcoder-dev.com/new-project/talent-as-a-service-specialists
• Please, note existent issue Talent Picker Component - Issue: value is not updated in read-optimized mode #3951

[coderhacker]

QA Comments: Please see below issue against this screen https://connect.topcoder-dev.com/new-project/talent-as-a-service-specialists
as per provided below screens
https://marvelapp.com/89h2ch3/screen/68335433
https://marvelapp.com/89h2ch3/screen/68335434
https://marvelapp.com/89h2ch3/screen/68335435
https://marvelapp.com/89h2ch3/screen/68335436
https://marvelapp.com/89h2ch3/screen/68335437
https://marvelapp.com/89h2ch3/screen/68335438
https://marvelapp.com/89h2ch3/screen/68335439
https://marvelapp.com/89h2ch3/screen/68335440

1. Header text and alignment not matching
2. Logo Icon mismatch
3. Text is not center align
4. Para text is not center align
5. In the Duration column have month text, which should be not there, it should be matched with the provided screen.
6. counter icon missing
7. Cross icon is missing
8. Skills column is misaligned not match the provided screen.

9. Icon mismatch with Full Stack Developer and Back End Developer
10. Icon color is not matching with provided design
11. Button design not matching with provided screen
12. Back and SET UP MY TEAM
13. month and counter icon missing from input field

14. People input box size not matching with provided screen
15. The duration default value is empty after the focus out.
16. Extra Pipe is coming in skills input field. this is not in the provided screen

17. After removing value and go to next then click back button, the value is not restored with 0 month.
18. When increasing counter value this not shows 'months' i.e 3 months

19. Skill input box color mismatch

20. Breaking skill input filed after adding multiple skills
    

21. after focusing out form the skills, this is not reset in one line as per design. It's not user friendly and looking very odd.

[coderhacker]

@maxceem please see the above comments.

CC: @lakshmiathreya @drasticdpk

[maxceem]

Thanks @coderhacker screenshot with numbers help a lot to understand the issues.

1. Header text and alignment not matching
2. Logo Icon mismatch
3. Text is not center align
4. Para text is not center align

12. Back and SET UP MY TEAM

Sorry for confusion you with the task description. We should only implement the component for inputting talents and use it in our existent form. Please, ignore everything what is outside in the design.

5. In the Duration column have month text, which should be not there, it should be matched with the provided screen.

In the task description we've mentioned this change to the design: "don't show "months" inside, just a number. Add "months" to column header: "Duration (months)""

6. counter icon missing

It's shown when put cursor as per standard browser behaviour:

7. Cross icon is missing

As per task description "They cannot delete the default rows, but they can leave these default rows as blank (as long as one row is completed, to fulfill the required answer functionality)." We hide it so users cannot remove default row.

8. Skills column is misaligned not match the provided screen.

This is as per task description: "As there is not enough space for "skills" component on one line, put it to the second line, and make the duration and people inputs take the whole space"

9. Icon mismatch with Full Stack Developer and Back End Developer

✅Nice catch. Fixed:

10. Icon color is not matching with provided design

Yeah, we use our current color palette, instead of implementing a new one. In general all "green" colors in design we replace with our current "blue" colors.

11. Button design not matching with provided screen

Same like above, we reuse our existent round blue button to match our current design instead of new green round buttons.

13. month and counter icon missing from input field

In the task description we've mentioned this change to the design: "don't show "months" inside, just a number. Add "months" to column header: "Duration (months)""

14. People input box size not matching with provided screen

As per description: "As there is not enough space for "skills" component on one line, put it to the second line, and make the duration and people inputs take the whole space"

15. The duration default value is empty after the focus out.

❌- valid issue, will consider fixing.

16. Extra Pipe is coming in skills input field. this is not in the provided screen

As per description: "Reuse the existent style of inputs for peoples, duration and skills, don't implement a new design for inputs"

17. After removing value and go to next then click back button, the value is not restored with 0 month.

❌- probably valid issue, will consider fixing together with 15.

18. When increasing counter value this not shows 'months' i.e 3 months

In the task description we've mentioned this change to the design: "don't show "months" inside, just a number. Add "months" to column header: "Duration (months)""

19. Skill input box color mismatch

As per description: "Reuse the existent style of inputs for peoples, duration and skills, don't implement a new design for inputs"

20. Breaking skill input filed after adding multiple skills

The design doesn't show how to deal with the situation, when we have many skills, so we use our existent feature to increase the height of the skills field.

21. after focusing out form the skills, this is not reset in one line as per design. It's not user friendly and looking very odd.

We reuse our existent field for skills which looks slightly different in this moment.

[maxceem]

@vikasrohit could you please have a look on issues 15 and 17 in #3950 (comment).
Should we fix it?

[maxceem]

NOTE. As per discussion with @vikasrohit on Slack we've updated the design of this component and now we are using the next view:

• no table header
• 3 lines:
  1. Role name + buttons
  2. People and duration fields
  3. Skills field

The reason for this is "skills" component which needs a lot of space. We've try out multiple approaches and come up that this design is the best we can have for now taking into account that skills component can show many skills and grow in height.

[maxceem]

The existent issue has been fixed and ready for testing #3951

[vikasrohit]

@maxceem I actually didn't understand the issues 15,17 properly and where my help is required.