Preview form in Metadata editor

[maxceem]

We have metadata editor which let us edit project templates like https://connect.topcoder-dev.com/metadata/projectTemplates/93.

We already show form preview there on the left while showing template editor on the right.

Currently form preview is showing form in some arbitrary way. We have to be able to preview form in two modes:

• create mode: The form preview should be shown same like it's shown during project creation: http://local.topcoder-dev.com:3000/new-project/form_redesign_summary (check it on branch feature/form-redesign)

  • screenshot: https://monosnap.com/file/HMc6KUmW3cl3706rgtRfcpyBZQaqoh
  • header may be skipped for now, if it's hard to show it here

• edit mode: The form preview should be shown same like it's shown during project editing on the Scope tab: http://local.topcoder-dev.com:3000/projects/7888/scope (check it on branch feature/form-redesign)

  • screenshot: https://monosnap.com/file/Y52IGNra4LkqYdVCTVT3aSUMEjC9JN

• We should add toggle to enable preview in edit mode, while by default form should be shown in create mode:

  • desgin: https://monosnap.com/file/mF1yqVgQBGcCjnr3KWBvtpPIpx1xqL
  • for toggle control you can use appirio-tech-react-components/components/SwitchButton/SwitchButton

• Dependant questions should work in both modes (it's when some questions/subSections are hidden because of values of other questions). See demo https://monosnap.com/file/ZNZMwFcdStNotffMqeghLr9TqfU3mv

• Buttons to save/create project should do nothing.

[maxceem]

@vikasrohit This is done via F2F https://www.topcoder.com/challenges/30084273/?type=develop&noncache=true and already pushed to feature/form-redesign branch in 382c2b2

[vikasrohit]

Looks good to me. Thanks @maxceem Great work!!!