fix(xo6): Fix some issue in the pool tab (#10714)

@xen-orchestra/web-core/lib/components/ui/panel-card-title/UiPanelCardTitle.vue

@@ -61,7 +61,7 @@ const typoClasses = {
   medium: 'typo-body-bold',
 }
 
-const isLink = computed(() => to !== undefined || href !== undefined)
+const isLink = computed(() => to !== undefined || href !== undefined || disabled)
 
 const counterProps = computed(() => {
   if (counter === undefined) {

@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue

@@ -19,26 +19,22 @@
     <template v-if="server">
       <VtsStateHero v-if="!arePoolsReady" format="panel" type="busy" size="medium" />
       <template v-else>
-        <UiPanelCard v-if="server.error === undefined">
-          <UiPanelCardTitle :id="server.id" size="medium" :label="server.label" icon="object:pool" />
+        <UiAlert v-if="server.error !== undefined" accent="danger">
+          {{ t('connection-failed') }}
+          <template #description>
+            {{ t('unable-to-connect-to-the-pool') }}
+          </template>
+        </UiAlert>
+        <UiPanelCard v-if="poolInfo?.label">
+          <UiPanelCardTitle
+            :id="server.poolId"
+            size="medium"
+            :label="poolInfo.label"
+            :to="poolInfo.to"
+            :icon="poolInfo.icon"
+            :disabled="!isConnected"
+          />
           <div class="content">
-            <!-- Pool -->
-            <VtsCardRowKeyValue>
-              <template #key>{{ t('pool') }}</template>
-              <template #value>
-                <UiLink
-                  v-if="server.poolId !== undefined && server.poolNameLabel !== undefined"
-                  icon="object:pool"
-                  size="small"
-                  :to="{ name: '/pool/[id]/dashboard', params: { id: server.poolId } }"
-                >
-                  {{ server.poolNameLabel }}
-                </UiLink>
-              </template>
-              <template v-if="server.poolId !== undefined" #addons>
-                <VtsCopyButton :value="server.poolId" />
-              </template>
-            </VtsCardRowKeyValue>
             <!-- Description -->
             <VtsCardRowKeyValue truncate align-top>
               <template #key>{{ t('description') }}</template>
@@ -61,12 +57,6 @@
             </VtsCardRowKeyValue>
           </div>
         </UiPanelCard>
-        <UiAlert v-else accent="danger">
-          {{ t('connection-failed') }}
-          <template #description>
-            {{ t('unable-to-connect-to-the-pool') }}
-          </template>
-        </UiAlert>
         <UiPanelCard>
           <UiPanelCardTitle size="medium" :label="t('connection')" />
           <!-- status -->
@@ -153,6 +143,7 @@ import PoolConnectionToggleButton from '@/modules/pool/components/actions/connec
 import PoolDownloadButton from '@/modules/pool/components/actions/download/PoolDownloadButton.vue'
 import PoolForgetButton from '@/modules/pool/components/actions/forget/PoolForgetButton.vue'
 import { useXoPoolCollection } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
+import { getPoolInfo } from '@/modules/pool/utils/xo-pool.util.ts'
 import type { FrontXoServer } from '@/modules/server/remote-resources/use-xo-server-collection.ts'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
@@ -164,7 +155,6 @@ import VtsTag from '@core/components/tag/VtsTag.vue'
 import UiAlert from '@core/components/ui/alert/UiAlert.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import UiLink from '@core/components/ui/link/UiLink.vue'
 import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
 import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
 import UiPanelCardTitle from '@core/components/ui/panel-card-title/UiPanelCardTitle.vue'
@@ -190,8 +180,14 @@ const pool = useGetPoolById(() => server?.poolId)
 const primaryHost = useGetHostById(() => server?.master)
 const hosts = computed(() => (server?.poolId ? hostsByPool.value.get(server.poolId) : undefined))
 
+const poolInfo = computed(() => (server ? getPoolInfo(server) : undefined))
+
+const connectionState = computed(() => (server ? (server.error ? 'error' : server.status) : 'error'))
+
+const isConnected = computed(() => connectionState.value === 'connected')
+
 const connectionStatus = useMapper(
-  () => (server ? (server.error ? 'error' : server.status) : 'error'),
+  connectionState,
   {
     error: { accent: 'danger', text: t('unable-to-connect-to-the-pool') },
     disconnected: { accent: 'muted', text: t('disconnected') },

@xen-orchestra/web/src/modules/pool/composables/use-pool-enhanced-data.composable.ts

@@ -17,7 +17,7 @@ export interface PoolFilterableData extends FrontXoServer {
 
 export interface PoolDisplayData extends PoolFilterableData {
   // Formatted values for UI display
-  poolIcon: ReturnType<typeof icon>
+  poolIcon: ReturnType<typeof icon> | undefined
   hostIcon: ReturnType<typeof objectIcon> | undefined
   primaryHostIcon: ReturnType<typeof objectIcon> | undefined
   primaryHostRightIcon: ReturnType<typeof icon> | undefined
@@ -66,7 +66,7 @@ export function usePoolEnhancedData(rawServers: MaybeRefOrGetter<FrontXoServer[]
 
     return {
       ...pool,
-      poolIcon: icon('object:pool'),
+      poolIcon: getPoolInfo(pool).icon,
       hostIcon,
       primaryHostIcon: hostIcon,
       primaryHostRightIcon,

@xen-orchestra/web/src/modules/pool/composables/use-pool-enhanced-data.composable.unit.test.ts

@@ -139,11 +139,19 @@ describe('getDisplayData', () => {
     expect(displayData.primaryHostRightIcon).toBeUndefined()
   })
 
-  it('always sets the pool icon', () => {
+  it('sets the pool icon when the pool has a name', () => {
     getHostById.mockReturnValue(undefined)
 
     const displayData = mountFirstDisplayData()
 
     expect(displayData.poolIcon).toBe('object:pool')
   })
+
+  it('omits the pool icon when the pool has no name', () => {
+    getHostById.mockReturnValue(undefined)
+
+    const displayData = mountFirstDisplayData([createServer({ poolNameLabel: undefined, poolId: undefined })])
+
+    expect(displayData.poolIcon).toBeUndefined()
+  })
 })

CHANGELOG.unreleased.md

@@ -15,6 +15,8 @@
 
 > Users must be able to say: "I had this issue, happy to know it's fixed"
 
+- [XO6/Pools] Pool side panel now shows the same pool name, UUID and icon as the pools table, and keeps the pool card when the pool is disconnected or unreachable (PR [#10714](https://github.com/vatesfr/xen-orchestra/pull/10714))
+
 ### Packages to release
 
 > When modifying a package, add it here with its release type.