From e815d633e9f6679bbfdc5d1dcc3180db7e5ee674 Mon Sep 17 00:00:00 2001 From: Alex Boungnaseng Date: Wed, 15 Jan 2025 14:47:08 +0100 Subject: [PATCH] fix(manager-react-components): update eslint error and breadcrumb ref: MANAGER-14535 Signed-off-by: Alex Boungnaseng --- .../components/breadcrumb/breadcrumb.component.tsx | 8 +++----- .../src/components/breadcrumb/breadcrumb.stories.tsx | 2 +- .../components/templates/error/error.component.tsx | 11 ++++------- .../src/hooks/breadcrumb/useBreadcrumb.spec.tsx | 3 ++- .../src/hooks/breadcrumb/useBreadcrumb.tsx | 4 ++-- .../app/conditional-templates/onboarding/index.tsx | 7 +++++-- 6 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/manager-react-components/src/components/breadcrumb/breadcrumb.component.tsx b/packages/manager-react-components/src/components/breadcrumb/breadcrumb.component.tsx index b619ea0eea48..71fa6ec6ce37 100644 --- a/packages/manager-react-components/src/components/breadcrumb/breadcrumb.component.tsx +++ b/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 = ({ rootLabel, appName, -}: BreadcrumbProps): JSX.Element { +}) => { const label = rootLabel; - const breadcrumbItems = useBreadcrumb({ rootLabel: label, appName, }); - return ( {breadcrumbItems?.map((item) => ( @@ -34,4 +32,4 @@ export function Breadcrumb({ ))} ); -} +}; diff --git a/packages/manager-react-components/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/manager-react-components/src/components/breadcrumb/breadcrumb.stories.tsx index d4727dab5f38..d022c07f0838 100644 --- a/packages/manager-react-components/src/components/breadcrumb/breadcrumb.stories.tsx +++ b/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 ; diff --git a/packages/manager-react-components/src/components/templates/error/error.component.tsx b/packages/manager-react-components/src/components/templates/error/error.component.tsx index 4dafa1d0ea50..62680985bbdf 100644 --- a/packages/manager-react-components/src/components/templates/error/error.component.tsx +++ b/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) { diff --git a/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.spec.tsx b/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.spec.tsx index d79763917a1c..feb07d89174b 100644 --- a/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.spec.tsx +++ b/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 () => ({ diff --git a/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.tsx b/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.tsx index a35bccb847e5..9b18933f7d64 100644 --- a/packages/manager-react-components/src/hooks/breadcrumb/useBreadcrumb.tsx +++ b/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([]); const [paths, setPaths] = useState([]); diff --git a/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx b/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx index 3b338f96bbb8..cf35fa742831 100644 --- a/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx +++ b/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';