Refactor/node list groups

src/components/node-list/node-list-row-list.js → src/components/filters/filters-group/filters-group.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import modifiers from '../../utils/modifiers';
-import { FilterRow } from '../filter-row/filter-row';
-import { nodeListRowHeight } from '../../config';
-import LazyList from '../lazy-list';
-import { getDataTestAttribute } from '../../utils/get-data-test-attribute';
+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';
 
-const NodeRowList = ({
+import './filters-group.scss';
+
+/** A group collection of FiltersRow */
+const FiltersGroup = ({
   items = [],
   group,
   collapsed,
@@ -20,14 +23,12 @@ const NodeRowList = ({
       <ul
         ref={listRef}
         style={listStyle}
-        className={modifiers(
-          'pipeline-nodelist__children',
-          { closed: collapsed },
-          'pipeline-nodelist__list pipeline-nodelist__list--nested'
-        )}
+        className={classnames('filters-group', {
+          'filters-group--closed': collapsed,
+        })}
       >
         {items.slice(start, end).map((item) => (
-          <FilterRow
+          <FiltersRow
             allUnchecked={group.allUnchecked}
             checked={item.checked}
             container={'li'}
@@ -51,4 +52,4 @@ const NodeRowList = ({
   </LazyList>
 );
 
-export default NodeRowList;
+export default FiltersGroup;

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

@@ -0,0 +1,15 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list/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 '../../node-list/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/filter-row/filter-row.js → src/components/filters/filters-row/filters-row.js

@@ -1,13 +1,13 @@
 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 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';
+import './filters-row.scss';
 
-export const FilterRow = ({
+const FiltersRow = ({
   allUnchecked,
   checked,
   children,
@@ -64,3 +64,5 @@ export const FilterRow = ({
     </ContainerWrapper>
   );
 };
+
+export default FiltersRow;

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

@@ -1,5 +1,5 @@
-@use '../../styles/variables' as var;
-@use '../node-list/styles/variables';
+@use '../../../styles/variables' as var;
+@use '../../node-list/styles/variables';
 
 .MuiTreeItem-iconContainer svg {
   z-index: var.$zindex-MuiTreeItem-icon;

src/components/filter-row/filter-row.test.js → src/components/filters/filters-row/filters-row.test.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { FilterRow } from './filter-row';
+import FiltersRow from './filters-row';
 
-describe('FilterRow Component', () => {
+describe('FiltersRow Component', () => {
   it('renders without crashing', () => {
-    const wrapper = mount(<FilterRow container={'div'} />);
+    const wrapper = mount(<FiltersRow container={'div'} />);
     expect(wrapper.exists()).toBe(true);
   });
 
   it('renders correct visible classnames', () => {
-    const wrapper = mount(<FilterRow container={'div'} visible={true} />);
+    const wrapper = mount(<FiltersRow 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} />);
+    const wrapper = mount(<FiltersRow container={'div'} checked={false} />);
     expect(wrapper.find('.filter-row').hasClass('filter-row--unchecked')).toBe(
       true
     );

src/components/filters/filters-section-heading/filters-section-heading.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classnames from 'classnames';
+import FiltersRow from '../filters-row/filters-row';
+
+import './filters-section-heading.scss';
+
+const FiltersSectionHeading = ({
+  group,
+  collapsed,
+  groupItems,
+  onGroupToggleChanged,
+  onToggleGroupCollapsed,
+}) => {
+  const { id, kind, name, allUnchecked, checked, invisibleIcon, visibleIcon } =
+    group;
+  const disabled = groupItems.length === 0;
+
+  return (
+    <h3 className="filters-section-heading">
+      <FiltersRow
+        allUnchecked={allUnchecked}
+        checked={checked}
+        container="div"
+        id={id}
+        offIndicatorIcon={invisibleIcon}
+        kind={kind}
+        label={name}
+        name={name}
+        onChange={(e) => {
+          onGroupToggleChanged(id, !e.target.checked);
+        }}
+        indicatorIcon={visibleIcon}
+      >
+        <button
+          aria-label={`${collapsed ? 'Show' : 'Hide'} ${name.toLowerCase()}`}
+          className={classnames('filters-section-heading__toggle-btn', {
+            'filters-section-heading__toggle-btn--alt': collapsed,
+            'filters-section-heading__toggle-btn--disabled': disabled,
+          })}
+          disabled={disabled}
+          onClick={() => onToggleGroupCollapsed(id)}
+        />
+      </FiltersRow>
+    </h3>
+  );
+};
+
+export default FiltersSectionHeading;

src/components/filters/filters-section-heading/filters-section-heading.scss

@@ -0,0 +1,62 @@
+@use '../../../styles/variables' as var;
+@use '../../node-list/styles/variables';
+
+.filters-section-heading {
+  background: var(--color-nodelist-filter-panel);
+  margin: 0;
+  position: sticky;
+  top: 0;
+
+  // Avoid pixel gap above when scrolling.
+  transform: translateY(-1px);
+  z-index: var.$zindex-nodelist-heading;
+
+  .row-text .row-text__label {
+    font-size: 1.3em;
+    opacity: 0.65;
+  }
+}
+
+.filters-section-heading__toggle-btn {
+  width: variables.$toggle-size;
+  height: variables.$toggle-size;
+  padding: 0;
+  color: var(--color-default-alt);
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1em;
+  text-align: center;
+  background: none;
+  border: none;
+  border-radius: 50%;
+  box-shadow: none;
+  cursor: pointer;
+  transition: transform ease 0.1s;
+
+  &:focus {
+    outline: none;
+
+    [data-whatintent='keyboard'] & {
+      box-shadow: 0 0 0 3px var.$blue-300 inset;
+    }
+  }
+
+  &::before {
+    font-size: 1.8em;
+    opacity: 0.55;
+    content: '▾';
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+
+  &--alt {
+    transform: rotate(90deg);
+  }
+
+  &--disabled {
+    color: var.$black-400;
+    transform: rotate(90deg);
+  }
+}

src/components/filters/filters-section-heading/filters-section-heading.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import FiltersSectionHeading from './filters-section-heading';
+import { mockState, setup } from '../../../utils/state.mock';
+import { getNodeTypes } from '../../../selectors/node-types';
+import { getGroupedNodes } from '../../../selectors/nodes';
+import { getGroups } from '../../node-list/node-list-items';
+
+describe('FiltersSectionHeading', () => {
+  const mockProps = () => {
+    const items = getGroupedNodes(mockState.spaceflights);
+    const nodeTypes = getNodeTypes(mockState.spaceflights);
+    const groups = getGroups({ nodeTypes, items });
+    return { group: groups['elementType'], groupItems: [] };
+  };
+
+  it('renders without throwing', () => {
+    expect(() =>
+      setup.mount(<FiltersSectionHeading {...mockProps()} />)
+    ).not.toThrow();
+  });
+
+  it('handles collapse button click events', () => {
+    const onToggleCollapsed = jest.fn();
+    const wrapper = setup.mount(
+      <FiltersSectionHeading
+        {...mockProps()}
+        onToggleCollapsed={onToggleCollapsed}
+      />
+    );
+    wrapper.find('.filters-section-heading__toggle-btn').simulate('click');
+    expect(() => onToggleCollapsed.mock.calls.length.toEqual(1)).toThrow();
+  });
+
+  it('adds class when collapsed prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersSectionHeading {...mockProps()} collapsed={true} />
+    );
+    const children = wrapper.find('.filters-section-heading__toggle-btn');
+    expect(children.hasClass('filters-section-heading__toggle-btn--alt')).toBe(
+      true
+    );
+  });
+
+  it('adds class when disabled prop true', () => {
+    const wrapper = setup.mount(
+      <FiltersSectionHeading {...mockProps()} disabled={true} />
+    );
+    const children = wrapper.find('.filters-section-heading__toggle-btn');
+    expect(
+      children.hasClass('filters-section-heading__toggle-btn--disabled')
+    ).toBe(true);
+  });
+});

src/components/filters/filters-section/filters-section.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import classnames from 'classnames';
+import FiltersSectionHeading from '../filters-section-heading/filters-section-heading';
+import FiltersGroup from '../filters-group/filters-group';
+
+import './filters-section.scss';
+
+/** Represents a section within the filters. */
+const FiltersSection = ({
+  group,
+  groupCollapsed,
+  items,
+  onGroupToggleChanged,
+  onItemChange,
+  onItemClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onToggleGroupCollapsed,
+  searchValue,
+}) => {
+  const { id, allUnchecked } = group;
+  const collapsed = Boolean(searchValue) ? false : groupCollapsed[id];
+  const groupItems = items[id] || [];
+
+  return (
+    <li
+      className={classnames('filters-section', `filters-section--type-${id}`, {
+        'filters-section--all-unchecked': allUnchecked,
+      })}
+      key={id}
+    >
+      <FiltersSectionHeading
+        group={group}
+        collapsed={collapsed}
+        groupItems={groupItems}
+        onGroupToggleChanged={onGroupToggleChanged}
+        onToggleGroupCollapsed={onToggleGroupCollapsed}
+      />
+      <FiltersGroup
+        collapsed={collapsed}
+        group={group}
+        items={groupItems}
+        onItemChange={onItemChange}
+        onItemClick={onItemClick}
+        onItemMouseEnter={onItemMouseEnter}
+        onItemMouseLeave={onItemMouseLeave}
+      />
+    </li>
+  );
+};
+
+export default FiltersSection;

src/components/filters/filters-section/filters-section.scss

@@ -0,0 +1,6 @@
+// Bright row text when the parent groups are all unchecked
+.filters-section--all-unchecked {
+  .row-text__label--kind-filter {
+    opacity: 1;
+  }
+}