Topcoder Connect - Metadata Management UI

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

 

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

2. 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)

3. 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)

4. 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)

5. 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)

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