Functional overview

It's a rewrite of the current modale used in planning v2 using VueJS as we cannot re-use the current modal (done in AngularJS).

The only change that might be seen by user is that upload of files will be handled by TuS for streamed upload (instead of chunking done in AngularJS modal)

Technical overview

The modal is meant to be used in cardwall but also to completly replace the AngularJS one in Planning view, test management & kanban. As it's done in VueJS we can also use it to edit an artifact in and BurningParrot page (in Git, Document or Dashboard for instance).

The modal is a module provided by tracker, it's written in TypeScript and VueJS.

In order to learn from our past mistake, we decided to clearly separate the 2 use case of the modale:

• Creation of a new artifact
• Update of an existing artifact

As the 2 modes are clearly different:

• Creation need
  • the tracker structure (GET /trackers/:id)
  • the default values
  • permissions "on submit"
  • transmit ALL data with a POST /artifacts/
  • have a special case for workflow (do not manage mandatory follow-up comment)
  • cannot display "read-only fields" such as "artifact id", "submitted on", etc.
  • can have prefilled data (as when we report a bug from TTM)
• Update need:
  • tracker structure and artifact data (GET /artifacts/:id?with_tracker_structure) + followup comments (GET /artifacts/:id/changesets)
  • permissions on update
  • transmit only MODIFIED data with a PUT /artifacts/:id
  • have the complete workflow

Fields that might be tricky:

• artifact links (management of a parent selection when applicable)
• permission on artifact (the business rules for serialization for save server side are tricky)
• files
  • There is a quota management to handle
  • Move to TuS
  • Display of upload progress on submit
  • Garbage collect of uploaded images that are no longer used. This is for image copy/paste in Followups or Text fields.
• textarea + follow-up comments
  • dependency with files for copy/paste of images

Suggested split

• Start by doing the full modal with only one simple field: String field. That means doing the GET requests, the transformation to Vuex model, the diff (modified files), the transformation to PUT / POST request and the actual requests. This step also takes care of workflow Hidden fieldsets and Frozen fields.
• (The following is not necessarily ordered)
• Add Open Lists fields
• Add File fields with Tus upload
• Add Text fields with image copy/paste support. This introduces a "cross-field" transformation where Text fields can change the values of File fields.
• Add List fields with Field dependencies and Workflow transitions. That means Selectbox, multi-selectbox, radio button, checkbox. Field dependencies affect which values one can select from, from one List field to another. Workflow transitions restrict which values one can select from for only one list field.
• Other supported fields : integer, float, date, datetime, computed, permissions on artifact, burndown (image from jpgraph), cross references, Structural (linebreak, static rich text, separator), Read-only fields (artifact id, per-tracker artifact id, priority, submitted by, last update by, submitted on, last update on)