@xen-orchestra/web-core 0.54.0 → 0.56.0

package/lib/packages/drawer/create-drawer-opener.ts

@@ -0,0 +1,119 @@
+import { useDrawerStore } from '@core/packages/drawer/drawer.store.ts'
+import {
+  ABORT_DRAWER,
+  DrawerCancelResponse,
+  type DrawerConfig,
+  DrawerConfirmResponse,
+  type DrawerHandlerArgs,
+  type DrawerResponse,
+} from '@core/packages/drawer/types.ts'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function createDrawerOpener() {
+  const drawerStore = useDrawerStore()
+
+  const route = useRoute()
+
+  const ids = new Set<symbol | string>()
+  const cancelers = new Map<string | symbol, () => void>()
+
+  function closeById(id: string | symbol) {
+    drawerStore.removeDrawer(id)
+    ids.delete(id)
+    cancelers.delete(id)
+  }
+
+  if (route !== undefined) {
+    watch(
+      () => route.path,
+      () => {
+        ids.forEach(id => {
+          if (!drawerStore.getDrawer(id)?.keepOpenOnRouteChange) {
+            cancelers.get(id)?.()
+            closeById(id)
+          }
+        })
+      }
+    )
+  }
+
+  return function openDrawer<
+    TProps,
+    TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+    TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+    TConfirmPayload = undefined,
+    TCancelPayload = undefined,
+  >(id: string | symbol, config: DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>) {
+    const close = () => closeById(id)
+
+    const promise = new Promise<DrawerResponse<TConfirmPayload, TCancelPayload>>((resolve, reject) => {
+      const isBusy = ref(false)
+
+      cancelers.set(id, () => resolve(new DrawerCancelResponse(undefined as TCancelPayload)))
+
+      drawerStore.addDrawer({
+        id,
+        component: defineAsyncComponent({
+          loader: () => config.component,
+          onError(_error, _retry, fail) {
+            fail()
+          },
+        }),
+        isBusy: computed(() => isBusy.value),
+        props: reactive(config.props ?? {}),
+        keepOpenOnRouteChange: config.keepOpenOnRouteChange ?? false,
+        onConfirm: async (...args: TConfirmArgs) => {
+          try {
+            isBusy.value = true
+
+            close()
+
+            const result = config.onConfirm ? await config.onConfirm(...args) : (undefined as TConfirmPayload)
+
+            if (result === ABORT_DRAWER || result instanceof DrawerCancelResponse) {
+              return
+            }
+
+            if (result instanceof DrawerConfirmResponse) {
+              resolve(result)
+            } else {
+              resolve(new DrawerConfirmResponse(result))
+            }
+          } catch (error) {
+            reject(error)
+          } finally {
+            isBusy.value = false
+          }
+        },
+        onCancel: async (...args: TCancelArgs) => {
+          try {
+            isBusy.value = true
+
+            const result = config.onCancel ? await config.onCancel(...args) : (undefined as TCancelPayload)
+
+            if (result === ABORT_DRAWER || result instanceof DrawerCancelResponse) {
+              return
+            }
+
+            if (result instanceof DrawerConfirmResponse) {
+              resolve(new DrawerCancelResponse(result.payload))
+            } else {
+              resolve(new DrawerCancelResponse(result))
+            }
+
+            close()
+          } catch (error) {
+            reject(error)
+          } finally {
+            isBusy.value = false
+          }
+        },
+      })
+
+      ids.add(id)
+    })
+
+    return Object.assign(promise, { close })
+  }
+}

package/lib/packages/drawer/drawer.store.ts

@@ -0,0 +1,22 @@
+import type { RegisteredDrawer } from '@core/packages/drawer/types.ts'
+import { defineStore } from 'pinia'
+import { computed, shallowReactive } from 'vue'
+
+export const useDrawerStore = defineStore('drawer', () => {
+  const drawers = shallowReactive(new Map<symbol | string, RegisteredDrawer>())
+
+  const addDrawer = (drawer: RegisteredDrawer) => {
+    drawers.set(drawer.id, drawer)
+  }
+
+  const removeDrawer = (id: symbol | string) => {
+    drawers.delete(id)
+  }
+
+  return {
+    drawers: computed(() => Array.from(drawers.values())),
+    getDrawer: (id: symbol | string) => drawers.get(id),
+    addDrawer,
+    removeDrawer,
+  }
+})

