Add filter section and Update Table on Daily Data

[chris-kuryak]

Problem statement

The Daily Data page currently does not have the new Filter components. The components need to be added.

The Daily Data page also currently uses the old table component. The new custom table component needs to be implemented and a new column for Receiver needs to be added.

What you need to know

• Default view
• Different state views (default, search, filter, error, etc.)
• Product-approved Feature List

Acceptance criteria

• [ ] Filter area (light blue box) added to Daily Data page with USWDS components where possible

  • [ ] Receiver Dropdown with label and helper text
  • [ ] Date Picker with label and helper text
  • [ ] Time Picker with label and helper text
  • [ ] Apply Button
  • [ ] Reset Button
  • [ ] Filter title Label ("View data from specific receiver...")

• [ ] Receiver Dropdown functionality

  • [ ] No receiver selected by default (search across all receiver services' data)
  • [ ] X button in Receiver Dropdown clears input and returns dropdown to default state (empty)
  • [ ] Receiver Dropdown selection persists after being applied unless otherwise cleared

• [ ] Date Picker functionality

  • [ ] Default state is visually empty. Empty state (though hidden) is Start Date = 06/25/2021 and End Date = today's date
  • [ ] When Interacting with Date Picker, the default date for both the start and end calendar pickers are today's date
  • [ ] Date input selection persists after being applied unless otherwise cleared

• [ ] Time Picker functionality

  • [ ] Default state is visually empty. Empty state (though hidden) is Start Time = 00:00 and End Time = 23:59:59:999
  • [ ] Time picker dropdown will provide options from 12:00am to 11:59am in 1 minute increments and hh:mm am/pm format
  • [ ] Users can type into type picker component and dropdown performs similar to autocomplete. User can click their preference or press enter to confirm their selection from the list.
  • [ ] Time Picker input selection persists after being applied unless otherwise cleared
  • [ ] For any time input, the search will encompass an additional 59.999 seconds (eg, the user input of "11:59" uses "11:59:59.999" for the search/filter)
  • [ ] X button in each time field clears input and returns dropdown to default state (empty)

• [ ] Apply Button Functionality

  • [ ] Clicking the apply button clears all existing search or filters and re-populates the table based on the new filters
  • [ ] Not all filters require an input to enable apply (1, 2, or all 3 are sufficient).
  • [ ] If either time input is populated without a date, apply button is disabled (date is required in this case)
  • [ ] Both start time and end time are not required for filter functionality. If only one is selected, the default (empty state) time is used in that field location.
  • [ ] Both start date and end date are not required for filter functionality. If only one is selected, the default (empty state) time is used in that field location.
  • [ ] If selected date logic would cause an error (eg, end date is earlier than start date), apply button is disabled
  • [ ] If selected time logic would cause an error (eg, end time is earlier than start time), apply button is disabled

• [ ] Reset Button functionality

  • [ ] When user clicks reset button, all search and filter criteria is removed and table refreshes based on default inputs

• [ ] Table is updated to the new custom table component

• [ ] Column for receiver is present

• [ ] Unit tests for this feature(s)

• [ ] Review with Product (Chris) and Design (Jess)

• [ ] Check that E2E tests still function properly

[chris-kuryak]

Combined the table work into this ticket based on engineering feedback. Updated point value to 8 instead of 5.

[penny-lischer]

@chris-kuryak now that we return all receivers on load, some of the receivers listed in the table do not appear in the dropdown because the dropdown only shows active receivers. Should we only show the rows in the table where there are active receivers?

[chris-kuryak]

@penny-lischer Yes, only show active receivers in the table and in the drop down.

[chris-kuryak]

Due to an issue with "inactive" receivers showing up on the new Daily Data page inadvertently, we will want to match the functionality of the current Daily Data page by only showing active receivers on the new Daily Data page. For now, we will make a quick fix to this current PR without a ticket (likely by making one receiver be selected by default, and therefore only allowing active receivers to be selected in the receiver drop-down)