add filters to grantee record page #479
Conversation
| @@ -1,20 +1,3 @@ | |||
| .smart-hub--button-select-toggle-btn { | |||
There was a problem hiding this comment.
Created a DropdownMenu component that encompasses as much of the press a blue button get a dropdown as possible. The CSS still probably needs a good cleanup
| import './DropdownMenu.css'; | ||
| import triangleDown from '../images/triange_down.png'; | ||
|
|
||
| export default function DropdownMenu({ |
There was a problem hiding this comment.
takes a lot of props as button select did but will hopefully be a little easier to work with... also, many of these are optional
| */ | ||
| const onBlur = (e) => { | ||
| // if we're within the same menu, do nothing | ||
| if (e.relatedTarget && menuContents.current.contains(e.relatedTarget)) { |
There was a problem hiding this comment.
Seems like our usage of Node.contains should be fully supported by ie11
https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
As far as I understand, we will only be calling it on instances of HTMLElement, not a text node or anything like that
| <span className="margin-x-1"><select className="usa-select ttahub-dummy-select" disabled aria-label="select a topic and condition first and then select a query" /></span> | ||
| ); | ||
|
|
||
| const onApplyQuery = (q, toggleAllChecked) => { |
There was a problem hiding this comment.
this toggleAllChecked is unfortunate - probably need to refactor so we can just derive the label from them all being checked. Hopefully if the usage of "All Specialists" is consistent across pages it will pass UI review
| @@ -10,7 +9,7 @@ import { getEditorState } from '../../../../utils'; | |||
| * Reasoning for another component is to not overload `ReviewItem` | |||
| */ | |||
|
|
|||
There was a problem hiding this comment.
removed some code here to improve test coverage - we weren't using the path parameter anywhere we used HtmlReviewItem and it seemed a direct lift from the component we copied this one from
| @@ -24,7 +26,7 @@ export default function GranteeRecord({ match, location }) { | |||
| granteeId, | |||
| }); | |||
|
|
|||
| const defaultFilters = [ | |||
| const [defaultFilters] = useState([ | |||
| { | |||
There was a problem hiding this comment.
this is weird
There was a problem hiding this comment.
Yea I think this could be a common problem for filters, having set filters that aren't exposed to the UI and cannot change. I wonder if there is a better way to handle it?
There was a problem hiding this comment.
Looked at it with fresh eyes, made some (hopefully) better choices
| @@ -134,7 +134,9 @@ function GranteeSearch({ user }) { | |||
| </div> | |||
| )} | |||
| <form role="search" className="ttahub-grantee-search--search-form display-flex" onSubmit={onSubmit}> | |||
| <input type="search" name="search" className="ttahub-grantee-search--search-input" ref={inputRef} disabled={loading} /> | |||
| { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ } | |||
There was a problem hiding this comment.
making a note to figure out why the linter hates doing it like this
Description of change
Add the filter menu to the Grantee record page
How to test
Issue(s)
Checklists
Every PR
Production Deploy
After merge/deploy