diff --git a/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.scss b/src/views/virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions.scss new file mode 100644 index 000000000..c739c9a5f --- /dev/null +++ b/src/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 index 13b4000a3..66649a833 100644 --- 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 = ({ +const VirtualMachineActions: FC = ({ + actions = [], isKebabToggle, - isSingleNodeCluster, - vm, - vmim, }) => { const { t } = useKubevirtTranslation(); - // TODO: use LazyActionMenu when fixed - // return ( - // - // ); const [isOpen, setIsOpen] = useState(false); - const [actions] = useVirtualMachineActionsProvider(vm, vmim, isSingleNodeCluster); return ( = ({ {t('Actions')} ) } + 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 index cac370092..38deb8a2d 100644 --- 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 = ({ 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 = ({ name, )} {!isEmpty(vm) ? ( - - + + ) : ( diff --git a/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx b/src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx index 7d4f53830..a63da4a8d 100644 --- 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 ( <> - + - + @@ -65,12 +68,7 @@ const VirtualMachineRowLayout: React.FC< className="dropdown-kebab-pf pf-c-table__action" id="" > - + );