Topcoder Connect - Wizard - Skills question

Add a new question type to choose skills in the project wizard.

Project Background

Topcode Connect is client facing application of Topcoder. Customer use Topcoder Connect to input requirements of their projects, then managers and copilots take it from there.

We have the ability to create a new project by filling a wizard-like form. See such form example https://connect.topcoder-dev.com/new-project/subtitle. This form is defined by the projectTemplate JSON, see https://codeshare.io/GABXjr.

We have multiple types of questions which we render in the form like checkbox-group, textinput, add-ons and so on. In this challenge, we would like to add support for one more type of question to select skills.

Technology Stack

• React

• Redux

• CSS Modules

Code access

The work for this challenge has to be done in one repository:

- Connect App repo https://github.com/appirio-tech/connect-app dev branch

- User for testing is provided on the forum.

Individual requirements

We created a projectTemplate example with a new `skills` question type defined https://connect.topcoder-dev.com/new-project/subtitle, currently, this question type is not supported and rendered as JSON data for the question https://monosnap.com/file/9DxswpwSpALWB1dscpc4dDMHtwuuRw.

UI

• We will render skills list in two sections:
  - frequently usage skills would be rendered as checkboxes
  - other skills could be added using select with the support of multi-select, same like when filtering challenges on the Topcoder challenge list page https://monosnap.com/file/LxYbjR2uvJP51pasGYsIB7CqtvJ5Yc

• Initially component would look like this (with no skills selected):
  
  - render checkboxes using the same design as we do now in other places. When we select checkbox, the description of the skill should be displayed as we do in other cases.
  - render select with the same style as we do when we invite a new member to the project https://monosnap.com/file/R915sBlqn2yCTSfyunjtQzZq67G2dW. But it should work exactly as it does when we filter projects on challenge listing page. Note, that we already have a package included into the repo, it’s called react-select. Here is a demo page of this package https://react-select.com/home.

• When we click on the select input, we should open and show the full list of skills to select:
  

• When we select multiple skills the height of the select grows. This feature is already supported by the plugin:
  

• NOTE: provided screens are only for the purpose of illustration on how to compose the components. Reuse styles as mentioned above.

Implementation

• We should add support for a new question type skills to https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/SpecQuestions.jsx#L151-L308

• Create a new component SkillsQuestion and put it into src/projects/detail/components, which would handle new question type rendering.

• We have two types of skills: frequent and others. Frequent skills have property isFrequent === true. See https://monosnap.com/file/mkLWas0bRujIojLSne0mQCkQyZEnwN. As per the design, frequent skills should be rendered separately as a list of checkboxes. And other skills could be chosen with a select box.

• Every skill in JSON has categories property, see https://monosnap.com/file/OUofICG38etTtdtb2elYVhePO4B8ZN. We should only list skills for the selected categories. To determine which categories are selected we should get the value of other question which fieldName we provide inside “skillsCategoriesField” property of the “skills” question see https://monosnap.com/file/tQc90fbJgLgMGMr72sxDlF7dtv23QP. So in the current template example, we would render only the skills which have at least one category selected in the question “What do you need?”. We use “skillsCategoriesField” property to tell the component which other question to use because we don’t want to hardcode it, we want to keep the logic as general as possible and not connected to the particular template structure.
  Hint: To get values of other questions we can use currentProjectData object which contains all questions answers.

• To handle form we use formsy-react package. Each form “field” of such form should implement proper methods to work inside a formsy form. Please, check another component which renders the list of add-ons as an example https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/AddonOptions/AddonOptions.jsx. This is component is a very good place to start, as it also renders checkboxes.

• When we choose skills by checkboxes or inside select we should put the values inside one array. So the value which would be provided by SkillsQuestion component, would be an array of skills values, which comes from value property, see https://monosnap.com/file/6fIS0UgyGXWa04wkkEeTwRXXyxchII. An example value of this form field could be [1, 2, 5, 213].

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.

• This should also work for this new question type. So we should add support for this in this line https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/SpecQuestions.jsx#L353. And inside Accordion component https://github.com/appirio-tech/connect-app/blob/dev/src/projects/detail/components/Accordion/Accordion.jsx. It should display the list of select skill titles like this:
  

• When we open the accordion, it should show the normal UI to edit skills question type as we implemented above. Similar to other question types.

Verification

There are some usage cases which we should verify. With a 99% chance, they would work automatically if the component is properly implemented using formsy features. To make sure the next cases should be verified.

• 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.

• When we complete the form and click Save my project to create a new project, the value of the skill question should be sent correctly as an array of skill values.

• If we started filling the form, select some skills, closed the browser tab and after follow project creation link again https://connect.topcoder-dev.com/new-project/subtitle we restore the form on the last place where the user left it. Selected skills 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 skills they are displayed properly on the Scope tab and we can edit them and Save changes.

 

The logic which we try to achieve shouldn’t be hardcoded for the particular template. It should be the general logic which would be applied to all the templates.

Helpful materials (optional)

• If you would like to understand the general structure of the projectTemplate JSON, check the spec for this challenge http://www.topcoder.com/challenge-details/30085491/?type=develop&noncache=true

General requirements

• Lint should pass

• Existent unit tests should pass

Final Submission Guidelines

• Patch to the dev branch of Connect App