@xen-orchestra/web-core 0.55.0 → 0.57.0

package/lib/assets/css/base.pcss

@@ -90,3 +90,8 @@ pre {
     --scrollbar-border: 0.2rem;
   }
 }
+
+.em-dash-prefix::before {
+  content: '\2014'; /* em dash — */
+  margin-inline-end: 0.8rem;
+}

package/lib/components/card-object-title/VtsCardObjectTitle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="vts-card-object-title">
+    <UiLink v-if="label" size="medium" :to :href :icon>
+      {{ label }}
+    </UiLink>
+    <VtsCodeSnippet class="id" :content="id" copy />
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import type { IconName } from '@core/icons/index.ts'
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  id: string
+  label?: string
+  icon?: IconName
+  to?: RouteLocationRaw
+  href?: string
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-card-object-title {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.8rem;
+
+  .id {
+    width: 100%;
+  }
+}
+</style>

package/lib/components/code-snippet/VtsCodeSnippet.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="vts-code-snippet">
-    <slot>
-      {{ content }}
-    </slot>
+    <div v-tooltip="{ placement: 'bottom' }" class="content text-ellipsis">
+      <slot>
+        {{ content }}
+      </slot>
+    </div>
     <div v-if="copy || slots.addons" class="addons">
       <slot name="addons">
         <VtsCopyButton v-if="copy && content" :value="String(content)" />
