Content
View differences
Updated by Henriette Darge over 1 year ago
#### **Acceptance criteria**
##### Viewing relations
When relations exist,
* The top of the tab has a caption with a "+ Add relation" button (secondary)
* This is only visible to users with the permission to create work packages.
* Each type of existing relation is contained in a box section
* The title is the relation type followed by a badge of the number of relations (eg. "Related to (2)"
* Each relation includes:
* Work package info line (type, ID, status)
* See ##58734 for existing implementation
* Work package name
* Description (optional, if it exists)
* More icon (...) with two options: Edit and Delete (danger)
* Children have no Edit option, just Delete.
* Predecessor/Successor relations include:
* The words "(before)" for Predecssors and "(after)" for Successors after the section titles for additional clarity
* Start and end date of the related work package (if it exists)
* Indication of manual scheduling (pin icon) if that's the case
* If a relation contains multiple relation types, each type is contained in its own box
* Apart from the relation types, children are also displayed in an individual box section, at the end.
**Adding relations**
* The "+ Add relation" allows the user to add a new relation
* Click on the button will trigger a flat Action menu to select relation types. Each relation has a title and a short caption that describes the relation type:
* **Related to**
Creates a visible link between the two work packages with no additional effect
* **Predecessor (before)**
The related work package necessarily needs to finish before this one can start
* **Successor (after)**
The related work package necessarily needs to start after this one finishes
* **Child**
Makes the related a work package a sub-item of the current (parent) work package
* **Duplicates**
This is a copy of the related work package.
* **Duplicated by**
The related work package is a copy of this.
* **Blocks**
The related work package cannot be closed until this one is closed first
* **Blocked by**
This work package cannot be closed until the related one is closed first
* **Includes**
Marks the related work package as including this one with no additional effect
* **Part of**
Marks the related work package as being part of this one with no additional effect
* **Requires**
Marks the related work package as a requirement to this one
* **Required by**
Marks this work package as being a requirement to the related one
* Selecting a relation type will display a dialog:
* Title: "Add {relation type}"
* Body:
* Work package search input
* Description: input field
* One-line
**Editing relations**
* Relations can also be edited
* The More (⋯) action on relations displays a drop-down with two options:
* Edit relation
* Delete relation
* The "Edit relation" modal displays the Edit modal
* This is a variation of the add relation modal
* The work package field is inactive (it is not possible to modify this)
* Child relations only have the "Delete" relation option; they cannot be edited (because they can have neither lag nor description)
**Empty state**
##### Blank state
If a work package has no relations, a Blankslate is displayed:
* Title: No relations
* Caption: This work package does not have any relations yet.
#### **Visuals and Figma mockups**
The UX/UI is a work in progress. For the most up-to-date mockups, please refer to the Figma document:
workPackageValue:"Figma wireframes"
<br>
**Add relations drop-down:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:433px;" src="/api/v3/attachments/234378/content">
<br>
**Add successor dialog**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:515px;" src="/api/v3/attachments/238431/content">
**Multiple relations visible:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:450px;" src="/api/v3/attachments/234377/content">
**Edit relation modal:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:508px;" src="/api/v3/attachments/238432/content">
##### Viewing relations
When relations exist,
* The top of the tab has a caption with a "+ Add relation" button (secondary)
* This is only visible to users with the permission to create work packages.
* Each type of existing relation is contained in a box section
* The title is the relation type followed by a badge of the number of relations (eg. "Related to (2)"
* Each relation includes:
* Work package info line (type, ID, status)
* See ##58734 for existing implementation
* Work package name
* Description (optional, if it exists)
* More icon (...) with two options: Edit and Delete (danger)
* Children have no Edit option, just Delete.
* Predecessor/Successor relations include:
* The words "(before)" for Predecssors and "(after)" for Successors after the section titles for additional clarity
* Start and end date of the related work package (if it exists)
* Indication of manual scheduling (pin icon) if that's the case
* If a relation contains multiple relation types, each type is contained in its own box
* Apart from the relation types, children are also displayed in an individual box section, at the end.
**Adding relations**
* The "+ Add relation" allows the user to add a new relation
* Click on the button will trigger a flat Action menu to select relation types. Each relation has a title and a short caption that describes the relation type:
* **Related to**
Creates a visible link between the two work packages with no additional effect
* **Predecessor (before)**
The related work package necessarily needs to finish before this one can start
* **Successor (after)**
The related work package necessarily needs to start after this one finishes
* **Child**
Makes the related a work package a sub-item of the current (parent) work package
* **Duplicates**
This is a copy of the related work package.
* **Duplicated by**
The related work package is a copy of this.
* **Blocks**
The related work package cannot be closed until this one is closed first
* **Blocked by**
This work package cannot be closed until the related one is closed first
* **Includes**
Marks the related work package as including this one with no additional effect
* **Part of**
Marks the related work package as being part of this one with no additional effect
* **Requires**
Marks the related work package as a requirement to this one
* **Required by**
Marks this work package as being a requirement to the related one
* Selecting a relation type will display a dialog:
* Title: "Add {relation type}"
* Body:
* Work package search input
* Description: input field
* One-line
**Editing relations**
* Relations can also be edited
* The More (⋯) action on relations displays a drop-down with two options:
* Edit relation
* Delete relation
* The "Edit relation" modal displays the Edit modal
* This is a variation of the add relation modal
* The work package field is inactive (it is not possible to modify this)
* Child relations only have the "Delete" relation option; they cannot be edited (because they can have neither lag nor description)
**Empty state**
##### Blank state
If a work package has no relations, a Blankslate is displayed:
* Title: No relations
* Caption: This work package does not have any relations yet.
#### **Visuals and Figma mockups**
The UX/UI is a work in progress. For the most up-to-date mockups, please refer to the Figma document:
workPackageValue:"Figma wireframes"
<br>
**Add relations drop-down:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:433px;" src="/api/v3/attachments/234378/content">
<br>
**Add successor dialog**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:515px;" src="/api/v3/attachments/238431/content">
**Multiple relations visible:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:450px;" src="/api/v3/attachments/234377/content">
**Edit relation modal:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:508px;" src="/api/v3/attachments/238432/content">