fix(pci-instances): display vnc tab when api return the action

ref: #TAPC-5134

Signed-off-by: tsiorifamonjena <[email protected]>
Co-authored-by: CDS Translator Agent <[email protected]>

Author: Tsiorifamonjena

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_de_DE.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Sie haben kein Backup",
   "pci_instances_dashboard_backup_title": "Verwaltung des Backups",
   "pci_instances_dashboard_backup_number_of_backups": "Anzahl der Backups der Instanz",
-  "pci_instances_dashboard_backup_last_updated_backups": "Datum des letzten Backups"
+  "pci_instances_dashboard_backup_last_updated_backups": "Datum des letzten Backups",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "Der Status dieser Instanz erlaubt keine Verbindung über die VNC-Konsole."
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_en_GB.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "You do not have a backup",
   "pci_instances_dashboard_backup_title": "Backup management",
   "pci_instances_dashboard_backup_number_of_backups": "Instance backup count",
-  "pci_instances_dashboard_backup_last_updated_backups": "Date of last backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Date of last backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "The state of this instance does not allow connection via the VNC console."
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_es_ES.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "No tiene backup",
   "pci_instances_dashboard_backup_title": "Gestión del backup",
   "pci_instances_dashboard_backup_number_of_backups": "Número de backups de la instancia",
-  "pci_instances_dashboard_backup_last_updated_backups": "Fecha del último backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Fecha del último backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "El estado de esta instancia no permite la conexión a través de la consola VNC"
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_fr_CA.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Vous n'avez pas de backup",
   "pci_instances_dashboard_backup_title": "Gestion du backup",
   "pci_instances_dashboard_backup_number_of_backups": "Nombre de backups de l'instance",
-  "pci_instances_dashboard_backup_last_updated_backups": "Date du dernier backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Date du dernier backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "L'état de cette instance ne permet pas la connexion via la console VNC"
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_fr_FR.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Vous n'avez pas de backup",
   "pci_instances_dashboard_backup_title": "Gestion du backup",
   "pci_instances_dashboard_backup_number_of_backups": "Nombre de backups de l'instance",
-  "pci_instances_dashboard_backup_last_updated_backups": "Date du dernier backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Date du dernier backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "L'état de cette instance ne permet pas la connexion via la console VNC"
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_it_IT.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Non hai backup",
   "pci_instances_dashboard_backup_title": "Gestione del backup",
   "pci_instances_dashboard_backup_number_of_backups": "Numero di backup dell’istanza",
-  "pci_instances_dashboard_backup_last_updated_backups": "Data dell'ultimo backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Data dell'ultimo backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "Lo stato di questa istanza non consente la connessione tramite la console VNC"
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_pl_PL.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Nie posiadasz kopii zapasowej",
   "pci_instances_dashboard_backup_title": "Zarządzanie kopiami zapasowymi",
   "pci_instances_dashboard_backup_number_of_backups": "Liczba kopii zapasowych instancji",
-  "pci_instances_dashboard_backup_last_updated_backups": "Data ostatniego backupu"
+  "pci_instances_dashboard_backup_last_updated_backups": "Data ostatniego backupu",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "Stan tej instancji nie pozwala na połączenie przez konsolę VNC."
 }

packages/manager/apps/pci-instances/public/translations/dashboard/Messages_pt_PT.json

@@ -30,5 +30,6 @@
   "pci_instances_dashboard_backup_empty_message": "Não possui backups",
   "pci_instances_dashboard_backup_title": "Gestão do backup",
   "pci_instances_dashboard_backup_number_of_backups": "Número de backups da instância",
-  "pci_instances_dashboard_backup_last_updated_backups": "Data do último backup"
+  "pci_instances_dashboard_backup_last_updated_backups": "Data do último backup",
+  "pci_instances_dashboard_tab_vnc_disabled_text": "O estado desta instância não permite a conexão via console VNC"
 }

packages/manager/apps/pci-instances/src/components/tab/TabsPanel.component.tsx

@@ -1,11 +1,21 @@
 import { FC, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Tabs, TabList, Tab, TabsValueChangeEvent } from '@ovhcloud/ods-react';
+import {
+  Tabs,
+  TabList,
+  Tab,
+  TabsValueChangeEvent,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@ovhcloud/ods-react';
 
 type TTabItem = {
   label: string;
   to: string;
   badge?: string;
+  disabled?: boolean;
+  tooltipText?: string;
 };
 
 type TTabsPanelProps = {
@@ -30,9 +40,16 @@ const TabsPanel: FC<TTabsPanelProps> = ({ tabs }) => {
     <Tabs value={activeTab} onValueChange={handleTabChange}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab key={tab.to} value={tab.to}>
-            {tab.label}
-          </Tab>
+          <Tooltip key={tab.to}>
+            <TooltipTrigger asChild>
+              <Tab value={tab.to} disabled={tab.disabled}>
+                {tab.label}
+              </Tab>
+            </TooltipTrigger>
+            {tab.tooltipText && (
+              <TooltipContent>{tab.tooltipText}</TooltipContent>
+            )}
+          </Tooltip>
         ))}
       </TabList>
     </Tabs>

packages/manager/apps/pci-instances/src/data/hooks/instance/selectors/instances.selector.ts

@@ -120,21 +120,25 @@ const mapInstanceAddresses = (instance: TAggregatedInstanceDto) =>
     return acc.set(type, [rest]);
   }, new Map<TInstanceAddressType, TAggregatedInstanceAddress[]>());
 
+const isToDisplayAction = ({ name }: { name: TActionName }) => name !== 'vnc';
+
 const mapInstanceActions = (
   instance: TAggregatedInstanceDto,
   projectUrl: string,
 ): TAggregatedInstanceActions =>
-  instance.actions.reduce<TAggregatedInstanceActions>((acc, action) => {
-    const { group, name } = action;
-    const newAction = {
-      label: `pci_instances_list_action_${name}`,
-      link: getActionHrefByName(projectUrl, name, instance),
-    };
-    const foundAction = acc.get(group);
-    if (!foundAction) return acc.set(group, [newAction]);
-    foundAction.push(newAction);
-    return acc;
-  }, new Map() as TAggregatedInstanceActions);
+  instance.actions
+    .filter(isToDisplayAction)
+    .reduce<TAggregatedInstanceActions>((acc, action) => {
+      const { group, name } = action;
+      const newAction = {
+        label: `pci_instances_list_action_${name}`,
+        link: getActionHrefByName(projectUrl, name, instance),
+      };
+      const foundAction = acc.get(group);
+      if (!foundAction) return acc.set(group, [newAction]);
+      foundAction.push(newAction);
+      return acc;
+    }, new Map() as TAggregatedInstanceActions);
 
 export const instancesSelector = (
   { pages }: InfiniteData<TAggregatedInstanceDto[], number>,