@xen-orchestra/web-core 0.54.0 → 0.56.0

package/lib/tables/column-definitions/action-column.ts

@@ -4,18 +4,30 @@ import { defineColumn } from '@core/packages/table/define-column'
 import type { ButtonIconConfig } from '@core/tables/column-definitions/button-icon-column.ts'
 import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
-import { h, toValue } from 'vue'
+import { type Component, h, toValue } from 'vue'
 
 export type { ActionItem }
 
 export const useActionColumn = defineColumn((config: HeaderConfig & Partial<ButtonIconConfig>) => ({
-  renderHead: () => renderHeadCell(config.headerIcon, config.headerLabel),
-  renderBody: (params: { onClick: () => void; actions?: ActionItem[] }) =>
-    h(VtsActionCell, {
-      buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
-      buttonAccent: toValue(config.buttonAccent),
-      buttonSize: toValue(config.buttonSize),
-      actions: params.actions,
-      onClick: params.onClick,
-    }),
+  renderHead: () => renderHeadCell(config.headerLabel),
+  renderBody: (params: {
+    onClick: () => void
+    actions?: ActionItem[]
+    component?: Component
+    props?: Record<string, unknown>
+  }) => {
+    const { component, props } = params
+
+    return h(
+      VtsActionCell,
+      {
+        buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
+        buttonAccent: toValue(config.buttonAccent),
+        buttonSize: toValue(config.buttonSize),
+        actions: params.actions,
+        onClick: params.onClick,
+      },
+      component ? () => h(component, props) : undefined
+    )
+  },
 }))

package/lib/tables/column-definitions/address-column.ts

@@ -1,4 +1,4 @@
 import { useCollapsedListColumn } from '@core/tables/column-definitions/collapsed-list-column.ts'
 import type { HeaderConfig } from '@core/tables/types.ts'
 
-export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn({ headerIcon: 'fa:at', ...config })
+export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn(config)

package/lib/tables/column-definitions/button-column.ts

