feat: add tasks table component and task list page[DET-3221]

[hamidzr]

Description

depends on #640 #636 #682

Test Plan

I suspect https://determinedai.atlassian.net/browse/DET-2982 is blocking the storybook added here from rendering.

Commentary (optional)

To keep the PR smaller planning to leave the following for future work:

• username display for a future PR to keep the PR smaller. the command vs experiment endpoints each return different user/owner data.
• custom styling to make it look more like Figma design.
• Duration: commands don't have an end time we might want to either scrap the column or just include for experiments?

[hkang1]

@hamidzr This was probably not clearly outlined, but the tasks list page does not contain experiments and only commands (notebooks, tensorboards, shells and commands).

[hamidzr]

took out the experiments portion and rebased with master

[hkang1]

nit: Let's call it TaskTable without the plural s in the name. The table already implies a collection of tasks.

[hkang1]

The table code looks really good. Surprisingly very short!
Storybook isn't working yet, probably still dependent on the storybook fix PR.

[hkang1]

suggestions: Visual review

• Add tooltip of the actual time for start time column.
• Add tooltip of the user's full name on the avatar (probably best to apply directly to Avatar component)
• Add tooltip of the type on the type icon.
• Add overflow menu for every row and have a default option of Open so at the basic minimum it won't be empty. Would like to train and get the users to get used to the overflow menu and expect it everywhere they see a task.

[hamidzr]

suggestions: Visual review

thanks for the good suggestions!

✔️ * Add tooltip of the actual time for start time column.
✔️ * Add tooltip of the user's full name on the avatar (probably best to apply directly to Avatar component)
✔️ * Add tooltip of the type on the type icon.

• Add overflow menu for every row and have a default option of Open so at the basic minimum it won't be empty. Would like to train and get the users to get used to the overflow menu and expect it everywhere they see a task.

a bit unsure about the last one 🤔 should we do the same for dashboard task cards?

[hkang1]

suggestions: Visual review

thanks for the good suggestions!

✔️ * Add tooltip of the actual time for start time column.
✔️ * Add tooltip of the user's full name on the avatar (probably best to apply directly to Avatar component)
✔️ * Add tooltip of the type on the type icon.

• Add overflow menu for every row and have a default option of Open so at the basic minimum it won't be empty. Would like to train and get the users to get used to the overflow menu and expect it everywhere they see a task.

a bit unsure about the last one 🤔 should we do the same for dashboard task cards?

synced with @hamidzr will have a disabled/greyed out look for both dashboard and tasks table overflow when there are not actionable items.

[hkang1]

Crossed the finish line!
Couple of minor things:

• using useCallback instead of useMemo in that one area
• removing duration for tasks table

[hamidzr]

#725 I set up a separate PR for adding the no action state to action drop down

[hamidzr]

eh GitHub UI failed.. the test was passing the it showed as failing after merge 🤷‍♂️