package/lib/packages/drawer/types.ts

@@ -0,0 +1,93 @@
+import type { Component, ComputedRef, InjectionKey, MaybeRef } from 'vue'
+
+export type DrawerPropsOption<TProps> = {
+  [K in keyof TProps]: MaybeRef<TProps[K]>
+}
+
+export type MaybePromise<T> = T | Promise<T>
+
+export type AreAllPropsOptional<TProps> = Record<string, never> extends TProps ? true : false
+
+export type RegisteredDrawer = {
+  id: symbol | string
+  component: Component
+  keepOpenOnRouteChange: boolean
+  props: object
+  isBusy: ComputedRef<boolean>
+  onConfirm: (...args: any[]) => void | Promise<void>
+  onCancel: (...args: any[]) => void | Promise<void>
+}
+
+export type DrawerHandlerArgs<TProps, THandler extends 'onConfirm' | 'onCancel'> = TProps extends {
+  [K in THandler]?: (...args: infer TArgs) => any
+}
+  ? TArgs
+  : never
+
+export abstract class AbstractDrawerResponse<TPayload> {
+  constructor(public readonly payload: TPayload) {}
+
+  abstract get confirmed(): boolean
+  abstract get canceled(): boolean
+}
+
+export class DrawerConfirmResponse<TPayload> extends AbstractDrawerResponse<TPayload> {
+  public readonly confirmed = true
+  public readonly canceled = false
+}
+
+export class DrawerCancelResponse<TPayload> extends AbstractDrawerResponse<TPayload> {
+  public readonly confirmed = false
+  public readonly canceled = true
+}
+
+export type DrawerResponse<TConfirmPayload, TCancelPayload> =
+  | DrawerConfirmResponse<TConfirmPayload>
+  | DrawerCancelResponse<TCancelPayload>
+
+export const ABORT_DRAWER = Symbol('abort drawer')
+
+export type OpenDrawerReturn<TConfirmPayload, TCancelPayload> = Promise<
+  DrawerResponse<TConfirmPayload, TCancelPayload>
+> & {
+  close: () => void
+}
+
+export const IK_DRAWER = Symbol('drawer') as InjectionKey<ComputedRef<RegisteredDrawer>>
+
+export type DrawerPropsConfigEntry<TProps> =
+  AreAllPropsOptional<TProps> extends true
+    ? { props?: DrawerPropsOption<TProps> }
+    : { props: DrawerPropsOption<TProps> }
+
+export type DrawerConfig<
+  TProps,
+  TConfirmArgs extends any[],
+  TCancelArgs extends any[],
+  TConfirmPayload,
+  TCancelPayload,
+> = {
+  component: Promise<{
+    default: abstract new () => {
+      $props: TProps
+    }
+  }>
+  onConfirm?: (...args: TConfirmArgs) => MaybePromise<DrawerResponse<TConfirmPayload, any> | TConfirmPayload>
+  onCancel?: (...args: TCancelArgs) => MaybePromise<DrawerResponse<TCancelPayload, any> | TCancelPayload>
+  keepOpenOnRouteChange?: boolean
+} & DrawerPropsConfigEntry<TProps>
+
+export type UseDrawerReturn<TArgs extends any[] = any[], TConfirmPayload = any, TCancelPayload = any> = (
+  ...args: TArgs
+) => OpenDrawerReturn<TConfirmPayload, TCancelPayload>
+
+export type OpenDrawer = <
+  TProps,
+  TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  id: string,
+  config: DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+) => OpenDrawerReturn<TConfirmPayload, TCancelPayload>

package/lib/packages/drawer/use-drawer.ts