@@ -17,7 +17,7 @@ type ButtonConfig = {
 }
 
 export const useButtonColumn = defineColumn((config?: HeaderConfig & ButtonConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (label: string, onClick: () => void, props?: Partial<ButtonProps>) =>
     renderBodyCell(() =>
       h(

package/lib/tables/column-definitions/button-icon-column.ts

@@ -16,7 +16,7 @@ export type ButtonIconConfig = {
 }
 
 export const useButtonIconColumn = defineColumn((config: HeaderConfig & ButtonIconConfig) => ({
-  renderHead: () => renderHeadCell(config.headerIcon, config.headerLabel),
+  renderHead: () => renderHeadCell(config.headerLabel),
   renderBody: (onClick: () => void) =>
     h(UiTableCell, { align: 'center', style: 'width: 6rem' }, () =>
       h(UiButtonIcon, {

package/lib/tables/column-definitions/collapsed-list-column.ts

@@ -7,6 +7,6 @@ import { toArray } from '@core/utils/to-array.utils.ts'
 import { h } from 'vue'
 
 export const useCollapsedListColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (items: MaybeArray<string>) => h(VtsCollapsedListCell, { items: toArray(items) }),
 }))

package/lib/tables/column-definitions/date-column.ts

@@ -13,7 +13,7 @@ export const useDateColumn = defineColumn((config?: HeaderConfig & DateConfig) =
   const { d } = useI18n()
 
   return {
-    renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:calendar', config?.headerLabel),
+    renderHead: () => renderHeadCell(config?.headerLabel),
     renderBody: (date?: DateLike, options?: { relative?: boolean }) => {
       return renderBodyCell(() => {
         if (date === undefined) {

package/lib/tables/column-definitions/double-link-column.ts

@@ -5,7 +5,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useDoubleLinkColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:a', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string } & VtsDoubleLinkCellProps) => {
     const { label, ...doubleLinkCellProps } = link
 

package/lib/tables/column-definitions/info-column.ts

@@ -7,6 +7,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useInfoColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (label: string, accent: InfoAccent) => renderBodyCell(() => h(UiInfo, { accent }, () => label)),
 }))

package/lib/tables/column-definitions/input-column.ts

@@ -11,11 +11,7 @@ type InputConfig = {
 }
 
 export const useInputColumn = defineColumn((config?: HeaderConfig & InputConfig) => ({
-  renderHead: () =>
-    renderHeadCell(
-      config?.headerIcon ?? (config?.type === 'number' ? 'fa:hashtag' : 'fa:align-left'),
-      config?.headerLabel
-    ),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (model: Ref<string | number | undefined>, inputProps?: { disabled?: boolean }) =>
     renderBodyCell(() =>
       h(UiInput, {

package/lib/tables/column-definitions/link-column.ts

@@ -5,7 +5,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useLinkColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:a', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string } & VtsLinkCellProps) => {
     const { label, ...linkCellProps } = link
 

package/lib/tables/column-definitions/link-or-text-column.ts

@@ -6,7 +6,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useLinkOrTextColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string; suffix?: string } & VtsLinkCellProps) => {
     const { label, suffix, ...linkCellProps } = link
 

package/lib/tables/column-definitions/literal-column.ts

@@ -4,6 +4,6 @@ import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
 
 export const useLiteralColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (value: any) => renderBodyCell(() => value),
 }))

package/lib/tables/column-definitions/number-column.ts

@@ -5,6 +5,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useNumberColumn = defineColumn((headerConfig?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(headerConfig?.headerIcon ?? 'fa:hashtag', headerConfig?.headerLabel),
+  renderHead: () => renderHeadCell(headerConfig?.headerLabel),
   renderBody: (number?: number | string, unit?: string) => h(VtsNumberCell, { unit }, () => number),
 }))

package/lib/tables/column-definitions/percent-column.ts

@@ -9,7 +9,7 @@ export const usePercentColumn = defineColumn((headerConfig?: HeaderConfig) => {
   const { n } = useI18n()
 
   return {
-    renderHead: () => renderHeadCell(headerConfig?.headerIcon ?? 'fa:hashtag', headerConfig?.headerLabel),
+    renderHead: () => renderHeadCell(headerConfig?.headerLabel),
     renderBody: (number: number) => h(VtsNumberCell, () => n(number, 'percent')),
   }
 })

package/lib/tables/column-definitions/progress-bar-column.ts

@@ -5,6 +5,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useProgressBarColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:hashtag', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (current: number, total: number) => h(VtsProgressBarCell, { current, total }),
 }))

package/lib/tables/column-definitions/select-column.ts

@@ -7,6 +7,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useSelectColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (id: FormSelectId) => renderBodyCell(() => h(VtsSelect, { accent: 'brand', id })),
 }))

package/lib/tables/column-definitions/status-column.ts

@@ -7,10 +7,10 @@ import { useI18n } from 'vue-i18n'
 
 export const useStatusColumn = defineColumn((config?: HeaderConfig & Omit<StatusCellProps, 'status'>) => {
   const { t } = useI18n()
-  const { headerIcon, headerLabel, ...statusCellProps } = config ?? {}
+  const { headerLabel, ...statusCellProps } = config ?? {}
 
   return {
-    renderHead: () => renderHeadCell(headerIcon ?? 'fa:square-caret-down', headerLabel ?? t('status')),
+    renderHead: () => renderHeadCell(headerLabel ?? t('status')),
     renderBody: (status: StatusCellProps['status']) => h(VtsStatusCell, { status, ...statusCellProps }),
   }
 })

package/lib/tables/column-definitions/tag-column.ts

@@ -1,4 +1,5 @@
 import VtsTagCell from '@core/components/table/cells/VtsTagCell.vue'
+import type { TagAccent } from '@core/components/ui/tag/UiTag.vue'
 import { defineColumn } from '@core/packages/table/define-column'
 import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
@@ -6,6 +7,6 @@ import type { MaybeArray } from '@core/types/utility.type'
 import { h } from 'vue'
 
 export const useTagColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
-  renderBody: (tag: MaybeArray<string>) => h(VtsTagCell, { tag }),
+  renderHead: () => renderHeadCell(config?.headerLabel),
+  renderBody: (tag: MaybeArray<string>, accent: TagAccent = 'info') => h(VtsTagCell, { tag, accent }),
 }))

package/lib/tables/column-definitions/text-column.ts

@@ -6,6 +6,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useTextColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:align-left', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (content: string, props?: TextCellProps) => h(VtsTextCell, props, () => content),
 }))

package/lib/tables/column-definitions/truncated-text-column.ts

@@ -5,6 +5,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useTruncatedTextColumn = defineColumn((config?: HeaderConfig & { limit?: number }) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:align-left', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (content: string) => h(VtsTruncatedTextCell, { content, limit: config?.limit }),
 }))

package/lib/tables/column-sets/backup-job-schedule-columns.ts

