Move the Expand all modular pipelines toggle from the settings panel (

#1858) * Update config.js Signed-off-by: Sajid Alam <[email protected]> * Update config.js Signed-off-by: Sajid Alam <[email protected]> * remove experiment and expand modular pipeline from settings menu Signed-off-by: Sajid Alam <[email protected]> * implement the expandallpipelines Signed-off-by: Sajid Alam <[email protected]> * Update flowchart-primary-toolbar.test.js Signed-off-by: Sajid Alam <[email protected]> * improve tests Signed-off-by: Sajid Alam <[email protected]> * changes based on review Signed-off-by: Sajid Alam <[email protected]> * remove query from settings-modal Signed-off-by: Sajid Alam <[email protected]> * Update settings-modal.js Signed-off-by: Sajid Alam <[email protected]> * design changes make icon always hoverable Signed-off-by: Sajid Alam <[email protected]> * update css Signed-off-by: Sajid Alam <[email protected]> --------- Signed-off-by: Sajid Alam <[email protected]>
kedro-org · Apr 22, 2024 · 92860cd · 92860cd
1 parent e830b19
commit 92860cd
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 119 deletions.
diff --git a/cypress/tests/ui/toolbar/global-toolbar.cy.js b/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);
     });
   });
 });
diff --git a/src/components/app/app.js b/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,
   }),
   /**

diff --git a/src/components/experiment-tracking/run-details-modal/run-details-modal.scss b/src/components/experiment-tracking/run-details-modal/run-details-modal.scss
@@ -18,3 +18,15 @@
   text-align: right;
   width: 100%;
 }
+
+.version-reminder-and-run-details-button-wrapper {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 50px;
+
+  .button:first-of-type {
+    margin-right: 20px;
+  }
+}
diff --git a/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.js b/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(

diff --git a/src/components/flowchart-primary-toolbar/flowchart-primary-toolbar.test.js b/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,
+      });
+    });
   });
 });
diff --git a/src/components/global-toolbar/global-toolbar.scss b/src/components/global-toolbar/global-toolbar.scss
@@ -46,6 +46,10 @@
   }
 }
 
+.pipeline-menu-button--pipeline svg {
+  opacity: 0.7;
+}
+
 .pipeline-global-routes-toolbar a.active .pipeline-menu-button--link {
   background-color: var(--color-global-toolbar-active-btn);
   border-right: 1px solid var(--color-border-line);

diff --git a/src/components/global-toolbar/global-toolbar.test.js b/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,

diff --git a/src/components/icons/collapse-pipelines.js b/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;
diff --git a/src/components/icons/expand-pipelines.js b/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;