fix(hycu): breadcrumb and order links

  ref: MANAGER-15780

Signed-off-by: Thibaud Crespin <[email protected]>

packages/manager/apps/hycu/src/components/Breadcrumb/Breadcrumb.component.tsx

@@ -12,12 +12,12 @@ export interface BreadcrumbProps {
   items?: BreadcrumbItem[];
 }
 
-function Breadcrumb({ customRootLabel }: BreadcrumbProps): JSX.Element {
+function Breadcrumb({ customRootLabel, items }: BreadcrumbProps): JSX.Element {
   const label = customRootLabel || appConfig.rootLabel;
 
   const breadcrumbItems = useBreadcrumb({
     rootLabel: label,
-    appName: 'hycu',
+    items,
   });
   return <OsdsBreadcrumb items={breadcrumbItems} />;
 }

packages/manager/apps/hycu/src/hooks/breadcrumb/useBreadcrumb.tsx

@@ -1,49 +1,51 @@
-import { useEffect, useState, useContext } from 'react';
-import { useLocation } from 'react-router-dom';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { urls } from '@/routes/routes.constant';
 
 export type BreadcrumbItem = {
+  id: string;
   label: string | undefined;
-  href?: string;
+  onClick?: (event?: BreadcrumbEvent) => void;
+};
+
+type BreadcrumbEvent = Event & {
+  target: { isCollapsed?: boolean; isLast?: boolean };
 };
 
 export interface BreadcrumbProps {
   rootLabel?: string;
-  appName?: string;
-  projectId?: string;
   items?: BreadcrumbItem[];
 }
 
-export const useBreadcrumb = ({ rootLabel, appName }: BreadcrumbProps) => {
-  const { shell } = useContext(ShellContext);
-  const [root, setRoot] = useState<BreadcrumbItem[]>([]);
+export const useBreadcrumb = ({ rootLabel, items }: BreadcrumbProps) => {
   const [paths, setPaths] = useState<BreadcrumbItem[]>([]);
   const location = useLocation();
+  const navigate = useNavigate();
   const pathnames = location.pathname.split('/').filter((x) => x);
 
-  useEffect(() => {
-    const fetchRoot = async () => {
-      try {
-        const response = await shell?.navigation.getURL(appName, '#/', {});
-        const rootItem = {
-          label: rootLabel,
-          href: String(response),
-        };
-        setRoot([rootItem]);
-      } catch {
-        // Fetch navigation error
-      }
-    };
-    fetchRoot();
-  }, [rootLabel, appName, shell?.navigation]);
+  const root: BreadcrumbItem = {
+    id: rootLabel,
+    label: rootLabel,
+    onClick: () => navigate(urls.root),
+  };
 
   useEffect(() => {
-    const pathsTab = pathnames.map((value) => ({
-      label: value,
-      href: `/#/${appName}/${value}`,
-    }));
+    const pathsTab = pathnames.map((value, index) => {
+      const item = items?.find(({ id }) => id === value);
+
+      return {
+        id: item?.id ?? value,
+        label: item?.label ?? value,
+        onClick: (event: BreadcrumbEvent) => {
+          const { isCollapsed, isLast } = event.target;
+          if (!isCollapsed && !isLast) {
+            navigate(`/${pathnames.slice(0, index + 1).join('/')}`);
+          }
+        },
+      };
+    });
     setPaths(pathsTab);
-  }, [location]);
+  }, [location, items]);
 
-  return [...root, ...paths];
+  return [root, ...paths];
 };

packages/manager/apps/hycu/src/pages/listing/Listing.page.tsx

@@ -118,6 +118,7 @@ const DatagridActionCell = (hycuDetail: IHycuDetails) => {
 };
 
 export default function Listing() {
+  const navigate = useNavigate();
   const { t } = useTranslation('hycu/listing');
   const { t: tCommon } = useTranslation('hycu');
   const { t: tError } = useTranslation('hycu/error');
@@ -196,6 +197,9 @@ export default function Listing() {
                 color={ODS_THEME_COLOR_INTENT.primary}
                 variant={ODS_BUTTON_VARIANT.stroked}
                 size={ODS_BUTTON_SIZE.sm}
+                onClick={() => {
+                  navigate(urls.order);
+                }}
                 inline
               >
                 {t('hycu_order')}

packages/manager/apps/hycu/src/pages/listing/Listing.spec.tsx

@@ -47,4 +47,18 @@ describe('License Hycu listing test suite', () => {
       { timeout: 30_000 },
     );
   });
+
+  it('should navigate to hycu order on click order button ', async () => {
+    await renderTestApp();
+
+    await act(() =>
+      userEvent.click(screen.getByText(labels.listing.hycu_order)),
+    );
+
+    await waitFor(
+      () =>
+        expect(screen.getByText(labels.order.hycu_order_title)).toBeVisible(),
+      { timeout: 30_000 },
+    );
+  });
 });

packages/manager/apps/hycu/src/pages/onboarding/Onboarding.page.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card, OnboardingLayout } from '@ovh-ux/manager-react-components';
+import { useNavigate } from 'react-router-dom';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
 import onboardingImgSrc from './hycu-x-ovhcloud.svg';
 import HYCU_CONFIG from '@/hycu.config';
+import { urls } from '@/routes/routes.constant';
 
 export default function Onboarding() {
+  const navigate = useNavigate();
   const { t } = useTranslation('hycu/onboarding');
   const { t: tCommon } = useTranslation('hycu');
   const link = useGuideUtils();
@@ -53,7 +56,9 @@ export default function Onboarding() {
       img={imgSrc}
       description={description}
       orderButtonLabel={t('orderButtonLabel')}
-      orderHref={t('orderButtonLink')}
+      onOrderButtonClick={() => {
+        navigate(urls.order);
+      }}
       moreInfoButtonLabel={t('moreInfoButtonLabel')}
       moreInfoHref={link?.main}
     >

packages/manager/apps/hycu/src/pages/order/Order.page.tsx

@@ -8,6 +8,7 @@ import Breadcrumb from '@/components/Breadcrumb/Breadcrumb.component';
 import OrderConfirmation from '@/components/Order/OrderConfirmation';
 import PackSelection from '@/components/Order/PackSelection';
 import useOrderHYCU from '@/hooks/order/useOrderHYCU';
+import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
 
 export default function Order() {
   const { t } = useTranslation('hycu/order');
@@ -29,9 +30,16 @@ export default function Order() {
     region: subsidiary,
   });
 
+  const breadcrumbItems: BreadcrumbItem[] = [
+    {
+      id: 'order',
+      label: t('hycu_order_title'),
+    },
+  ];
+
   return (
     <BaseLayout
-      breadcrumb={<Breadcrumb />}
+      breadcrumb={<Breadcrumb items={breadcrumbItems} />}
       description={description}
       header={header}
     >

packages/manager/apps/hycu/src/routes/routes.constant.ts

@@ -1,13 +1,13 @@
 export const subRoutes = {
   onboarding: 'onboarding',
+  order: 'order',
   serviceName: ':serviceName',
 };
 
 export const urls = {
   root: '/',
-  onboarding: `/${subRoutes.onboarding}`,
   listing: '/',
+  onboarding: `/${subRoutes.onboarding}`,
+  order: `/${subRoutes.order}`,
   dashboard: `/${subRoutes.serviceName}`,
-  tab2: 'Tab2',
-  order: '/order',
 } as const;