refactor(omks): use new region picker on secret creation

ref: #MANAGER-18827

Signed-off-by: Mathieu Mousnier <[email protected]>

Author: mathieumousnier

packages/manager/apps/okms/src/common/components/regionPicker/RegionPicker.component.tsx

@@ -6,6 +6,7 @@ import { RadioCard } from '../RadioCard/RadioCard.component';
 import { RegionTypeBadge } from '@/components/regionTypeBadge/RegionTypeBadge.component';
 import { useOrderCatalogOkms } from '@/data/hooks/useOrderCatalogOkms';
 import { useNotificationAddErrorOnce } from '@/hooks/useNotificationAddErrorOnce';
+import { REGION_PICKER_TEST_IDS } from './regionPicker.constants';
 
 type RegionPickerProps = {
   selectedRegion: string;
@@ -40,7 +41,7 @@ export const RegionPicker = ({
   if (isPending) {
     return (
       <div>
-        <OdsSpinner size="md" />
+        <OdsSpinner size="md" data-testid={REGION_PICKER_TEST_IDS.SPINNER} />
       </div>
     );
   }

packages/manager/apps/okms/src/common/components/regionPicker/regionPicker.constants.tsx

@@ -0,0 +1,3 @@
+export const REGION_PICKER_TEST_IDS = {
+  SPINNER: 'region-picker-spinner',
+};

packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/CreateSecret.page.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { BaseLayout, Notifications } from '@ovh-ux/manager-react-components';
+import {
+  BaseLayout,
+  Notifications,
+  useNotifications,
+} from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { OdsBreadcrumb } from '@ovhcloud/ods-components/react';
 import { RootBreadcrumbItem } from '@secret-manager/components/breadcrumb';
@@ -11,6 +15,7 @@ import { OrderOkmsModalProvider } from '@/common/pages/OrderOkmsModal/OrderOkmsM
 
 export default function SecretCreatePage() {
   const { t } = useTranslation('secret-manager');
+  const { notifications } = useNotifications();
 
   const [selectedOkmsId, setSelectedOkmsId] = useState<string | undefined>();
 
@@ -26,9 +31,9 @@ export default function SecretCreatePage() {
             <RootBreadcrumbItem />
           </OdsBreadcrumb>
         }
-        message={<Notifications />}
+        message={notifications.length > 0 ? <Notifications /> : null}
       >
-        <div className="flex flex-col gap-8 max-w-screen-xxl">
+        <div className="flex flex-col gap-8 max-w-2xl">
           <OkmsManagement
             selectedOkmsId={selectedOkmsId}
             setSelectedOkmsId={setSelectedOkmsId}

packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/OkmsManagement.component.spec.tsx

@@ -23,6 +23,7 @@ import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
 import { waitFor } from '@testing-library/dom';
 import { act, render, screen } from '@testing-library/react';
 import { SECRET_ACTIVATE_OKMS_TEST_IDS } from '@secret-manager/pages/createSecret/ActivateRegion.contants';
+import { locationsMock } from '@secret-manager/mocks/locations/locations.mock';
 import { labels, initTestI18n } from '@/utils/tests/init.i18n';
 import { OkmsManagement } from './OkmsManagement.component';
 import { catalogMock } from '@/mocks/catalog/catalog.mock';
@@ -35,15 +36,26 @@ import {
 import { useOkmsList } from '@/data/hooks/useOkms';
 import { OKMS } from '@/types/okms.type';
 import { getOrderCatalogOKMS } from '@/data/api/orderCatalogOKMS';
+import * as locationApi from '@/common/data/api/location';
 import { ErrorResponse } from '@/types/api.type';
 import { OrderOkmsModalProvider } from '@/common/pages/OrderOkmsModal/OrderOkmsModalContext';
+import { REGION_PICKER_TEST_IDS } from '@/common/components/regionPicker/regionPicker.constants';
+import { createErrorResponseMock } from '@/utils/tests/testUtils';
+import { useNotificationAddErrorOnce } from '@/hooks/useNotificationAddErrorOnce';
 
 let i18nValue: i18n;
 
+const mockedGetOrderCatalogOKMS = vi.mocked(getOrderCatalogOKMS);
 vi.mock('@/data/api/orderCatalogOKMS', () => ({
   getOrderCatalogOKMS: vi.fn(),
 }));
 
+vi.spyOn(locationApi, 'getLocations').mockResolvedValue(locationsMock);
+
+vi.mock('@/hooks/useNotificationAddErrorOnce', () => ({
+  useNotificationAddErrorOnce: vi.fn(),
+}));
+
 vi.mock('react-router-dom', async (importOriginal) => {
   const module: typeof import('react-router-dom') = await importOriginal();
   return {
@@ -213,37 +225,32 @@ const selectRegion = async (user: UserEvent, region: string) => {
 describe('OKMS management test suite', () => {
   it('should display a spinner when loading', async () => {
     // GIVEN
-    vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+    mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
     // WHEN
     await renderOkmsManagement();
 
     // THEN
-    const regionsSpinner = screen.getByTestId('regionsSpinner');
+    const regionsSpinner = screen.getByTestId(REGION_PICKER_TEST_IDS.SPINNER);
     expect(regionsSpinner).toBeVisible();
   });
 
   it('should display a notification message when error on catalog api', async () => {
     // GIVEN
-    const mockError: ErrorResponse = {
-      response: { data: { message: 'errorCatalog' }, status: 500 },
-    };
-    vi.mocked(getOrderCatalogOKMS).mockRejectedValue(mockError);
+    const mockError = createErrorResponseMock('errorCatalog');
+    mockedGetOrderCatalogOKMS.mockRejectedValue(mockError);
 
     // WHEN
     await renderOkmsManagement();
 
     // THEN
-    await assertTextVisibility(
-      labels.common.error.error_message.replace(
-        '{{message}}',
-        mockError.response.data.message,
-      ),
-    );
+    await waitFor(() => {
+      expect(useNotificationAddErrorOnce).toHaveBeenCalledWith(mockError);
+    });
   });
 
   it('should display the available region list', async () => {
     // GIVEN
-    vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+    mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
     // WHEN
     await renderOkmsManagement();
     await assertTextVisibility(
@@ -262,7 +269,7 @@ describe('OKMS management test suite', () => {
       it('should display a CTA', async () => {
         const user = userEvent.setup();
         // GIVEN
-        vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+        mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
 
         await renderOkmsManagement();
         await assertTextVisibility(
@@ -284,7 +291,7 @@ describe('OKMS management test suite', () => {
       it('should display a loading state when an order is processing', async () => {
         const user = userEvent.setup();
         // GIVEN
-        vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+        mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
 
         await renderOkmsManagement('rbx');
         await assertTextVisibility(
@@ -305,7 +312,7 @@ describe('OKMS management test suite', () => {
     it('should not display anything when there is exactly one okms', async () => {
       const user = userEvent.setup();
       // GIVEN
-      vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+      mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
 
       await renderOkmsManagement();
       await assertTextVisibility(
@@ -329,7 +336,7 @@ describe('OKMS management test suite', () => {
       const user = userEvent.setup();
 
       // GIVEN
-      vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+      mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
 
       await renderOkmsManagement();
       await assertTextVisibility(
@@ -360,7 +367,7 @@ describe('OKMS management test suite', () => {
 
   describe('When there is a okmsId search param', () => {
     beforeEach(() => {
-      vi.mocked(getOrderCatalogOKMS).mockResolvedValueOnce(catalogMock);
+      mockedGetOrderCatalogOKMS.mockResolvedValueOnce(catalogMock);
     });
     it('should pre-select the right region and okms', async () => {
       // GIVEN

packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/OkmsManagement.component.tsx

@@ -11,9 +11,8 @@ import {
   OdsText,
 } from '@ovhcloud/ods-components/react';
 import { useOkmsList } from '@/data/hooks/useOkms';
-import { useOrderCatalogOkms } from '@/data/hooks/useOrderCatalogOkms';
 import { OkmsSelector } from './OkmsSelector.component';
-import { RegionSelector } from './RegionSelector.component';
+import { RegionPicker } from '@/common/components/regionPicker/RegionPicker.component';
 import { useOrderOkmsModalContext } from '@/common/pages/OrderOkmsModal/OrderOkmsModalContext';
 
 const OKMS_LIST_REFETCH_INTERVAL_DISABLE = 0;
@@ -30,13 +29,6 @@ export const OkmsManagement = ({
 }: OkmsManagementProps) => {
   const { t } = useTranslation(['secret-manager', NAMESPACES.ERROR]);
   const { addSuccess } = useNotifications();
-  const {
-    data: orderCatalogOKMS,
-    error: orderCatalogError,
-    isLoading: isLoadingOrderCatalog,
-  } = useOrderCatalogOkms();
-
-  const regions = orderCatalogOKMS?.plans[0]?.configurations[0]?.values;
 
   const [selectedRegion, setSelectedRegion] = useState<string | undefined>();
 
@@ -122,34 +114,31 @@ export const OkmsManagement = ({
     setSelectedOkmsId(regionOkmsList[0].id);
   };
 
-  if (orderCatalogError || okmsError) {
-    const message = orderCatalogError
-      ? orderCatalogError.response?.data?.message
-      : okmsError.response?.data?.message;
-
+  if (okmsError) {
     return (
       <OdsMessage color="danger">
         {t(`${NAMESPACES.ERROR}:error_message`, {
-          message,
+          message: okmsError.response?.data?.message,
         })}
       </OdsMessage>
     );
   }
 
-  if (isLoadingOrderCatalog || isOkmsListLoading) {
+  if (isOkmsListLoading) {
     return <OdsSpinner data-testid="regionsSpinner" />;
   }
 
   return (
-    <div className="flex flex-col gap-5">
-      <OdsText preset="heading-2">
-        {t('create_secret_form_region_section_title')}
-      </OdsText>
-      <RegionSelector
-        regions={regions}
-        selectedRegion={selectedRegion}
-        setSelectedRegion={handleRegionSelection}
-      />
+    <div className="space-y-10">
+      <div className="space-y-5">
+        <OdsText preset="heading-2">
+          {t('create_secret_form_region_section_title')}
+        </OdsText>
+        <RegionPicker
+          selectedRegion={selectedRegion}
+          setSelectedRegion={handleRegionSelection}
+        />
+      </div>
       <OkmsSelector
         okmsList={filterOkmsListByRegion(okmsList, selectedRegion)}
         selectedRegion={selectedRegion}

packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/OkmsSelector.component.tsx

@@ -42,7 +42,9 @@ export const OkmsSelector = ({
 }: OkmsSelectorProps) => {
   const { t } = useTranslation('secret-manager');
 
-  if (!selectedRegion || okmsList.length === 1) return null;
+  if (!selectedRegion || okmsList.length === 1) {
+    return null;
+  }
 
   if (okmsList.length === 0) {
     return (
@@ -58,7 +60,7 @@ export const OkmsSelector = ({
       <OdsText preset="heading-4">
         {t('create_secret_form_okms_selector_title')}
       </OdsText>
-      <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-3">
+      <div className="space-y-3">
         {okmsList.map((okms) => (
           <RadioCard
             id={okms.id}