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

SajidAlamQB commented 2 months ago

Description

Research highlighted the need to make Expand all modular pipelines toggle more discoverable to users. It is currently in the settings panel which most users do not use often, and will be moved to the task bar in this PR.

Development notes

Removed from settings menu:

Expand modular pipelines:

Checklist

[x] Read the contributing guidelines
[x] 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

jitu5 commented 2 months ago

@SajidAlamQB Please remove "General" label from setting modal as new Figma design.

jitu5 commented 2 months ago

@SajidAlamQB On collapse/expand icon click, Please update URL query params expandAllPipelines. I added this functionality in stateful URL PR in settings-modal.js

jitu5 commented 2 months ago

@SajidAlamQB In settings-modal.js as we are not updating URL you could remove code related to it.

import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
...
const { toSetQueryParam } = useGeneratePathname();
...
 if (name === params.expandAll) {
      toSetQueryParam(params.expandAll, value);
    }
...
toSetQueryParam,

stephkaiser commented 2 months ago

Hey Sajid!

Thanks for this work! I've done some design QA with this link - https://6620ef0fc18fff36ef74b586--kedro-viz-expand-all.netlify.app/?types=nodes,datasets&expandAllPipelines=false. Please see my comments below:

I can see the url updates from false to true when the pipeline is expanded or collapsed, nice!

The flowchart is empty and showing an error message so I can't test the button to see if the pipeline expands or collapses.
The expand/collapse button icon should follow the same default and hover states pattern as the download button in the utility bar - so white-900 (#C6CACE) by default and on hover it should be FFFFFF 100%. Currently this pattern only applies when the button is on 'Expand'. And the same for light mode as well.
For the tooltip, we should have a lowercase P for pipelines, so "Expand pipelines" and "Collapse pipelines"
Settings modal - -- The Settings title and settings names should be in medium font weight and FFFFFF 85% -- Toggle 'On' labels should be in blue (#00E3FF) -- Missing the Kedro-Viz version text, which should be aligned with the buttons -- Button text is now 'Save and apply', and disabled button state colour is FFFFFF 30% -- Padding between the button and the settings need to be increased, they should be 64px apart

Let me know if anything is unclear :)

SajidAlamQB commented 2 months ago

Settings modal - -- The Settings title and settings names should be in medium font weight and FFFFFF 85%

Hey @stephkaiser I've made all the changes except the one quoted above, setting it to medium font with FFFFFF 85% had no visible change so I've kept it as is.

kedro-org / kedro-viz