feat: Refactor task output details

[Milouu]

Description

• Refactors task outputs section in task drawer to be more consistent with the task inputs section
• Displays awaited outputs when task is not completed yet
• Adds permissions details for task I/Os so that users know easily which org can access their assets
• Adds tooltip with explanation on non-availability when an item is transient (= deleted asap to save storage)
• Changes lock icons by disabled download buttons
• Adds tooltip with explanation when download is blocked because the modelExportEnabled property in the config is set to false
• Adds tooltip describing the kind of asset when hovering on asset icon
• Aligns every download actions

Closes FL-1175

Screenshots

[linear]

FL-1175 Show details of task outputs in the front

Context

Task outputs permission and transient property are not shown today in the frontend:

image.png

More information on Design Outputs in Substra frontend Notion page.

Specification

Mockups → Task information improvements

Task Information Panel - Task information improvements (Figma)

User story

As a data Scientist or R&D member, I want to understand the tasks, so I need to know all details of the tasks that are processed in a project.

Technical specs

Input and output line properties

Properties are always in the same order. Download and Copy/paste button are always on the same vertical alignment, same for the chevron.

Left alignment :

1. Kind (Icon) - mandatory
2. Name (Balise code) - mandatory
3. File name or link or value (Text)
4. Permissions (Icon : group-line) - mandatory

Right :

1. Number and kind of available data/sub-elements or transient property (Text)
2. Download (Icon : download-line)
3. Accordion (Icon : arrow-right-s-line) - only in Inputs available

Icon Set

Different kinds :

• Model or artefact codepen-fill

• Dataset database-2-line

• Performance focus-2-line

• Script code-fill

  Capture d’écran 2023-09-14 à 16.19.48.png

• Permissions group-line

  Capture d’écran 2023-09-14 à 16.19.30.png

• Script information-line

  Capture d’écran 2023-09-14 à 16.19.37.png

Sub elements

(only for Inputs)

Default view :

→ number and the kind on the first line

→ sub-elements are hidden

Capture d’écran 2023-09-14 à 18.01.33.png

Clicking on line or arrow:

→ sub-elements are listed by their filename

→ sub-elements have no available action

Capture d’écran 2023-09-14 à 18.01.19.png

Transient property

→ permissions

Text display for incompleted tasks :

→ "Transient item" with an information icon

Capture d’écran 2023-09-14 à 17.27.26.png

Text display for completed tasks :

→ "No longer available" with an information icon

Capture d’écran 2023-09-14 à 17.27.36.png

Hovering properties

Information icon of a transient element

→ tooltip "Transient items are deleted after use to save storage"

Capture d’écran 2023-09-14 à 15.40.55.png

Download button

→ tooltip “Download [kind]”

Capture d’écran 2023-09-15 à 09.50.23.png

Download disabled button

→ tooltip “Restricted download”

Capture d’écran 2023-09-15 à 11.13.36.png

Kind icon

→ tooltip “[Kind]”

Capture d’écran 2023-09-14 à 15.01.50.png

Permissions icon

→ tooltip “Accessible by [username1], [username2]”

Capture d’écran 2023-09-14 à 17.20.06.png

General Section

Adapt the vertical alignment on the right for the buttons Download and Copy/Past :

image 2.png

[HamdyD]

Added some small comments to lighten the code

[HamdyD]

Not mandatory: instead of defining the prop types inline, you could define them separately for better readability and reusability if more come:

type TaskIOPermissionsProps = {
    permissions?: PermissionsT | null;
};

[Milouu]

True. I made the choice to not declare a type as it is only used here and it only contains permissions 👍

[HamdyD]

The label calculation could be wrapped in a useMemo hook. This would ensure that the label is only recalculated when the permissions prop changes, potentially improving performance.

To be tested but it could be something like that:

const label = useMemo(() => {
        if (!permissions) {
            return 'No permissions available yet';
        }
        if (permissions === null || permissions?.download.public) {
            return 'Accessible by everyone';
        }
        if (permissions.download?.authorized_ids.length) {
            return `Accessible by ${permissions?.download.authorized_ids.join()}`;
        }
        return 'Accessible by owner only';
    }, [permissions]);

[Milouu]

I think the label calculation isn't heavy enough to justify the use of useMemo :)

[HamdyD]

Maybe an oversight, can't it be a self closing tag?
<Skeleton height="50px" width="457px" />

[thbcmlowk]

Ready to be merged. Waiting for end of merge freeze. Thanks @Milouu !

[thbcmlowk]

/e2e --tests=sdk,frontend

[Owlfred]

End to end tests: ✔️ SUCCESS

Awesome! 🎉