feat(xo-web) add VtsEnabledState from [#8521](https://github.com/vatesfr/xen-orchestra/pull/8521/files#diff-38e34d645fd18a178735268961d29214f9e9b683e3849d7766bc35ba7da64427)

Author: UnelDev

@xen-orchestra/web-core/lib/components/enabled-state/VtsEnabledState.vue

@@ -0,0 +1,21 @@
+<template>
+  <UiInfo :accent="state.accent">
+    {{ state.label }}
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+type StatesMap = Record<'enabled' | 'disabled', { label: string; accent: InfoAccent }>
+const { enabled = false } = defineProps<{
+  enabled?: boolean
+}>()
+const { t } = useI18n()
+const statesMap: StatesMap = {
+  enabled: { label: t('enabled'), accent: 'success' },
+  disabled: { label: t('disabled'), accent: 'muted' },
+}
+const state = computed(() => (enabled ? statesMap.enabled : statesMap.disabled))
+</script>

@xen-orchestra/web/src/components/pool/system/PoolConnections.vue

@@ -8,16 +8,12 @@
     <VtsQuickInfoRow :label="$t('username')" :value="server?.username" />
     <VtsQuickInfoRow :label="$t('read-only')">
       <template #value>
-        <UiInfo :accent="server?.readOnly ? 'success' : 'muted'">
-          {{ server?.readOnly ? $t('enabled') : $t('disabled') }}
-        </UiInfo>
+        <VtsEnabledState :enabled="server?.readOnly" />
       </template>
     </VtsQuickInfoRow>
     <VtsQuickInfoRow :label="$t('self-signed-certificates')">
       <template #value>
-        <UiInfo :accent="server?.allowUnauthorized ? 'success' : 'muted'">
-          {{ server?.allowUnauthorized ? $t('enabled') : $t('disabled') }}
-        </UiInfo>
+        <VtsEnabledState :enabled="server?.allowUnauthorized" />
       </template>
     </VtsQuickInfoRow>
   </UiCard>
@@ -26,9 +22,9 @@
 <script setup lang="ts">
 import { useServerStore } from '@/stores/xo-rest-api/server.store'
 import type { XoPool } from '@/types/xo/pool.type'
+import VtsEnabledState from '@core/components/enabled-state/VtsEnabledState.vue'
 import VtsQuickInfoRow from '@core/components/quick-info-row/VtsQuickInfoRow.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiTitle from '@core/components/ui/title/UiTitle.vue'
 import { computed } from 'vue'
 

@xen-orchestra/web/src/components/pool/system/PoolManagement.vue

@@ -15,23 +15,17 @@
     </VtsQuickInfoRow>
     <VtsQuickInfoRow :label="$t('auto-power')">
       <template #value>
-        <UiInfo :accent="pool.auto_poweron ? 'success' : 'muted'">
-          {{ pool.auto_poweron ? $t('enabled') : $t('disabled') }}
-        </UiInfo>
+        <VtsEnabledState :enabled="pool.auto_poweron" />
       </template>
     </VtsQuickInfoRow>
     <VtsQuickInfoRow :label="$t('high-availability')">
       <template #value>
-        <UiInfo :accent="pool.HA_enabled ? 'success' : 'muted'">
-          {{ pool.HA_enabled ? $t('enabled') : $t('disabled') }}
-        </UiInfo>
+        <VtsEnabledState :enabled="pool.migrationCompression" />
       </template>
     </VtsQuickInfoRow>
     <VtsQuickInfoRow :label="$t('migration-compression')">
       <template #value>
-        <UiInfo :accent="pool.migrationCompression ? 'success' : 'muted'">
-          {{ pool.migrationCompression ? $t('enabled') : $t('disabled') }}
-        </UiInfo>
+        <VtsEnabledState :enabled="pool.migrationCompression" />
       </template>
     </VtsQuickInfoRow>
   </UiCard>
@@ -40,9 +34,9 @@
 <script setup lang="ts">
 import { useHostStore } from '@/stores/xo-rest-api/host.store'
 import type { XoPool } from '@/types/xo/pool.type'
+import VtsEnabledState from '@core/components/enabled-state/VtsEnabledState.vue'
 import VtsQuickInfoRow from '@core/components/quick-info-row/VtsQuickInfoRow.vue'
 import UiCard from '@core/components/ui/card/UiCard.vue'
-import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiTitle from '@core/components/ui/title/UiTitle.vue'
 import { faServer } from '@fortawesome/free-solid-svg-icons'