From 24290980d69256cc706874a16936d8fe47ab7341 Mon Sep 17 00:00:00 2001
From: Thierry <thierry@byscripts.info>
Date: Thu, 14 Nov 2024 10:21:43 +0100
Subject: [PATCH 1/2] feat(web-core): add useDisabled composable, deprecate
 useContext, and replace DisabledContext usage

---
 .../lite/src/components/RouterTab.vue         | 16 ++++-----
 .../lite/src/components/form/FormCheckbox.vue | 18 ++++------
 .../lite/src/components/form/FormInput.vue    | 34 +++++++++----------
 .../src/components/form/FormInputWrapper.vue  | 30 ++++++++--------
 .../lite/src/components/ui/UiActionButton.vue | 20 +++++------
 .../lite/src/components/ui/modals/UiModal.vue |  5 +--
 .../vm/VmActionItems/VmActionExportItem.vue   |  7 ++--
 .../vm/VmActionItems/VmActionMigrateItem.vue  |  9 +++--
 @xen-orchestra/lite/src/context.ts            |  2 --
 .../web-core/lib/components/menu/MenuItem.vue | 20 +++++------
 .../web-core/lib/components/menu/MenuList.vue | 20 +++++------
 .../web-core/lib/components/tab/TabItem.vue   |  7 ++--
 .../web-core/lib/components/tab/TabList.vue   | 14 +++-----
 .../lib/components/ui/button/UiButton.vue     | 28 ++++++---------
 .../lib/components/ui/checkbox/UiCheckbox.vue | 24 ++++++-------
 .../lib/composables/disabled.composable.ts    | 15 ++++++++
 @xen-orchestra/web-core/lib/context.ts        | 10 ------
 .../web-core/lib/utils/injection-keys.util.ts |  2 ++
 18 files changed, 122 insertions(+), 159 deletions(-)
 create mode 100644 @xen-orchestra/web-core/lib/composables/disabled.composable.ts
 delete mode 100644 @xen-orchestra/web-core/lib/context.ts

diff --git a/@xen-orchestra/lite/src/components/RouterTab.vue b/@xen-orchestra/lite/src/components/RouterTab.vue
index ba35972099c..95a3615fe59 100644
--- a/@xen-orchestra/lite/src/components/RouterTab.vue
+++ b/@xen-orchestra/lite/src/components/RouterTab.vue
@@ -13,17 +13,13 @@
 
 <script lang="ts" setup>
 import TabItem from '@core/components/tab/TabItem.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { RouteLocationRaw } from 'vue-router'
 
