@xen-orchestra/web-core 0.54.0 → 0.56.0

package/lib/components/ui/modal/UiModal.vue

@@ -1,4 +1,4 @@
-<!-- v2 -->
+<!-- v4 -->
 <template>
   <form :class="className" class="ui-modal" @click.self="emit('dismiss')">
     <div class="modal">
@@ -7,8 +7,8 @@
         :accent="closeIconAccent"
         :target-scale="2"
         class="dismiss-button"
-        icon="fa:xmark"
-        size="small"
+        icon="action:close-cancel-clear"
+        size="medium"
         @click="emit('dismiss')"
       />
       <main class="main">
@@ -36,7 +36,7 @@ import { useMapper } from '@core/packages/mapper'
 import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
-export type ModalAccent = 'info' | 'success' | 'warning' | 'danger'
+export type ModalAccent = 'info' | 'warning' | 'danger'
 
 const { accent } = defineProps<{
   accent: ModalAccent
@@ -58,7 +58,6 @@ const closeIconAccent = useMapper(
   () => accent,
   {
     info: 'brand',
-    success: 'brand',
     warning: 'warning',
     danger: 'danger',
   },
@@ -84,7 +83,10 @@ const className = computed(() => toVariants({ accent }))
     max-height: min(90vh, 80rem);
     padding: 3.2rem 2.4rem 2.4rem;
     gap: 2.4rem;
+    background-color: var(--color-neutral-background-secondary);
     border-radius: 1rem;
+    border-width: 0.1rem;
+    border-style: solid;
 
     &:not(:has(.buttons)) {
       padding-bottom: 3.2rem;
@@ -122,7 +124,7 @@ const className = computed(() => toVariants({ accent }))
 
   &.accent--info {
     .modal {
-      background-color: var(--color-info-background-selected);
+      border-color: var(--color-info-item-base);
     }
 
     .main .icon {
@@ -130,19 +132,9 @@ const className = computed(() => toVariants({ accent }))
     }
   }
 
-  &.accent--success {
-    .modal {
-      background-color: var(--color-success-background-selected);
-    }
-
-    .main .icon {
-      color: var(--color-success-txt-base);
-    }
-  }
-
   &.accent--warning {
     .modal {
-      background-color: var(--color-warning-background-selected);
+      border-color: var(--color-warning-item-base);
     }
 
     .main .icon {
@@ -152,7 +144,7 @@ const className = computed(() => toVariants({ accent }))
 
   &.accent--danger {
     .modal {
-      background-color: var(--color-danger-background-selected);
+      border-color: var(--color-danger-item-base);
     }
 
     .main .icon {

package/lib/components/ui/panel/UiPanel.vue

@@ -1,6 +1,6 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
-  <div class="ui-panel" :class="{ error, 'mobile-drawer': uiStore.isSmall }">
+  <div class="ui-panel" :class="{ error }">
     <div v-if="slots.header" class="header">
       <slot name="header" />
     </div>
@@ -11,8 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUiStore } from '@core/stores/ui.store'
-
 defineProps<{
   error?: boolean
 }>()
@@ -21,31 +19,25 @@ const slots = defineSlots<{
   default(): any
   header?(): any
 }>()
-
-const uiStore = useUiStore()
 </script>
 
 <style scoped lang="postcss">
 .ui-panel {
-  position: sticky;
-  top: 0;
   display: flex;
   flex-direction: column;
   border-inline-start: 0.1rem solid var(--color-neutral-border);
+  border-block-end: 0.1rem solid var(--color-neutral-border);
+  border-end-start-radius: 0.8rem;
   background-color: var(--color-neutral-background-secondary);
 
-  &:not(.mobile-drawer) {
-    min-height: calc(100dvh - 16rem);
-  }
-
   .header {
+    flex-shrink: 0;
+    padding: 0.4rem 1.6rem;
     border-bottom: 0.1rem solid var(--color-neutral-border);
     background-color: var(--color-neutral-background-primary);
     display: flex;
-    justify-content: flex-end;
     align-items: center;
     gap: 1.6rem;
-    padding: 0.4rem 1.6rem;
   }
 
   .content {
@@ -53,20 +45,11 @@ const uiStore = useUiStore()
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
-  }
-
-  &.mobile-drawer {
-    .content {
-      overflow: auto;
-    }
+    scrollbar-width: thin;
   }
 
   &.error {
     background-color: var(--color-danger-background-selected);
-
-    .content {
-      padding-top: 15rem;
-    }
   }
 }
 </style>

package/lib/components/ui/tree-item-label/UiTreeItemLabel.vue

@@ -72,7 +72,7 @@ const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
 
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
+const depth = inject(IK_TREE_LIST_DEPTH, ref(0))
 </script>
 
 <style lang="postcss" scoped>

package/lib/composables/default-tab.composable.ts

@@ -14,6 +14,10 @@ export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, def
   watch(
     () => route.name as string,
     name => {
+      if (name == null) {
+        return
+      }
+
       if (name === dispatcherRouteName) {
         const isSameDispatcher = localStorage.getItem(TAB_MEMORY_DISPATCHER) === dispatcherRouteName
         const tabName = (isSameDispatcher ? localStorage.getItem(TAB_MEMORY_LAST) : null) ?? defaultTab

package/lib/composables/table-state.composable.ts

@@ -1,5 +1,5 @@
-import type { StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 import type { TableState } from '@core/components/table/VtsTable.vue'
+import type { StateHeroType } from '@core/types/state-hero.type.ts'
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useI18n } from 'vue-i18n'
 

package/lib/icons/action-icons.ts

@@ -1,11 +1,14 @@
+import { slash } from '@core/icons/custom-icons.ts'
 import { defineIconPack, type IconSingleConfig } from '@core/packages/icon'
 import { faCopy, faSquare as checkboxEmpty, type IconDefinition } from '@fortawesome/free-regular-svg-icons'
 import {
   faAdd,
   faArrowCircleRight,
+  faArrowDownLong,
   faArrowRight,
   faArrowRotateLeft,
   faArrowRotateRight,
+  faArrowUpLong,
   faArrowUpRightFromSquare,
   faBan,
   faBars,
@@ -24,6 +27,7 @@ import {
   faLink,
   faLinkSlash,
   faMinus,
+  faPlug,
   faPowerOff,
   faRefresh,
   faRoute,
@@ -132,8 +136,10 @@ export const actionIcons = defineIconPack({
   fill: constructIcon(faFillDrip),
   duplicate: constructIcon(faClone),
   copy: constructIcon(faCopy),
-  connect: constructIcon(faLink),
-  disconnect: constructIcon(faLinkSlash),
+  attach: constructIcon(faLink),
+  detach: constructIcon(faLinkSlash),
+  connect: constructIcon(faPlug),
+  disconnect: [constructIcon(faPlug), { icon: slash }],
   forget: constructIcon(faEraser),
   delete: { icon: faTrash, color: 'var(--color-danger-txt-primary)' },
   'more-actions': constructIcon(faEllipsis),
@@ -142,6 +148,18 @@ export const actionIcons = defineIconPack({
     color: 'var(--color-neutral-txt-primary)',
     rotate: 90,
   },
+  'import-export': [
+    {
+      icon: faArrowUpLong,
+      color: 'var(--color-neutral-txt-primary)',
+      translate: [-5, 0],
+    },
+    {
+      icon: faArrowDownLong,
+      color: 'var(--color-neutral-txt-primary)',
+      translate: [5, 0],
+    },
+  ],
   reboot: constructIcon(faArrowRotateRight),
   'force-reboot': [
     constructIcon(faArrowRotateRight),

package/lib/icons/custom-icons.ts

@@ -0,0 +1,16 @@
+import { defineIcon } from '@core/packages/icon'
+import { faSlash } from '@fortawesome/free-solid-svg-icons'
+
+export const slash = defineIcon([
+  {
+    icon: faSlash,
+    color: 'var(--color-neutral-background-primary)',
+    translate: [-0.5, 0.5],
+    size: 20,
+  },
+  {
+    icon: faSlash,
+    translate: [0.5, -0.5],
+    size: 20,
+  },
+])

package/lib/icons/object-icons.ts

@@ -1,3 +1,4 @@
+import { slash } from '@core/icons/custom-icons.ts'
 import { statusIcons } from '@core/icons/status-icons.ts'
 import { defineIcon, type IconSingleConfig } from '@core/packages/icon'
 import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
@@ -12,14 +13,13 @@ import {
   faClock,
   faDatabase,
   faDesktop,
-  faEthernet,
   faHdd,
+  faMapPin,
   faNetworkWired,
   faPlay,
   faPuzzlePiece,
   faSatellite,
   faServer,
-  faSlash,
   faUserCircle,
   faUsers,
   type IconDefinition,
@@ -48,21 +48,6 @@ function constructIcon(icon: IconDefinition): IconSingleConfig {
   }
 }
 
-const slash = defineIcon([
-  {
-    icon: faSlash,
-    color: 'var(--color-neutral-background-primary)',
-    translate: [-0.5, 0.5],
-    size: 20,
-  },
-  {
-    icon: faSlash,
-    color: 'var(--color-neutral-txt-secondary)',
-    translate: [0.5, -0.5],
-    size: 20,
-  },
-])
-
 const runningNeutral = defineIcon([
   {
     icon: faCircle,
@@ -145,6 +130,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   host: constructIcon(faServer),
@@ -155,6 +141,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'host:running': [constructIcon(faServer), ...constructCircleStatus('running-circle')],
@@ -169,6 +156,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'vm:running': [constructIcon(faDesktop), ...constructCircleStatus('running-circle')],
@@ -190,6 +178,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'sr:connected': [constructIcon(faDatabase), ...constructCircleStatus('success-circle')],
@@ -204,13 +193,37 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'vdi:attached': [constructIcon(faHdd), ...constructCircleStatus('success-circle')],
   'vdi:disabled': [constructIcon(faHdd), ...constructCircleStatus('disabled')],
   'vdi:warning': [constructIcon(faHdd), ...constructCircleStatus('warning-circle')],
   'vdi:detached': [constructIcon(faHdd), ...constructCircleStatus('danger-circle')],
-  vif: constructIcon(faEthernet),
+  'vdi-snapshot': [
+    constructIcon(faHdd),
+    {
+      icon: camera,
+    },
+  ],
+  vif: [
+    {
+      icon: faMapPin,
+      color: 'var(--color-neutral-txt-primary)',
+    },
+    {
+      icon: faCircle,
+      color: 'var(--color-neutral-txt-primary)',
+      translate: [0, -4],
+      size: 12,
+    },
+    {
+      icon: faCircle,
+      color: 'var(--color-neutral-background-primary)',
+      translate: [0, -4],
+      size: 8,
+    },
+  ],
   network: constructIcon(faNetworkWired),
   'network:unknown': [
     {
@@ -219,6 +232,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'network:connected': [constructIcon(faNetworkWired), ...constructCircleStatus('success-circle')],
@@ -232,6 +246,7 @@ export const objectIcons = defineIconPack({
     },
     {
       icon: slash,
+      color: 'var(--color-neutral-txt-secondary)',
     },
   ],
   'br:connected': [constructIcon(faBoxesStacked), ...constructCircleStatus('success-circle')],