@@ -0,0 +1,53 @@
+import { createDrawerOpener } from '@core/packages/drawer/create-drawer-opener.ts'
+import { type DrawerConfig, type DrawerHandlerArgs, type UseDrawerReturn } from '@core/packages/drawer/types.ts'
+
+export function useDrawer(): ReturnType<typeof createDrawerOpener>
+
+export function useDrawer<
+  TProps,
+  TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  config: DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+): UseDrawerReturn<[], TConfirmPayload, TCancelPayload>
+
+export function useDrawer<
+  TConfigBuilderArgs extends any[],
+  TProps,
+  TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  configBuilder: (
+    ...args: TConfigBuilderArgs
+  ) => DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+): UseDrawerReturn<TConfigBuilderArgs, TConfirmPayload, TCancelPayload>
+
+export function useDrawer<
+  TConfigBuilderArgs extends any[],
+  TProps,
+  TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+  TConfig extends DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  configOrBuilder?: TConfig | ((...args: TConfigBuilderArgs) => TConfig)
+): UseDrawerReturn<TConfigBuilderArgs, TConfirmPayload, TCancelPayload> | ReturnType<typeof createDrawerOpener> {
+  const openDrawer = createDrawerOpener()
+
+  if (configOrBuilder === undefined) {
+    return openDrawer
+  }
+
+  const id = Symbol('drawer')
+
+  return (...args: TConfigBuilderArgs) => {
+    const config = typeof configOrBuilder === 'function' ? configOrBuilder(...args) : configOrBuilder
+
+    return openDrawer(id, config)
+  }
+}

package/lib/packages/modal/create-modal-opener.ts

@@ -22,16 +22,18 @@ export function createModalOpener() {
     ids.delete(id)
   }
 
-  watch(
-    () => route.path,
-    () => {
-      ids.forEach(id => {
-        if (!modalStore.getModal(id)?.keepOpenOnRouteChange) {
-          closeById(id)
-        }
-      })
-    }
-  )
+  if (route !== undefined) {
+    watch(
+      () => route.path,
+      () => {
+        ids.forEach(id => {
+          if (!modalStore.getModal(id)?.keepOpenOnRouteChange) {
+            closeById(id)
+          }
+        })
+      }
+    )
+  }
 
   return function openModal<
     TProps,

package/lib/packages/remote-resource/define-remote-resource.ts

@@ -14,19 +14,19 @@ import {
   computed,
   type ComputedRef,
   type EffectScope,
+  effectScope,
   getCurrentScope,
+  type MaybeRef,
   type MaybeRefOrGetter,
   onScopeDispose,
   reactive,
   type Ref,
   ref,
   shallowRef,
-  triggerRef,
   toRef,
   toValue,
+  triggerRef,
   watch,
-  effectScope,
-  type MaybeRef,
 } from 'vue'
 
 const DEFAULT_CACHE_EXPIRATION_MS = 10_000
