Refactor on NodeListTree #2177

rashidakanchwala · 2024-11-06T10:09:42Z

Description

This is a smaller refactor. Previously, the logic for determining which nodes were disabled due to modular pipelines was duplicated in both the NodeListTree component and the getNodeDisabled selector. To improve maintainability and reduce redundancy, the getnodesDisabledViaModularPipeline logic was extracted and made into it's own selector. Now, this logic is shared and reused by both the NodeListTree component and the getNodeDisabled selector.

Development notes

QA notes

Checklist

Read the contributing guidelines
Opened this PR as a 'Draft Pull Request' if it is work-in-progress
Updated the documentation to reflect the code changes
Added new entries to the RELEASE.md file
Added tests to cover my changes

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala · 2024-11-14T11:42:04Z

src/components/nodes-panel/nodes-panel.test.js

@@ -251,10 +251,6 @@ describe('NodesPanel', () => {
        .find('.node-list-tree-item-row')
        .map((row) => [row.prop('title'), !row.hasClass('row--disabled')]);

-    const elementsEnabled = (wrapper) => {


This was not being used anywhere and throwing eslint error hence removed it.

Signed-off-by: rashidakanchwala <[email protected]>

jitu5 · 2024-11-14T15:14:41Z

src/selectors/disabled.js

+/**
+ * Determine if a node is disabled via disabled modular pipeline or focused modular pipeline.
+ */
+export const getnodesDisabledViaModularPipeline = createSelector(


[Nit]

Suggested change

export const getnodesDisabledViaModularPipeline = createSelector(

export const getNodesDisabledViaModularPipeline = createSelector(

jitu5

LGTM!

Huongg

I tested the changes and they look pretty good to me. very nice thats the logic for disabled with Modular Pipeline has it own selector now

* Refactor / node list row (#2143) * update classnames to match the component name Signed-off-by: Huong Nguyen <huongg1409@gmail> * update names in tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * update the rest of the classnames Signed-off-by: Huong Nguyen <huongg1409@gmail> * abstract node-list-row-toggle component Signed-off-by: Huong Nguyen <huongg1409@gmail> * tidy up code for toggle component Signed-off-by: Huong Nguyen <huongg1409@gmail> * update classnames in tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * simplify the css Signed-off-by: Huong Nguyen <huongg1409@gmail> * add tests for node-list-row-toggle Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove handleToggle on VisibilityIcon Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove redux from node-list-row Signed-off-by: Huong Nguyen <huongg1409@gmail> * split node-list-row into row and filter-row Signed-off-by: Huong Nguyen <huongg1409@gmail> * rename toggle icon component Signed-off-by: Huong Nguyen <huongg1409@gmail> * move row and filter-row to components level Signed-off-by: Huong Nguyen <huongg1409@gmail> * move css to row and filterRow Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove node-list-row Signed-off-by: Huong Nguyen <huongg1409@gmail> * separate the row-text component Signed-off-by: Huong Nguyen <huongg1409@gmail> * include parent classname Signed-off-by: Huong Nguyen <huongg1409@gmail> * update name for toggle-icon, to visibility-control Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix css and move nodeListRowHeight to config Signed-off-by: Huong Nguyen <huongg1409@gmail> * adding test for new component Signed-off-by: Huong Nguyen <huongg1409@gmail> * update classname for tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * move row inside node-list Signed-off-by: Huong Nguyen <huongg1409@gmail> * connect redux store to component Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix styling Signed-off-by: Huong Nguyen <huongg1409@gmail> * update name to ToggleControl Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove disable props as no longer needed Signed-off-by: Huong Nguyen <huongg1409@gmail> * replace js code with css to simplify the code Signed-off-by: Huong Nguyen <huongg1409@gmail> * update classnames in cypress test Signed-off-by: Huong Nguyen <huongg1409@gmail> * Styling for hovering and focus mode Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing small styling Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix the disable styling for row Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix the disable styling on focus mode Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove one of the old test Signed-off-by: Huong Nguyen <huongg1409@gmail> * update name for icons for FilterRow Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing the icon highlighting issue Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove un-used li element Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove styling for pipeline-nodelist__placeholder-upper and lower class as nolonger used Signed-off-by: Huong Nguyen <huongg1409@gmail> * update test in node-list Signed-off-by: Huong Nguyen <huongg1409@gmail> * update cypress tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * moving .pipeline-nodelist__group--all-unchecked to the parent Signed-off-by: Huong Nguyen <huongg1409@gmail> * prevent page reload on form submission Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove wrong classname in the test Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove unique ID Signed-off-by: Huong Nguyen <huongg1409@gmail> * apply hovering styling on the parent instead of row Signed-off-by: Huong Nguyen <huongg1409@gmail> * styling for selected element Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing hover styling on the icon from MUI Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: Huong Nguyen <huongg1409@gmail> * Refactor/node list groups (#2166) * Create new structure and its own folder for filters or groups Signed-off-by: Huong Nguyen <huongg1409@gmail> * better names for component structure Signed-off-by: Huong Nguyen <huongg1409@gmail> * FiltersSectionHeading Signed-off-by: Huong Nguyen <huongg1409@gmail> * filters-section Signed-off-by: Huong Nguyen <huongg1409@gmail> * filters component Signed-off-by: Huong Nguyen <huongg1409@gmail> * filtersSectionHeading component Signed-off-by: Huong Nguyen <huongg1409@gmail> * tidy up code Signed-off-by: Huong Nguyen <huongg1409@gmail> * including new tests for new components Signed-off-by: Huong Nguyen <huongg1409@gmail> * update and remove existing tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove un-used variables Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove components folder Signed-off-by: Huong Nguyen <huongg1409@gmail> * update tests path Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: Huong Nguyen <huongg1409@gmail> * Refactor/node list index (#2178) * foundation for FiltersContext Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove unused props Signed-off-by: Huong Nguyen <huongg1409@gmail> * node-list-context Signed-off-by: Huong Nguyen <huongg1409@gmail> * restructure node-list-item as a helper function Signed-off-by: Huong Nguyen <huongg1409@gmail> * rename selectors Signed-off-by: Huong Nguyen <huongg1409@gmail> * rename functions in FiltersContext Signed-off-by: Huong Nguyen <huongg1409@gmail> * move redux selector to node-list-context Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing the hovered node issue Signed-off-by: Huong Nguyen <huongg1409@gmail> * move getFilteredItems to selector Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix the modularpipeline highlight issue Signed-off-by: Huong Nguyen <huongg1409@gmail> * Adding test for selector Signed-off-by: Huong Nguyen <huongg1409@gmail> * update tests Signed-off-by: Huong Nguyen <huongg1409@gmail> * update names to be nodes-panel Signed-off-by: Huong Nguyen <huongg1409@gmail> * Fixing the filters problem Signed-off-by: Huong Nguyen <huongg1409@gmail> * update test Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing the highlight issue through getNodesActive Signed-off-by: Huong Nguyen <huongg1409@gmail> * move node-list-tree to its own component Signed-off-by: Huong Nguyen <huongg1409@gmail> * update row to node-list-row Signed-off-by: Huong Nguyen <huongg1409@gmail> * move style to be inside node-list-tree Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix the filters URL update Signed-off-by: Huong Nguyen <huongg1409@gmail> * update name for nodes panel context Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: Huong Nguyen <huongg1409@gmail> * Refactor on NodeListTree (#2177) This is a smaller refactor. Previously, the logic for determining which nodes were disabled due to modular pipelines was duplicated in both the NodeListTree component and the getNodeDisabled selector. To improve maintainability and reduce redundancy, the getnodesDisabledViaModularPipeline logic was extracted and made into it's own selector. Now, this logic is shared and reused by both the NodeListTree component and the getNodeDisabled selector. * fixed issue with nested focus modular pipeline Signed-off-by: rashidakanchwala <[email protected]> * Update RELEASE.md Signed-off-by: rashidakanchwala <[email protected]> * Update .telemetry Signed-off-by: rashidakanchwala <[email protected]> * Update pyproject.toml Signed-off-by: rashidakanchwala <[email protected]> * Update apps.py Signed-off-by: rashidakanchwala <[email protected]> * Update telemetry.html Signed-off-by: rashidakanchwala <[email protected]> * fix issue around parent pipelines disabled child pipelines Signed-off-by: rashidakanchwala <[email protected]> * include in the release note Signed-off-by: Huong Nguyen <huongg1409@gmail> * fixing the padding bottom gap for filters Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Signed-off-by: rashidakanchwala <[email protected]> Signed-off-by: rashidakanchwala <[email protected]> Co-authored-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: rashidakanchwala <[email protected]> Co-authored-by: rashidakanchwala <[email protected]>

wip

c2bd671

Signed-off-by: rashidakanchwala <[email protected]>

Huongg changed the base branch from main to feature-branch/refactor-node-list November 12, 2024 13:35

Huongg changed the base branch from feature-branch/refactor-node-list to main November 12, 2024 13:36

Huongg mentioned this pull request Nov 13, 2024

Refactor/node list index #2178

Merged

5 tasks

rashidakanchwala changed the base branch from main to feature-branch/refactor-node-list November 14, 2024 10:44

rashidakanchwala changed the base branch from feature-branch/refactor-node-list to main November 14, 2024 10:46

rashidakanchwala changed the base branch from main to feature-branch/refactor-node-list November 14, 2024 10:46

rashidakanchwala changed the base branch from feature-branch/refactor-node-list to main November 14, 2024 10:51

merged

f469ccc

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala changed the base branch from main to feature-branch/refactor-node-list November 14, 2024 11:00

done

8c8d9f5

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala changed the base branch from feature-branch/refactor-node-list to main November 14, 2024 11:25

done

10fcf20

Signed-off-by: rashidakanchwala <[email protected]>

rashidakanchwala changed the base branch from main to feature-branch/refactor-node-list November 14, 2024 11:41

rashidakanchwala commented Nov 14, 2024

View reviewed changes

rashidakanchwala marked this pull request as ready for review November 14, 2024 11:46

rashidakanchwala requested a review from jitu5 as a code owner November 14, 2024 11:46

rashidakanchwala requested a review from Huongg November 14, 2024 11:46

rashidakanchwala changed the title ~~Refactor/node-list-tree~~ Refactor on NodeListTree Nov 14, 2024

fix cy tests

1df87fa

Signed-off-by: rashidakanchwala <[email protected]>

jitu5 reviewed Nov 14, 2024

View reviewed changes

jitu5 approved these changes Nov 14, 2024

View reviewed changes

Huongg approved these changes Nov 15, 2024

View reviewed changes

Huongg mentioned this pull request Nov 15, 2024

QA: Feature branch for refactor node list #2193

Merged

5 tasks

rashidakanchwala merged commit f27384a into feature-branch/refactor-node-list Nov 15, 2024
4 checks passed

rashidakanchwala deleted the refactor-node-list-tree branch November 15, 2024 13:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor on NodeListTree #2177

Refactor on NodeListTree #2177

rashidakanchwala commented Nov 6, 2024 •

edited

Loading

rashidakanchwala Nov 14, 2024

jitu5 Nov 14, 2024

jitu5 left a comment

Huongg left a comment

	export const getnodesDisabledViaModularPipeline = createSelector(
	export const getNodesDisabledViaModularPipeline = createSelector(

Refactor on NodeListTree #2177

Refactor on NodeListTree #2177

Conversation

rashidakanchwala commented Nov 6, 2024 • edited Loading

Description

Development notes

QA notes

Checklist

rashidakanchwala Nov 14, 2024

Choose a reason for hiding this comment

jitu5 Nov 14, 2024

Choose a reason for hiding this comment

jitu5 left a comment

Choose a reason for hiding this comment

Huongg left a comment

Choose a reason for hiding this comment

rashidakanchwala commented Nov 6, 2024 •

edited

Loading