feat(schema) Add search filter to Schema tab #5845
Conversation
| TableOutlined, | ||
| } from '@ant-design/icons'; | ||
| import styled from 'styled-components'; | ||
| import styled from 'styled-components/macro'; |
There was a problem hiding this comment.
this is what I mentioned to you some time back where if you import from /macro and look in the browser dev tools and check out the html, styled component names are shown, making it much easier to find what styled component is what
There was a problem hiding this comment.
aahhh right! gotta start doing this myself
| @@ -182,6 +194,12 @@ export default function SchemaHeader({ | |||
| }; | |||
| const schemaAuditToggleText = showSchemaAuditView ? 'Close column history' : 'View column history'; | |||
|
|
|||
| const debouncedSetFilterText = debounce( | |||
| (e: React.ChangeEvent<HTMLInputElement>) => setFilterText(e.target.value), | |||
| numRows > 50 ? 500 : 0, | |||
There was a problem hiding this comment.
this can be named constants at the top rather than magic numbers
| ) : ( | ||
| <ShowVersionButton onClick={() => setEditMode?.(true)}>Back</ShowVersionButton> | ||
| ))} | ||
| <ShowVersionButton onClick={() => setEditMode?.(false)}>Version Blame</ShowVersionButton> |
There was a problem hiding this comment.
no it's not! so sorry about that this is my bad - was just testing out how this looked with the button there - thanks for catching this
| @@ -54,7 +56,9 @@ export default function useSchemaTitleRenderer( | |||
| return ( | |||
| <> | |||
| <FieldPathContainer> | |||
| <FieldPathText>{pathToDisplay}</FieldPathText> | |||
| <FieldPathText> | |||
| <Highlight search={filterText}>{pathToDisplay}</Highlight> | |||
There was a problem hiding this comment.
fancy! bummer that it doesn't work on nested components though :/ i think we'll need to build that for our search cards otherwise we'll need to render like a zillion of these.
| import { filterSchemaRows } from '../utils/filterSchemaRows'; | ||
|
|
||
| describe('filterSchemaRows', () => { | ||
| it('should properly filter schema rows'); |
There was a problem hiding this comment.
wow i started this test and completely forgot about it - filling this out rn
| setExpandedRows((previousRows) => new Set(previousRows.add(record.fieldPath))); | ||
| } else { | ||
| setExpandedRows((previousRows) => { | ||
| previousRows.delete(record.fieldPath); |
There was a problem hiding this comment.
ugh i know - updating Sets in state isn't as simple as you'd want it to be
| filterText: string, | ||
| filteredFieldPathsByMetadata: any, | ||
| ) { | ||
| return fieldName.toLocaleLowerCase().includes(filterText) || filteredFieldPathsByMetadata.includes(fullFieldPath); |
There was a problem hiding this comment.
are we also toLowerCasing filterText?
There was a problem hiding this comment.
yup! on line 45 right when we call filterSchemaRows i lowercase it and pass that around to these functions and other places so it's always lowercase comparisons
| // if we match specifically on this field (not just its parent), add and expand all parents | ||
| splitFieldPath.reduce((previous, current) => { | ||
| finalFieldPaths.add(previous); | ||
| expandedRowsFromFilter.add(previous); | ||
| return `${previous}.${current}`; | ||
| }); | ||
| } |
chriscollins3456
force-pushed
the
cc--filter-search-schema
branch
from
0f14f82 to
47e9e76
Compare
Adds the ability to filter search in the schema tab for datasets. Now you can type in the search bar and it will find fields where either their
fieldPath, their glossary terms, or their tags match the filter text. Highlight what is matched in the UI.Also, when making changes to the filter text we set a new query param in the url so that you can link someone to a filtered schema.
Here's what it looks like!
Checklist