-const props = withDefaults(
-  defineProps<{
-    to: RouteLocationRaw
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  to: RouteLocationRaw
+  disabled?: boolean
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 </script>
diff --git a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
index 313c2a1739a..efd033995d7 100644
--- a/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
+++ b/@xen-orchestra/lite/src/components/form/FormCheckbox.vue
@@ -16,23 +16,19 @@
 
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useContext } from '@/composables/context.composable'
-import { DisabledContext } from '@/context'
 import { IK_CHECKBOX_TYPE, IK_FORM_HAS_LABEL } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { faCheck, faCircle, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { useVModel } from '@vueuse/core'
 import { computed, type HTMLAttributes, inject, useAttrs } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: unknown
-    disabled?: boolean
-    wrapperAttrs?: HTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  modelValue?: unknown
+  disabled?: boolean
+  wrapperAttrs?: HTMLAttributes
+}>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -46,7 +42,7 @@ const hasLabel = inject(
   IK_FORM_HAS_LABEL,
   computed(() => false)
 )
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 const icon = computed(() => {
   if (type !== 'checkbox') {
     return faCircle
diff --git a/@xen-orchestra/lite/src/components/form/FormInput.vue b/@xen-orchestra/lite/src/components/form/FormInput.vue
index 0e62dc72b44..f94c2bc5156 100644
--- a/@xen-orchestra/lite/src/components/form/FormInput.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInput.vue
@@ -53,9 +53,10 @@
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_INPUT_ID, IK_INPUT_TYPE } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { useTextareaAutosize, useVModel } from '@vueuse/core'
@@ -63,22 +64,19 @@ import { computed, type HTMLAttributes, inject, nextTick, ref, useAttrs, watch }
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    modelValue?: any
-    color?: Color
-    before?: IconDefinition | string
-    after?: IconDefinition | string
-    beforeWidth?: string
-    afterWidth?: string
-    disabled?: boolean
-    required?: boolean
-    right?: boolean
-    wrapperAttrs?: HTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  id?: string
+  modelValue?: any
+  color?: Color
+  before?: IconDefinition | string
+  after?: IconDefinition | string
+  beforeWidth?: string
+  afterWidth?: string
+  disabled?: boolean
+  required?: boolean
+  right?: boolean
+  wrapperAttrs?: HTMLAttributes
+}>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: any]
@@ -94,7 +92,7 @@ const value = useVModel(props, 'modelValue', emit)
 const isEmpty = computed(() => props.modelValue == null || String(props.modelValue).trim() === '')
 const inputType = inject(IK_INPUT_TYPE, 'input')
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const wrapperClass = computed(() => [
   `form-${inputType}`,
diff --git a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
index c43e3b6f83e..7c53c03c776 100644
--- a/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
+++ b/@xen-orchestra/lite/src/components/form/FormInputWrapper.vue
@@ -36,28 +36,26 @@
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_FORM_HAS_LABEL, IK_INPUT_ID } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import { uniqueId } from 'lodash-es'
 import { computed, provide, useSlots } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    id?: string
-    icon?: IconDefinition
-    learnMoreUrl?: string
-    warning?: string
-    error?: string
-    help?: string
-    disabled?: boolean
-    light?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  label?: string
+  id?: string
+  icon?: IconDefinition
+  learnMoreUrl?: string
+  warning?: string
+  error?: string
+  help?: string
+  disabled?: boolean
+  light?: boolean
+}>()
 
 const slots = useSlots()
 
@@ -82,7 +80,7 @@ provide(
 )
 
 useContext(ColorContext, color)
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/lite/src/components/ui/UiActionButton.vue b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
index a63d71fad7c..1c2c7ac7f14 100644
--- a/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
+++ b/@xen-orchestra/lite/src/components/ui/UiActionButton.vue
@@ -17,21 +17,17 @@
 
 <script lang="ts" setup>
 import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useContext } from '@/composables/context.composable'
