feat(backup-agent): add edit configuration agent drawer

ref: #BKP-656

Signed-off-by: Thibault Barske <[email protected]>

Author: tibs245

packages/manager/modules/backup-agent/public/translations/services/agent/Messages_fr_FR.json

@@ -1,5 +1,7 @@
 {
   "add_configuration": "Ajouter une configuration",
+  "edit_configuration": "Éditer un agent",
+  "service_informations": "Informations sur le service",
   "link_agent_to_a_server": "Lier un agent à un serveur existant",
   "add_server": "Ajouter un serveur",
   "select_server": "Sélectionner le serveur",

packages/manager/modules/backup-agent/src/data/api/agents/agents.requests.ts

@@ -1,5 +1,27 @@
+import { ApiResponse, v2 } from '@ovh-ux/manager-core-api';
+
 export const getBackupAgentsListRoute = (vspcTenantId: string) =>
   `/backup/tenant/vspc/${vspcTenantId}/backupAgent`;
 
 export const getBackupAgentsDetailsRoute = (vspcTenantId: string, backupAgentId: string) =>
-  `${getBackupAgentsListRoute(vspcTenantId)}/${backupAgentId}`;
+  `/backup/tenant/vspc/${vspcTenantId}/backupAgent/${backupAgentId}`;
+
+export const getEditConfigurationBackupAgentsRoute = (
+  vspcTenantId: string,
+  backupAgentId: string,
+) => `/backup/tenant/vspc/${vspcTenantId}/backupAgent/${backupAgentId}`;
+
+export type EditConfigurationBackupAgentsParams = {
+  vspcTenantId: string;
+  backupAgentId: string;
+  ips: string[];
+  displayName: string;
+  policy: string;
+};
+
+export const editConfigurationBackupAgents = async ({
+  vspcTenantId,
+  backupAgentId,
+  ...payload
+}: EditConfigurationBackupAgentsParams): Promise<ApiResponse<string>> =>
+  v2.put(getEditConfigurationBackupAgentsRoute(vspcTenantId, backupAgentId), payload);

packages/manager/modules/backup-agent/src/data/hooks/agents/getAgentDetails.ts

@@ -1,31 +1,43 @@
-import { DefinedInitialDataOptions, useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { BACKUP_TENANT_DETAILS_QUERY_KEY } from '@/data/hooks/tenants/useBackupTenantDetails';
 import { mockAgents } from '@/mocks/agents/agents';
 import { Agent } from '@/types/Agent.type';
 import { Resource } from '@/types/Resource.type';
 
 export const BACKUP_VSPC_TENANT_AGENT_DETAILS_QUERY_KEY = (
-  vspcTenantID: string,
-  backupId: string,
-) => [...BACKUP_TENANT_DETAILS_QUERY_KEY(vspcTenantID), backupId];
+  vspcTenantId: string,
+  agentId: string,
+) => [...BACKUP_TENANT_DETAILS_QUERY_KEY(vspcTenantId), agentId];
 
-export const useBackupVSPCTenantDetails = ({
+export const useBackupVSPCTenantAgentDetailsOptions = ({
   tenantId,
-  backupId,
-  ...options
+  agentId,
 }: {
-  tenantId: string;
-  backupId: string;
-} & Partial<
-  Omit<DefinedInitialDataOptions<Resource<Agent>, unknown, Resource<Agent>>, 'queryKey' | 'queryFn'>
->) =>
-  useQuery({
+  tenantId?: string;
+  agentId?: string;
+}) =>
+  queryOptions({
     queryFn: () =>
       new Promise<Resource<Agent>>((resolve, reject) => {
-        const result = mockAgents.find((agent) => agent.id === tenantId);
-        result ? resolve(result) : reject(new Error('Agent not found'));
+        setTimeout(() => {
+          const result = mockAgents.find((agent) => agent.id === agentId);
+          result ? resolve(result) : reject(new Error('Agent not found'));
+        }, 1000);
       }),
-    queryKey: BACKUP_VSPC_TENANT_AGENT_DETAILS_QUERY_KEY(tenantId, backupId),
+    queryKey: BACKUP_VSPC_TENANT_AGENT_DETAILS_QUERY_KEY(tenantId!, agentId!),
+    enabled: !!tenantId && !!agentId,
+  });
+
+export const useBackupVSPCTenantAgentDetails = ({
+  tenantId,
+  agentId,
+  ...options
+}: {
+  tenantId?: string;
+  agentId?: string;
+}) =>
+  useQuery({
+    ...useBackupVSPCTenantAgentDetailsOptions({ tenantId, agentId }),
     ...options,
   });

packages/manager/modules/backup-agent/src/data/hooks/agents/putAgent.ts

@@ -0,0 +1,31 @@
+import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { ApiError, ApiResponse } from '@ovh-ux/manager-core-api';
+
+import {
+  EditConfigurationBackupAgentsParams,
+  editConfigurationBackupAgents,
+} from '@/data/api/agents/agents.requests';
+
+import { GET_VSPC_TENANTS_QUERY_KEY } from '../tenants/useVspcTenants';
+
+type UseEditConfigurationVSPCTenantAgentParams = Partial<
+  UseMutationOptions<ApiResponse<string>, ApiError, EditConfigurationBackupAgentsParams>
+>;
+export const useEditConfigurationVSPCTenantAgent = ({
+  ...options
+}: UseEditConfigurationVSPCTenantAgentParams) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload: EditConfigurationBackupAgentsParams) =>
+      editConfigurationBackupAgents(payload),
+    ...options,
+    onSuccess: async (...params) => {
+      await queryClient.invalidateQueries({
+        queryKey: GET_VSPC_TENANTS_QUERY_KEY,
+      });
+      options.onSuccess?.(...params);
+    },
+  });
+};

