From dfb99d262886d0cb437d185a4e60588c8482cc7b Mon Sep 17 00:00:00 2001
From: Aviv Turgeman <aturgema@redhat.com>
Date: Thu, 29 Jun 2023 12:48:41 +0300
Subject: [PATCH] CNV-29392: VM actions menu jumps when vms on list change
 state

Signed-off-by: Aviv Turgeman <aturgema@redhat.com>
---
 .../VirtualMachineActions/VirtualMachineActions.tsx      | 4 ++--
 .../details/VirtualMachineNavPageTitle.tsx               | 3 ++-
 .../VirtualMachineRow/VirtualMachineRowLayout.tsx        | 9 +++++----
 .../VirtualMachineRow/virtual-machine-row-layout.scss    | 4 ++++
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx b/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx
index 13b4000a30..80a30180f5 100644
--- a/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx
+++ b/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx
@@ -6,7 +6,7 @@ import {
 } 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 { getName } from '@kubevirt-utils/resources/shared';
 // 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';
@@ -51,7 +51,7 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
       data-test-id="virtual-machine-actions"
       isOpen={isOpen}
       isPlain={isKebabToggle}
-      menuAppendTo={getContentScrollableElement}
+      menuAppendTo={() => document.getElementById(getName(vm))}
       position={DropdownPosition.right}
     />
   );
diff --git a/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx b/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
index 82965a69d9..ce57fa2c23 100644
--- a/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
+++ b/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
@@ -6,6 +6,7 @@ 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';
@@ -64,7 +65,7 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
               <SidebarEditorSwitch />
             </SplitItem>
           )}
-          <SplitItem>
+          <SplitItem id={getName(vm)}>
             <VirtualMachineActions isSingleNodeCluster={isSingleNodeCluster} vm={vm} vmim={vmim} />
           </SplitItem>
         </Split>
diff --git a/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx b/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx
index 7d4f538306..706c9ab934 100644
--- a/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx
+++ b/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx
@@ -5,6 +5,7 @@ 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';
 
@@ -26,16 +27,16 @@ const VirtualMachineRowLayout: React.FC<
   >
 > = ({ activeColumnIDs, obj, rowData: { ips, isSingleNodeCluster, kind, node, vmim } }) => {
   return (
-    <>
+    <tr className="borderless" id={getName(obj)}>
       <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} />
@@ -72,7 +73,7 @@ const VirtualMachineRowLayout: React.FC<
           vmim={vmim}
         />
       </TableData>
-    </>
+    </tr>
   );
 };
 
diff --git a/src/views/virtualmachines/list/components/VirtualMachineRow/virtual-machine-row-layout.scss b/src/views/virtualmachines/list/components/VirtualMachineRow/virtual-machine-row-layout.scss
index bd9024289e..99ff1702d8 100644
--- a/src/views/virtualmachines/list/components/VirtualMachineRow/virtual-machine-row-layout.scss
+++ b/src/views/virtualmachines/list/components/VirtualMachineRow/virtual-machine-row-layout.scss
@@ -1,3 +1,7 @@
 .pf-c-table td.vm-column:empty {
   width: var(--pf-c-table--cell--Width);
 }
+
+.pf-c-table tr.borderless {
+  border: none;
+}
\ No newline at end of file