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

Signed-off-by: Aviv Turgeman <[email protected]>

src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx

@@ -1,28 +1,20 @@
-import React, { useState } from 'react';
+import React, { memo, useMemo, 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,13 +26,16 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
   //   />
   // );
   const [isOpen, setIsOpen] = useState(false);
-  const [actions] = useVirtualMachineActionsProvider(vm, vmim, isSingleNodeCluster);
+  const items = useMemo(
+    () =>
+      actions?.map((action) => (
+        <ActionDropdownItem action={action} key={action?.id} setIsOpen={setIsOpen} />
+      )),
+    [actions],
+  );
 
   return (
     <Dropdown
-      dropdownItems={actions?.map((action) => (
-        <ActionDropdownItem action={action} key={action?.id} setIsOpen={setIsOpen} />
-      ))}
       toggle={
         isKebabToggle ? (
           <KebabToggle onToggle={setIsOpen} />
@@ -49,6 +44,7 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
         )
       }
       data-test-id="virtual-machine-actions"
+      dropdownItems={items}
       isOpen={isOpen}
       isPlain={isKebabToggle}
       menuAppendTo={getContentScrollableElement}
@@ -57,4 +53,4 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
   );
 };
 
-export default VirtualMachineActions;
+export default memo(VirtualMachineActions);

src/views/virtualmachines/actions/hooks/useVirtualMachineActionsProvider.ts

@@ -26,15 +26,16 @@ const useVirtualMachineActionsProvider: UseVirtualMachineActionsProvider = (
   isSingleNodeCluster,
 ) => {
   const { createModal } = useModal();
-  const userName = getCloudInitCredentials(vm)?.users?.[0]?.name;
-  const virtctlCommand = getConsoleVirtctlCommand(
-    userName,
-    vm?.metadata?.name,
-    vm?.metadata?.namespace,
-  );
 
   const [, inFlight] = useK8sModel(VirtualMachineModelRef);
   const actions: Action[] = React.useMemo(() => {
+    const userName = getCloudInitCredentials(vm)?.users?.[0]?.name;
+    const virtctlCommand = getConsoleVirtctlCommand(
+      userName,
+      vm?.metadata?.name,
+      vm?.metadata?.namespace,
+    );
+
     const printableStatus = vm?.status?.printableStatus;
     const { Migrating, Paused } = printableVMStatus;
 
@@ -70,7 +71,7 @@ const useVirtualMachineActionsProvider: UseVirtualMachineActionsProvider = (
       VirtualMachineActionFactory.editAnnotations(vm, createModal),
       VirtualMachineActionFactory.delete(vm, createModal),
     ];
-  }, [vm, vmim, isSingleNodeCluster, createModal, virtctlCommand]);
+  }, [vm, vmim, isSingleNodeCluster, createModal]);
 
   return React.useMemo(() => [actions, !inFlight, undefined], [actions, inFlight]);
 };

src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx

@@ -6,9 +6,11 @@ import { V1VirtualMachine, V1VirtualMachineInstance } from '@kubevirt-ui/kubevir
 import SidebarEditorSwitch from '@kubevirt-utils/components/SidebarEditor/SidebarEditorSwitch';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import useSingleNodeCluster from '@kubevirt-utils/hooks/useSingleNodeCluster';
+import { getName } from '@kubevirt-utils/resources/shared';
 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 +37,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);
 
@@ -64,8 +67,8 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
               <SidebarEditorSwitch />
             </SplitItem>
           )}
-          <SplitItem>
-            <VirtualMachineActions isSingleNodeCluster={isSingleNodeCluster} vm={vm} vmim={vmim} />
+          <SplitItem id={getName(vm)}>
+            <VirtualMachineActions actions={actions} />
           </SplitItem>
         </Split>
       </span>

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>
     </>
   );