QA: Feature branch for refactor node list

cypress/tests/ui/flowchart/flowchart.cy.js

@@ -70,7 +70,7 @@ describe('Flowchart DAG', () => {
     const nodeToToggleText = 'Parameters';
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${nodeToToggleText}]`).as(
+    cy.get(`.toggle-control__checkbox[name=${nodeToToggleText}]`).as(
       'nodeToToggle'
     );
 

cypress/tests/ui/flowchart/menu.cy.js

@@ -41,7 +41,7 @@ describe('Flowchart Menu', () => {
       });
 
       // Pipeline Label in the Menu
-      cy.get('.pipeline-nodelist__row__label')
+      cy.get('.row-text__label')
         .first()
         .invoke('text')
         .should((pipelineLabel) => {
@@ -57,7 +57,7 @@ describe('Flowchart Menu', () => {
     cy.get('.search-input__field').type(searchInput, { force: true });
 
     // Pipeline Label in the Menu
-    cy.get('.pipeline-nodelist__row__label')
+    cy.get('.row-text__label')
       .first()
       .invoke('text')
       .should((pipelineLabel) => {
@@ -72,7 +72,7 @@ describe('Flowchart Menu', () => {
 
     // Action
     cy.get(
-      `.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=nodelist-data-${nodeToClickText}]`
+      `.MuiTreeItem-label > .node-list-tree-item-row > [data-test=node-list-tree-item--row--${nodeToClickText}]`
     )
       .should('exist')
       .as('nodeToClick');
@@ -91,7 +91,7 @@ describe('Flowchart Menu', () => {
 
     // Action
     cy.get(
-      `.MuiTreeItem-label > .pipeline-nodelist__row > [data-test=nodelist-data-${nodeToHighlightText}]`
+      `.MuiTreeItem-label > .node-list-tree-item-row > [data-test=node-list-tree-item--row--${nodeToHighlightText}]`
     )
       .should('exist')
       .as('nodeToHighlight');
@@ -108,7 +108,7 @@ describe('Flowchart Menu', () => {
     const nodeToToggleText = 'Companies';
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${nodeToToggleText}]`, {
+    cy.get(`.toggle-control__checkbox[name=${nodeToToggleText}]`, {
       timeout: 5000,
     }).as('nodeToToggle');
 
@@ -121,7 +121,7 @@ describe('Flowchart Menu', () => {
 
     // Assert after action
     cy.__checkForText__(
-      `[data-test=nodelist-data-${nodeToToggleText}] > .pipeline-nodelist__row__label--faded`,
+      `[data-test=node-list-tree-item--row--${nodeToToggleText}] > .row-text__label--faded`,
       nodeToToggleText
     );
     cy.get('.pipeline-node__text').should('not.contain', nodeToToggleText);
@@ -137,7 +137,7 @@ describe('Flowchart Menu', () => {
 
     // Action
     cy.get(
-      `[for=${nodeToFocusText}-focus] > .pipeline-nodelist__row__icon`
+      `[for=feature_engineering-focus]`
     ).click();
 
     // Assert after action
@@ -161,34 +161,34 @@ describe('Flowchart Menu', () => {
     const visibleRowLabel = 'Companies';
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${nodeToToggleText}]`).as(
+    cy.get(`.toggle-control__checkbox[name=${nodeToToggleText}]`).as(
       'nodeToToggle'
     );
 
     // Assert before action
     cy.get('@nodeToToggle').should('be.checked');
     cy.get(
-      `[data-test=nodelist-data-${visibleRowLabel}] > .pipeline-nodelist__row__label`
+      `[data-test=node-list-tree-item--row--${visibleRowLabel}] > .row-text__label`
     )
-      .should('not.have.class', 'pipeline-nodelist__row__label--faded')
-      .should('not.have.class', 'pipeline-nodelist__row__label--disabled');
+      .should('not.have.class', 'row-text__label--faded')
+      .should('not.have.class', 'row-text__label--disabled');
 
     // Action
     cy.get('@nodeToToggle').uncheck({ force: true });
 
     // Assert after action
     cy.get(
-      `[data-test=nodelist-data-${visibleRowLabel}] > .pipeline-nodelist__row__label`
+      `[data-test=node-list-tree-item--row--${visibleRowLabel}] > .row-text__label`
     )
-      .should('have.class', 'pipeline-nodelist__row__label--faded')
-      .should('have.class', 'pipeline-nodelist__row__label--disabled');
+      .should('have.class', 'row-text__label--faded')
+      .should('have.class', 'row-text__label--disabled');
   });
 
   it('verifies that after checking node type URL should be updated with correct query params', () => {
     const nodeToToggleText = 'Parameters';
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${nodeToToggleText}]`).as(
+    cy.get(`.toggle-control__checkbox[name=${nodeToToggleText}]`).as(
       'nodeToToggle'
     );
 
@@ -207,7 +207,7 @@ describe('Flowchart Menu', () => {
     cy.visit(`/?tags=${visibleRowLabel}`);
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${visibleRowLabel}]`).as(
+    cy.get(`.toggle-control__checkbox[name=${visibleRowLabel}]`).as(
       'nodeToToggle'
     );
 
@@ -220,7 +220,7 @@ describe('Flowchart Menu', () => {
     cy.visit('/?types=datasets');
 
     // Alias
-    cy.get(`.pipeline-nodelist__row__checkbox[name=${visibleRowLabel}]`).as(
+    cy.get(`.toggle-control__checkbox[name=${visibleRowLabel}]`).as(
       'nodeToToggle'
     );
 

cypress/tests/ui/toolbar/global-toolbar.cy.js

@@ -81,14 +81,14 @@ describe('Global Toolbar', () => {
       cy.get('@isPrettyNameCheckbox').should('be.checked');
 
       // Menu
-      cy.get(`[data-test="nodelist-modularPipeline-${prettifyName(modularPipelineText)}"]`).click();
-      cy.get(`[data-test="nodelist-${nodeNameType}-${prettyNodeNameText}"]`).should('exist');
+      cy.get(`[data-test="node-list-tree-item--row--${prettifyName(modularPipelineText)}"]`).click();
+      cy.get(`[data-test="node-list-tree-item--row--${prettyNodeNameText}"]`).should('exist');
 
       // Flowchart
       cy.get('.pipeline-node__text').should('contain', prettyNodeNameText);
 
       // Metadata
-      cy.get(`[data-test="nodelist-${nodeNameType}-${prettyNodeNameText}"]`).click({ force: true });
+      cy.get(`[data-test="node-list-tree-item--row--${prettyNodeNameText}"]`).click({ force: true });
       cy.get('.pipeline-metadata__title').should(
         'have.text',
         prettyNodeNameText
@@ -106,7 +106,7 @@ describe('Global Toolbar', () => {
       // Assert after action
       cy.__waitForPageLoad__(() => {
         // Menu
-        cy.get(`[data-test="nodelist-${nodeNameType}-${originalNodeNameText}"]`).should('exist');
+        cy.get(`[data-test="node-list-tree-item--row--${originalNodeNameText}"]`).should('exist');
 
         // Flowchart
         cy.get('.pipeline-node__text').should('contain', originalNodeNameText);

src/components/filters/filters-group/filters-group.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import classnames from 'classnames';
+import FiltersRow from '../filters-row/filters-row';
+import { nodeListRowHeight } from '../../../config';
+import LazyList from '../../lazy-list';
+import { getDataTestAttribute } from '../../../utils/get-data-test-attribute';
+
+import './filters-group.scss';
+
+/** A group collection of FiltersRow */
+const FiltersGroup = ({ items = [], group, collapsed, onItemChange }) => (
+  <LazyList
+    height={(start, end) => (end - start) * nodeListRowHeight}
+    total={items.length}
+  >
+    {({ start, end, listRef, listStyle }) => (
+      <ul
+        ref={listRef}
+        style={listStyle}
+        className={classnames('filters-group', {
+          'filters-group--closed': collapsed,
+        })}
+      >
+        {items.slice(start, end).map((item) => (
+          <FiltersRow
+            allUnchecked={group.allUnchecked}
+            checked={item.checked}
+            container={'li'}
+            count={item.count}
+            dataTest={getDataTestAttribute('node-list-row', 'filter-row')}
+            id={item.id}
+            offIndicatorIcon={item.invisibleIcon}
+            key={item.id}
+            kind={group.kind}
+            label={item.highlightedLabel}
+            name={item.name}
+            onChange={(e) => onItemChange(e, item)}
+            onClick={(e) => onItemChange(e, item)}
+            parentClassName={'node-list-filter-row'}
+            visible={item.visible}
+            indicatorIcon={item.visibleIcon}
+          />
+        ))}
+      </ul>
+    )}
+  </LazyList>
+);
+
+export default FiltersGroup;

src/components/filters/filters-group/filters-group.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list-tree/styles/variables';
+
+.filters-group {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.2em;
+
+  // Avoid placeholder fade leaking out for small lists
+  overflow: hidden;
+
+  &--closed {
+    display: none;
+  }
+}

src/components/filters/filters-group/filters-group.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import FiltersGroup from './filters-group';
+import { mockState, setup } from '../../../utils/state.mock';
+import { getNodeTypes } from '../../../selectors/node-types';
+import { getGroupedNodes } from '../../../selectors/nodes';
+import { getGroups } from '../../../selectors/filtered-node-list-items';
+
+describe('FiltersGroup Component', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { group: groups['tags'], items: [] };
+  };
+
+  it('renders without throwing', () => {
+    expect(() => setup.mount(<FiltersGroup {...mockProps()} />)).not.toThrow();
+  });
+  it('adds class when collapsed prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersGroup {...mockProps()} collapsed={true} />
+    );
+    const children = wrapper.find('.filters-group');
+    expect(children.hasClass('filters-group--closed')).toBe(true);
+  });
+
+  it('removes class when collapsed prop false', () => {
+    const wrapper = setup.mount(
+      <FiltersGroup {...mockProps()} collapsed={false} />
+    );
+    const children = wrapper.find('.filters-group');
+    expect(children.hasClass('filters-group--closed')).toBe(false);
+  });
+});

src/components/filters/filters-row/filters-row.js

@@ -0,0 +1,68 @@
+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 './filters-row.scss';
+
+const FiltersRow = ({
+  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>
+  );
+};
+
+export default FiltersRow;

src/components/filters/filters-row/filters-row.scss

@@ -0,0 +1,54 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list-tree/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;
+    }
+  }
+}