CNV-29392: VM actions menu jumps when vms on list change state

Signed-off-by: Aviv Turgeman <[email protected]>
kubevirt-ui · Jul 2, 2023 · 091a9ac · 091a9ac
1 parent 31a8fea
commit 091a9ac
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 23 deletions.
diff --git a/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx b/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx
@@ -1,28 +1,20 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 
-import {
-  V1VirtualMachine,
-  V1VirtualMachineInstanceMigration,
-} from '@kubevirt-ui/kubevirt-api/kubevirt';
 import ActionDropdownItem from '@kubevirt-utils/components/ActionDropdownItem/ActionDropdownItem';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { getContentScrollableElement } from '@kubevirt-utils/utils/utils';
+import { Action } from '@openshift-console/dynamic-plugin-sdk';
 // import { LazyActionMenu } from '@openshift-console/dynamic-plugin-sdk-internal';
 import { Dropdown, DropdownPosition, DropdownToggle, KebabToggle } from '@patternfly/react-core';
-import useVirtualMachineActionsProvider from '@virtualmachines/actions/hooks/useVirtualMachineActionsProvider';
 
 type VirtualMachinesInstanceActionsProps = {
+  actions: Action[];
   isKebabToggle?: boolean;
-  isSingleNodeCluster: boolean;
-  vm: V1VirtualMachine;
-  vmim: V1VirtualMachineInstanceMigration;
 };
 
 const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
+  actions = [],
   isKebabToggle,
-  isSingleNodeCluster,
-  vm,
-  vmim,
 }) => {
   const { t } = useKubevirtTranslation();
   // TODO: use LazyActionMenu when fixed
@@ -34,7 +26,6 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
   //   />
   // );
   const [isOpen, setIsOpen] = useState(false);
-  const [actions] = useVirtualMachineActionsProvider(vm, vmim, isSingleNodeCluster);
 
   return (
     <Dropdown
@@ -57,4 +48,4 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
   );
 };
 
-export default VirtualMachineActions;
+export default memo(VirtualMachineActions);
diff --git a/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx b/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
@@ -9,6 +9,7 @@ import useSingleNodeCluster from '@kubevirt-utils/hooks/useSingleNodeCluster';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
 import { Label, Split, SplitItem } from '@patternfly/react-core';
 import VirtualMachineActions from '@virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions';
+import useVirtualMachineActionsProvider from '@virtualmachines/actions/hooks/useVirtualMachineActionsProvider';
 import useVirtualMachineInstanceMigration from '@virtualmachines/actions/hooks/useVirtualMachineInstanceMigration';
 import VMNotMigratableLabel from '@virtualmachines/list/components/VMNotMigratableLabel/VMNotMigratableLabel';
 
@@ -35,6 +36,7 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
   });
   const vmim = useVirtualMachineInstanceMigration(vm);
   const [isSingleNodeCluster] = useSingleNodeCluster();
+  const [actions] = useVirtualMachineActionsProvider(vm, vmim, isSingleNodeCluster);
 
   const StatusIcon = getVMStatusIcon(vm?.status?.printableStatus);
 
@@ -65,7 +67,7 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
             </SplitItem>
           )}
           <SplitItem>
-            <VirtualMachineActions isSingleNodeCluster={isSingleNodeCluster} vm={vm} vmim={vmim} />
+            <VirtualMachineActions actions={actions} />
           </SplitItem>
         </Split>
       </span>

diff --git a/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx b/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx
@@ -5,8 +5,10 @@ import {
   V1VirtualMachineInstanceMigration,
 } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import Timestamp from '@kubevirt-utils/components/Timestamp/Timestamp';
+import { getName, getNamespace } from '@kubevirt-utils/resources/shared';
 import { ResourceLink, RowProps, TableData } from '@openshift-console/dynamic-plugin-sdk';
 import VirtualMachineActions from '@virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions';
+import useVirtualMachineActionsProvider from '@virtualmachines/actions/hooks/useVirtualMachineActionsProvider';
 
 import VirtualMachineStatus from '../VirtualMachineStatus/VirtualMachineStatus';
 import { VMStatusConditionLabelList } from '../VMStatusConditionLabel';
@@ -25,17 +27,18 @@ const VirtualMachineRowLayout: React.FC<
     }
   >
 > = ({ activeColumnIDs, obj, rowData: { ips, isSingleNodeCluster, kind, node, vmim } }) => {
+  const [actions] = useVirtualMachineActionsProvider(obj, vmim, isSingleNodeCluster);
   return (
     <>
       <TableData activeColumnIDs={activeColumnIDs} className="pf-m-width-15 vm-column" id="name">
-        <ResourceLink kind={kind} name={obj.metadata.name} namespace={obj.metadata.namespace} />
+        <ResourceLink kind={kind} name={getName(obj)} namespace={getNamespace(obj)} />
       </TableData>
       <TableData
         activeColumnIDs={activeColumnIDs}
         className="pf-m-width-10 vm-column"
         id="namespace"
       >
-        <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
+        <ResourceLink kind="Namespace" name={getNamespace(obj)} />
       </TableData>
       <TableData activeColumnIDs={activeColumnIDs} className="pf-m-width-15 vm-column" id="status">
         <VirtualMachineStatus vm={obj} />
@@ -65,12 +68,7 @@ const VirtualMachineRowLayout: React.FC<
         className="dropdown-kebab-pf pf-c-table__action"
         id=""
       >
-        <VirtualMachineActions
-          isKebabToggle
-          isSingleNodeCluster={isSingleNodeCluster}
-          vm={obj}
-          vmim={vmim}
-        />
+        <VirtualMachineActions actions={actions} isKebabToggle />
       </TableData>
     </>
   );