continue menu implementation

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionCopyItem.vue

@@ -24,40 +24,28 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
-const { getByOpaqueRef } = useVmStore().subscribe()
+const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const selectedVms = computed(() =>
-  props.selectedRefs.map(vmRef => getByOpaqueRef(vmRef)).filter((vm): vm is XenApiVm => vm !== undefined)
-)
-
-const areAllSelectedVmsHalted = computed(
-  () =>
-    selectedVms.value.length > 0 &&
-    selectedVms.value.every(selectedVm => selectedVm.power_state === VM_POWER_STATE.HALTED)
-)
+const selectedVms = computed(() => getByOpaqueRefs(props.selectedRefs))
 
-const areSomeSelectedVmsCloning = computed(() =>
-  selectedVms.value.some(vm => isVmOperationPending(vm, VM_OPERATION.CLONE))
+const vmRefsToClone = computed(() =>
+  Object.fromEntries(selectedVms.value.map(vm => [vm.$ref, `${vm.name_label} (COPY)`]))
 )
 
-const isDisabled = computed(() => {
-  return selectedVms.value.length === 0 || !areAllSelectedVmsHalted.value
-})
-
 const menuItem = useMenuAction({
   parent: props.menu,
-  handler: async () => {
-    const vmRefsToClone = Object.fromEntries(selectedVms.value.map(vm => [vm.$ref, `${vm.name_label} (COPY)`]))
-
-    await useXenApiStore().getXapi().vm.clone(vmRefsToClone)
-  },
+  handler: () => useXenApiStore().getXapi().vm.clone(vmRefsToClone.value),
   disabled: () => {
-    if (!areAllSelectedVmsHalted.value) {
+    if (props.selectedRefs.length === 0) {
+      return true
+    }
+
+    if (!selectedVms.value.every(selectedVm => selectedVm.power_state === VM_POWER_STATE.HALTED)) {
       return props.isSingleAction ? t('vm-is-running') : t('selected-vms-in-execution')
     }
 
-    return isDisabled.value
+    return false
   },
-  busy: areSomeSelectedVmsCloning,
+  busy: computed(() => selectedVms.value.some(vm => isVmOperationPending(vm, VM_OPERATION.CLONE))),
 })
 </script>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionDeleteItem.vue

@@ -1,38 +1,47 @@
 <template>
-  <MenuItem
-    v-tooltip="areSomeVmsInExecution && $t('selected-vms-in-execution')"
-    :disabled="isDisabled"
-    :icon="faTrashCan"
-    @click="openDeleteModal"
-  >
+  <VtsMenuItem :icon="faTrashCan" v-bind="menuItem">
     {{ $t('delete') }}
-  </MenuItem>
+  </VtsMenuItem>
 </template>
 
 <script lang="ts" setup>
 import { useModal } from '@/composables/modal.composable'
 import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
 import { useVmStore } from '@/stores/xen-api/vm.store'
-import MenuItem from '@core/components/menu/MenuItem.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import VtsMenuItem from '@core/components/menu/VtsMenuItem.vue'
+import { type MenuLike, useMenuAction } from '@core/packages/menu'
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
+  menu: MenuLike
   vmRefs: XenApiVm['$ref'][]
 }>()
 
-const { getByOpaqueRef: getVm } = useVmStore().subscribe()
+const { t } = useI18n()
 
-const vms = computed<XenApiVm[]>(() => props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined))
+const { getByOpaqueRefs: getVms } = useVmStore().subscribe()
 
-const areSomeVmsInExecution = computed(() => vms.value.some(vm => vm.power_state !== VM_POWER_STATE.HALTED))
+const vms = computed(() => getVms(props.vmRefs))
 
-const isDisabled = computed(() => vms.value.length === 0 || areSomeVmsInExecution.value)
+const menuItem = useMenuAction({
+  parent: props.menu,
+  handler: () =>
+    useModal(() => import('@/components/modals/VmDeleteModal.vue'), {
+      vmRefs: props.vmRefs,
+    }),
+  disabled: computed(() => {
+    if (vms.value.length === 0) {
+      return true
+    }
 
-const openDeleteModal = () =>
-  useModal(() => import('@/components/modals/VmDeleteModal.vue'), {
-    vmRefs: props.vmRefs,
-  })
+    if (vms.value.some(vm => vm.power_state !== VM_POWER_STATE.HALTED)) {
+      return t('selected-vms-in-execution')
+    }
+
+    return false
+  }),
+})
 </script>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@/composables/context.composable'
 import { useModal } from '@/composables/modal.composable'
