feat(ControlBar): Add expand/collapse all buttons

packages/demo-app-ts/src/demos/DemoControlBar.tsx

@@ -7,13 +7,17 @@ import {
   action
 } from '@patternfly/react-topology';
 
-const DemoControlBar: React.FC = () => {
+const DemoControlBar: React.FC<{ collapseAllCallback?: (collapseAll: boolean) => void }> = ({
+  collapseAllCallback
+}) => {
   const controller = useVisualizationController();
 
   return (
     <TopologyControlBar
       controlButtons={createTopologyControlButtons({
         ...defaultControlButtonsOptions,
+        expandAll: !!collapseAllCallback,
+        collapseAll: !!collapseAllCallback,
         zoomInCallback: action(() => {
           controller.getGraph().scaleBy(4 / 3);
         }),
@@ -27,6 +31,12 @@ const DemoControlBar: React.FC = () => {
           controller.getGraph().reset();
           controller.getGraph().layout();
         }),
+        expandAllCallback: action(() => {
+          collapseAllCallback(false);
+        }),
+        collapseAllCallback: action(() => {
+          collapseAllCallback(true);
+        }),
         legend: false
       })}
     />

packages/demo-app-ts/src/demos/pipelineGroupsDemo/PipelineGroupsDemo.tsx

@@ -25,7 +25,12 @@ import {
   Edge
 } from '@patternfly/react-topology';
 import pipelineGroupsComponentFactory from './pipelineGroupsComponentFactory';
-import { createComplexDemoPipelineGroupsNodes, createDemoPipelineGroupsNodes } from './createDemoPipelineGroupsNodes';
+import {
+  createComplexDemoPipelineGroupsNodes,
+  createDemoPipelineGroupsNodes,
+  DEFAULT_TASK_HEIGHT,
+  GROUP_TASK_WIDTH
+} from './createDemoPipelineGroupsNodes';
 import { PipelineGroupsDemoContext, PipelineGroupsDemoModel } from './PipelineGroupsDemoContext';
 import OptionsBar from './OptionsBar';
 import DemoControlBar from '../DemoControlBar';
@@ -78,8 +83,48 @@ const TopologyPipelineGroups: React.FC<{ nodes: PipelineNodeModel[] }> = observe
     );
   }, [controller, nodes, options.verticalLayout]);
 
+  const collapseAllCallback = React.useCallback(
+    (collapseAll: boolean) => {
+      // First, expand/collapse all nodes
+      collapseAll ? controller.getGraph().collapseAll() : controller.getGraph().expandAll();
+      // We must recreate the model based on what is visible
+      const model = controller.toModel();
+
+      // Get all the non-spacer nodes, mark them all visible again
+      const nodes = model.nodes
+        .filter((n) => n.type !== DEFAULT_SPACER_NODE_TYPE)
+        .map((n) => ({
+          ...n,
+          visible: true
+        }));
+
+      // If collapsing, set the size of the collapsed group nodes
+      if (collapseAll) {
+        nodes.forEach((node) => {
+          if (node.group && node.collapsed) {
+            node.width = GROUP_TASK_WIDTH;
+            node.height = DEFAULT_TASK_HEIGHT;
+          }
+        });
+      }
+      // Determine the new set of nodes, including the spacer nodes
+      const pipelineNodes = addSpacerNodes(nodes);
+
+      // Determine the new edges
+      const edges = getEdgesFromNodes(pipelineNodes, DEFAULT_SPACER_NODE_TYPE, 'edge', 'edge');
+      // Apply the new model and run the layout
+      controller.fromModel({ nodes: pipelineNodes, edges }, true);
+      controller.getGraph().layout();
+      controller.getGraph().fit(80);
+    },
+    [controller]
+  );
+
   return (
-    <TopologyView contextToolbar={<OptionsBar />} controlBar={<DemoControlBar />}>
+    <TopologyView
+      contextToolbar={<OptionsBar />}
+      controlBar={<DemoControlBar collapseAllCallback={collapseAllCallback} />}
+    >
       <VisualizationSurface state={{ selectedIds }} />
     </TopologyView>
   );

packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx

@@ -12,13 +12,18 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import ExpandArrowsAltIcon from '@patternfly/react-icons/dist/esm/icons/expand-arrows-alt-icon';
 import SearchPlusIcon from '@patternfly/react-icons/dist/esm/icons/search-plus-icon';
 import SearchMinusIcon from '@patternfly/react-icons/dist/esm/icons/search-minus-icon';
