-
Notifications
You must be signed in to change notification settings - Fork 112
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor / node list row #2143
Merged
Huongg
merged 47 commits into
feature-branch/refactor-node-list
from
refactor/node-list-row
Oct 29, 2024
Merged
Refactor / node list row #2143
Changes from 46 commits
Commits
Show all changes
47 commits
Select commit
Hold shift + click to select a range
63431e4
update classnames to match the component name
e1ab740
update names in tests
976ff98
update the rest of the classnames
e5350ad
abstract node-list-row-toggle component
988ca60
tidy up code for toggle component
5d37a5b
update classnames in tests
abf00c8
simplify the css
3c2d623
add tests for node-list-row-toggle
479701e
remove handleToggle on VisibilityIcon
39c8db8
remove redux from node-list-row
ca8b72c
split node-list-row into row and filter-row
65382f8
rename toggle icon component
9162c10
move row and filter-row to components level
b174662
move css to row and filterRow
d87c2b2
remove node-list-row
a7ef9b6
separate the row-text component
433d222
include parent classname
c51deaa
update name for toggle-icon, to visibility-control
3774aec
fix css and move nodeListRowHeight to config
9c341ab
adding test for new component
46830b8
update classname for tests
c9bd1bb
move row inside node-list
80428af
connect redux store to component
55f6e3f
fix styling
d6e493e
update name to ToggleControl
b9fb79b
remove disable props as no longer needed
01f2498
replace js code with css to simplify the code
864b6cd
update classnames in cypress test
96b9199
Styling for hovering and focus mode
ab40577
fixing small styling
6089867
fix the disable styling for row
d108bcf
fix the disable styling on focus mode
29ded20
remove one of the old test
c539442
update name for icons for FilterRow
cdd10f1
fixing the icon highlighting issue
d3c16ae
remove un-used li element
3da4864
remove styling for pipeline-nodelist__placeholder-upper and lower cla…
db9a947
update test in node-list
e1c2dff
update cypress tests
8ef75b8
moving .pipeline-nodelist__group--all-unchecked to the parent
0abbf59
prevent page reload on form submission
db25f03
remove wrong classname in the test
cb342b5
remove unique ID
7891403
Merge branch 'main' into refactor/node-list-row
faac318
apply hovering styling on the parent instead of row
932b89a
styling for selected element
aaf9172
fixing hover styling on the icon from MUI
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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 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 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 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,66 @@ | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
| import IndicatorIcon from '../icons/indicator'; | ||
| import OffIndicatorIcon from '../icons/indicator-off'; | ||
| import { ToggleControl } from '../ui/toggle-control/toggle-control'; | ||
| import { RowText } from '../ui/row-text/row-text'; | ||
|
|
||
| import './filter-row.scss'; | ||
|
|
||
| export const FilterRow = ({ | ||
| allUnchecked, | ||
| checked, | ||
| children, | ||
| container: ContainerWrapper, | ||
| count, | ||
| dataTest, | ||
| id, | ||
| indicatorIcon = IndicatorIcon, | ||
| kind, | ||
| label, | ||
| name, | ||
| offIndicatorIcon = OffIndicatorIcon, | ||
| onChange, | ||
| onClick, | ||
| parentClassName, | ||
| visible, | ||
| }) => { | ||
| const Icon = checked ? indicatorIcon : offIndicatorIcon; | ||
|
|
||
| return ( | ||
| <ContainerWrapper | ||
| className={classnames( | ||
| 'filter-row kedro', | ||
| `filter-row--kind-${kind}`, | ||
| parentClassName, | ||
| { | ||
| 'filter-row--visible': visible, | ||
| 'filter-row--unchecked': !checked, | ||
| } | ||
| )} | ||
| title={name} | ||
| > | ||
| <RowText | ||
| kind={kind} | ||
| dataTest={dataTest} | ||
| onClick={onClick} | ||
| name={children ? null : name} | ||
| label={label} | ||
| /> | ||
| <span onClick={onClick} className={'filter-row__count'}> | ||
| {count} | ||
| </span> | ||
| <ToggleControl | ||
| allUnchecked={allUnchecked} | ||
| className={'filter-row__icon'} | ||
| IconComponent={Icon} | ||
| id={id} | ||
| isChecked={checked} | ||
| kind={kind} | ||
| name={name} | ||
| onChange={onChange} | ||
| /> | ||
| {children} | ||
| </ContainerWrapper> | ||
| ); | ||
| }; | ||
This file contains 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,54 @@ | ||
| @use '../../styles/variables' as var; | ||
| @use '../node-list/styles/variables'; | ||
|
|
||
| .MuiTreeItem-iconContainer svg { | ||
| z-index: var.$zindex-MuiTreeItem-icon; | ||
| } | ||
|
|
||
| .filter-row { | ||
| align-items: center; | ||
| background-color: initial; | ||
| cursor: default; | ||
| display: flex; | ||
| height: 32px; | ||
| position: relative; | ||
|
|
||
| &--kind-filter { | ||
| padding: 0 variables.$row-offset-right 0 variables.$row-offset-left; | ||
| } | ||
|
|
||
| &--visible:hover { | ||
| background-color: var(--color-nodelist-row-active); | ||
| } | ||
| } | ||
|
|
||
| .filter-row__count { | ||
| display: inline-block; | ||
| flex-shrink: 0; | ||
| width: 2.2em; | ||
| margin: 0 0.7em 0.1em auto; | ||
| overflow: hidden; | ||
| font-size: 1.16em; | ||
| text-align: right; | ||
| text-overflow: ellipsis; | ||
| opacity: 0.75; | ||
| user-select: none; | ||
|
|
||
| .filter-row--unchecked & { | ||
| opacity: 0.55; | ||
| } | ||
| } | ||
|
|
||
| .filter-row--unchecked { | ||
| // Fade row text when unchecked | ||
| .row-text__label--kind-filter { | ||
| opacity: 0.55; | ||
| } | ||
|
|
||
| // Brighter row text when unchecked and hovered | ||
| &:hover { | ||
| .row-text__label--kind-filter { | ||
| opacity: 0.8; | ||
| } | ||
| } | ||
| } |
This file contains 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,24 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import { FilterRow } from './filter-row'; | ||
|
|
||
| describe('FilterRow Component', () => { | ||
| it('renders without crashing', () => { | ||
| const wrapper = mount(<FilterRow container={'div'} />); | ||
| expect(wrapper.exists()).toBe(true); | ||
| }); | ||
|
|
||
| it('renders correct visible classnames', () => { | ||
| const wrapper = mount(<FilterRow container={'div'} visible={true} />); | ||
| expect(wrapper.find('.filter-row').hasClass('filter-row--visible')).toBe( | ||
| true | ||
| ); | ||
| }); | ||
|
|
||
| it('renders correct unchecked classnames', () => { | ||
| const wrapper = mount(<FilterRow container={'div'} checked={false} />); | ||
| expect(wrapper.find('.filter-row').hasClass('filter-row--unchecked')).toBe( | ||
| true | ||
| ); | ||
| }); | ||
| }); |
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.
there's some problem here, when I uncheck everything, the visibility icons disappear.
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.
it should be fixed now, the PR is ready for reviewing the UI parts now 😄