Challenge Overview
Challenge Objectives
-
Develop form builder tool for managing Connect metadata
Project Background
-
Topcoder 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. You can see Topcoder Connect in action here: https://connect.topcoder-dev.com
-
Input requirements are a set of questionnaire forms that users fill in - for example to define project budget, users, application screens, etc. These forms can be generated from a json configuration (template) and our backend (project-service) supports CRUD methods on those templates. In this challenge we want to develop a UI to manage these templates.
Technology Stack
-
ReactJS
-
SCSS
-
HTML
Code access
Base code is available in the /feature/template-manager branch of the project repository - see forum details for access.
There are no designs in this challenge - all pages should be implemented by using existing page elements in Connect application
Individual requirements
We already have a screen that shows the possibility of using a nice JSON editor and showing the preview of the form (see https://connect.topcoder-dev.com/form-builder ). We will reuse this feature in screens bellow.
Scope of this challenge is to provide management interface for all items returned by GET v4/projects/metadata API call:
-
milestoneTemplates
-
productCategories
-
productTemplates
-
projectTemplates
-
projectTypes
All the pages should be accessible only by users with role Administrator or Connect Administrator
-
Select entity type - Menu
Create a way for the user to select one of the managed entities (milestone templates, product categories, product templates, project types, project types) - it can be a simple dropdown, or you can use a TopBar or Sidebar menu - as long as the menu doesn’t consume too much screen space -
Milestone templates screen
This screen will allow the users to manage milestone templates. Initial list of templates is returned in the metadata call (result.content.milestoneTemplates). Fields that should be editable by user are:
- activeText :string
- blockedText :string
- completedText :string
- description :string
- duration :number
- hidden :flag(checkbox)
- metadata :string (JSON)
- name :string
- order :number
- plannedText :string
- reference :string
- referenceId :number
- type :string
User should have an option to select an existing template and edit it, or create a new one (clean) or duplicate an existing one and edit the copy, or delete an existing template.
To save an edited template, call POST /v4/timelines/metadata/milestoneTemplates or PATCH /v4/timelines/metadata/milestoneTemplates/:id
Deleting a template will show a confirmation modal where user has to enter the id of the entity to be deleted (confirm the id is the same entity as the selected one)
-
Product categories screen
This screen will allow the users to manage product categories. Initial list of categories is returned in the metadata call (result.content.productCategories). Fields that should be editable by user are:
- aliases :string list
- disabled :flag
- displayName :string
- hidden :flag
- icon :string
- info :string
- key :string
- question :string
User should have an option to select an existing category and edit it, or create a new one (clean) or duplicate an existing one and edit the copy, or delete an existing category.
To save an edited category, call POST /v4/projects/metadata/productCategories or PATCH /v4/projects/metadata/productCategories/:key
Deleting a category will show a confirmation modal where user has to enter the id of the entity to be deleted (confirm the id is the same entity as the selected one)
-
Product templates screen
This screen will allow the users to manage product templates. Initial list of templates is returned in the metadata call (result.content.productTemplates). Fields that should be editable by user are:
- aliases :string list
- brief :string
- category :string
- details :string
- disabled :flag
- hidden :flag
- icon :string
- name :string
- productKey :string
- template :string JSON
User should have an option to select an existing template and edit it, or create a new one (clean) or duplicate an existing one and edit the copy, or delete an existing template.
To save an edited template, call POST /v4/projects/metadata/productTemplates or PATCH /v4/projects/metadata/productTemplates/:templateId
To edit the “template” field use the existing JSON editor and preview available at /form-builder route.
Deleting a template will show a confirmation modal where user has to enter the id of the entity to be deleted (confirm the id is the same entity as the selected one)
-
Project templates screen
This screen will allow the users to manage project templates. Initial list of templates is returned in the metadata call (result.content.projectTemplates). Fields that should be editable by user are:
aliases :string list
- aliases :string list
- category :string
- disabled :flag
- hidden :flag
- icon :string
- info :string
- key :string
- name :string
- question :string
- scope :string JSON
User should have an option to select an existing template and edit it, or create a new one (clean) or duplicate an existing one and edit the copy, or delete an existing template.
To save an edited template, call POST /v4/projects/metadata/projectTemplates or PATCH /v4/projects/metadata/projectTemplates/:templateId
To edit the “scope” field use the existing JSON editor and preview available at /form-builder route.
Deleting a template will show a confirmation modal where user has to enter the id of the entity to be deleted (confirm the id is the same entity as the selected one)
-
Project types screen
This screen will allow the users to manage project types. Initial list of types is returned in the metadata call (result.content.projectTypes). Fields that should be editable by user are:
- aliases :string
- disabled :flag
- displayName :string
- hidden :flag
- icon :string
- info :string
- key :string JSON
- metadata :string
- question :string
User should have an option to select an existing type and edit it, or create a new one (clean) or duplicate an existing one and edit the copy, or delete an existing type.
To save an edited type, call POST /v4/projects/metadata/projectTypes or PATCH /v4/projects/metadata/projectTypes/:key
Deleting a type will show a confirmation modal where user has to enter the id of the entity to be deleted (confirm the id is the same entity as the selected one)
General for all requirements
Follow the required code style and make sure there are no lint errors. All API actions should display user feedback (loading indicator).
What To Submit
Submit a git patch with all the updated code
Submit a short video overview
Update project Readme file with any new requirements for deployment/verification
Final Submission Guidelines
Submit a git patch with all the updated code
Submit a short video overview
Update project Readme file with any new requirements for deployment/verification