@@ -9,9 +9,9 @@ export const useBackupJobScheduleColumns = defineColumns(() => {
 
   return {
     schedule: useLinkColumn({ headerLabel: () => t('schedule') }),
-    id: useTextColumn({ headerLabel: () => t('id'), headerIcon: 'fa:hashtag' }),
+    id: useTextColumn({ headerLabel: () => t('id') }),
     status: useStatusColumn(),
-    cronPattern: useTextColumn({ headerLabel: () => t('cron-pattern'), headerIcon: 'fa:clock' }),
+    cronPattern: useTextColumn({ headerLabel: () => t('cron-pattern') }),
     lastThreeRuns: useStatusColumn({
       headerLabel: () => t('last-n-runs', { n: 3 }),
       iconOnly: true,

package/lib/tables/column-sets/backup-log-columns.ts

@@ -11,7 +11,7 @@ export const useBackupLogsColumns = defineColumns(() => {
   return {
     startDate: useDateColumn({ headerLabel: () => t('start-date'), dateStyle: 'short', timeStyle: 'medium' }),
     endDate: useDateColumn({ headerLabel: () => t('end-date'), dateStyle: 'short', timeStyle: 'medium' }),
-    duration: useNumberColumn({ headerIcon: 'fa:time', headerLabel: () => t('duration') }),
+    duration: useNumberColumn({ headerLabel: () => t('duration') }),
     status: useStatusColumn(),
     transferSize: useNumberColumn({ headerLabel: () => t('transfer-size') }),
     selectItem: useSelectItemColumn(),

package/lib/tables/column-sets/new-vm-network-columns.ts

@@ -10,12 +10,10 @@ export const useNewVmNetworkColumns = defineColumns(() => {
   return {
     interface: useSelectColumn({
       headerLabel: () => t('interfaces'),
-      headerIcon: 'object:network',
     }),
 
     mac: useInputColumn({
       headerLabel: () => t('mac-addresses'),
-      headerIcon: 'fa:at',
       placeholder: () => t('auto-generated'),
     }),
 

package/lib/tables/column-sets/new-vm-sr-columns.ts

@@ -10,7 +10,6 @@ export const useNewVmSrColumns = defineColumns(() => {
   return {
     sr: useSelectColumn({
       headerLabel: () => t('storage-repositories'),
-      headerIcon: 'object:sr',
     }),
 
     diskName: useInputColumn({

package/lib/tables/column-sets/server-columns.ts

@@ -12,7 +12,7 @@ export const useServerColumns = defineColumns(() => {
     pool: useLinkColumn({ headerLabel: () => t('pool') }),
     hostIp: useAddressColumn({ headerLabel: () => t('ip-address') }),
     status: useStatusColumn({ headerLabel: () => t('status') }),
-    primaryHost: useLinkColumn({ headerLabel: () => t('master'), headerIcon: 'object:host' }),
+    primaryHost: useLinkColumn({ headerLabel: () => t('master') }),
     selectItem: useSelectItemColumn(),
   }
 })

package/lib/tables/column-sets/snapshot-columns.ts

@@ -13,7 +13,7 @@ export const useSnapshotColumns = defineColumns(() => {
     name: useLinkColumn({ headerLabel: () => t('name') }),
     description: useTruncatedTextColumn({ headerLabel: () => t('description') }),
     creationDate: useDateColumn({ headerLabel: () => t('creation-date'), dateStyle: 'short', timeStyle: 'medium' }),
-    trigger: useLinkOrTextColumn({ headerLabel: () => t('trigger'), headerIcon: 'fa:square-caret-down' }),
+    trigger: useLinkOrTextColumn({ headerLabel: () => t('trigger') }),
     actions: useActionColumn({}),
   }
 })

package/lib/tables/column-sets/sr-columns.ts

@@ -1,8 +1,8 @@
 import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column'
 import { useLinkColumn } from '@core/tables/column-definitions/link-column'
 import { useLiteralColumn } from '@core/tables/column-definitions/literal-column.ts'
 import { useProgressBarColumn } from '@core/tables/column-definitions/progress-bar-column.ts'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
 import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column'
 import { useI18n } from 'vue-i18n'
 
@@ -15,6 +15,6 @@ export const useSrColumns = defineColumns(() => {
     storageFormat: useLiteralColumn({ headerLabel: () => t('storage-format') }),
     accessMode: useLiteralColumn({ headerLabel: () => t('access-mode') }),
     usedSpace: useProgressBarColumn({ headerLabel: () => t('used-space') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

package/lib/tables/column-sets/traffic-rules-columns.ts

@@ -1,7 +1,7 @@
 import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column.ts'
 import { useDoubleLinkColumn } from '@core/tables/column-definitions/double-link-column.ts'
 import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column.ts'
 import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
 import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
 import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column.ts'
@@ -11,19 +11,17 @@ export const useTrafficRulesColumns = defineColumns(() => {
   const { t } = useI18n()
 
   return {
-    order: useNumberColumn({ headerIcon: 'fa:hashtag' }),
+    order: useNumberColumn(),
     policy: useTagColumn({ headerLabel: () => t('policy') }),
     protocol: useTextColumn({
       headerLabel: () => t('protocol:port'),
-      headerIcon: 'fa:square-caret-down',
     }),
-    directionA: useTextColumn({ headerLabel: () => t('direction'), headerIcon: 'fa:square-caret-down' }),
-    target: useTruncatedTextColumn({ headerLabel: () => t('target'), headerIcon: 'fa:at' }),
+    directionA: useTextColumn({ headerLabel: () => t('direction') }),
+    target: useTruncatedTextColumn({ headerLabel: () => t('target') }),
     directionB: useTextColumn({
       headerLabel: () => t('direction'),
-      headerIcon: 'fa:square-caret-down',
     }),
     object: useDoubleLinkColumn({ headerLabel: () => t('object') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

package/lib/tables/column-sets/vif-network-columns.ts

@@ -0,0 +1,24 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useVifNetworkColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    vif: useLinkColumn({ headerLabel: () => t('vif') }),
+    network: useLinkColumn({ headerLabel: () => t('network') }),
+    device: useTextColumn({ headerLabel: () => t('device') }),
+    status: useStatusColumn({ headerLabel: () => t('status') }),
+    ipsAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
+    macAddresses: useAddressColumn({ headerLabel: () => t('mac-addresses') }),
+    mtu: useNumberColumn({ headerLabel: () => t('mtu') }),
+    lockingMode: useTextColumn({ headerLabel: () => t('locking-mode') }),
+    actions: useActionColumn({}),
+  }
+})

package/lib/tables/column-sets/vm-columns.ts

@@ -1,14 +1,13 @@
 import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column.ts'
 import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
 import { useLinkColumn } from '@core/tables/column-definitions/link-column'
 import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
 import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
 import { useI18n } from 'vue-i18n'
 
 export const useVmColumns = defineColumns(() => {
   const { t } = useI18n()
-
   return {
     vm: useLinkColumn({ headerLabel: () => t('vm') }),
     ipAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
@@ -16,6 +15,6 @@ export const useVmColumns = defineColumns(() => {
     ram: useNumberColumn({ headerLabel: () => t('ram') }),
     diskSpace: useNumberColumn({ headerLabel: () => t('disk-space') }),
     tags: useTagColumn({ headerLabel: () => t('tags') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

package/lib/tables/helpers/render-head-cell.ts

@@ -1,6 +1,4 @@
 import VtsHeaderCell from '@core/components/table/cells/VtsHeaderCell.vue'
-import type { IconName } from '@core/icons/index.ts'
-import { h, toValue, type MaybeRefOrGetter } from 'vue'
+import { h, type MaybeRefOrGetter, toValue } from 'vue'
 
-export const renderHeadCell = (icon?: MaybeRefOrGetter<IconName>, label?: MaybeRefOrGetter<string | undefined>) =>
-  h(VtsHeaderCell, { icon: toValue(icon) }, () => toValue(label))
+export const renderHeadCell = (label?: MaybeRefOrGetter<string | undefined>) => h(VtsHeaderCell, () => toValue(label))

package/lib/tables/types.ts

@@ -1,7 +1,5 @@
-import type { IconName } from '@core/icons/index.ts'
 import type { MaybeRefOrGetter } from 'vue'
 
 export type HeaderConfig = {
   headerLabel?: MaybeRefOrGetter<string | undefined>
-  headerIcon?: MaybeRefOrGetter<IconName>
 }

package/lib/types/connection.ts

@@ -0,0 +1,14 @@
+export const CONNECTION_ACTION = {
+  CONNECT: 'connect',
+  DISCONNECT: 'disconnect',
+} as const
+
+export type ConnectionAction = (typeof CONNECTION_ACTION)[keyof typeof CONNECTION_ACTION]
+
+export const CONNECTION_STATUS = {
+  CONNECTED: 'connected',
+  PARTIALLY_CONNECTED: 'partially-connected',
+  DISCONNECTED: 'disconnected',
+  PHYSICALLY_DISCONNECTED: 'physically-disconnected',
+  DISCONNECTED_FROM_PHYSICAL_DEVICE: 'disconnected-from-physical-device',
+} as const

package/lib/types/state-hero.type.ts

@@ -0,0 +1,19 @@
+export const STATE_HERO_TYPES = [
+  'busy',
+  'no-result',
+  'under-construction',
+  'no-data',
+  'no-selection',
+  'error',
+  'not-found',
+  'offline',
+  'all-good',
+  'all-done',
+  'creating',
+] as const
+
+export type StateHeroType = (typeof STATE_HERO_TYPES)[number]
+
+export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
+
+export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'

package/lib/types/storage-repository.type.ts

@@ -0,0 +1,14 @@
+export const SR_SCOPE_TYPE = {
+  POOL: 'pool',
+  HOST: 'host',
+} as const
+
+export type SrScope = { type: typeof SR_SCOPE_TYPE.POOL } | { type: typeof SR_SCOPE_TYPE.HOST; hostId: string }
+
+export const SR_ACCESS_MODE = {
+  LOCAL: 'local',
+  SHARED: 'shared',
+  MIXED: 'mixed',
+} as const
+
+export type SrAccessMode = (typeof SR_ACCESS_MODE)[keyof typeof SR_ACCESS_MODE]

package/lib/types/vue-virtual-scroller.d.ts

@@ -48,10 +48,16 @@ declare module 'vue-virtual-scroller' {
     after(): unknown
   }
 
+  interface ScrollToOptions {
+    smooth?: boolean
+    align?: 'start' | 'center' | 'end' | 'nearest'
+    offset?: number
+  }
+
   export interface RecycleScrollerInstance {
     getScroll(): { start: number; end: number }
-    scrollToItem(index: number): void
-    scrollToPosition(position: number): void
+    scrollToItem(index: number, options?: ScrollToOptions): void
+    scrollToPosition(position: number, options?: ScrollToOptions): void
   }
 
   export const RecycleScroller: <T>(

package/lib/utils/injection-keys.util.ts

@@ -11,7 +11,7 @@ export const IK_TREE_ITEM_TOGGLE = Symbol('IK_TREE_ITEM_TOGGLE') as InjectionKey
 
 export const IK_TREE_ITEM_EXPANDED = Symbol('IK_TREE_ITEM_EXPANDED') as InjectionKey<Ref<boolean>>
 
-export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<number>
+export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<Ref<number>>
 
 export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<ComputedRef<boolean>>
 

package/lib/utils/sr.utils.ts

@@ -0,0 +1,34 @@
+import { SR_ACCESS_MODE, SR_SCOPE_TYPE, type SrAccessMode, type SrScope } from '@core/types/storage-repository.type.ts'
+
+export function getSrAccessMode(srs: { shared: boolean }[]): SrAccessMode {
+  const hasShared = srs.some(sr => sr.shared)
+  const hasLocal = srs.some(sr => !sr.shared)
+
+  if (hasShared && hasLocal) {
+    return SR_ACCESS_MODE.MIXED
+  }
+
+  if (hasShared) {
+    return SR_ACCESS_MODE.SHARED
+  }
+
+  return SR_ACCESS_MODE.LOCAL
+}
+
+export type SrModalInfoVariant = 'host' | 'pool-local' | 'pool-mixed' | 'pool-shared'
+
+export function getSrModalInfoVariant(scope: SrScope, accessMode: SrAccessMode): SrModalInfoVariant {
+  if (scope.type === SR_SCOPE_TYPE.HOST) {
+    return 'host'
+  }
+
+  if (accessMode === SR_ACCESS_MODE.LOCAL) {
+    return 'pool-local'
+  }
+
+  if (accessMode === SR_ACCESS_MODE.MIXED) {
+    return 'pool-mixed'
+  }
+
+  return 'pool-shared'
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "private": false,
   "exports": {
     "./*": {
@@ -17,8 +17,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@novnc/novnc": "~1.5.0",
-    "@regle/core": "^1.20.2",
-    "@regle/rules": "^1.20.2",
+    "@regle/core": "^1.26.0",
+    "@regle/rules": "^1.26.0",
     "@regle/schemas": "^1.20.2",
     "@types/d3-time-format": "^4.0.3",
     "@vueuse/core": "^14.0.0",
@@ -50,7 +50,7 @@
     "pinia": "^3.0.1",
     "vue": "~3.5.13",
     "vue-i18n": "^11.1.2",
-    "vue-router": "^5.0.0"
+    "vue-router": "5.0.6"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",