feat(pci-load-balancer): add modal to change pool name

ref: DTCORE-2652
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_de_DE.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Namen ändern",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Abbrechen",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Ändern"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_en_GB.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Change the name",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Cancel",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Edit"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_es_ES.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Cambiar el nombre",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nombre",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Cancelar",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Editar"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_fr_CA.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_it_IT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Modifica il nome",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Annullare",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Modificare"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_pl_PL.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Zmień nazwę",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nazwa",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Anuluj",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Zmień"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/overview/edit-name/Messages_pt_PT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_detail_overview_edit_name_title": "Alterar o nome",
+  "octavia_load_balancer_pools_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_pools_detail_overview_edit_name_cancel": "Anular",
+  "octavia_load_balancer_pools_detail_overview_edit_name_confirm": "Alterar"
+}

packages/manager/apps/pci-load-balancer/src/api/data/listener.spec.ts

@@ -44,13 +44,7 @@ describe('getListener', () => {
   });
 });
 describe('getLoadBalancerListeners', () => {
-  beforeEach(() => {
-    vi.mocked(v6.get).mockResolvedValue({ data: mockLoadBalancerListeners });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
+  vi.mocked(v6.get).mockResolvedValue({ data: mockLoadBalancerListeners });
 
   it('should fetch load balancer for getLoadBalancerListeners success', async () => {
     const result = await getLoadBalancerListeners(

packages/manager/apps/pci-load-balancer/src/api/data/pool.ts

@@ -113,7 +113,6 @@ export const updatePool = async ({
         : { type: 'disabled' },
     },
   );
-
   return data;
 };
 

packages/manager/apps/pci-load-balancer/src/api/hook/usePool.tsx

@@ -202,10 +202,15 @@ export const useUpdatePool = ({
       onError(cause);
     },
     onSuccess: async (pool: TLoadBalancerPool) => {
-      onSuccess(pool);
       await queryClient.invalidateQueries({
         queryKey: ['pools', projectId, region],
       });
+
+      // Invalidate cache for pool overview
+      await queryClient.invalidateQueries({
+        queryKey: ['pool', projectId, region, poolId],
+      });
+      onSuccess(pool);
     },
   });
 

packages/manager/apps/pci-load-balancer/src/components/form/PolicyForm.component.spec.tsx

@@ -4,7 +4,7 @@ import PolicyForm from './PolicyForm.component';
 import { TL7Policy } from '@/api/data/l7Policies';
 import { TLoadBalancerPool } from '@/api/data/pool';
 import { wrapper } from '@/wrapperRenders';
-import { TLoadBalancerListener } from '@/api/data/load-balancer';
+import { TLoadBalancerListener } from '@/api/data/listener';
 
 const mockPolicy = {
   listenerId: 'listener-1',

packages/manager/apps/pci-load-balancer/src/mocks/index.ts

@@ -1,5 +1,6 @@
 import { TFlavor } from '@ovh-ux/manager-pci-common';
-import { TLoadBalancer, TLoadBalancerListener } from '@/api/data/load-balancer';
+import { TLoadBalancer } from '@/api/data/load-balancer';
+import { TLoadBalancerListener } from '@/api/data/listener';
 
 export const mockLoadBalancer = {
   id: 'idLoadBalancer1',

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/overview/PoolOverview.tsx

@@ -130,7 +130,7 @@ export default function PoolOverview() {
                     color={ODS_THEME_COLOR_INTENT.primary}
                     size={ODS_BUTTON_SIZE.sm}
                     variant={ODS_BUTTON_VARIANT.ghost}
-                    href=""
+                    href={useHref('./edit-name')}
                   >
                     <OsdsIcon
                       size={ODS_ICON_SIZE.xxs}

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/overview/edit-name/EditName.page.tsx

@@ -0,0 +1,107 @@
+import { PciModal } from '@ovh-ux/manager-pci-common';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { OsdsFormField, OsdsInput } from '@ovhcloud/ods-components/react';
+import { Translation, useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import LabelComponent from '@/components/form/Label.component';
+import { useGetPool, useUpdatePool } from '@/api/hook/usePool';
+
+export default function EditName() {
+  const { addSuccess, addError } = useNotifications();
+  const { t: tEditName } = useTranslation('pools/overview/edit-name');
+  const navigate = useNavigate();
+  const { projectId, region, poolId } = useParams();
+  const { data: pool, isPending: isPendingPool } = useGetPool({
+    projectId,
+    region,
+    poolId,
+  });
+  const { doUpdatePool, isPending: isPendingUpdatePool } = useUpdatePool({
+    projectId,
+    region,
+    poolId,
+    onSuccess: () => {
+      addSuccess(
+        <Translation ns="pools/overview">
+          {(_t) =>
+            _t('octavia_load_balancer_pools_detail_overview_edit_name_success')
+          }
+        </Translation>,
+        false,
+      );
+      navigate('..');
+    },
+    onError: (cause: ApiError) => {
+      addError(
+        <Translation ns="load-balancer">
+          {(_t) => (
+            <span
+              dangerouslySetInnerHTML={{
+                __html: _t('octavia_load_balancer_global_error', {
+                  message: (cause?.response?.data as { message: string })
+                    ?.message,
+                  requestId: cause.response?.headers['x-ovh-queryid'],
+                }),
+              }}
+            ></span>
+          )}
+        </Translation>,
+        true,
+      );
+      navigate('..');
+    },
+  });
+  const [poolName, setPoolName] = useState(pool?.name);
+  useEffect(() => {
+    if (pool) {
+      setPoolName(pool?.name);
+    }
+  }, [pool]);
+  const onConfirm = () => {
+    doUpdatePool({
+      name: poolName,
+      algorithm: pool?.algorithm,
+      permanentSession: {
+        isEnabled: pool.sessionPersistence.type !== 'disabled',
+        cookieName: pool.sessionPersistence.cookieName,
+        type: pool.sessionPersistence.type,
+      },
+    });
+  };
+  const isPending = isPendingPool || isPendingUpdatePool;
+  return (
+    <PciModal
+      title={tEditName(
+        'octavia_load_balancer_pools_detail_overview_edit_name_title',
+      )}
+      onCancel={() => navigate('..')}
+      onClose={() => navigate('..')}
+      submitText={tEditName(
+        'octavia_load_balancer_pools_detail_overview_edit_name_confirm',
+      )}
+      cancelText={tEditName(
+        'octavia_load_balancer_pools_detail_overview_edit_name_cancel',
+      )}
+      isPending={isPending}
+      onConfirm={onConfirm}
+    >
+      <OsdsFormField>
+        <LabelComponent
+          text={tEditName(
+            'octavia_load_balancer_pools_detail_overview_edit_name_label',
+          )}
+        />
+        <OsdsInput
+          value={poolName}
+          type={ODS_INPUT_TYPE.text}
+          onOdsValueChange={(event) => {
+            setPoolName(event.detail.value);
+          }}
+        />
+      </OsdsFormField>
+    </PciModal>
+  );
+}

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/list/Actions.component.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { describe, it, expect } from 'vitest';
 import ActionsComponent from '@/pages/detail/listeners/list/Actions.component';
-import { TLoadBalancerListener } from '@/api/data/load-balancer';
+import { TLoadBalancerListener } from '@/api/data/listener';
 
 describe('ActionsComponent', () => {
   const listener = {

packages/manager/apps/pci-load-balancer/src/routes.tsx

@@ -25,6 +25,7 @@ export const ROUTE_PATHS = {
   L7_RULES_EDIT: ':ruleId/edit',
   POOLS: 'pools',
   POOLS_CREATE: 'create',
+  POOLS_EDIT_NAME: 'edit-name',
   POOLS_EDIT: ':poolId/edit',
   POOL_LIST: 'list',
   POOL_DELETE: 'delete',
@@ -121,6 +122,9 @@ const PoolListPage = lazy(() => import('@/pages/detail/pools/list/List.page'));
 const PoolDeletePage = lazy(() =>
   import('@/pages/detail/pools/delete/DeletePool.page'),
 );
+const PoolEditNamePage = lazy(() =>
+  import('@/pages/detail/pools/detail/overview/edit-name/EditName.page'),
+);
 const PoolDetailPage = lazy(() =>
   import('@/pages/detail/pools/detail/Detail.page'),
 );
@@ -242,6 +246,10 @@ const Routes = (
           path={ROUTE_PATHS.POOL_DELETE}
           Component={PoolDeletePage}
         />
+        <Route
+          path={ROUTE_PATHS.POOLS_EDIT_NAME}
+          Component={PoolEditNamePage}
+        />
       </Route>
       <Route
         id="pools-detail-health-monitor"

packages/manager/apps/pci-private-registry/src/pages/create/steps/RegionStep.spec.tsx

@@ -63,9 +63,6 @@ describe('NameStep', () => {
       edit: {
         label: firstCall.edit.label,
       },
-      cancel: {
-        label: firstCall.cancel.label,
-      },
     }).toEqual({
       isOpen: true,
       isLocked: false,
@@ -79,9 +76,6 @@ describe('NameStep', () => {
       edit: {
         label: 'common_stepper_modify_this_step',
       },
-      cancel: {
-        label: 'common_stepper_cancel_button_label',
-      },
     });
   });
 

packages/manager/apps/pci-private-registry/src/pages/create/steps/RegionStep.tsx

@@ -93,16 +93,6 @@ export default function RegionStep({
         label: tCommonField('common_stepper_next_button_label'),
         isDisabled: !store.state.region,
       }}
-      cancel={{
-        action: () => {
-          tracking?.trackClick({
-            name: 'PCI_PROJECTS_PRIVATEREGISTRY_CREATE_VERSION_NEXT',
-            type: 'action',
-          });
-          navigate('..');
-        },
-        label: tCommonField('common_stepper_cancel_button_label'),
-      }}
       edit={
         !isLocked && {
           action: () => {