-import { DisabledContext } from '@/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-const props = withDefaults(
-  defineProps<{
-    busy?: boolean
-    disabled?: boolean
-    icon?: IconDefinition
-    active?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  busy?: boolean
+  disabled?: boolean
+  icon?: IconDefinition
+  active?: boolean
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
index 67c4e0b6f23..1a4e53cc903 100644
--- a/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
+++ b/@xen-orchestra/lite/src/components/ui/modals/UiModal.vue
@@ -8,9 +8,10 @@
 
 <script lang="ts" setup>
 import { useContext } from '@/composables/context.composable'
-import { ColorContext, DisabledContext } from '@/context'
+import { ColorContext } from '@/context'
 import type { Color } from '@/types'
 import { IK_MODAL } from '@/types/injection-keys'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { inject, useAttrs } from 'vue'
 
@@ -28,7 +29,7 @@ const attrs = useAttrs()
 const modal = inject(IK_MODAL)!
 
 useContext(ColorContext, () => props.color)
-useContext(DisabledContext, () => props.disabled || modal.isBusy)
+useDisabled(() => props.disabled || modal.isBusy)
 
 const { escape } = useMagicKeys()
 
diff --git a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
index 446b2875ec8..42fa5086090 100644
--- a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionExportItem.vue
@@ -12,14 +12,13 @@
 </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'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -31,13 +30,11 @@ const props = defineProps<{
 
 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 isDisabled = useDisabled(() => !isSomeExportable.value)
 
 const openModal = () => {
   useModal(() => import('@/components/modals/VmExportModal.vue'), {
diff --git a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
index b36d302546d..61de97a5c3b 100644
--- a/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
+++ b/@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue
@@ -6,7 +6,7 @@
       $t(isSingleAction ? 'this-vm-cant-be-migrated' : 'no-selected-vm-can-be-migrated')
     "
     :busy="isMigrating"
-    :disabled="isParentDisabled || !isMigratable"
+    :disabled="isDisabled"
     :icon="faRoute"
     @click="openModal()"
   >
@@ -15,14 +15,13 @@
 </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'
 import { useVmStore } from '@/stores/xen-api/vm.store'
 import MenuItem from '@core/components/menu/MenuItem.vue'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { faRoute } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -34,8 +33,6 @@ const props = defineProps<{
 
 const { getByOpaqueRefs } = useVmStore().subscribe()
 
-const isParentDisabled = useContext(DisabledContext)
-
 const isMigratable = computed(() =>
   getByOpaqueRefs(props.selectedRefs).some(vm =>
     areSomeVmOperationAllowed(vm, [VM_OPERATION.POOL_MIGRATE, VM_OPERATION.MIGRATE_SEND])
@@ -48,6 +45,8 @@ const isMigrating = computed(() =>
   )
 )
 
+const isDisabled = useDisabled(() => !isMigratable.value)
+
 const openModal = () =>
   useModal(() => import('@/components/modals/VmMigrateModal.vue'), {
     vmRefs: props.selectedRefs,
diff --git a/@xen-orchestra/lite/src/context.ts b/@xen-orchestra/lite/src/context.ts
index 6d278574202..b9f6b24af25 100644
--- a/@xen-orchestra/lite/src/context.ts
+++ b/@xen-orchestra/lite/src/context.ts
@@ -2,8 +2,6 @@ import { createContext } from '@/composables/context.composable'
 import type { Color } from '@/types'
 import { computed } from 'vue'
 
-export const DisabledContext = createContext(false)
-
 export const ColorContext = createContext('info' as Color, color => ({
   name: color,
   textClass: computed(() => `context-color-${color.value}`),
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
index fd9fb27d288..33de9c364e0 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuItem.vue
@@ -27,28 +27,24 @@
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
 import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { computed, inject, ref } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    icon?: IconDefinition
-    onClick?: () => any
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  icon?: IconDefinition
+  onClick?: () => any
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const isParentHorizontal = inject(
   IK_MENU_HORIZONTAL,
   computed(() => false)
 )
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const submenuIcon = computed(() => (isParentHorizontal.value ? faAngleDown : faAngleRight))
 
diff --git a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
index e3e28ee3f87..c2190a6b7e6 100644
--- a/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
+++ b/@xen-orchestra/web-core/lib/components/menu/MenuList.vue
@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
 import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
@@ -20,15 +19,12 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(
-  defineProps<{
-    horizontal?: boolean
-    border?: boolean
-    disabled?: boolean
-    placement?: Options['placement']
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  horizontal?: boolean
+  border?: boolean
+  disabled?: boolean
+  placement?: Options['placement']
+}>()
 
 const slots = useSlots()
 const isOpen = ref(false)
@@ -42,7 +38,7 @@ provide(
   computed(() => props.horizontal ?? false)
 )
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 
 let clearClickOutsideEvent: (() => void) | undefined
 
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
index 7b60d861142..67b22108070 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/TabItem.vue
@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { useUiStore } from '@core/stores/ui.store'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -18,12 +17,12 @@ const props = withDefaults(
     active?: boolean
     tag?: string
   }>(),
-  { tag: 'span', disabled: undefined }
+  { tag: 'span' }
 )
 
 const { isMobile } = storeToRefs(useUiStore())
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => {
   return [
diff --git a/@xen-orchestra/web-core/lib/components/tab/TabList.vue b/@xen-orchestra/web-core/lib/components/tab/TabList.vue
index c515828d658..d3d7d55ef4e 100644
--- a/@xen-orchestra/web-core/lib/components/tab/TabList.vue
+++ b/@xen-orchestra/web-core/lib/components/tab/TabList.vue
@@ -6,17 +6,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  disabled?: boolean
+}>()
 
-useContext(DisabledContext, () => props.disabled)
+useDisabled(() => props.disabled)
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
index 4035fb6f573..8ba64ac81c2 100644
--- a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue
@@ -9,8 +9,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faLock } from '@fortawesome/free-solid-svg-icons'
@@ -20,26 +19,21 @@ type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
 type ButtonAccent = 'info' | 'success' | 'warning' | 'danger'
 type ButtonSize = 'small' | 'medium' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    variant: ButtonVariant
-    accent: ButtonAccent
-    size: ButtonSize
-    busy?: boolean
-    disabled?: boolean
-    lockIcon?: boolean
-    leftIcon?: IconDefinition
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const props = defineProps<{
+  variant: ButtonVariant
+  accent: ButtonAccent
+  size: ButtonSize
+  busy?: boolean
+  disabled?: boolean
+  lockIcon?: boolean
+  leftIcon?: IconDefinition
+}>()
 
 defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const fontClasses = {
   small: 'typo p3-medium',
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
index 8b1bdaf05b3..bc8860c6d8a 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -1,16 +1,16 @@
 <!-- v3 -->
 <template>
-  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+  <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
     <input
       v-model="checkboxModel"
       :class="{ indeterminate: isIndeterminate }"
       :disabled="isDisabled"
-      type="checkbox"
       class="input"
+      type="checkbox"
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon class="icon" accent="info" />
+      <VtsIcon :icon accent="info" class="icon" />
     </span>
     <span v-if="slots.default" class="typo p1-regular">
       <slot />
@@ -24,8 +24,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
@@ -34,14 +33,11 @@ type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    accent: CheckboxAccent
-    disabled?: boolean
-    wrapperAttrs?: LabelHTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  accent: CheckboxAccent
+  disabled?: boolean
+  wrapperAttrs?: LabelHTMLAttributes
+}>()
 
 const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
 
@@ -50,7 +46,7 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => [
   toVariants({
diff --git a/@xen-orchestra/web-core/lib/composables/disabled.composable.ts b/@xen-orchestra/web-core/lib/composables/disabled.composable.ts
new file mode 100644
index 00000000000..6c0ccfbb06c
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/composables/disabled.composable.ts
@@ -0,0 +1,15 @@
+import { IK_DISABLED } from '@core/utils/injection-keys.util'
+import { computed, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'
+
+export function useDisabled(condition?: MaybeRefOrGetter<boolean>) {
+  const previousValue = inject(
+    IK_DISABLED,
+    computed(() => false)
+  )
+
+  const currentValue = computed(() => previousValue.value || toValue(condition ?? false))
+
+  provide(IK_DISABLED, currentValue)
+
+  return currentValue
+}
diff --git a/@xen-orchestra/web-core/lib/context.ts b/@xen-orchestra/web-core/lib/context.ts
deleted file mode 100644
index 4c060d25bac..00000000000
--- a/@xen-orchestra/web-core/lib/context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createContext } from '@core/composables/context.composable'
-import type { Color } from '@core/types/color.type'
-import { computed } from 'vue'
-
-export const DisabledContext = createContext(false)
-
-export const ColorContext = createContext('info' as Color, (color, previousColor) => ({
-  name: color,
-  colorContextClass: computed(() => (previousColor.value === color.value ? undefined : `color-context-${color.value}`)),
-}))
diff --git a/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts b/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
index c5f8c5974b6..f8623413a0e 100644
--- a/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
+++ b/@xen-orchestra/web-core/lib/utils/injection-keys.util.ts
@@ -15,3 +15,5 @@ export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<C
 export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
 
 export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<boolean>
+
+export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boolean>>

From 208ad3a98f436f26225da142ad0f8384c1e5fb76 Mon Sep 17 00:00:00 2001
From: Thierry <thierry@byscripts.info>
Date: Fri, 20 Dec 2024 10:11:32 +0100
Subject: [PATCH 2/2] rebase on master, update missing replacement

---
 .../UiAccountMenuButton.vue                   |  5 ++--
 .../ui/dropdown-button/UiDropdownButton.vue   | 22 +++++++--------
 .../ui/radio-button/UiRadioButton.vue         | 27 +++++++++----------
 .../lib/components/ui/toggle/UiToggle.vue     | 16 +++++------
 4 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/@xen-orchestra/web-core/lib/components/ui/account-menu-button/UiAccountMenuButton.vue b/@xen-orchestra/web-core/lib/components/ui/account-menu-button/UiAccountMenuButton.vue
index 38b1a12a85e..8114c0a75dd 100644
--- a/@xen-orchestra/web-core/lib/components/ui/account-menu-button/UiAccountMenuButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/account-menu-button/UiAccountMenuButton.vue
@@ -7,15 +7,14 @@
 
 <script lang="ts" setup>
 import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
 defineProps<{
   size: 'small' | 'medium'
   selected?: boolean
 }>()
 
-const isDisabled = useContext(DisabledContext)
+const isDisabled = useDisabled()
 </script>
 
 <style lang="postcss" scoped>
diff --git a/@xen-orchestra/web-core/lib/components/ui/dropdown-button/UiDropdownButton.vue b/@xen-orchestra/web-core/lib/components/ui/dropdown-button/UiDropdownButton.vue
index 27efe5ff86d..91bdc432bbc 100644
--- a/@xen-orchestra/web-core/lib/components/ui/dropdown-button/UiDropdownButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/dropdown-button/UiDropdownButton.vue
@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <button type="button" class="ui-dropdown-item" :class="{ selected }" :disabled="isDisabled">
+  <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-icon" fixed-width />
     <span class="typo p1-regular label">
       <slot />
@@ -11,24 +11,20 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    selected?: boolean
-    icon?: IconDefinition
-  }>(),
-  { disabled: undefined }
-)
+const { disabled, selected, icon } = defineProps<{
+  disabled?: boolean
+  selected?: boolean
+  icon?: IconDefinition
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .ui-dropdown-item {
   display: inline-flex;
   align-items: center;
diff --git a/@xen-orchestra/web-core/lib/components/ui/radio-button/UiRadioButton.vue b/@xen-orchestra/web-core/lib/components/ui/radio-button/UiRadioButton.vue
index e3b397af5ea..2e8cf70e961 100644
--- a/@xen-orchestra/web-core/lib/components/ui/radio-button/UiRadioButton.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/radio-button/UiRadioButton.vue
@@ -2,7 +2,7 @@
 <template>
   <label :class="variant" class="ui-radio-button typo p1-regular">
     <span class="radio-container">
-      <input v-model="model" :value :disabled="isDisabled" class="input" type="radio" />
+      <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
       <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
     </span>
     <slot />
@@ -11,31 +11,26 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    accent: 'info' | 'success' | 'warning' | 'danger'
-    value: any
-    disabled?: boolean
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const { accent, value, disabled } = defineProps<{
+  accent: 'info' | 'success' | 'warning' | 'danger'
+  value: any
+  disabled?: boolean
+}>()
+
 const model = defineModel<boolean>()
 
 defineSlots<{
   default(): any
 }>()
 
-const variant = computed(() => toVariants({ accent: props.accent }))
+const variant = computed(() => toVariants({ accent }))
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>
@@ -60,6 +55,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
 
     &:has(input:focus-visible) {
       outline: none;
+
       &::after {
         position: absolute;
         content: '';
@@ -68,6 +64,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
         border-radius: 0.4rem;
       }
     }
+
     &:has(.input:disabled) {
       cursor: not-allowed;
 
diff --git a/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue b/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue
index bb73443081a..c52b1f99c5e 100644
--- a/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/toggle/UiToggle.vue
@@ -13,16 +13,12 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const { busy, disabled } = defineProps<{
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const checked = defineModel<boolean>()
 
@@ -30,7 +26,7 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>