-import { DisabledContext } from '@/context'
 import { areSomeVmOperationAllowed } from '@/libs/vm'
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
@@ -28,13 +26,7 @@ const { t } = useI18n()
 
 const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const isParentDisabled = useContext(DisabledContext)
-
-const isSomeExportable = computed(() =>
-  getByOpaqueRefs(props.vmRefs).some(vm => areSomeVmOperationAllowed(vm, VM_OPERATION.EXPORT))
-)
-
-const isDisabled = computed(() => isParentDisabled.value || !isSomeExportable.value)
+const vms = computed(() => getByOpaqueRefs(props.vmRefs))
 
 const menuItem = useMenuAction({
   parent: props.menu,
@@ -43,11 +35,15 @@ const menuItem = useMenuAction({
       vmRefs: props.vmRefs,
     }),
   disabled: () => {
-    if (props.vmRefs.length > 0 && !isSomeExportable.value) {
+    if (props.vmRefs.length === 0) {
+      return true
+    }
+
+    if (!vms.value.some(vm => areSomeVmOperationAllowed(vm, VM_OPERATION.EXPORT))) {
       return props.isSingleAction ? t('vm-is-running') : t('no-selected-vm-can-be-exported')
     }
 
-    return isDisabled.value
+    return false
   },
 })
 </script>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItems.vue

@@ -33,14 +33,19 @@ const props = defineProps<{
   vmRefs: XenApiVm['$ref'][]
 }>()
 
-const { getByOpaqueRef: getVm } = useVmStore().subscribe()
-const vms = computed(() => props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined))
+const { getByOpaqueRefs } = useVmStore().subscribe()
+
+const vms = computed(() => getByOpaqueRefs(props.vmRefs))
 
 const toggle = useMenuToggle({
   parent: props.menu,
   items: {
-    exportAsJson: action(() => exportVmsAsJsonFile(vms.value, `vms_${new Date().toISOString()}.json`)),
-    exportAsCsv: action(() => exportVmsAsCsvFile(vms.value, `vms_${new Date().toISOString()}.csv`)),
+    exportAsJson: action(() => exportVmsAsJsonFile(vms.value, `vms_${new Date().toISOString()}.json`), {
+      disabled: computed(() => vms.value.length === 0),
+    }),
+    exportAsCsv: action(() => exportVmsAsCsvFile(vms.value, `vms_${new Date().toISOString()}.csv`), {
+      disabled: computed(() => vms.value.length === 0),
+    }),
   },
 })
 </script>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@/composables/context.composable'
 import { useModal } from '@/composables/modal.composable'
-import { DisabledContext } from '@/context'
 import { areSomeVmOperationAllowed, isVmOperationPending } from '@/libs/vm'
 import { VM_OPERATION } from '@/libs/xen-api/xen-api.enums'
 import type { XenApiVm } from '@/libs/xen-api/xen-api.types'
@@ -28,33 +26,25 @@ const { t } = useI18n()
 
 const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const isParentDisabled = useContext(DisabledContext)
-
 const vms = computed(() => getByOpaqueRefs(props.selectedRefs))
 
-const isMigratable = computed(() =>
-  vms.value.some(vm => areSomeVmOperationAllowed(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND]))
-)
-
-const isMigrating = computed(() =>
-  vms.value.some(vm => isVmOperationPending(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND]))
-)
-
 const menuItem = useMenuAction({
   parent: props.menu,
   handler: () =>
     useModal(() => import('@/components/modals/VmMigrateModal.vue'), {
       vmRefs: props.selectedRefs,
     }),
   disabled: () => {
-    if (isParentDisabled.value) {
+    if (props.selectedRefs.length === 0) {
       return true
     }
 
-    if (props.selectedRefs.length > 0 && !isMigratable.value) {
+    if (!vms.value.some(vm => areSomeVmOperationAllowed(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND]))) {
       return props.isSingleAction ? t('this-vm-cant-be-migrated') : t('no-selected-vm-can-be-migrated')
     }
   },
-  busy: isMigrating,
+  busy: computed(() =>
+    vms.value.some(vm => isVmOperationPending(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND]))
+  ),
 })
 </script>