Challenge Overview
When we click “Next” in the wizard we should skip steps which have all content hidden.
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 a form to create a project which works like a wizard. We fill some fields and click button Next to see the next fields to fill. Other words when we click button Next we go to the next step of the wizard.
The form has a tree structure with nodes of various types: it has sections, inside sections we may have subSections, and inside subSections we may have questions.
Each of these nodes (section, subSection or question) may have a property condition with expression and when it’s false, this node would be hidden.
When we click Next we find the next step (step is some node, but not all nodes are steps) which is NOT hidden by the condition.
It could be that when we go to the next step it’s not hidden, but all children nodes of this step are hidden. So we would see nothing on such step.
See demo video https://monosnap.com/file/dGR1FCWFsVveD15Wh8aLYY9R4UqEMF. If we choose only “Design” for the “What do you need?” later we will click button Next 2 times until we see the next fields. This happens because some steps are visible but all nodes inside are hidden by conditions, because we didn’t choose any other options for “What do you need?”.
We will fix this in this challenge.
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 feature/form-redesign branch
- NOTE. If you previously worked on this repo remove `node_modules` and run `npm install` again, because we updated some dependency.
- User for testing is provided on the forum.
Individual requirements
To see the form shown in the demo, you would need to deploy branch feature/form-redesign locally and after, navigate to http://local.topcoder-dev.com:3000/new-project/skip-empty-steps. This form is defined by project template JSON https://api.topcoder-dev.com/v4/projects/metadata/projectTemplates/98.
The first place in JSON template which causes 1st extra Next click https://monosnap.com/file/LUhp5eyWitZVvq5FxV0Khrg7sydWpu
The second places in JSON template which causes 2nd extra Next click https://monosnap.com/file/hWlS9SZZsySXr1mMSFIxkR19iONkyM
To fix this issue we have to skip subSections which have all questions inside hidden by condition when we click button Next
General requirements
-
For a starting point you can check this method which return the next step https://github.com/appirio-tech/connect-app/blob/feature/form-redesign/src/helpers/wizardHelper.js#L482.
-
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.
-
Lint should pass
-
Existent unit tests should pass