Merge pull request #1379 from avivtur/vm-actions-menu-is-moving

CNV-29392: VM actions menu jumps when vms on list change state
kubevirt-ui · Jul 4, 2023 · d96c62c · d96c62c
2 parents cf59dd8 + af801b8
commit d96c62c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 43 deletions.
diff --git a/...views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.scss b/...views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.scss
@@ -0,0 +1,5 @@
+.VirtualMachineActions.pf-c-dropdown.pf-m-expanded {
+  ul {
+    transform: translate(-150px, 0);
+  }
+}
diff --git a/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx b/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.tsx
@@ -1,40 +1,23 @@
-import React, { useState } from 'react';
+import React, { FC, 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 { LazyActionMenu } from '@openshift-console/dynamic-plugin-sdk-internal';
-import { Dropdown, DropdownPosition, DropdownToggle, KebabToggle } from '@patternfly/react-core';
-import useVirtualMachineActionsProvider from '@virtualmachines/actions/hooks/useVirtualMachineActionsProvider';
+import { Action } from '@openshift-console/dynamic-plugin-sdk';
+import { Dropdown, DropdownToggle, KebabToggle } from '@patternfly/react-core';
+
+import './VirtualMachineActions.scss';
 
 type VirtualMachinesInstanceActionsProps = {
+  actions: Action[];
   isKebabToggle?: boolean;
-  isSingleNodeCluster: boolean;
-  vm: V1VirtualMachine;
-  vmim: V1VirtualMachineInstanceMigration;
 };
 
-const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
+const VirtualMachineActions: FC<VirtualMachinesInstanceActionsProps> = ({
+  actions = [],
   isKebabToggle,
-  isSingleNodeCluster,
-  vm,
-  vmim,
 }) => {
   const { t } = useKubevirtTranslation();
-  // TODO: use LazyActionMenu when fixed
-  // return (
-  //   <LazyActionMenu
-  //     variant={variant}
-  //     key={vm?.metadata?.name}
-  //     context={{ [VirtualMachineModelRef]: vm }}
-  //   />
-  // );
   const [isOpen, setIsOpen] = useState(false);
-  const [actions] = useVirtualMachineActionsProvider(vm, vmim, isSingleNodeCluster);
 
   return (
     <Dropdown
@@ -48,13 +31,14 @@ const VirtualMachineActions: React.FC<VirtualMachinesInstanceActionsProps> = ({
           <DropdownToggle onToggle={setIsOpen}>{t('Actions')}</DropdownToggle>
         )
       }
+      className="VirtualMachineActions"
       data-test-id="virtual-machine-actions"
+      isFlipEnabled
       isOpen={isOpen}
       isPlain={isKebabToggle}
-      menuAppendTo={getContentScrollableElement}
-      position={DropdownPosition.right}
+      menuAppendTo="parent"
     />
   );
 };
 
-export default VirtualMachineActions;
+export default memo(VirtualMachineActions);
diff --git a/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx b/src/views/virtualmachines/details/VirtualMachineNavPageTitle.tsx
@@ -7,11 +7,11 @@ import Loading from '@kubevirt-utils/components/Loading/Loading';
 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 { isEmpty } from '@kubevirt-utils/utils/utils';
 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';
 
@@ -38,6 +38,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);
 
@@ -68,12 +69,8 @@ const VirtualMachineNavPageTitle: FC<VirtualMachineNavPageTitleProps> = ({ name,
             </SplitItem>
           )}
           {!isEmpty(vm) ? (
-            <SplitItem id={getName(vm)}>
-              <VirtualMachineActions
-                isSingleNodeCluster={isSingleNodeCluster}
-                vm={vm}
-                vmim={vmim}
-              />
+            <SplitItem>
+              <VirtualMachineActions actions={actions} />
             </SplitItem>
           ) : (
             <Loading />

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