@@ -13,6 +15,7 @@
 
 <script lang="ts" setup>
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 
 defineProps<{
   content?: string | number
@@ -27,13 +30,16 @@ const slots = defineSlots<{
 
 <style lang="postcss" scoped>
 .vts-code-snippet {
-  font-family: 'Courier New', Courier, monospace;
   font-size: 1.4rem;
-  color: var(--color-neutral-txt-primary);
   display: flex;
   align-items: center;
   gap: 0.8rem;
 
+  .content {
+    color: var(--color-neutral-txt-primary);
+    font-family: 'Courier New', Courier, monospace;
+  }
+
   .addons {
     margin-inline-start: auto;
     display: flex;

package/lib/components/drawer/VtsDrawer.vue

@@ -24,7 +24,11 @@ import { IK_DRAWER } from '@core/packages/drawer/types.ts'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { computed, inject, onMounted, ref } from 'vue'
 
-const { dismissible, isOpen, current } = defineProps<{
+const {
+  dismissible,
+  isOpen = undefined,
+  current,
+} = defineProps<{
   dismissible?: boolean
   isOpen?: boolean
   current?: boolean

package/lib/components/drawer/VtsDrawerButton.vue

@@ -1,16 +1,17 @@
 <template>
-  <UiButton accent="brand" :busy="drawer?.isBusy.value" :variant size="medium">
+  <UiButton :accent :busy="drawer?.isBusy.value" :variant size="medium">
     <slot />
   </UiButton>
 </template>
 
 <script lang="ts" setup>
-import UiButton, { type ButtonVariant } from '@core/components/ui/button/UiButton.vue'
+import UiButton, { type ButtonAccent, type ButtonVariant } from '@core/components/ui/button/UiButton.vue'
 import { IK_DRAWER } from '@core/packages/drawer/types.ts'
 import { inject } from 'vue'
 
-defineProps<{
+const { accent = 'brand' } = defineProps<{
   variant: ButtonVariant
+  accent?: ButtonAccent
 }>()
 
 defineSlots<{

package/lib/components/drawer/VtsDrawerConfirmButton.vue

@@ -1,16 +1,18 @@
 <template>
-  <VtsDrawerButton variant="primary" @click="handleClick()">
+  <VtsDrawerButton :accent variant="primary" @click="handleClick()">
     <slot />
   </VtsDrawerButton>
 </template>
 
 <script lang="ts" setup>
 import VtsDrawerButton from '@core/components/drawer/VtsDrawerButton.vue'
+import type { ButtonAccent } from '@core/components/ui/button/UiButton.vue'
 import { IK_DRAWER } from '@core/packages/drawer/types.ts'
 import { inject } from 'vue'
 
-const { onClick } = defineProps<{
+const { onClick, accent = 'brand' } = defineProps<{
   onClick?: () => void
+  accent?: ButtonAccent
 }>()
 
 defineSlots<{

package/lib/components/icon/VtsIcon.vue

@@ -1,10 +1,11 @@
 <template>
-  <UiLoader v-if="busy" />
+  <UiLoader v-if="busy" v-tooltip="busyTooltip ?? false" />
   <DisplayIcon v-else-if="icon" class="vts-icon" :class="className" :icon />
 </template>
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import { type IconName, icons } from '@core/icons'
 import { DisplayIcon } from '@core/packages/icon'
 import { toVariants } from '@core/utils/to-variants.util.ts'
@@ -16,6 +17,7 @@ const { size, name } = defineProps<{
   size: IconSize
   name: IconName | undefined
   busy?: boolean
+  busyTooltip?: string
 }>()
 
 const className = computed(() =>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -51,10 +51,10 @@ const unsortedMessages = useArrayMap(
   })
 )
 
-const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['danger', 'warning', 'success', 'info'])
+const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['muted', 'info', 'success', 'warning', 'danger'])
 
 const labelAccent = useMapper<InfoAccent, LabelAccent>(
-  () => messages.value[0]?.accent,
+  () => messages.value.at(-1)?.accent,
   {
     info: 'neutral',
     success: 'neutral',

package/lib/components/layout/VtsContentSidePanel.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="vts-content-side-panel"
+    :class="{
+      mobile: uiStore.isSmall,
+      'has-panel-column': hasPanelColumn,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePanelStore } from '@core/stores/panel.store'
+import { useUiStore } from '@core/stores/ui.store'
+import { computed } from 'vue'
+
+const panelStore = usePanelStore()
+const uiStore = useUiStore()
+
+const hasPanelColumn = computed(() => (panelStore.isLocked || panelStore.isExpanded) && !uiStore.isSmall)
+</script>
+
+<style scoped lang="postcss">
+.vts-content-side-panel {
+  --side-panel-width: 40rem;
+
+  &:not(.mobile) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 0;
+    align-items: start;
+    overflow-x: clip;
+    min-height: min-content;
+    transition: grid-template-columns 0.25s;
+
+    &.has-panel-column {
+      grid-template-columns: minmax(0, 1fr) var(--side-panel-width);
+    }
+  }
+}
+</style>

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -1,27 +1,30 @@
 <template>
-  <div
-    :class="{
-      locked: sidebar.isLocked && !ui.isSmall,
-      expanded: sidebar.isExpanded,
-      mobile: ui.isSmall,
-      'border-right': !ui.isSmall,
-    }"
-    class="vts-layout-sidebar"
-  >
-    <div v-if="!ui.isSmall" class="lock">
-      <UiButtonIcon
-        v-tooltip="{
-          content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
-          placement: 'right',
-        }"
-        accent="brand"
-        size="small"
-        :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
-        @click="sidebar.toggleLock()"
-      />
+  <div :class="className" class="vts-layout-sidebar">
+    <div
+      v-if="!ui.isSmall"
+      :class="{ active: sidebar.isResizing }"
+      class="resize-handle"
+      @mousedown="sidebar.startResize"
+    />
+    <div v-if="slots.header || (showLock && !ui.isSmall)" class="header">
+      <div v-if="slots.header" class="start">
+        <slot name="header" />
+      </div>
+      <div v-if="showLock && !ui.isSmall" class="lock">
+        <UiButtonIcon
+          v-tooltip="{
+            content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
+            placement: lockTooltipPosition,
+          }"
+          accent="brand"
+          size="small"
+          :icon="sidebar.isLocked ? 'fa:thumb-tack-slash' : 'fa:thumb-tack'"
+          @click="sidebar.toggleLock()"
+        />
+      </div>
     </div>
-    <div v-if="slots.header">
-      <slot name="header" />
+    <div v-if="slots.subheader" class="subheader">
+      <slot name="subheader" />
     </div>
     <div class="content">
       <slot />
@@ -29,32 +32,47 @@
     <div v-if="slots.footer">
       <slot name="footer" />
     </div>
-    <div
-      v-if="!ui.isSmall"
-      :class="{ active: sidebar.isResizing }"
-      class="resize-handle"
-      @mousedown="sidebar.startResize"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { useSidebarStore } from '@core/stores/sidebar.store'
-import { useUiStore } from '@core/stores/ui.store'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import { type SidebarSide, useLeftSidebarStore, useRightSidebarStore } from '@core/packages/sidebar'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+const { side = 'left', showLock = true } = defineProps<{
+  side?: SidebarSide
+  showLock?: boolean
+}>()
+
 const slots = defineSlots<{
   default(): any
   header?(): any
+  subheader?(): any
   footer?(): any
 }>()
 
 const { t } = useI18n()
 
-const sidebar = useSidebarStore()
 const ui = useUiStore()
+
+const leftSidebar = useLeftSidebarStore()
+const rightSidebar = useRightSidebarStore()
+const sidebar = computed(() => (side === 'right' ? rightSidebar : leftSidebar))
+
+const lockTooltipPosition = computed(() => (side === 'left' ? 'right' : 'left'))
+
+const className = computed(() => [
+  {
+    locked: sidebar.value.isLocked && !ui.isSmall,
+    bordered: !ui.isSmall,
+  },
+  ...toVariants({ side }),
+])
 </script>
 
 <style lang="postcss" scoped>
@@ -62,32 +80,74 @@ const ui = useUiStore()
   position: relative;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   height: 100%;
   background-color: var(--color-neutral-background-secondary);
   width: v-bind('sidebar.cssWidth');
   z-index: 1010;
   transition:
-    margin-left 0.25s,
+    margin-inline 0.25s,
     transform 0.25s;
 
-  &.border-right {
-    border-right: 0.1rem solid var(--color-neutral-border);
+  &.bordered {
+    &.side--left {
+      border-inline-end: 0.1rem solid var(--color-neutral-border);
+    }
+
+    &.side--right {
+      border-inline-start: 0.1rem solid var(--color-neutral-border);
+    }
   }
 
   &.locked {
-    margin-left: v-bind('sidebar.cssOffset');
+    &.side--left {
+      margin-inline-start: v-bind('sidebar.cssLockedOffset');
+    }
+
+    &.side--right {
+      margin-inline-end: v-bind('sidebar.cssLockedOffset');
+    }
   }
 
   &:not(.locked) {
     position: absolute;
-    transform: translateX(v-bind('sidebar.cssOffset'));
+
+    &.side--left {
+      inset-inline-start: 0;
+    }
+
+    &.side--right {
+      inset-inline-end: 0;
+    }
+
+    transform: translateX(v-bind('sidebar.cssUnlockedOffset'));
   }
 
-  .lock {
-    position: absolute;
-    inset-block-start: 0.8rem;
-    inset-inline-end: 1.2rem;
-    z-index: 1;
+  .header,
+  .subheader,
+  .content {
+    &:not(:last-child) {
+      border-block-end: 0.1rem solid var(--color-neutral-border);
+    }
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    background-color: var(--color-neutral-background-primary);
+
+    .start {
+      flex: 1;
+      overflow-x: auto;
+    }
+
+    .lock {
+      flex-shrink: 0;
+      margin-inline-start: auto;
+      margin-inline-end: 0.8rem;
+      margin-block: 0.4rem;
+      z-index: 2;
+    }
   }
 
   .content {
@@ -97,12 +157,13 @@ const ui = useUiStore()
 
   .resize-handle {
     position: absolute;
-    inset: 0 0 0 auto;
+    inset-block: 0;
     width: 0.8rem;
     background-color: transparent;
     cursor: col-resize;
     transition: background-color 0.4s;
     user-select: none;
+    z-index: 1;
 
     &:hover,
     &.active {
@@ -110,5 +171,17 @@ const ui = useUiStore()
       transition: background-color 0.05s;
     }
   }
+
+  &.side--left {
+    .resize-handle {
+      inset-inline-end: 0;
+    }
+  }
+
+  &.side--right {
+    .resize-handle {
+      inset-inline-start: 0;
+    }
+  }
 }
 </style>

package/lib/components/menu/MenuItem.vue

@@ -7,13 +7,21 @@
       :busy="isBusy"
       :disabled="isDisabled"
       :icon
+      class="typo-body-bold-small"
       @click="handleClick"
     >
       <slot />
     </MenuTrigger>
     <MenuList v-else :disabled="isDisabled">
       <template #trigger="{ open, isOpen }">
-        <MenuTrigger :active="isOpen" :busy="isBusy" :disabled="isDisabled" :icon @click="open">
+        <MenuTrigger
+          :active="isOpen"
+          :busy="isBusy"
+          :disabled="isDisabled"
+          class="typo-body-bold-small"
+          :icon
+          @click="open"
+        >
           <slot />
           <VtsIcon :name="submenuIcon" size="medium" class="submenu-icon" />
         </MenuTrigger>

package/lib/components/menu/MenuList.vue

@@ -69,13 +69,15 @@ const open = (event: MouseEvent) => {
 
   isOpen.value = true
 
+  const trigger = event.currentTarget as HTMLElement
+
   nextTick(() => {
     clearClickOutsideEvent = onClickOutside(menu, () => (isOpen.value = false), {
-      ignore: [event.currentTarget as HTMLElement],
+      ignore: () => [trigger, '.menu-list'],
       controls: false,
     })
 
-    placementJs(event.currentTarget as HTMLElement, unrefElement(menu), {
+    placementJs(trigger, unrefElement(menu), {
       placement: props.placement ?? (isParentHorizontal.value ? 'bottom-start' : 'right-start'),
     })
   })

package/lib/components/menu/VtsActionsMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuList placement="bottom-end">
+  <MenuList placement="bottom-start">
     <template #trigger="{ open }">
       <UiButtonIcon
         v-tooltip="{
@@ -12,17 +12,32 @@
         @click="open($event)"
       />
     </template>
-    <MenuItem
-      v-for="(action, index) of actions"
-      :key="index"
-      :icon="action.icon"
-      :disabled="action.disabled"
-      :busy="action.busy"
-      :on-click="action.onClick"
-    >
-      {{ action.label }}
-      <i v-if="action.hint">{{ action.hint }}</i>
-    </MenuItem>
+    <slot>
+      <MenuItem
+        v-for="(action, index) of actions"
+        :key="index"
+        :icon="action.icon"
+        :disabled="action.disabled"
+        :busy="action.busy"
+        :on-click="action.onClick"
+      >
+        {{ action.label }}
+        <i v-if="action.hint" class="em-dash-prefix">{{ action.hint }}</i>
+        <template v-if="isGroupAction(action)" #submenu>
+          <MenuItem
+            v-for="(child, childIndex) of action.children"
+            :key="childIndex"
+            :icon="child.icon"
+            :disabled="child.disabled"
+            :busy="child.busy"
+            :on-click="child.onClick"
+          >
+            {{ child.label }}
+            <i v-if="child.hint" class="em-dash-prefix">{{ child.hint }}</i>
+          </MenuItem>
+        </template>
+      </MenuItem>
+    </slot>
   </MenuList>
 </template>
 
@@ -40,14 +55,33 @@ const { size = 'small', actions = [] } = defineProps<{
   actions?: ActionItem[]
 }>()
 
+defineSlots<{
+  default(): any
+}>()
+
 const { t } = useI18n()
 
-export type ActionItem = {
+type BaseActionItem = {
   label: string
   hint?: string
   icon?: IconName
-  onClick: () => any
   disabled?: boolean
   busy?: boolean
 }
+
+export type LeafActionItem = BaseActionItem & {
+  onClick: () => unknown
+  children?: never
+}
+
+export type GroupActionItem = BaseActionItem & {
+  onClick?: never
+  children: LeafActionItem[]
+}
+
+export type ActionItem = LeafActionItem | GroupActionItem
+
+function isGroupAction(action: ActionItem): action is GroupActionItem {
+  return 'children' in action
+}
 </script>

package/lib/components/modal/VtsActionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal :accent icon="status:info-picto">
+  <VtsModal :accent :icon dismissible>
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>
@@ -20,8 +20,9 @@ import VtsModal from '@core/components/modal/VtsModal.vue'
 import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
 import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
 import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
+import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper/use-mapper.ts'
-import type { ObjectType, VmActions } from '@core/types/object.type.ts'
+import type { ActionsByObject, HostActions, ObjectType, VmActions } from '@core/types/object.type.ts'
 import { useI18n } from 'vue-i18n'
 
 type ActionTexts = {
@@ -30,15 +31,37 @@ type ActionTexts = {
   action: string
 }
 
-const { action, object } = defineProps<{
+type TextMappingByObject = {
+  [O in ObjectType]: Record<ActionsByObject[O], ActionTexts>
+}
+
+type VtsActionModalVmProps = {
+  object: 'vm'
   action: VmActions
-  accent: ModalAccent
-  object: ObjectType
-}>()
+  hostName?: never
+}
+
+type VtsActionModalHostProps = {
+  object: 'host'
+  action: HostActions
+  hostName: string
+}
+
+const { action, object, hostName } = defineProps<
+  (VtsActionModalVmProps | VtsActionModalHostProps) & {
+    accent: ModalAccent
+    icon: IconName
+  }
+>()
+
+const defaultActionByObject: { [O in ObjectType]: ActionsByObject[O] } = {
+  vm: 'shutdown',
+  host: 'disable',
+}
 
 const { t } = useI18n()
 
-const textMappingsByObject: Record<ObjectType, Record<VmActions, ActionTexts>> = {
+const textMappingsByObject: TextMappingByObject = {
   vm: {
     'force-reboot': {
       title: t('modal:confirm-vm-force-reboot'),
@@ -61,11 +84,23 @@ const textMappingsByObject: Record<ObjectType, Record<VmActions, ActionTexts>> =
       action: t('modal:action:vm-shutdown'),
     },
   },
+  host: {
+    enable: {
+      title: t('modal:confirm-host-enable', { host: hostName }),
+      message: t('modal:host-enable-message'),
+      action: t('action:enable-host'),
+    },
+    disable: {
+      title: t('modal:confirm-host-disable', { host: hostName }),
+      message: t('modal:host-disable-message'),
+      action: t('action:disable-host'),
+    },
+  },
 }
 
 const modalTexts = useMapper(
   () => action,
-  () => textMappingsByObject[object],
-  () => 'shutdown'
+  () => textMappingsByObject[object] as Record<ActionsByObject[ObjectType], ActionTexts>,
+  () => defaultActionByObject[object]
 )
 </script>

package/lib/components/modal/VtsBlockedModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="danger" icon="status:danger-picto">
+  <VtsModal accent="danger" icon="status:danger-picto" dismissible>
     <template #title>
       <span>{{ modalTexts.title }}</span>
     </template>

package/lib/components/modal/VtsDeleteModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <VtsModal accent="warning" icon="status:warning-picto">
+  <VtsModal accent="warning" icon="status:warning-picto" dismissible>
     <template #title>
       <I18nT keypath="confirm-delete" scope="global" tag="div">
         <span class="n-delete">