+import CollapseIcon from '@patternfly/react-icons/dist/esm/icons/compress-alt-icon';
+import ExpandAltIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon';
+
 import '../../css/topology-controlbar';
 
 /* ID's for common control buttons */
 export const ZOOM_IN = 'zoom-in';
 export const ZOOM_OUT = 'zoom-out';
 export const FIT_TO_SCREEN = 'fit-to-screen';
 export const RESET_VIEW = 'reset-view';
+export const EXPAND_ALL = 'expand-all';
+export const COLLAPSE_ALL = 'collapse-all';
 export const LEGEND = 'legend';
 
 /* Data needed for each control button */
@@ -66,6 +71,22 @@ export interface TopologyControlButtonsOptions {
   resetViewDisabled: boolean;
   resetViewHidden: boolean;
 
+  expandAll: boolean;
+  expandAllIcon: React.ReactNode;
+  expandAllTip: React.ReactNode;
+  expandAllAriaLabel: string;
+  expandAllCallback: (id: any) => void;
+  expandAllDisabled: boolean;
+  expandAllHidden: boolean;
+
+  collapseAll: boolean;
+  collapseAllIcon: React.ReactNode;
+  collapseAllTip: React.ReactNode;
+  collapseAllAriaLabel: string;
+  collapseAllCallback: (id: any) => void;
+  collapseAllDisabled: boolean;
+  collapseAllHidden: boolean;
+
   legend: boolean;
   legendIcon: React.ReactNode;
   legendTip: string;
@@ -111,6 +132,22 @@ export const defaultControlButtonsOptions: TopologyControlButtonsOptions = {
   resetViewDisabled: false,
   resetViewHidden: false,
 
+  expandAll: false,
+  expandAllIcon: <ExpandAltIcon />,
+  expandAllTip: 'Expand All',
+  expandAllAriaLabel: 'Expand All',
+  expandAllCallback: null,
+  expandAllDisabled: false,
+  expandAllHidden: false,
+
+  collapseAll: false,
+  collapseAllIcon: <CollapseIcon />,
+  collapseAllTip: 'Collapse All',
+  collapseAllAriaLabel: 'Collapse All',
+  collapseAllCallback: null,
+  collapseAllDisabled: false,
+  collapseAllHidden: false,
+
   legend: true,
   legendIcon: 'Legend',
   legendTip: '',
@@ -156,6 +193,22 @@ export const createTopologyControlButtons = ({
   resetViewDisabled = defaultControlButtonsOptions.resetViewDisabled,
   resetViewHidden = defaultControlButtonsOptions.resetViewHidden,
 
+  expandAll = defaultControlButtonsOptions.expandAll,
+  expandAllIcon = defaultControlButtonsOptions.expandAllIcon,
+  expandAllTip = defaultControlButtonsOptions.expandAllTip,
+  expandAllAriaLabel = defaultControlButtonsOptions.expandAllAriaLabel,
+  expandAllCallback = defaultControlButtonsOptions.expandAllCallback,
+  expandAllDisabled = defaultControlButtonsOptions.expandAllDisabled,
+  expandAllHidden = defaultControlButtonsOptions.expandAllHidden,
+
+  collapseAll = defaultControlButtonsOptions.collapseAll,
+  collapseAllIcon = defaultControlButtonsOptions.collapseAllIcon,
+  collapseAllTip = defaultControlButtonsOptions.collapseAllTip,
+  collapseAllAriaLabel = defaultControlButtonsOptions.collapseAllAriaLabel,
+  collapseAllCallback = defaultControlButtonsOptions.collapseAllCallback,
+  collapseAllDisabled = defaultControlButtonsOptions.collapseAllDisabled,
+  collapseAllHidden = defaultControlButtonsOptions.collapseAllHidden,
+
   legend = defaultControlButtonsOptions.legend,
   legendIcon = defaultControlButtonsOptions.legendIcon,
   legendTip = defaultControlButtonsOptions.legendTip,
@@ -216,6 +269,30 @@ export const createTopologyControlButtons = ({
     });
   }
 
+  if (expandAll) {
+    controlButtons.push({
+      id: EXPAND_ALL,
+      icon: expandAllIcon,
+      tooltip: expandAllTip,
+      ariaLabel: expandAllAriaLabel,
+      callback: expandAllCallback,
+      disabled: expandAllDisabled,
+      hidden: expandAllHidden
+    });
+  }
+
+  if (collapseAll) {
+    controlButtons.push({
+      id: COLLAPSE_ALL,
+      icon: collapseAllIcon,
+      tooltip: collapseAllTip,
+      ariaLabel: collapseAllAriaLabel,
+      callback: collapseAllCallback,
+      disabled: collapseAllDisabled,
+      hidden: collapseAllHidden
+    });
+  }
+
   if (customButtons) {
     controlButtons.push(...customButtons);
   }