Topcoder Connect - Metadata - Form, PlanConfig and PriceConfig

Add ability to edit Form, PlanConfig and PriceConfig models using UI.

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 different kind of templates like Project Templates, Product Templates, Project Types, Product Categories which can be managed by admins. And already have the ability to edit them using UI inside Connect App. Recently, we implemented the API to manage new models Form, PlanConfig and PriceConfig and in this challenge, we would like to add the ability to manage them by UI.

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.

- NOTE: you would also have to deploy Project Service locally for testing, see Local testing section.

- Project Service config for local deployment is provided on the forum.

Individual requirements

You may follow the Project Types and Project Templates pages as examples to what we have to do for Form, PlanConfig and PriceConfig. We have to implement all the functionality in a similar way. Note, that all of the new models have the same fields, so the functionality for these three new sections would exactly the same.

• Add new tabs, called Forms, Plan Configs and Price Configs.

List page:

• We already have data loaded in the Redux store for all three models: templates.forms, templates.planConfigs and templates.priceConfigs.

• On the listing page, for each of these models show a table with the next columns:
  - Key
  - Version
  - Updated At
  - Created At

• Enable sorting for Updated At and Created At.

• We should only show item with the latest version for each key in this table. Note that inside the Redux store there could be data for several versions for each key.

• At the top right corner, show Create button which would lead to a page with an empty form for creating a new model entity.

• When we click on data in the column Key or Version we should come to the page for editing a particular entity.

Create/Edit page:

• UI
  

• On the create page only editable key and config should be shown with no version and revision fields.

• Each edit page should have a URL like /metadata/<modelname>/{key}/{version} as each of the entities of these models are identified by the pair of key and version.

• We should be able to open edit page from the listing page or by following the direct link to such page. As inside Redux store not all versions are loaded initially we have to check that requested version is loaded when we open edit page and if not, then load it. Here is a Project Service endpoint which might be used GET /v4/projects/metadata/<modelname>/{key}/versions/{version}

• To show the select box with versions we should get the list of all available versions using Project Service endpoint GET /v4/projects/metadata/<modelname>/{key}/versions.

• The next fields should be editable:
  - key (TCFormFields.TextInput) - should be editable during creating, and read-only during editing the same like on Project Types pages.
  - config (JSON editor with Maximize button, same like on the Project Templates pages)

• When we choose any option inside Version select box, we should be redirected to the page to edit that version.

• Show a read-only revision value with a See history link. Clicking the See history link should show a popup with a table with revisions of the current version with the next columns:
  - Revision
  - Update at
  - column with button Load this revision.
  Clicking Load this revision would update all the data of the current form to the data from the revision. We would have to click Save button, to send changes to the server if we want.
  For getting the list of revisions we can use the next Project Service endpoint GET /v4/projects/metadata/<modelname>/{key}/versions/{version}/revisions.
  - you can implement the modal the same way as it’s done for the Team Management see screenshot. We need only show the title “<modelname> history”, the close button, and the table as described above.

• Support 4 actions:

• Save should save form data to the server using endpoint PATCH /v4/projects/metadata/<modelname>/{key}/versions/{version}. Note, that this endpoint would create a new revision of the form. So revision should be updated from the value returned by the server.

• Delete should call the DELETE /v4/projects/metadata/<modelname>/{key}/versions/{version} endpoint. After deleting we should be redirected the list of items same like on existent pages.

• Duplicate button should turn the page to create a new entity page with the prefilled config and empty key with no version and revision fields.

• Create New Version button should turn the page to the create a new entity page with the prefilled config and prefilled read-only key. Version and revision fields should be hidden as during creating.

Local testing

Provided user doesn’t have permissions to create or update milestone templates.

So to verify create/update/delete functionality, you would have to deploy Project Service locally, additionally to the Connect app.

1. Follow the steps to run Project Service locally https://github.com/topcoder-platform/tc-project-service#steps-to-run-locally

2. Import demo data to Project Service so you don’t have to create it manually https://github.com/topcoder-platform/tc-project-service#import-sample-metadata--projects

3. Follow this section to run Connect App with the locally deployed version of Project Service https://github.com/topcoder-platform/tc-project-service#run-connect-app-with-project-service-locally

4. As provided user doesn’t have permissions to create/updated/delete all the templates, you would have to remove permission checking in your local Project Service setup. For this purpose assign true to the projectAdmin in this line https://github.com/topcoder-platform/tc-project-service/blob/feature/milestone-pausing/src/permissions/index.js#L8

5. After these steps, you could test locally using the provided user.

General requirements

• User React and Redux best practices.

• Avoid using multilevel nesting in SCSS. As we use CSS Modules we don’t have to add prefixes or nest class selectors.

• Don’t use :global in CSS Modules unless you have to change some global styles. New styles shouldn’t use :global.

• Don’t hardcode color values in the SCSS, use only colors variables https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss

• Lint should pass

• Existent unit tests should pass

Final Submission Guidelines

• Git patch.