[Reports] Filter the list of items for a certain process

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.2.X, Master
• Component/s: Workflow
• Labels:
  • fw_test_manual
  • fw_test_testray
  • must-have
  • pt-app-security-review
• Branch Version/s:
  7.2.x
• Backported to Branch:
  Committed
• Epic Link: Workflow Metrics
• Sprint: Workflow_7.2_11, Workflow_7.2_12

As a process manager, I want to be able to filter the list of process items by SLA status, process status and/or process step.

Process item = process instance

Acceptance Criteria

• Users should be able to click on the metric cards from the Pending Items card and be directed to the All Items page, with the respective filter(s) applied to it;
• Users should be able to click on the metric cards from the Completed Items card and be directed to the All Items page, with the respective filter(s) applied to it;
• Users should be able to click on the metrics from the Workflow by Step card and be directed to the All Items page, with the respective filter(s) applied to it;
• The selected filters should be presented as tags in the Results bar (see Clay documentation for reference);
• The filter options are:
  • SLA Status: Overdue / On Time / Untracked;
  • Process Status: Pending / Completed;
  • Process Step: list task name by alphabetical order;
• Users should be able to select multiple filter options;
• If dropdown is higher than 496px it should have a search bar on it (as specified on Figma component page);
• The filter query should only be applied after user moves the cursor out of the dropdown card;
• The page should provide loading feedback when the table is being updated according to filter options;
• When showing items that have completed status, the column "Process Step" should bring the value: "Completed" (as specified on Figma);
• When there are no results for a filter selection, the table should display the respective empty state (as specified on Figma);

Definitions of Done

• Related tests created and passed successfully;
• All Acceptance Criteria were passed;
• Make sure that all system documentation were updated (if necessary);
• Validated by QA, Product Designer and/or PM;
• No critical issue related to Story scope (ex.: similar of a FP4, FP5 bug);
• Code with peer review completed.

Design Deliverables

• Mockup: https://www.figma.com/file/U6ib7CKDpGNhpTHRvebwVk/15-filter-items-list?node-id=315%3A0
• Components: https://www.figma.com/file/U6ib7CKDpGNhpTHRvebwVk/15-filter-items-list?node-id=261%3A5398