Add History Filter Feature (Fixes Issue #511) #513
+408
−1
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,237 @@ | ||
| import FilterIcon from "@components/Icons/FilterIcon"; | ||
| import { | ||
| Badge, | ||
| Box, | ||
| Button, | ||
| Flex, | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| Text, | ||
| } from "@livepeer/design-system"; | ||
|
|
||
| interface HistoryFilterProps { | ||
| selectedEventTypes: string[]; | ||
| isOpen: boolean; | ||
| onOpenChange: (open: boolean) => void; | ||
| onToggleEventType: (eventType: string) => void; | ||
| onClearFilters: () => void; | ||
| allEventTypes: string[]; | ||
| eventTypeLabels: Record<string, string>; | ||
| } | ||
|
|
||
| const HistoryFilter = ({ | ||
| selectedEventTypes, | ||
| isOpen, | ||
| onOpenChange, | ||
| onToggleEventType, | ||
| onClearFilters, | ||
| allEventTypes, | ||
| eventTypeLabels, | ||
| }: HistoryFilterProps) => { | ||
| return ( | ||
| <Popover open={isOpen} onOpenChange={onOpenChange}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| role="button" | ||
| css={{ | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| backgroundColor: "$neutral4", | ||
| color: "$hiContrast", | ||
| minHeight: "44px", | ||
| width: "120px", | ||
| padding: "$2 $3", | ||
| "&:hover": { | ||
| backgroundColor: "$neutral5", | ||
| }, | ||
| }} | ||
| > | ||
| <FilterIcon size={16} css={{ marginRight: "$1" }} /> | ||
| <Text css={{ marginRight: "$2" }}>Filter</Text> | ||
| {selectedEventTypes.length > 0 && ( | ||
| <Badge | ||
| css={{ | ||
| backgroundColor: "$primary9", | ||
| color: "white", | ||
| borderRadius: "50%", | ||
| width: "20px", | ||
| height: "20px", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| fontSize: "$1", | ||
| fontWeight: 600, | ||
| padding: 0, | ||
| }} | ||
| > | ||
| {selectedEventTypes.length} | ||
| </Badge> | ||
| )} | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| data-history-filter-popover | ||
| css={{ | ||
| width: "280px", | ||
| backgroundColor: "$neutral4", | ||
| borderRadius: "$3", | ||
| padding: 0, | ||
| boxShadow: | ||
| "0px 5px 14px rgba(0, 0, 0, 0.22), 0px 0px 2px rgba(0, 0, 0, 0.2)", | ||
| border: "1px solid $neutral6", | ||
| zIndex: 9, | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| maxHeight: "400px", | ||
| marginRight: "$3", | ||
| overflow: "hidden", | ||
| }} | ||
| onPointerEnterCapture={undefined} | ||
| onPointerLeaveCapture={undefined} | ||
| placeholder={undefined} | ||
| > | ||
| {/* Header - Sticky */} | ||
| <Flex | ||
| css={{ | ||
| padding: "$3", | ||
| borderBottom: "1px solid $neutral6", | ||
| borderTopLeftRadius: "$3", | ||
| borderTopRightRadius: "$3", | ||
| alignItems: "center", | ||
| justifyContent: "space-between", | ||
| flexShrink: 0, | ||
| backgroundColor: "$neutral4", | ||
| position: "sticky", | ||
| top: 0, | ||
| zIndex: 1, | ||
| }} | ||
| > | ||
| <Button | ||
| onClick={onClearFilters} | ||
| css={{ | ||
| color: "$neutral11", | ||
| fontSize: "$2", | ||
| padding: "$1", | ||
| backgroundColor: "transparent", | ||
| "&:hover": { | ||
| color: "$hiContrast", | ||
| backgroundColor: "transparent", | ||
| }, | ||
| }} | ||
| > | ||
| Clear | ||
| </Button> | ||
| <Text css={{ fontWeight: 600, fontSize: "$3" }}>Filters</Text> | ||
| <Button | ||
| onClick={() => onOpenChange(false)} | ||
| css={{ | ||
| color: "$primary11", | ||
| fontSize: "$2", | ||
| padding: "$1", | ||
| backgroundColor: "transparent", | ||
| "&:hover": { | ||
| backgroundColor: "transparent", | ||
| }, | ||
| }} | ||
| > | ||
| Done | ||
| </Button> | ||
| </Flex> | ||
|
|
||
| {/* Event type section - Scrollable */} | ||
| <Flex | ||
| data-history-filter-scrollable | ||
| css={{ | ||
| flexDirection: "column", | ||
| overflowY: "auto", | ||
| flex: 1, | ||
| borderBottomLeftRadius: "$3", | ||
| borderBottomRightRadius: "$3", | ||
| }} | ||
| > | ||
| <Box css={{ padding: "$3" }}> | ||
| <Text | ||
| css={{ | ||
| fontWeight: 500, | ||
| fontSize: "$2", | ||
| marginBottom: "$2", | ||
| color: "$hiContrast", | ||
| }} | ||
| > | ||
| Event Type | ||
| </Text> | ||
| <Flex css={{ flexDirection: "column", gap: "$2" }}> | ||
| {allEventTypes.map((eventType) => { | ||
| const isChecked = selectedEventTypes.includes(eventType); | ||
| return ( | ||
| <Flex | ||
| key={eventType} | ||
| css={{ | ||
| alignItems: "center", | ||
| cursor: "pointer", | ||
| padding: "$1", | ||
| borderRadius: "$1", | ||
| "&:hover": { | ||
| backgroundColor: "$neutral5", | ||
| }, | ||
| }} | ||
| onClick={() => onToggleEventType(eventType)} | ||
| > | ||
|
Contributor
There was a problem hiding this comment. Filter checkbox options lack semantic HTML and ARIA attributes, making them inaccessible to keyboard and screen reader users  |
||
| <Box | ||
| css={{ | ||
| width: "18px", | ||
| height: "18px", | ||
| border: "2px solid", | ||
| borderColor: isChecked ? "$primary11" : "$neutral8", | ||
| backgroundColor: isChecked | ||
| ? "$primary11" | ||
| : "transparent", | ||
| borderRadius: "$1", | ||
| marginRight: "$2", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| transition: "all 0.2s", | ||
| }} | ||
| > | ||
| {isChecked && ( | ||
| <Box | ||
| as="svg" | ||
| width="12" | ||
| height="12" | ||
| viewBox="0 0 12 12" | ||
| fill="none" | ||
| > | ||
| <path | ||
| d="M2 6L4.5 8.5L10 3" | ||
| stroke="white" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </Box> | ||
| )} | ||
| </Box> | ||
| <Text | ||
| css={{ | ||
| fontSize: "$2", | ||
| color: "$hiContrast", | ||
| userSelect: "none", | ||
| }} | ||
| > | ||
| {eventTypeLabels[eventType]} | ||
| </Text> | ||
| </Flex> | ||
| ); | ||
| })} | ||
| </Flex> | ||
| </Box> | ||
| </Flex> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| }; | ||
|
|
||
| export default HistoryFilter; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Box } from "@livepeer/design-system"; | ||
| import { CSS } from "@stitches/react"; | ||
|
|
||
| interface FilterIconProps { | ||
| size?: number; | ||
| css?: CSS; | ||
| } | ||
|
|
||
| const FilterIcon = ({ size = 16, css }: FilterIconProps) => ( | ||
| <Box | ||
| as="svg" | ||
| width={size} | ||
| height={size} | ||
| viewBox="0 0 16 16" | ||
| fill="none" | ||
| css={css} | ||
| aria-hidden="true" | ||
| > | ||
| <path | ||
| d="M2 4h12M4 8h8M6 12h4" | ||
| stroke="currentColor" | ||
| strokeWidth="1.5" | ||
| strokeLinecap="round" | ||
| /> | ||
| </Box> | ||
| ); | ||
|
|
||
| export default FilterIcon; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The filter options are implemented as clickable
Flexrows with a custom checkbox UI, but they don’t expose checkbox semantics (norole="checkbox",aria-checked, keyboard toggle with Space/Enter, or focus styling). This makes the filter list hard/impossible to use with keyboard and assistive tech. Use a semantic checkbox/input (or add proper ARIA roles + keyboard handlers) for each option.