Move the Expand all modular pipelines toggle from the settings panel

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

@@ -146,38 +146,24 @@ describe('Global Toolbar', () => {
       });
     });
 
-    it('verifies that users can expand all modular pipelines on first load. #TC-7', () => {
+    it('verifies that users can expand all modular pipelines directly from the toolbar. #TC-7', () => {
       const modularPipelineChildNodeText = 'Create Derived Features';
 
-      // Alias
-      cy.get('[data-test="pipeline-toggle-input-expandAllPipelines"]').as(
-        'isExpandAllPipelinesCheckBox'
-      );
+      // Alias for better readability
+      cy.get('[data-test="expand-all-pipelines-toggle"]').as('expandAllPipelinesToggle');
 
       // Assert before action
-      cy.get('@isExpandAllPipelinesCheckBox').should('not.be.checked');
-      cy.get('.pipeline-node__text').should(
-        'not.contain',
-        modularPipelineChildNodeText
-      );
-      cy.get('[role="treeitem"]')
-        .should('have.attr', 'aria-expanded')
-        .should('eq', 'false');
+      cy.get('@expandAllPipelinesToggle').should('not.be.checked');
+      cy.get('.pipeline-node__text').should('not.contain', modularPipelineChildNodeText);
+      cy.get('[role="treeitem"]').should('have.attr', 'aria-expanded', 'false');
 
-      // Action
-      cy.get('@isExpandAllPipelinesCheckBox').check({ force: true });
-      cy.get('[data-test="Apply changes and close in Settings Modal"]').click({
-        force: true,
-      });
+      // Action - toggling the expand all pipelines directly from the toolbar
+      cy.get('@expandAllPipelinesToggle').click();
 
       // Assert after action
-      cy.get('[role="treeitem"]', { timeout: 5000 })
-        .should('have.attr', 'aria-expanded')
-        .should('eq', 'true');
-      cy.get('.pipeline-node__text').should(
-        'contain',
-        modularPipelineChildNodeText
-      );
+      cy.get('[role="treeitem"]')
+        .should('have.attr', 'aria-expanded', 'true');
+      cy.get('.pipeline-node__text').should('contain', modularPipelineChildNodeText);
     });
   });
 });

src/components/app/app.js

