make expandAllPipelines outside of flags

Signed-off-by: ravi-kumar-pilla <[email protected]>

src/actions/index.js

@@ -24,6 +24,19 @@ export function toggleLayers(visible) {
   };
 }
 
+export const TOGGLE_EXPAND_ALL_PIPELINES = 'TOGGLE_EXPAND_ALL_PIPELINES';
+
+/**
+ * Toggle whether to expand all modular pipelines or collapse all
+ * @param {Boolean} shouldExpandAllPipelines
+ */
+export function toggleExpandAllPipelines(shouldExpandAllPipelines) {
+  return {
+    type: TOGGLE_EXPAND_ALL_PIPELINES,
+    shouldExpandAllPipelines,
+  };
+}
+
 export const TOGGLE_EXPORT_MODAL = 'TOGGLE_EXPORT_MODAL';
 
 /**

src/actions/pipelines.js

@@ -99,7 +99,7 @@ export function loadInitialPipelineData() {
     // obtain the status of expandAllPipelines to decide whether it needs to overwrite the
     // list of visible nodes
     const expandAllPipelines =
-      state.display.expandAllPipelines || state.flags.expandAllPipelines;
+      state.display.expandAllPipelines || state.expandAllPipelines;
     let newState = await loadJsonData(url).then((data) =>
       preparePipelineState(data, true, expandAllPipelines)
     );
@@ -122,7 +122,7 @@ export function loadInitialPipelineData() {
  */
 export function loadPipelineData(pipelineID) {
   return async function (dispatch, getState) {
-    const { dataSource, pipeline, display, flags } = getState();
+    const { dataSource, pipeline, display, expandAllPipelines } = getState();
 
     if (pipelineID && pipelineID === pipeline.active) {
       return;
@@ -136,10 +136,10 @@ export function loadPipelineData(pipelineID) {
         active: pipelineID,
       });
 
-      const expandAllPipelines =
-        display.expandAllPipelines || flags.expandAllPipelines;
+      const shouldExpandAllPipelines =
+        display.expandAllPipelines || expandAllPipelines;
       const newState = await loadJsonData(url).then((data) =>
-        preparePipelineState(data, false, expandAllPipelines)
+        preparePipelineState(data, false, shouldExpandAllPipelines)
       );
 
       // Set active pipeline here rather than dispatching two separate actions,

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

@@ -5,7 +5,7 @@ import {
   toggleLayers,
   toggleSidebar,
   toggleTextLabels,
-  changeFlag,
+  toggleExpandAllPipelines,
 } from '../../actions';
 import { loadInitialPipelineData } from '../../actions/pipelines';
 import IconButton from '../ui/icon-button';
@@ -110,7 +110,7 @@ export const mapStateToProps = (state) => ({
   textLabels: state.textLabels,
   visible: state.visible,
   visibleLayers: Boolean(getVisibleLayerIDs(state).length),
-  expandedPipelines: state.flags.expandAllPipelines,
+  expandedPipelines: state.expandAllPipelines,
 });
 
 export const mapDispatchToProps = (dispatch) => ({
@@ -127,7 +127,7 @@ export const mapDispatchToProps = (dispatch) => ({
     dispatch(toggleTextLabels(Boolean(value)));
   },
   onToggleExpandAllPipelines: (isExpanded) => {
-    dispatch(changeFlag('expandAllPipelines', isExpanded));
+    dispatch(toggleExpandAllPipelines(isExpanded));
     dispatch(loadInitialPipelineData());
   },
 });

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -110,9 +110,9 @@ export const FlowChartWrapper = ({
             disabledKeys && toSetQueryParam(params.types, mappedDisabledNodes);
           }
         },
-        flags: (value) => {
+        expandAllPipelines: (value) => {
           if (!searchParams.has(params.expandAll)) {
-            toSetQueryParam(params.expandAll, value.expandAllPipelines);
+            toSetQueryParam(params.expandAll, value);
           }
         },
       };

src/reducers/index.js

@@ -20,6 +20,7 @@ import {
   TOGGLE_THEME,
   UPDATE_CHART_SIZE,
   UPDATE_ZOOM,
+  TOGGLE_EXPAND_ALL_PIPELINES,
 } from '../actions';
 import { TOGGLE_PARAMETERS_HOVERED } from '../actions';
 
@@ -95,6 +96,11 @@ const combinedReducer = combineReducers({
     TOGGLE_HOVERED_FOCUS_MODE,
     'hoveredFocusMode'
   ),
+  expandAllPipelines: createReducer(
+    false,
+    TOGGLE_EXPAND_ALL_PIPELINES,
+    'shouldExpandAllPipelines'
+  ),
 });
 
 const rootReducer = (state, action) =>

src/store/initial-state.js

@@ -18,9 +18,10 @@ import {
  */
 export const createInitialState = () => ({
   chartSize: {},
-  flags: { ...Flags.defaults(), expandAllPipelines: false },
+  flags: { ...Flags.defaults() },
   textLabels: true,
   theme: 'dark',
+  expandAllPipelines: false,
   isPrettyName: settings.isPrettyName.default,
   showFeatureHints: settings.showFeatureHints.default,
   ignoreLargeWarning: false,
@@ -67,6 +68,7 @@ const parseUrlParameters = () => {
     nodeTagInUrl: search.get(params.tags)
       ? search.get(params.tags).split(',')
       : [],
+    expandAllPipelinesInUrl: search.get(params.expandAll),
   };
 };
 
@@ -86,6 +88,7 @@ const applyUrlParametersToState = (state, urlParams) => {
     nodeNameFromUrl,
     nodeTypeInUrl,
     nodeTagInUrl,
+    expandAllPipelinesInUrl,
   } = urlParams;
 
   let newState = { ...state };
@@ -127,6 +130,10 @@ const applyUrlParametersToState = (state, urlParams) => {
     });
   }
 
+  if (expandAllPipelinesInUrl) {
+    newState.expandAllPipelines = JSON.parse(expandAllPipelinesInUrl);
+  }
+
   return newState;
 };
 
@@ -142,7 +149,7 @@ export const mergeLocalStorage = (state) => {
     localStorageRunsMetadata
   );
   Object.keys(localStorageState).forEach((key) => {
-    if (!state[key]) {
+    if (!(key in state)) {
       delete localStorageState[key];
     }
   });
@@ -214,7 +221,7 @@ const getInitialState = (props = {}) => {
 
   const expandAllPipelines =
     nonPipelineState.display.expandAllPipelines ||
-    nonPipelineState.flags.expandAllPipelines;
+    nonPipelineState.expandAllPipelines;
 
   const pipelineState = preparePipelineState(
     props.data,

src/store/store.js

@@ -58,6 +58,7 @@ const saveStateToLocalStorage = (state) => {
     isPrettyName: state.isPrettyName,
     showFeatureHints: state.showFeatureHints,
     flags: state.flags,
+    expandAllPipelines: state.expandAllPipelines,
   });
 
   // Store Run's metadata to localstorage