@@ -41,7 +41,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData: () => TData
   state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -50,7 +55,12 @@ export function defineRemoteResource<
 export function defineRemoteResource<TData, TState extends object, TArgs extends any[] = []>(config: {
   url: string | ((...args: TArgs) => string)
   state?: (data: Ref<TData | undefined>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<TData | undefined>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<TData | undefined>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
@@ -64,7 +74,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData: () => TData
   state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   stream?: boolean
   initWatchCollection: () => {
@@ -86,7 +101,12 @@ export function defineRemoteResource<
   url: string | ((...args: TArgs) => string)
   initialData?: () => TData
   state?: (data: Ref<TData>, context: ResourceContext<TArgs>) => TState
-  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataReceived?: (
+    data: Ref<NoInfer<TData>>,
+    receivedData: any,
+    calledFrom: 'execute' | 'update',
+    context?: ResourceContext<TArgs>
+  ) => void
   onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
@@ -161,33 +181,38 @@ export function defineRemoteResource<
 
   const onDataReceived =
     config.onDataReceived ??
-    ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
+    ((data: Ref<TData>, receivedData: any, calledFrom: 'execute' | 'update', context?: ResourceContext<TArgs>) => {
       // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
       if (watchCollection?.predicate?.(receivedData, context) === false) {
         return
       }
 
-      if (data.value === undefined || (Array.isArray(data.value) && Array.isArray(receivedData))) {
-        data.value = receivedData
-
-        if (watchCollection !== undefined && Array.isArray(data.value)) {
-          handleBuffer(data as Ref<TData[]>)
-          isBufferEventsProcessed = true
+      if (!Array.isArray(data.value)) {
+        if (data.value === undefined) {
+          data.value = receivedData
+        } else {
+          merge(data.value, receivedData)
         }
+
         return
       }
 
-      if (Array.isArray(data.value)) {
-        if (!isBufferEventsProcessed) {
-          bufferedEvents.push(['update', receivedData])
-        } else {
-          removeData(data.value, receivedData)
-          data.value.push(receivedData)
-        }
+      const store = data.value as TData[]
+
+      if (Array.isArray(receivedData)) {
+        data.value = receivedData as TData
+
         return
       }
 
-      merge(data.value, receivedData)
+      if (calledFrom === 'execute') {
+        store.push(receivedData)
+      } else if (!isBufferEventsProcessed) {
+        bufferedEvents.push(['update', receivedData])
+      } else {
+        removeData(store, receivedData)
+        store.push(receivedData)
+      }
     })
 
   const onDataRemoved =
@@ -292,13 +317,23 @@ export function defineRemoteResource<
         }
 
         if (config.stream) {
+          if (Array.isArray(data.value)) {
+            data.value = [] as TData
+          }
+
           for await (const event of readNDJSONStream(response.body)) {
-            onDataReceived(data, event)
-            flushData()
+            onDataReceived(data, event, 'execute', context)
+            void flushData()
+          }
+
+          if (watchCollection !== undefined && Array.isArray(data.value)) {
+            handleBuffer(data as Ref<TData[]>)
+            isBufferEventsProcessed = true
+            void flushData()
           }
         } else {
-          onDataReceived(data, await response.json())
-          flushData()
+          onDataReceived(data, await response.json(), 'execute', context)
+          void flushData()
         }
 
         isReady.value = true
@@ -324,12 +359,12 @@ export function defineRemoteResource<
           handlePost,
           resource,
           onDataReceived: receivedData => {
-            onDataReceived(data, receivedData, context)
-            flushData()
+            onDataReceived(data, receivedData, 'update', context)
+            void flushData()
           },
           onDataRemoved: receivedData => {
             onDataRemoved(data, receivedData, context)
-            flushData()
+            void flushData()
           },
         })
         await execute()

package/lib/packages/tree/types.ts

@@ -24,6 +24,12 @@ export type TreeNode<
   TDiscriminator = any,
 > = Leaf<TData, TDiscriminator> | Branch<TData, TChildNode, TDiscriminator>
 
+export type FlatTreeNode<TNode extends TreeNode = TreeNode> = {
+  id: TreeNodeId
+  node: TNode
+  depth: number
+}
+
 export type BaseTreeNodeOptions<TData extends object, TDiscriminator> = {
   discriminator?: TDiscriminator
   predicate?: (node: TreeNodeBase<TData, TDiscriminator>) => boolean | undefined

package/lib/packages/tree/use-tree.ts

@@ -1,14 +1,14 @@
 import { buildNodes } from '@core/packages/tree/build-nodes'
 import type {
   DefinitionToTreeNode,
+  FlatTreeNode,
   TreeContext,
   TreeNode,
   TreeNodeDefinition,
   TreeNodeId,
   UseTreeOptions,
 } from '@core/packages/tree/types'
-import { useTimeoutFn } from '@vueuse/core'
-import { computed, type MaybeRefOrGetter, nextTick, reactive, ref, toValue } from 'vue'
+import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
 
 export function useTree<
   TDefinition extends TreeNodeDefinition,
@@ -53,6 +53,32 @@ export function useTree<
 
   const visibleNodes = computed(() => nodes.value.filter(node => !node.isExcluded))
 
+  const flatNodes = computed<FlatTreeNode[]>(() => {
+    const result: FlatTreeNode[] = []
+
+    const flatten = (list: TreeNode[]) => {
+      for (const node of list) {
+        result.push({ id: node.id, node, depth: node.depth })
+        if (node.isBranch && !node.isCollapsed) {
+          flatten(node.children)
+        }
+      }
+    }
+
+    flatten(visibleNodes.value)
+
+    return result
+  })
+
+  const flatNodeIndexById = computed(() => {
+    const index = new Map<TreeNodeId, number>()
+    const list = flatNodes.value
+    for (let i = 0; i < list.length; i++) {
+      index.set(list[i].id, i)
+    }
+    return index
+  })
+
   const getNode = (id: TreeNodeId | undefined) => (id !== undefined ? nodesMap.value.get(id) : undefined)
   const getNodes = (ids: TreeNodeId[]) => ids.map(getNode).filter(node => node !== undefined) as TreeNode[]
 
@@ -80,46 +106,19 @@ export function useTree<
     return undefined
   }
 
-  const scrollToNodeElement = async (id: string | number, options?: ScrollIntoViewOptions) => {
-    const node = findNodeByObjectId(nodes.value, id)
+  const expandToNode = (objectId: string | number): TreeNode | undefined => {
+    const node = findNodeByObjectId(nodes.value, objectId)
     if (!node) {
-      if (id) {
-        useTimeoutFn(async () => {
-          await nextTick()
-          await scrollToNodeElement(id, options)
-        }, 200)
-      }
-      return
+      return undefined
     }
 
-    getHierarchy(node).forEach(node => {
-      if (node.isBranch) {
-        node.toggleCollapse(false)
+    getHierarchy(node).forEach(ancestor => {
+      if (ancestor.isBranch) {
+        ancestor.toggleCollapse(false)
       }
     })
 
-    const nodeElement = document.querySelector<HTMLElement>(`[data-node-id="${id}"]`)
-
-    if (!nodeElement) {
-      useTimeoutFn(async () => {
-        await nextTick()
-        await scrollToNodeElement(id, options)
-      }, 200)
-      return
-    }
-
-    const hasChildren = node.isBranch && node.hasChildren
-    const cfg: ScrollIntoViewOptions = options ?? { block: hasChildren ? 'start' : 'center', behavior: 'smooth' }
-
-    if (hasChildren) {
-      nodeElement.style.scrollMarginTop = '0.8rem'
-
-      useTimeoutFn(async () => {
-        nodeElement.style.scrollMarginTop = ''
-      }, 1000)
-    }
-
-    nodeElement.scrollIntoView(cfg)
+    return node
   }
 
   const selectedNodes = computed(() => getNodes(Array.from(selectedIds.value.values())))
@@ -140,6 +139,8 @@ export function useTree<
 
   return {
     nodes: visibleNodes,
+    flatNodes,
+    flatNodeIndexById,
     activeId,
     activeNode,
     selectedIds,
@@ -148,6 +149,6 @@ export function useTree<
     collapsedIds,
     expandedIds,
     options,
-    scrollToNodeElement,
+    expandToNode,
   }
 }

package/lib/stores/panel.store.ts

@@ -1,12 +1,63 @@
 import { useUiStore } from '@core/stores/ui.store'
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, watch } from 'vue'
 
 export const usePanelStore = defineStore('panel', () => {
   const uiStore = useUiStore()
-  const isExpanded = ref(false)
-  const open = () => (isExpanded.value = true)
-  const close = () => (isExpanded.value = false)
+  const isExpanded = useLocalStorage('panel.expanded', true)
+  const isLocked = useLocalStorage('panel.locked', true)
 
-  return { open, close, isExpanded: computed(() => !uiStore.isSmall || isExpanded.value) }
+  const cssHorizontalOffset = computed(() => (isExpanded.value ? 0 : '100%'))
+  /* Panel closes automatically when it has no content (true on small UI or when not locked) */
+  const syncsOpenStateWithSelection = computed(() => uiStore.isSmall || !isLocked.value)
+
+  function expand() {
+    isExpanded.value = true
+  }
+
+  function collapse() {
+    isExpanded.value = false
+  }
+
+  function syncWithSelection(hasSelection: boolean) {
+    if (!syncsOpenStateWithSelection.value) {
+      return
+    }
+    if (!hasSelection && isExpanded.value) {
+      collapse()
+    } else if (hasSelection && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  function toggleLock() {
+    const next = !isLocked.value
+    isLocked.value = next
+    if (next && !uiStore.isSmall && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  watch(
+    () => uiStore.isSmall,
+    isSmall => {
+      /* Expand when coming back from small to large UI, if locked and not expanded */
+      if (!isSmall && isLocked.value && !isExpanded.value) {
+        expand()
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    isExpanded,
+    isLocked,
+    syncsOpenStateWithSelection,
+    expand,
+    collapse,
+    toggleLock,
+    syncWithSelection,
+    cssHorizontalOffset,
+  }
 })