Overdue Task Tooltip
Description
While we've been working on converting the dashboard to a table system, other Kotahi teams were adding a tasks and notifications system to the workflow process. Overdue task notifications for this system are currently shown on the dashboard next to manuscript titles, only in the "Manuscripts I'm editor of" section. Here's an example:
We want to incorporate these UI changes in our table refactor. To avoid creating a new table column just for this label, we plan to put an icon next to the manuscript title in the table to alert the user, showing more info on hover. See our designs.
Important Branch off of !658 (merged) for this.
Learning objectives
- React
- Tooltip libraries
- Icons
Todo
These points are a rough guideline. Please feel free to discuss with others on the team about the best way to design this component!
-
create a special component definition for the overdue task button. The file contains good examples of other components. Make sure you give it a very small width, and no title, so that it takes up little space in the table.
-
create the overdue task component UI, and add it to the cell-components directory, and the export list.
-
Add any additional needed properties to the
specialComponents
object for each table. -
Update the configuration file
An alternative implementation would be to create a custom component that combines meta.title
and the overdue warning so that they are shown together. You would follow similar steps to implement this.
Notes
The properties needed by a Manuscript Table are:
-
columns
- a list of strings of what columns the table should display. This is set in the config file. -
fieldDefinitions
- don't worry about this, just know it is required -
specialComponentValues
- these are additional state needed to display each column value -
displayProps
- callbacks/values for filtering/sorting etc.