chore(topology): fix broken topology toolbar and controlbar

cryostatio · Jul 26, 2024 · a5d8cad · a5d8cad
1 parent dce54eb
commit a5d8cad
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "@patternfly/react-icons": "^5.1.1",
     "@patternfly/react-styles": "^5.1.1",
     "@patternfly/react-table": "^5.1.1",
-    "@patternfly/react-topology": "^5.1.0",
+    "@patternfly/react-topology": "^5.3.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/lodash": "^4.14.202",
     "@types/react": "^17.0.69",

diff --git a/src/app/Topology/GraphView/TopologyControlBar.tsx b/src/app/Topology/GraphView/TopologyControlBar.tsx
@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { css } from '@patternfly/react-styles';
 import {
   action,
   createTopologyControlButtons,
@@ -27,43 +26,32 @@ import { CollapseIcon } from '../Shared/Components/CollapseIcon';
 export interface TopologyControlBarProps {
   visualization: Visualization;
   noCollapse?: boolean;
-  className?: string;
 }
 
-export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({
-  visualization,
-  noCollapse,
-  className,
-  ...props
-}) => {
+export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({ visualization, noCollapse, ...props }) => {
   const buttonConfigs = React.useMemo(() => {
-    const base = [
-      ...createTopologyControlButtons({
-        ...defaultControlButtonsOptions,
-        zoomInCallback: action(() => {
-          visualization.getGraph().scaleBy(4 / 3);
-        }),
-        zoomInTip: 'Zoom in',
-        zoomInAriaLabel: 'Zoom in',
-        zoomOutCallback: action(() => {
-          visualization.getGraph().scaleBy(3 / 4);
-        }),
-        zoomOutTip: 'Zoom out',
-        zoomOutAriaLabel: 'Zoom out',
-        fitToScreenCallback: action(() => {
-          visualization.getGraph().fit(120);
-        }),
-        fitToScreenTip: 'Fit to screen',
-        fitToScreenAriaLabel: 'Fit to screen',
-        resetViewCallback: action(() => {
-          visualization.getGraph().reset();
-          visualization.getGraph().layout();
-        }),
-        resetViewTip: 'Reset view',
-        resetViewAriaLabel: 'Reset view',
-        legend: false,
+    const base = createTopologyControlButtons({
+      ...defaultControlButtonsOptions,
+      zoomInCallback: action(() => {
+        // Zoom in by 4 / 3
+        visualization.getGraph().scaleBy(4 / 3);
+      }),
+      zoomOutCallback: action(() => {
+        // Zoom out by 3 / 4
+        visualization.getGraph().scaleBy(3 / 4);
+      }),
+      fitToScreenCallback: action(() => {
+        // Fit entire graph in the viewable area with an 120px margin
+        visualization.getGraph().fit(120);
+      }),
+      resetViewCallback: action(() => {
+        // Scale back to 1, and re-center the graph
+        visualization.getGraph().reset();
+        // Reset layout
+        visualization.getGraph().layout();
       }),
-    ];
+      legend: false,
+    });
 
     if (!noCollapse) {
       base.push({
@@ -82,9 +70,5 @@ export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({
     return base;
   }, [visualization, noCollapse]);
 
-  return (
-    <div className={css('topology-control-bar', className)}>
-      <PFTopologyControlBar {...props} controlButtons={buttonConfigs} />
-    </div>
-  );
+  return <PFTopologyControlBar {...props} controlButtons={buttonConfigs} />;
 };
diff --git a/src/app/Topology/Toolbar/TopologyToolbar.tsx b/src/app/Topology/Toolbar/TopologyToolbar.tsx
@@ -15,7 +15,7 @@
  */
 import { topologyConfigSetViewModeIntent, topologyDeleteAllFiltersIntent } from '@app/Shared/Redux/ReduxStore';
 import { portalRoot } from '@app/utils/utils';
-import { Button, Popover, Toolbar, ToolbarContent, ToolbarItem, Tooltip } from '@patternfly/react-core';
+import { Button, Icon, Popover, Toolbar, ToolbarContent, ToolbarItem, Tooltip } from '@patternfly/react-core';
 import { TopologyIcon, ListIcon, MouseIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import { Visualization } from '@patternfly/react-topology';
 import * as React from 'react';
@@ -74,8 +74,8 @@ export const TopologyToolbar: React.FC<TopologyToolbarProps> = ({ variant, visua
         aria-live="polite"
         appendTo={portalRoot}
       >
-        <Button className="topology__view-switcher" aria-label="Clipboard" variant="plain" onClick={toggleView}>
-          {isGraphView ? <ListIcon /> : <TopologyIcon />}
+        <Button aria-label="Clipboard" variant="plain" onClick={toggleView}>
+          <Icon size="lg">{isGraphView ? <ListIcon /> : <TopologyIcon />}</Icon>
         </Button>
       </Tooltip>
     ),

diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css
@@ -18,10 +18,6 @@ limitations under the License.
 Below CSS rules only apply to Topology components
 */
 
-.topology__view-switcher {
-  font-size: 1.8em !important;
-}
-
 .sample-node-donut__node-wrapper {
   position: relative;
   width: 12em;
@@ -201,7 +197,7 @@ Below CSS rules only apply to Topology components
 }
 
 .topology__help-icon {
-  color: var(--pf-global--palette--blue-400);
+  color: var(--pf-v5-global--palette--blue-400);
 }
 
 .topology__help-icon-button {
@@ -224,7 +220,7 @@ Below CSS rules only apply to Topology components
 }
 
 .topology__node-badge text {
-  fill: var(--pf-v5-global--palette--white);
+  fill: var(--pf-v5-global--palette--white) !important;
   font-weight: 700;
 }
 
@@ -261,7 +257,7 @@ Below CSS rules only apply to Topology components
 }
 
 .topology__toolbar-container {
-  padding: 0.4em 0 0.2em 0 !important;
+  padding: 0.8em 0 0.4em 0 !important;
 }
 
 .topology__toolbar-chip-content {

diff --git a/yarn.lock b/yarn.lock
@@ -1398,9 +1398,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/react-topology@npm:^5.1.0":
-  version: 5.1.0
-  resolution: "@patternfly/react-topology@npm:5.1.0"
+"@patternfly/react-topology@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "@patternfly/react-topology@npm:5.3.0"
   dependencies:
     "@patternfly/react-core": ^5.1.1
     "@patternfly/react-icons": ^5.1.1
@@ -1411,7 +1411,6 @@ __metadata:
     "@types/react-measure": ^2.0.6
     d3: ^7.8.0
     dagre: 0.8.2
-    lodash: ^4.17.19
     mobx: ^6.9.0
     mobx-react: ^7.6.0
     point-in-svg-path: ^1.0.1
@@ -1422,7 +1421,7 @@ __metadata:
   peerDependencies:
     react: ^17 || ^18
     react-dom: ^17 || ^18
-  checksum: e83627f62f0f77bd6e0b83f40909a1d35d782efe9df0a2f2f65caa5728aef53dcca512b94434d5070f14d5f98322fc98d9f092323d4db4588da7c95b7a107339
+  checksum: f0d4f0a3bcb371a94e7ca20e996119cfd448791baa974e8d3c246f0484be062ccaec215ce71ef3a7917faf1b30cffda7785ebb81d97ca8ea7ee9b12d79bf0b73
   languageName: node
   linkType: hard
 
@@ -4260,7 +4259,7 @@ __metadata:
     "@patternfly/react-icons": ^5.1.1
     "@patternfly/react-styles": ^5.1.1
     "@patternfly/react-table": ^5.1.1
-    "@patternfly/react-topology": ^5.1.0
+    "@patternfly/react-topology": ^5.3.0
     "@reduxjs/toolkit": ^1.9.3
     "@testing-library/dom": ^9.3.1
     "@testing-library/jest-dom": ^5.16.5