packages/manager/modules/backup-agent/src/hooks/useRequiredParams.ts

@@ -0,0 +1,17 @@
+import { useParams } from 'react-router-dom';
+
+import { invariant } from '@/utils/invariant';
+
+/**
+ * A hook that ensures specific params exist in the URL.
+ * Usage: const { id } = useRequiredParams('id');
+ */
+export function useRequiredParams<Key extends string>(...keys: Key[]): Record<Key, string> {
+  const params = useParams();
+  // Loop over the keys you requested and check them
+  keys.forEach((key) => {
+    invariant(params[key], `Missing required param "${key} in the URL"`);
+  });
+  // If we pass the checks, we force the type to match the keys provided
+  return params as Record<Key, string>;
+}

packages/manager/modules/backup-agent/src/mocks/tenant/backupPolicies.mock.ts

@@ -1 +1 @@
-export const mockTenantBackupPolicies = ['windows', 'linux', 'macos'];
+export const mockTenantBackupPolicies = ['windows', 'linux', 'daily-backup-retention-30d', 'macos'];

packages/manager/modules/backup-agent/src/module.constants.ts

@@ -1,3 +1,4 @@
 export const LABELS = {
   BACKUP_AGENT: 'Backup Agent',
+  BACKUP_POLICY: 'Backup Policy',
 } as const;

packages/manager/modules/backup-agent/src/pages/services/dashboard/agent/_components/AgentActionsCell.component.tsx

@@ -1,41 +1,46 @@
 import { useId } from 'react';
 
+import { useHref } from 'react-router-dom';
+
 import { useTranslation } from 'react-i18next';
 
-import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react';
+import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
 
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
-import { DataGridTextCell } from '@ovh-ux/manager-react-components';
+import { ActionMenu, ActionMenuItem, DataGridTextCell } from '@ovh-ux/manager-react-components';
+
+import { BACKUP_AGENT_NAMESPACES } from '@/BackupAgent.translations';
+import { urlParams, urls } from '@/routes/Routes.constants';
 
-import { BACKUP_AGENT_NAMESPACES } from '@/lib';
-import { Agent } from '@/types/Agent.type';
-import { Resource } from '@/types/Resource.type';
+export type AgentActionsCellProps = {
+  tenantId: string;
+  agentId: string;
+};
 
