Merge pull request #2334 from avivtur/bulk-actions-not-changing

CNV-54239: selected VMs is not getting updates

src/views/virtualmachines/list/VirtualMachinesList.tsx

@@ -39,7 +39,7 @@ import { OBJECTS_FETCHING_LIMIT } from '@virtualmachines/utils';
 
 import { useVMListFilters } from '../utils';
 
-import VirtualMachineActionButton from './components/VirtualMachineActionButton';
+import VirtualMachineBulkActionButton from './components/VirtualMachineBulkActionButton';
 import VirtualMachineEmptyState from './components/VirtualMachineEmptyState/VirtualMachineEmptyState';
 import VirtualMachineListSummary from './components/VirtualMachineListSummary/VirtualMachineListSummary';
 import VirtualMachineRow from './components/VirtualMachineRow/VirtualMachineRow';
@@ -186,7 +186,7 @@ const VirtualMachinesList: FC<VirtualMachinesListProps> = ({ kind, namespace })
         <ListPageHeader title={t('VirtualMachines')}>
           <Flex>
             <FlexItem>
-              <VirtualMachineActionButton />
+              <VirtualMachineBulkActionButton vms={data} />
             </FlexItem>
             <FlexItem>
               <VirtualMachinesCreateButton namespace={namespace} />

src/views/virtualmachines/list/components/VirtualMachineBulkActionButton.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useMemo } from 'react';
+
+import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import ActionsDropdown from '@kubevirt-utils/components/ActionsDropdown/ActionsDropdown';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { convertResourceArrayToMap } from '@kubevirt-utils/resources/shared';
+import { isEmpty } from '@kubevirt-utils/utils/utils';
+import useMultipleVirtualMachineActions from '@virtualmachines/actions/hooks/useMultipleVirtualMachineActions';
+
+import { selectedVMs } from '../selectedVMs';
+
+type VirtualMachineBulkActionButtonProps = {
+  vms: V1VirtualMachine[];
+};
+const VirtualMachineBulkActionButton: FC<VirtualMachineBulkActionButtonProps> = ({ vms }) => {
+  const { t } = useKubevirtTranslation();
+
+  const selectedVirtualMachines = useMemo(() => {
+    const vmsMapper = convertResourceArrayToMap(vms, true);
+    return selectedVMs.value.map(
+      (selectedVM) => vmsMapper?.[selectedVM.namespace]?.[selectedVM.name],
+    );
+  }, [vms]);
+
+  const actions = useMultipleVirtualMachineActions(selectedVirtualMachines);
+
+  return (
+    <ActionsDropdown
+      actions={actions}
+      disabledTooltip={t('Select multiple VirtualMachines to perform an action for all of them')}
+      isDisabled={isEmpty(selectedVMs.value)}
+      variant="secondary"
+    />
+  );
+};
+
+export default VirtualMachineBulkActionButton;

src/views/virtualmachines/list/selectedVMs.ts

@@ -3,29 +3,38 @@ import { getName, getNamespace } from '@kubevirt-utils/resources/shared';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
 import { signal } from '@preact/signals-core';
 
-export const selectedVMs = signal<V1VirtualMachine[]>([]);
+export const selectedVMs = signal<{ name: string; namespace: string }[]>([]);
 
 export const selectVM = (vm: V1VirtualMachine) => {
-  if (isEmpty(findVM(vm))) selectedVMs.value = [...selectedVMs.value, vm];
+  const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) };
+  if (isEmpty(findVM(vm))) {
+    selectedVMs.value = [...selectedVMs.value, vmIdentifier];
+  }
 };
 
 export const deselectVM = (vm: V1VirtualMachine) => {
+  const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) };
   selectedVMs.value = selectedVMs.value.filter(
     (selectedVM) =>
-      getName(selectedVM) !== getName(vm) || getNamespace(selectedVM) !== getNamespace(vm),
+      selectedVM.name !== vmIdentifier.name || selectedVM.namespace !== vmIdentifier.namespace,
   );
 };
 
 export const selectAll = (vms: V1VirtualMachine[]) => {
-  selectedVMs.value = Array.from(new Set([...selectedVMs.value, ...vms]));
+  const vmIdentifiers = vms.map((vm) => ({ name: getName(vm), namespace: getNamespace(vm) }));
+  selectedVMs.value = [...vmIdentifiers];
 };
 
-export const deselectAll = () => (selectedVMs.value = []);
+export const deselectAll = () => {
+  selectedVMs.value = [];
+};
 
-export const findVM = (vm: V1VirtualMachine) =>
-  selectedVMs.value.find(
+export const findVM = (vm: V1VirtualMachine) => {
+  const vmIdentifier = { name: getName(vm), namespace: getNamespace(vm) };
+  return selectedVMs.value.find(
     (selectedVM) =>
-      getName(selectedVM) === getName(vm) && getNamespace(selectedVM) === getNamespace(vm),
+      selectedVM.name === vmIdentifier.name && selectedVM.namespace === vmIdentifier.namespace,
   );
+};
 
 export const isVMSelected = (vm: V1VirtualMachine): boolean => !isEmpty(findVM(vm));