refactor(observability): tenants listing page and delete action

packages/manager/apps/observability/src/__mocks__/services/service.adapter.ts

@@ -0,0 +1,14 @@
+import { apiConfig } from '@/__mocks__/mock.config';
+import { getObservabilityServices as getObservabilityServicesFromMock } from '@/__mocks__/services/service.mock';
+import { getObservabilityServices as getObservabilityServicesFromApi } from '@/data/api/observability.api';
+import { ObservabilityService } from '@/types/observability.type';
+
+export const getObservabilityServices = async (
+  signal: AbortSignal,
+): Promise<ObservabilityService[]> => {
+  const isMockEnabled = apiConfig.mode === 'mock';
+  console.info('[MOCK-ADAPTER][getObservabilityServices] Mock enabled -> ', isMockEnabled);
+  return isMockEnabled
+    ? getObservabilityServicesFromMock(signal)
+    : getObservabilityServicesFromApi(signal);
+};

packages/manager/apps/observability/src/__mocks__/services/service.mock.ts

@@ -0,0 +1,39 @@
+import { ObservabilityService } from '@/types/observability.type';
+
+const servicesDataset: ObservabilityService[] = [
+  { id: 'ldp-zf-15501', currentState: { displayName: null } },
+  { id: 'ldp-et-42418', currentState: { displayName: null } },
+  { id: 'ldp-ms-91722', currentState: { displayName: null } },
+  { id: 'ldp-gr-55078', currentState: { displayName: null } },
+  { id: 'ldp-io-61871', currentState: { displayName: null } },
+  { id: 'ldp-dq-82324', currentState: { displayName: null } },
+  { id: 'ldp-jr-81953', currentState: { displayName: null } },
+  { id: 'ldp-jj-29716', currentState: { displayName: null } },
+  { id: 'ldp-tt-48060', currentState: { displayName: null } },
+  { id: 'ldp-np-43247', currentState: { displayName: null } },
+  { id: 'ldp-ro-08038', currentState: { displayName: null } },
+  { id: 'ldp-ju-54500', currentState: { displayName: null } },
+  { id: 'ldp-nv-47025', currentState: { displayName: null } },
+  { id: 'ldp-pe-11160', currentState: { displayName: null } },
+  { id: 'ldp-mg-73834', currentState: { displayName: null } },
+  { id: 'ldp-yy-24693', currentState: { displayName: null } },
+  { id: 'ldp-iz-25481', currentState: { displayName: '[DO NOT TOUCH] TTA TRS Quality' } },
+  { id: 'ldp-xa-17103', currentState: { displayName: null } },
+  { id: 'ldp-np-20814', currentState: { displayName: 'Christian' } },
+  { id: 'ldp-ni-50732', currentState: { displayName: null } },
+  { id: 'ldp-an-17655', currentState: { displayName: null } },
+  { id: 'ldp-hy-49770', currentState: { displayName: 'ldp-hy-49770' } },
+  { id: 'ldp-la-85440', currentState: { displayName: 'do not touch' } },
+  { id: 'ldp-xq-98460', currentState: { displayName: 'Name' } },
+  { id: 'ldp-fr-36016', currentState: { displayName: null } },
+  { id: 'ldp-ga-90239', currentState: { displayName: 'Ele QA' } },
+  { id: 'ldp-ib-84974', currentState: { displayName: null } },
+  { id: 'ldp-rg-93836', currentState: { displayName: '[DO NOT TOUCH] Monito Pingdom' } },
+];
+
+export const getObservabilityServices = async (
+  signal: AbortSignal,
+): Promise<ObservabilityService[]> => {
+  console.info(`[MOCK-ADAPTER][getObservabilityServices] > `, signal);
+  return Promise.resolve(servicesDataset);
+};

packages/manager/apps/observability/src/__tests__/components/listing/tenants/top-bar/TenantsListTopbar.component.spec.tsx

