User workflow improvements
User workflow improvements project Integration
This feature branch implements the user workflow improvements project changes outlined in the Hack4Impact PRD. Several of Kotahi's components were modified in implementing the changes.
While this merge request isn't completely wrapped up yet (see checklist at bottom), we'd like to begin the review process now to help spread reviews over a longer timeframe, handling a smaller subset of the changes every so often. As such, we’ll un-draft the MR now, but leave “[WIP]” at the start of the MR title until every requirement is checked off.
Frontend
Dashboard
In Kotahi's frontend, changes were made to the dashboard page to make the information listed more intuitive, improve the display of reviewer data and status tags, and better section the information to pertain to specific user roles.
Making the information listed more intuitive relied heavily on the conversion of the three different manuscript lists to tables. Namely, the tables are for submissions, review requests, management as an editor. The corresponding designs for these tables can be found on the H4I figma. The tables better represent key info and give users the ability to sort by columns and filter by values. The tables also highlight newer Kotahi features in unique ways, like the overdue task note being changed to an icon, and the manuscript actions for editors being linked to new manuscript control panel tabs.
Also changed in the tables is the way that status badges and reviewer statuses are displayed. Status badges now use a common theme found in a Kotahi frontend config file. Also, reviewer statuses are shown in a donut chart to help speed up data recognition and comparison (though this is subject to change… see checklist). The donut chart is implemented using react-google-charts.
To section the dashboard information, we opted to give each new dashboard table its own tab in a tablist under the “Dashboard” heading. We also gave each tab its own route for purposes of filtering, sorting, and pagination support as well as open-in-new-tab behavior. This change hooks into our nice to have feature which saves a user’s last viewed dashboard tab, and redirects them there when they click the dashboard link in the main Kotahi navigation.
Manuscript Control Panel
Several changes were made to the manuscript control panel for purposes of improving the user workflow on this page. First, the main “Workflow” tab has now been split into a “Team” and “Decision” tab to manage the review and editor teams and the actual decision writing separately. As such, we’ve updated links to the Workflow tab from other parts of Kotahi to either go to the Team tab, or include several links that can link to either tab. The linking and tab choosing is handled by react-router navigation state, since these tabs don’t map to unique URLs.
On the team tab, the information that was in the “Reviews” tab is now present, plus our design changes. As such, we’ve removed the reviews tab since it is no longer displaying any new information. The team tab now displays the manuscript editors, kanban board, and invite reviewer sections. There are 3 modals that appear on this page, for viewing current reviewers, declined reviewer email invitations, and inviting reviewers.
The decision tab now shows only completed reviewers, in a similar fashion to how all reviewers used to be displayed on the “Workflow” tab. Also included are the decision and publication sections, which were previously on the “Workflow” tab.
GraphQL/API
Changes were made to several GraphQL queries for the dashboard to support the new features listed. First, the main query to retrieve all manuscripts for a specific table was updated to support pagination, filtering, and sorting arguments, as well as an argument to retrieve only manuscripts that pertain to a given dashboard tab. With the tables being split across separate pages, we are now able to fetch only manuscripts pertaining to a specific page at a time. The main query in this case was manuscriptsUserHasCurrentRoleIn. Also on the dashboard, the query to complete a review was changed to support setting a team member’s review status to “in progress.” Lastly, a query was added to save the user’s recent dashboard tab.
Backend
In the backend, changes were made to only one database model, User, to add a recentTab field which stores a user’s most recent dashboard tab. Outside of this database change, much of the backend logic changes involved the updated GraphQL queries mentioned in the previous section. Specifically, the manuscriptsUserHasCurrentRoleIn query now includes many of the features present on the Manuscripts page table, with complex sorting logic.
Completed features and review process
Here’s a list of features we’ve completed so far, others that are currently in progress, and others still that we are potentially changing in the very near future after receiving feedback from our user research session.
Dashboard
-
Change manuscript lists into tables -
Divide tables across three different tabs -
Setup GraphQL queries and backend logic for filtering, pagination, and sorting -
Represent overdue task notification on manuscript rows in tables -
Change editor actions to link to specific tabs in the manuscript control panel page -
Storybook new tables -
Confirm tab titles -
Frontend logic for filtering, sorting, pagination of dashboard tables -
Rethink donut chart based on user research -
Rethink overdue task icon based on user research
Manuscript control panel
-
Remove reviews page -
Display reviewer information inside Kanban board on the Team tab of the control panel. Also move Invite reviewer here and declined reviewers sections here. -
Show completed reviews only on decision tab of control panel page -
Handle links to specific tabs and open the corresponding tab. Decided not to implement this in the same way as the dashboard, with a unique URL per tab since it would require a significant amount of refactoring/developer time. -
Appropriately display kanban board/invites for old manuscript versions -
Storybook new modal component -
Link new review information modal to each reviewer on the kanban board -
Reviewer information modal changes based on user research -
Link new reviewer declined details modal to email invited declined review invitations -
Link new invite reviewer modal to invite reviewer section -
Link new delete reviewer modal to delete reviewer button -
Fix tests for the changes made to these pages
Manuscripts page