fix(manager-react-components): update eslint error and breadcrumb

ref: MANAGER-14535

Signed-off-by: Alex Boungnaseng <[email protected]>

packages/manager-react-components/src/components/breadcrumb/breadcrumb.component.tsx

@@ -12,17 +12,15 @@ export interface BreadcrumbProps {
   appName: string;
 }
 
-export function Breadcrumb({
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   rootLabel,
   appName,
-}: BreadcrumbProps): JSX.Element {
+}) => {
   const label = rootLabel;
-
   const breadcrumbItems = useBreadcrumb({
     rootLabel: label,
     appName,
   });
-
   return (
     <OdsBreadcrumb>
       {breadcrumbItems?.map((item) => (
@@ -34,4 +32,4 @@ export function Breadcrumb({
       ))}
     </OdsBreadcrumb>
   );
-}
+};

packages/manager-react-components/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Breadcrumb } from './breadcrumb.component';
 import {
   withRouter,
   reactRouterParameters,
 } from 'storybook-addon-react-router-v6';
+import { Breadcrumb } from './breadcrumb.component';
 
 const BreadcrumbStory = (args) => {
   return <Breadcrumb rootLabel={args.rootLabel} appName={args.appName} />;

packages/manager-react-components/src/components/templates/error/error.component.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { OdsText, OdsButton, OdsMessage } from '@ovhcloud/ods-components/react';
 import {
   ODS_BUTTON_VARIANT,
   ODS_MESSAGE_COLOR,
   ODS_TEXT_PRESET,
 } from '@ovhcloud/ods-components';
-import { PageType } from '@ovh-ux/manager-react-shell-client';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import { ErrorMessage, TRACKING_LABELS } from './error.types';
-import './translations/translations';
-
-import { ErrorBannerProps } from './error.types';
-import { useTranslation } from 'react-i18next';
+import { PageType, ShellContext } from '@ovh-ux/manager-react-shell-client';
 
+import { ErrorMessage, TRACKING_LABELS, ErrorBannerProps } from './error.types';
+import './translations/translations';
 import ErrorImg from '../../../../public/assets/error-banner-oops.png';
 
 function getTrackingTypology(error: ErrorMessage) {

packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.spec.tsx

@@ -61,7 +61,8 @@ describe('useBreadcrumb', () => {
     expect(current[0].label).toBe('vrackServices');
     expect(current[0].href).toBe('/#/vrack-services/vrackServices');
   });
-
+});
+describe('useBreadcrumb', () => {
   it('should return an array with 3 breadcrumb items', async () => {
     beforeEach(() => {
       vitest.mock('react-router-dom', async () => ({

packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.tsx

@@ -7,13 +7,13 @@ export type BreadcrumbItem = {
   href?: string;
 };
 
-export interface useBreadcrumbProps {
+export interface UseBreadcrumbProps {
   rootLabel?: string;
   appName?: string;
   projectId?: string;
   items?: BreadcrumbItem[];
 }
-export const useBreadcrumb = ({ rootLabel, appName }: useBreadcrumbProps) => {
+export const useBreadcrumb = ({ rootLabel, appName }: UseBreadcrumbProps) => {
   const { shell } = useContext(ShellContext);
   const [root, setRoot] = useState<BreadcrumbItem[]>([]);
   const [paths, setPaths] = useState<BreadcrumbItem[]>([]);

packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card, OnboardingLayout } from '@ovh-ux/manager-react-components';
+import {
+  Card,
+  OnboardingLayout,
+  Breadcrumb,
+} from '@ovh-ux/manager-react-components';
 import useGuideUtils from '@/hooks/guide/useGuideUtils';
-import { Breadcrumb } from '@ovh-ux/manager-react-components';
 import onboardingImgSrc from './onboarding-img.png';
 
 import appConfig from '@/{{appName}}.config';