@@ -140,7 +140,7 @@ describe('TenantsListTopbar', () => {
   });
 
   describe('Navigation Behavior', () => {
-    it('should navigate to addNew when button is clicked', () => {
+    it('should navigate to creation when button is clicked', () => {
       // Act
       const { container } = render(<TenantsListTopbar />);
       const button = getButton(container);
@@ -149,7 +149,7 @@ describe('TenantsListTopbar', () => {
 
       // Assert
       expect(mockNavigate).toHaveBeenCalledTimes(1);
-      expect(mockNavigate).toHaveBeenCalledWith('addNew');
+      expect(mockNavigate).toHaveBeenCalledWith('/metrics/tenants/creation');
     });
 
     it('should handle multiple clicks', () => {
@@ -165,7 +165,7 @@ describe('TenantsListTopbar', () => {
 
       // Assert
       expect(mockNavigate).toHaveBeenCalledTimes(3);
-      expect(mockNavigate).toHaveBeenCalledWith('addNew');
+      expect(mockNavigate).toHaveBeenCalledWith('/metrics/tenants/creation');
     });
   });
 

packages/manager/apps/observability/src/components/listing/tenants/TenantsListDatagrid.component.tsx

@@ -67,14 +67,7 @@ export default function TenantsListDatagrid({
       isSortable: true,
       isFilterable: true,
       enableHiding: false,
-      cell: (mappedTenant: MappedTenant) => {
-        const { id: tenantId, name } = mappedTenant;
-        return DatagridCellLink({
-          id: tenantId,
-          label: name,
-          path: tenantId,
-        });
-      },
+      cell: ({ id, name }: MappedTenant) => <DatagridCellLink id={id} label={name} path={id} />,
       label: t(`${NAMESPACES.DASHBOARD}:name`),
       type: FilterTypeCategories.String,
     },
@@ -84,8 +77,9 @@ export default function TenantsListDatagrid({
       isSortable: true,
       isFilterable: true,
       enableHiding: true,
-      cell: (mappedTenant: MappedTenant) =>
-        DatagridCellEnpoint({ infrastructure: mappedTenant.infrastructure }),
+      cell: ({ infrastructure }: MappedTenant) => (
+        <DatagridCellEnpoint infrastructure={infrastructure} />
+      ),
       label: t('tenants:listing.endpoint_cell'),
       type: FilterTypeCategories.String,
     },
@@ -96,9 +90,7 @@ export default function TenantsListDatagrid({
       isFilterable: true,
       enableHiding: true,
       label: t('tenants:listing.retention_cell'),
-      cell: (mappedTenant: MappedTenant) => (
-        <DataGridTextCell>{mappedTenant.retention}</DataGridTextCell>
-      ),
+      cell: ({ retention }: MappedTenant) => <DataGridTextCell>{retention}</DataGridTextCell>,
       type: FilterTypeCategories.String,
     },
     {
@@ -108,8 +100,8 @@ export default function TenantsListDatagrid({
       isFilterable: true,
       enableHiding: true,
       label: t('tenants:listing.active_metrics_cell'),
-      cell: (mappedTenant: MappedTenant) => (
-        <DataGridTextCell>{mappedTenant.numberOfSeries}</DataGridTextCell>
+      cell: ({ numberOfSeries }: MappedTenant) => (
+        <DataGridTextCell>{numberOfSeries}</DataGridTextCell>
       ),
       type: FilterTypeCategories.Numeric,
     },
@@ -121,8 +113,7 @@ export default function TenantsListDatagrid({
       enableHiding: true,
       type: FilterTypeCategories.String,
       label: t('tenants:listing.tags_cell'),
-      cell: (mappedTenant: MappedTenant) =>
-        DatagridTenantCellTags({ tags: mappedTenant.tagsArray }),
+      cell: ({ tagsArray: tags }: MappedTenant) => <DatagridTenantCellTags tags={tags} />,
     },
     {
       id: 'actions',
@@ -147,7 +138,7 @@ export default function TenantsListDatagrid({
         }),
       );
     }
-  }, [isError, error]);
+  }, [addError, error, isError, t]);
 
   const { filters, addFilter, removeFilter } = useColumnFilters();
 

packages/manager/apps/observability/src/components/listing/tenants/top-bar/TenantsListTopbar.component.tsx

@@ -7,6 +7,7 @@ import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { ManagerButton } from '@ovh-ux/manager-react-components';
 
 import { useObservabilityServiceContext } from '@/contexts/ObservabilityService.context';
+import { urls } from '@/routes/Routes.constants';
 import { IAM_ACTIONS } from '@/utils/iam.constants';
 
 export default function TenantsListTopbar() {
@@ -16,7 +17,7 @@ export default function TenantsListTopbar() {
   const { selectedService, isLoading } = useObservabilityServiceContext();
 
   const addNewTenant = () => {
-    navigate('addNew');
+    navigate(urls.tenantsCreation);
   };
 
   return (