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

Signed-off-by: Aviv Turgeman <[email protected]>
kubevirt-ui · Jun 29, 2023 · dfb99d2 · dfb99d2
1 parent 31a8fea
commit dfb99d2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}