@@ -97,6 +97,7 @@ App.propTypes = {
     labelBtn: PropTypes.bool,
     layerBtn: PropTypes.bool,
     exportBtn: PropTypes.bool,
+    pipelineBtn: PropTypes.bool,
     sidebar: PropTypes.bool,
   }),
   /**

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js

@@ -5,13 +5,18 @@ import {
   toggleLayers,
   toggleSidebar,
   toggleTextLabels,
+  changeFlag,
 } from '../../actions';
+import { loadInitialPipelineData } from '../../actions/pipelines';
 import IconButton from '../ui/icon-button';
 import LabelIcon from '../icons/label';
 import ExportIcon from '../icons/export';
 import LayersIcon from '../icons/layers';
 import PrimaryToolbar from '../primary-toolbar';
 import { getVisibleLayerIDs } from '../../selectors/disabled';
+import ExpandPipelinesIcon from '../icons/expand-pipelines';
+import CollapsePipelinesIcon from '../icons/collapse-pipelines';
+import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
 
 /**
  * Main controls for filtering the chart data
@@ -28,54 +33,84 @@ export const FlowchartPrimaryToolbar = ({
   textLabels,
   visible,
   visibleLayers,
-}) => (
-  <>
-    <PrimaryToolbar
-      displaySidebar={displaySidebar}
-      onToggleSidebar={onToggleSidebar}
-      visible={visible}
-    >
-      <IconButton
-        active={textLabels}
-        ariaLabel={`${textLabels ? 'Hide' : 'Show'} text labels`}
-        className={'pipeline-menu-button--labels'}
-        dataTest={'btnToggleLabels'}
-        icon={LabelIcon}
-        labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
-        onClick={() => onToggleTextLabels(!textLabels)}
-        visible={visible.labelBtn}
-      />
-      <IconButton
-        active={visibleLayers}
-        ariaLabel={`Turn data layers ${visibleLayers ? 'off' : 'on'}`}
-        className={'pipeline-menu-button--layers'}
-        dataHeapEvent={`visible.layers.${visibleLayers}`}
-        dataTest={'btnToggleLayers'}
-        disabled={disableLayerBtn}
-        icon={LayersIcon}
-        labelText={`${visibleLayers ? 'Hide' : 'Show'} layers`}
-        onClick={() => onToggleLayers(!visibleLayers)}
-        visible={visible.layerBtn}
-      />
-      <IconButton
-        ariaLabel="Export graph as SVG or PNG"
-        className={'pipeline-menu-button--export'}
-        dataTest={'btnExportGraph'}
-        icon={ExportIcon}
-        labelText="Export visualisation"
-        onClick={() => onToggleExportModal(true)}
-        visible={visible.exportBtn}
-      />
-    </PrimaryToolbar>
-  </>
-);
+  expandedPipelines,
+  onToggleExpandAllPipelines,
+}) => {
+  const { toSetQueryParam } = useGeneratePathname();
+
+  const handleToggleExpandAllPipelines = () => {
+    const isExpanded = !expandedPipelines;
+    onToggleExpandAllPipelines(isExpanded);
+    toSetQueryParam('expandAllPipelines', isExpanded.toString());
+  };
+
+  return (
+    <>
+      <PrimaryToolbar
+        displaySidebar={displaySidebar}
+        onToggleSidebar={onToggleSidebar}
+        visible={visible}
+      >
+        <IconButton
+          active={textLabels}
+          ariaLabel={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          className={'pipeline-menu-button--labels'}
+          dataTest={'btnToggleLabels'}
+          icon={LabelIcon}
+          labelText={`${textLabels ? 'Hide' : 'Show'} text labels`}
+          onClick={() => onToggleTextLabels(!textLabels)}
+          visible={visible.labelBtn}
+        />
+        <IconButton
+          active={visibleLayers}
+          ariaLabel={`Turn data layers ${visibleLayers ? 'off' : 'on'}`}
+          className={'pipeline-menu-button--layers'}
+          dataHeapEvent={`visible.layers.${visibleLayers}`}
+          dataTest={'btnToggleLayers'}
+          disabled={disableLayerBtn}
+          icon={LayersIcon}
+          labelText={`${visibleLayers ? 'Hide' : 'Show'} layers`}
+          onClick={() => onToggleLayers(!visibleLayers)}
+          visible={visible.layerBtn}
+        />
+        <IconButton
+          active={expandedPipelines}
+          ariaLabel={
+            expandedPipelines
+              ? 'Collapse all modular pipelines'
+              : 'Expand all modular pipelines'
+          }
+          className={'pipeline-menu-button--pipeline'}
+          dataTest={'btnTogglePipeline'}
+          icon={expandedPipelines ? CollapsePipelinesIcon : ExpandPipelinesIcon}
+          labelText={
+            expandedPipelines ? 'Collapse Pipelines' : 'Expand Pipelines'
+          }
+          data-test={'expand-all-pipelines-toggle'}
+          onClick={handleToggleExpandAllPipelines}
+          visible={visible.pipelineBtn}
+        />
+        <IconButton
+          ariaLabel="Export graph as SVG or PNG"
+          className={'pipeline-menu-button--export'}
+          dataTest={'btnExportGraph'}
+          icon={ExportIcon}
+          labelText="Export visualisation"
+          onClick={() => onToggleExportModal(true)}
+          visible={visible.exportBtn}
+        />
+      </PrimaryToolbar>
+    </>
+  );
+};
 
 export const mapStateToProps = (state) => ({
   disableLayerBtn: !state.layer.ids.length,
   displaySidebar: state.display.sidebar,
   textLabels: state.textLabels,
   visible: state.visible,
   visibleLayers: Boolean(getVisibleLayerIDs(state).length),
+  expandedPipelines: state.flags.expandAllPipelines,
 });
 
 export const mapDispatchToProps = (dispatch) => ({
@@ -91,6 +126,10 @@ export const mapDispatchToProps = (dispatch) => ({
   onToggleTextLabels: (value) => {
     dispatch(toggleTextLabels(Boolean(value)));
   },
+  onToggleExpandAllPipelines: (isExpanded) => {
+    dispatch(changeFlag('expandAllPipelines', isExpanded));
+    dispatch(loadInitialPipelineData());
+  },
 });
 
 export default connect(

src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.test.js

@@ -6,17 +6,24 @@ import ConnectedFlowchartPrimaryToolbar, {
 } from './flowchart-primary-toolbar';
 import { mockState, setup } from '../../utils/state.mock';
 
+jest.mock('../../utils/hooks/use-generate-pathname', () => ({
+  useGeneratePathname: () => ({
+    toSetQueryParam: jest.fn(),
+  }),
+}));
+
 describe('PrimaryToolbar', () => {
   it('renders without crashing', () => {
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />);
-    expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(4);
+    expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(5);
   });
 
   it('hides all buttons (except menu button) when visible prop is false for each of them', () => {
     const visible = {
       labelBtn: false,
       layerBtn: false,
       exportBtn: false,
+      pipelineBtn: false,
     };
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
       visible,
@@ -31,14 +38,15 @@ describe('PrimaryToolbar', () => {
     const wrapper = setup.mount(<ConnectedFlowchartPrimaryToolbar />, {
       visible,
     });
-    expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(3);
+    expect(wrapper.find('.pipeline-icon-toolbar__button').length).toBe(4);
   });
 
   const functionCalls = [
     ['.pipeline-menu-button--menu', 'onToggleSidebar'],
     ['.pipeline-menu-button--labels', 'onToggleTextLabels'],
     ['.pipeline-menu-button--export', 'onToggleExportModal'],
     ['.pipeline-menu-button--layers', 'onToggleLayers'],
+    ['.pipeline-menu-button--pipeline', 'onToggleExpandAllPipelines'],
   ];
 
   test.each(functionCalls)(
@@ -70,6 +78,7 @@ describe('PrimaryToolbar', () => {
         settingsModal: expect.any(Boolean),
         labelBtn: expect.any(Boolean),
         layerBtn: expect.any(Boolean),
+        pipelineBtn: expect.any(Boolean),
         sidebar: expect.any(Boolean),
       }),
       visibleLayers: expect.any(Boolean),
@@ -113,5 +122,15 @@ describe('PrimaryToolbar', () => {
         type: 'TOGGLE_TEXT_LABELS',
       });
     });
+
+    it('onToggleExpandAllPipelines', () => {
+      const dispatch = jest.fn();
+      mapDispatchToProps(dispatch).onToggleExpandAllPipelines(true);
+      expect(dispatch.mock.calls[0][0]).toEqual({
+        name: 'expandAllPipelines',
+        type: 'CHANGE_FLAG',
+        value: true,
+      });
+    });
   });
 });

src/components/global-toolbar/global-toolbar.test.js

@@ -56,6 +56,7 @@ describe('GlobalToolbar', () => {
         miniMapBtn: true,
         modularPipelineFocusMode: null,
         metadataModal: false,
+        pipelineBtn: true,
         settingsModal: false,
         shareableUrlModal: false,
         sidebar: true,

src/components/icons/collapse-pipelines.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CollapsePipelinesIcon = ({ className }) => (
+  <svg className={className} viewBox="0 0 18 18">
+    <path d="M7.6923 10.3077V17.5H5.73079V12.2692H0.5V10.3077H7.6923ZM12.2692 0.5V5.73079H17.5V7.6923H10.3077V0.5H12.2692Z" />
+  </svg>
+);
+
+export default CollapsePipelinesIcon;

src/components/icons/expand-pipelines.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ExpandPipelinesIcon = ({ className }) => (
+  <svg className={className} viewBox="0 0 18 18">
+    <path d="M0.5 17.5V10.3077H2.46151V15.5385H7.6923V17.5H0.5ZM15.5385 7.6923V2.46151H10.3077V0.5H17.5V7.6923H15.5385Z" />
+  </svg>
+);
+
+export default ExpandPipelinesIcon;

src/components/settings-modal/settings-modal.js

@@ -15,7 +15,6 @@ import {
 } from '../../config';
 import { saveLocalStorage } from '../../store/helpers';
 import { localStorageKeyFeatureHintsStep } from '../../components/feature-hints/feature-hints';
-import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
 
 import Button from '../ui/button';
 import Modal from '../ui/modal';
@@ -47,8 +46,6 @@ const SettingsModal = ({
     useState(showFeatureHints);
   const [toggleFlags, setToggleFlags] = useState(flags);
 
-  const { toSetQueryParam } = useGeneratePathname();
-
   useEffect(() => {
     setShowFeatureHintsValue(showFeatureHints);
   }, [showFeatureHints]);
@@ -66,9 +63,6 @@ const SettingsModal = ({
         const updatedFlags = Object.entries(toggleFlags);
         updatedFlags.map((each) => {
           const [name, value] = each;
-          if (name === params.expandAll) {
-            toSetQueryParam(params.expandAll, value);
-          }
 
           return onToggleFlag(name, value);
         });
@@ -95,7 +89,6 @@ const SettingsModal = ({
     onToggleIsPrettyName,
     showSettingsModal,
     toggleFlags,
-    toSetQueryParam,
   ]);
 
   const resetStateCloseModal = () => {
@@ -115,7 +108,6 @@ const SettingsModal = ({
       >
         <div className="pipeline-settings-modal__content">
           <div className="pipeline-settings-modal__group">
-            <div className="pipeline-settings-modal__subtitle">General</div>
             <div className="pipeline-settings-modal__header">
               <div className="pipeline-settings-modal__name">Name</div>
               <div className="pipeline-settings-modal__state">State</div>
@@ -149,9 +141,6 @@ const SettingsModal = ({
                 }
               }}
             />
-          </div>
-          <div className="pipeline-settings-modal__group">
-            <div className="pipeline-settings-modal__subtitle">Experiments</div>
             {flagData.map(({ name, value, description }) => (
               <SettingsModalRow
                 description={description}

src/config.js

@@ -63,12 +63,6 @@ export const flags = {
     default: true,
     icon: '🐳',
   },
-  expandAllPipelines: {
-    name: 'Expand all modular pipelines',
-    description: 'Expand all modular pipelines on first load',
-    default: false,
-    icon: '🔛',
-  },
 };
 
 export const settings = {

src/store/initial-state.js

@@ -40,6 +40,7 @@ export const createInitialState = () => ({
     miniMap: true,
     miniMapBtn: true,
     modularPipelineFocusMode: null,
+    pipelineBtn: true,
     settingsModal: false,
     shareableUrlModal: false,
     sidebar: window.innerWidth > sidebarWidth.breakpoint,

src/store/initial-state.test.js

@@ -123,6 +123,7 @@ describe('getInitialState', () => {
         exportBtn: true,
         labelBtn: true,
         layerBtn: true,
+        pipelineBtn: true,
       },
     });
   });