refactor(observability): move onboarding service page into settings

resolves: #MAOBS-228

Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>

Author: darsene

packages/manager/apps/observability/src/components/services/__tests__/ServicesNavigation.component.spec.tsx

@@ -121,7 +121,7 @@ describe('ServicesNavigation', () => {
       const guard = screen.getByTestId('redirection-guard');
       expect(guard).toHaveAttribute('data-condition', 'false');
       expect(guard).toHaveAttribute('data-is-loading', 'false');
-      expect(guard).toHaveAttribute('data-route', urls.onboarding);
+      expect(guard).toHaveAttribute('data-route', urls.servicesOnboarding);
     });
 
     it('should set condition to true when services is undefined', () => {

packages/manager/apps/observability/src/components/services/navigation/ServicesNavigation.component.tsx

@@ -15,7 +15,7 @@ const ServicesNavigation = ({ button, rootUrl }: ServicesNavigationProps) => {
     <RedirectionGuard
       condition={!services || services.length === 0}
       isLoading={isLoading}
-      route={urls.onboarding}
+      route={urls.servicesOnboarding}
     >
       <div className="mb-6 flex items-center justify-end">
         <ServicesDropDown onChange={() => navigate(rootUrl)} />

…ges/metrics/OnboardingService.layout.tsx …/onboarding/OnboardingService.layout.tsxpackages/manager/apps/observability/src/pages/metrics/OnboardingService.layout.tsx renamed to packages/manager/apps/observability/src/pages/settings/services/onboarding/OnboardingService.layout.tsx packages/manager/apps/observability/src/pages/metrics/OnboardingService.layout.tsx renamed to packages/manager/apps/observability/src/pages/settings/services/onboarding/OnboardingService.layout.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { BaseLayout } from '@ovh-ux/muk';
 
 export default function OnboardingServiceLayout() {
-  const { t } = useTranslation('tenants');
+  const { t } = useTranslation('services');
   return (
-    <BaseLayout header={{ title: t('listing.title') }}>
+    <BaseLayout header={{ title: t('dashboard.title') }}>
       <Outlet />
     </BaseLayout>
   );

…pages/metrics/OnboardingService.page.tsx …es/onboarding/OnboardingService.page.tsxpackages/manager/apps/observability/src/pages/metrics/OnboardingService.page.tsx renamed to packages/manager/apps/observability/src/pages/settings/services/onboarding/OnboardingService.page.tsx packages/manager/apps/observability/src/pages/metrics/OnboardingService.page.tsx renamed to packages/manager/apps/observability/src/pages/settings/services/onboarding/OnboardingService.page.tsx

@@ -6,7 +6,6 @@ import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { OnboardingLayout, Text } from '@ovh-ux/muk';
 
 import { useObservabilityServiceOrderLink } from '@/hooks/useObservabilityServiceOrderLink.hook';
-import { LABELS } from '@/utils/labels.constants';
 import { ONBOARDING_IMG_SRC } from '@/utils/onboarding.constants';
 
 const OnboardingService: React.FC = () => {
@@ -15,7 +14,7 @@ const OnboardingService: React.FC = () => {
 
   return (
     <OnboardingLayout
-      title={LABELS.TENANT}
+      title={t('metrics:listing.service')}
       description={
         <Text preset="paragraph" className="text-center">
           {t('metrics:onboarding.description')}

packages/manager/apps/observability/src/routes/Routes.constants.ts

@@ -40,9 +40,9 @@ export const urls = {
   tenantSubscription: `${getRoot()}/${subroutes.metrics}/${subroutes.tenants}/${subroutes.resource}/${subroutes.tenant}/${subroutes.subscription}`,
   deleteTenantSubscription: `${getRoot()}/${subroutes.metrics}/${subroutes.tenants}/${subroutes.resource}/${subroutes.tenant}/${subroutes.subscription}/${subroutes.deleteTenantSubscription}`,
   tenantTags: `${getRoot()}/${subroutes.metrics}/${subroutes.tenants}/${subroutes.resource}/${subroutes.tenant}/${subroutes.tags}`,
-  onboarding: `${getRoot()}/${subroutes.metrics}/${subroutes.onboarding}`,
   settings: `${getRoot()}/${subroutes.settings}`,
   services: `${getRoot()}/${subroutes.settings}/${subroutes.services}`,
+  servicesOnboarding: `${getRoot()}/${subroutes.settings}/${subroutes.services}/${subroutes.onboarding}`,
   deleteService: `${getRoot()}/${subroutes.settings}/${subroutes.services}/${subroutes.delete}`,
   editService: `${getRoot()}/${subroutes.settings}/${subroutes.services}/${subroutes.edit}`,
 } as const;

packages/manager/apps/observability/src/routes/Routes.tsx

@@ -21,12 +21,14 @@ const ServicesBaseLayout = React.lazy(
   () => import('@/pages/settings/services/ServicesBase.layout'),
 );
 const OnboardingServiceLayout = React.lazy(
-  () => import('@/pages/metrics/OnboardingService.layout'),
+  () => import('@/pages/settings/services/onboarding/OnboardingService.layout'),
 );
 const OnboardingTenantPage = React.lazy(() => import('@/pages/tenants/TenantsOnboarding.page'));
 const TenantsCreationPage = React.lazy(() => import('@/pages/tenants/TenantCreation.page'));
 const EditTenantPage = React.lazy(() => import('@/pages/tenants/edit/EditTenant.page'));
-const OnboardingServicePage = React.lazy(() => import('@/pages/metrics/OnboardingService.page'));
+const OnboardingServicePage = React.lazy(
+  () => import('@/pages/settings/services/onboarding/OnboardingService.page'),
+);
 const ServicesPage = React.lazy(() => import('@/pages/settings/services/Services.page'));
 const ServiceDeletePage = React.lazy(
   () => import('@/pages/settings/services/delete/ServiceDelete.page'),
@@ -68,16 +70,18 @@ export default (
       <Route index element={<Navigate to={urls.metrics} replace />} />
 
       {/* Onboarding observability service */}
-      <Route path={subroutes.metrics} Component={OnboardingServiceLayout}>
-        <Route
-          path={subroutes.onboarding}
-          Component={OnboardingServicePage}
-          handle={{
-            tracking: {
-              pageName: 'onboarding',
-            },
-          }}
-        />
+      <Route path={subroutes.settings} Component={OnboardingServiceLayout}>
+        <Route path={subroutes.services}>
+          <Route
+            path={subroutes.onboarding}
+            Component={OnboardingServicePage}
+            handle={{
+              tracking: {
+                pageName: 'onboarding',
+              },
+            }}
+          />
+        </Route>
       </Route>
 
       <Route Component={ObservabilityServiceLayout}>