OCPBUGS-42859: Interface with same name causes unexpected behavior in NNS topology

src/views/states/list/StatesList.tsx

@@ -18,6 +18,7 @@ import { Button, Flex, Icon, Pagination } from '@patternfly/react-core';
 import { TopologyIcon } from '@patternfly/react-icons';
 import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import { V1beta1NodeNetworkState } from '@types';
+import { isEmpty } from '@utils/helpers';
 import usePagination from '@utils/hooks/usePagination/usePagination';
 import { paginationDefaultValues } from '@utils/hooks/usePagination/utils/constants';
 
@@ -77,11 +78,13 @@ const StatesList: FC = () => {
   return (
     <>
       <ListPageHeader title={t(NodeNetworkStateModel.label)}>
-        <Button isInline variant="plain" onClick={() => navigate('/nmstate-topology')}>
-          <Icon>
-            <TopologyIcon />
-          </Icon>
-        </Button>
+        {!isEmpty(states) && (
+          <Button isInline variant="plain" onClick={() => navigate('/nmstate-topology')}>
+            <Icon>
+              <TopologyIcon />
+            </Icon>
+          </Button>
+        )}
       </ListPageHeader>
       <ListPageBody>
         <StatusBox loaded={statesLoaded} error={statesError}>

src/views/states/topology/Topology.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useMemo, useState } from 'react';
 
 import { NodeNetworkStateModelGroupVersionKind } from '@models';
-import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { ListPageBody, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import {
   action,
   createTopologyControlButtons,
@@ -14,6 +14,8 @@ import {
   VisualizationSurface,
 } from '@patternfly/react-topology';
 import { V1beta1NodeNetworkState } from '@types';
+import AccessDenied from '@utils/components/AccessDenied/AccessDenied';
+import { isEmpty } from '@utils/helpers';
 
 import TopologySidebar from './components/TopologySidebar/TopologySidebar';
 import TopologyToolbar from './components/TopologyToolbar/TopologyToolbar';
@@ -39,84 +41,83 @@ const Topology: FC = () => {
   );
 
   useEffect(() => {
-    if (loaded && !error) {
-      const filteredStates =
-        selectedNodeFilters.length > 0
-          ? states.filter((state) => selectedNodeFilters.includes(state.metadata.name))
-          : undefined;
+    if (!loaded || error || isEmpty(states)) return;
 
-      const topologyModel = transformDataToTopologyModel(states, filteredStates);
+    const filteredStates = !isEmpty(selectedNodeFilters)
+      ? states.filter((state) => selectedNodeFilters.includes(state.metadata.name))
+      : undefined;
 
-      if (!visualization) {
-        const newVisualization = new Visualization();
-        newVisualization.registerLayoutFactory(layoutFactory);
-        newVisualization.registerComponentFactory(componentFactory);
-        newVisualization.addEventListener(SELECTION_EVENT, setSelectedIds);
-        newVisualization.setFitToScreenOnLayout(true);
-        newVisualization.fromModel(topologyModel);
-        restoreNodePositions(newVisualization);
+    const topologyModel = transformDataToTopologyModel(states, filteredStates);
 
-        setVisualization(newVisualization);
-      } else {
-        visualization.fromModel(topologyModel);
-        restoreNodePositions(visualization);
-      }
-    }
-  }, [states, loaded, error, selectedNodeFilters]);
-
-  useEffect(() => {
-    if (visualization) {
-      visualization.addEventListener(NODE_POSITIONING_EVENT, () =>
-        saveNodePositions(visualization),
+    if (!visualization) {
+      const newVisualization = new Visualization();
+      newVisualization.registerLayoutFactory(layoutFactory);
+      newVisualization.registerComponentFactory(componentFactory);
+      newVisualization.addEventListener(SELECTION_EVENT, setSelectedIds);
+      newVisualization.addEventListener(NODE_POSITIONING_EVENT, () =>
+        saveNodePositions(newVisualization),
       );
-      visualization.addEventListener(GRAPH_POSITIONING_EVENT, () =>
-        saveNodePositions(visualization),
+      newVisualization.addEventListener(GRAPH_POSITIONING_EVENT, () =>
+        saveNodePositions(newVisualization),
       );
+      newVisualization.setFitToScreenOnLayout(true);
+      newVisualization.fromModel(topologyModel, false);
+      restoreNodePositions(newVisualization);
+      setVisualization(newVisualization);
+    } else {
+      visualization.fromModel(topologyModel);
     }
-  }, [visualization]);
+  }, [states, loaded, error, selectedNodeFilters]);
+
+  if (error && error?.response?.status === 403)
+    return (
+      <ListPageBody>
+        <AccessDenied message={error.message} />
+      </ListPageBody>
+    );
 
   return (
-    <TopologyView
-      sideBar={
-        <TopologySidebar
-          states={states}
-          selectedIds={selectedIds}
-          setSelectedIds={setSelectedIds}
-        />
-      }
-      viewToolbar={
-        <TopologyToolbar
-          nodeNames={nodeNames}
-          selectedNodeFilters={selectedNodeFilters}
-          setSelectedNodeFilters={setSelectedNodeFilters}
-        />
-      }
-      controlBar={
-        <TopologyControlBar
-          controlButtons={createTopologyControlButtons({
-            ...defaultControlButtonsOptions,
-            zoomInCallback: action(() => {
-              visualization.getGraph().scaleBy(4 / 3);
-            }),
-            zoomOutCallback: action(() => {
-              visualization.getGraph().scaleBy(0.75);
-            }),
-            fitToScreenCallback: action(() => {
-              visualization.getGraph().fit(40);
-            }),
-            resetViewCallback: action(() => {
-              visualization.getGraph().reset();
-              visualization.getGraph().layout();
-            }),
-            legend: false,
-          })}
-        />
-      }
-    >
-      <VisualizationProvider controller={visualization}>
+    <VisualizationProvider controller={visualization}>
+      <TopologyView
+        sideBar={
+          <TopologySidebar
+            states={states}
+            selectedIds={selectedIds}
+            setSelectedIds={setSelectedIds}
+          />
+        }
+        viewToolbar={
+          <TopologyToolbar
+            nodeNames={nodeNames}
+            selectedNodeFilters={selectedNodeFilters}
+            setSelectedNodeFilters={setSelectedNodeFilters}
+          />
+        }
+        controlBar={
+          <TopologyControlBar
+            controlButtons={createTopologyControlButtons({
+              ...defaultControlButtonsOptions,
+              zoomInCallback: action(() => {
+                visualization.getGraph().scaleBy(4 / 3);
+              }),
+              zoomOutCallback: action(() => {
+                visualization.getGraph().scaleBy(0.75);
+              }),
+              fitToScreenCallback: action(() => {
+                visualization.getGraph().fit(40);
+              }),
+              resetViewCallback: action(() => {
+                visualization.getGraph().reset();
+                visualization.getGraph().layout();
+              }),
+              legend: false,
+            })}
+          />
+        }
+      >
         <VisualizationSurface state={{ selectedIds }} />
-      </VisualizationProvider>
-    </TopologyView>
+      </TopologyView>
+    </VisualizationProvider>
   );
 };
 

src/views/states/topology/components/CustomNode/CustomNode.tsx

@@ -18,24 +18,15 @@ type CustomNodeProps = {
   WithDragNodeProps &
   WithDndDropProps;
 
-const CustomNode: FC<CustomNodeProps> = ({ element, onSelect, selected, ...rest }) => {
+const CustomNode: FC<CustomNodeProps> = ({ element, ...rest }) => {
   const data = element.getData();
   const Icon = data.icon;
   const { width, height } = element.getBounds();
 
   const xCenter = (width - ICON_SIZE) / 2;
   const yCenter = (height - ICON_SIZE) / 2;
-
   return (
-    <DefaultNode
-      className="custom-node"
-      badge={data.badge}
-      element={element}
-      onSelect={onSelect}
-      selected={selected}
-      truncateLength={8}
-      {...rest}
-    >
+    <DefaultNode className="custom-node" element={element} truncateLength={8} {...rest}>
       <g transform={`translate(${xCenter}, ${yCenter})`}>
         <Icon width={ICON_SIZE} height={ICON_SIZE} />
       </g>

src/views/states/topology/utils/position.ts

@@ -8,16 +8,11 @@ export const saveNodePositions = (visualization: Visualization) => {
 
   // Traverse all nodes and their children
   graph.getNodes().forEach((node) => {
+    nodePositions[node.getId()] = node.getPosition();
     if (node.isGroup()) {
-      // Save the group node position
-      nodePositions[node.getId()] = node.getPosition();
-
-      // Save all child node positions
       node.getAllNodeChildren().forEach((childNode) => {
         nodePositions[childNode.getId()] = childNode.getPosition();
       });
-    } else {
-      nodePositions[node.getId()] = node.getPosition();
     }
   });