-export const AgentActionsCell = (resourceAgent: Resource<Agent>) => {
+export const AgentActionsCell = ({ tenantId, agentId }: AgentActionsCellProps) => {
   const id = useId();
   const { t } = useTranslation([NAMESPACES.ACTIONS, BACKUP_AGENT_NAMESPACES.COMMON]);
+  const configurationHref = useHref(
+    urls.editAgentConfiguration.replace(urlParams.tenantId, tenantId).replace(':agentId', agentId),
+  );
+
+  const actions: ActionMenuItem[] = [
+    {
+      id: 0,
+      label: t(`${NAMESPACES.ACTIONS}:configure`),
+      href: configurationHref,
+    },
+    {
+      id: 1,
+      label: t(`${NAMESPACES.ACTIONS}:delete`),
+      href: '',
+      color: ODS_BUTTON_COLOR.critical,
+    },
+  ];
 
   return (
     <DataGridTextCell>
-      <OdsButton
-        id={id}
-        role="button"
-        label=""
-        icon="ellipsis-vertical"
-        variant="ghost"
-        aria-label={t(`${BACKUP_AGENT_NAMESPACES.COMMON}:actions`)}
-      />
-      <OdsPopover triggerId={id} with-arrow="">
-        <OdsButton
-          label={t(`${NAMESPACES.ACTIONS}:configure`)}
-          onClick={() => console.log(`Configure ${resourceAgent.id}`)}
-        />
-        <OdsButton
-          color="critical"
-          label={t(`${NAMESPACES.ACTIONS}:delete`)}
-          onClick={() => console.log(`Delete ${resourceAgent.id}`)}
-        />
-      </OdsPopover>
+      <ActionMenu id={id} items={actions} isCompact />
     </DataGridTextCell>
   );
 };

packages/manager/modules/backup-agent/src/pages/services/dashboard/agent/_components/__tests__/AgentActionsCell.component.test.tsx

@@ -1,17 +1,40 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
 
 import { mockAgents } from '@/mocks/agents/agents';
+import { TENANTS_MOCKS } from '@/mocks/tenant/tenants.mock';
 import { AgentActionsCell } from '@/pages/services/dashboard/agent/_components';
 
-vi.mock('@ovh-ux/manager-react-components', () => ({
-  DataGridTextCell: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="cell">{children}</div>
-  ),
+vi.mock('react-router-dom', () => ({
+  useHref: vi.fn().mockImplementation((url: string) => url),
 }));
 
+// --- Mock translation ---
+vi.mock('@ovhcloud/ods-components/react', async () => {
+  const actual = await vi.importActual('@ovhcloud/ods-components/react');
+  return {
+    ...actual,
+    OdsButton: vi
+      .fn()
+      .mockImplementation(({ label }: { children: React.ReactNode; label: string }) => (
+        <button>{label}</button>
+      )),
+  };
+});
+
+vi.mock('@ovh-ux/manager-react-components', async () => {
+  const actual = await vi.importActual('@ovh-ux/manager-react-components');
+
+  return {
+    ...actual,
+    DataGridTextCell: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="cell">{children}</div>
+    ),
+  };
+});
+
 // --- Mock translation ---
 vi.mock('react-i18next', () => ({
   useTranslation: vi
@@ -20,9 +43,10 @@ vi.mock('react-i18next', () => ({
 }));
 
 describe('AgentActionCell', () => {
-  it('renders agent action', async () => {
-    const { container } = render(<AgentActionsCell {...mockAgents[0]!} />);
+  it('renders agent action', () => {
+    render(<AgentActionsCell tenantId={mockAgents[0]!.id} agentId={TENANTS_MOCKS[0]!.id} />);
 
-    await expect(container).toBeAccessible();
+    expect(screen.getByText('translated_configure')).toBeVisible();
+    expect(screen.getByText('translated_delete')).toBeVisible();
   });
 });

packages/manager/modules/backup-agent/src/pages/services/dashboard/agent/_hooks/useAgentsListingColumns.hooks.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
 
+import { useParams } from 'react-router-dom';
+
 import { useTranslation } from 'react-i18next';
 
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
@@ -13,6 +15,7 @@ import { Resource } from '@/types/Resource.type';
 import { AgentActionsCell, AgentIpsCell, AgentNameCell, AgentPolicyCell } from '../_components';
 
 export function useAgentsListingColumnsHooks() {
+  const { tenantId } = useParams();
   const { t } = useTranslation([
     BACKUP_AGENT_NAMESPACES.COMMON,
     NAMESPACES.DASHBOARD,
@@ -59,7 +62,9 @@ export function useAgentsListingColumnsHooks() {
       },
       {
         id: 'action',
-        cell: AgentActionsCell,
+        cell: (agentResource: Resource<Agent>) => (
+          <AgentActionsCell tenantId={tenantId!} agentId={agentResource.id} />
+        ),
         label: '',
       },
     ],