feat(rancher): use component from manager component

packages/manager-components/src/components/templates/dashboard/dashboard.component.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Headers, HeadersProps } from '../../content';
 
 import { Links, LinksProps } from '../../typography';
+import { PageLayout } from '../layout/layout.component';
 export interface DashboardLayoutProps {
   breadcrumb?: React.ReactElement;
   content?: React.ReactElement;
@@ -21,7 +22,7 @@ export const DashboardLayout = ({
   tabs,
 }: DashboardLayoutProps) => {
   return (
-    <div className="m-8">
+    <PageLayout>
       <div className="mb-3">{breadcrumb}</div>
       {header && (
         <Headers
@@ -41,6 +42,6 @@ export const DashboardLayout = ({
       )}
       <div>{tabs}</div>
       <div className="mt-8">{content}</div>
-    </div>
+    </PageLayout>
   );
 };

packages/manager-components/src/components/templates/index.ts

@@ -2,3 +2,4 @@ export * from './dashboard/dashboard.component';
 export * from './error/error.component';
 export * from './error/error.types';
 export * from './onboarding/onboarding.component';
+export * from './layout/layout.component';

packages/manager-components/src/components/templates/layout/layout.component.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const PageLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
+  return <div className="m-10">{children}</div>;
+};

packages/manager-components/src/components/typography/title/title.component.tsx

@@ -8,8 +8,8 @@ import {
 import { OsdsText } from '@ovhcloud/ods-components/react';
 
 export const CommonTitle: React.FC<React.PropsWithChildren & {
-  typoSize: ODS_THEME_TYPOGRAPHY_SIZE;
-}> = ({ children, typoSize }) => {
+  typoSize?: ODS_THEME_TYPOGRAPHY_SIZE;
+}> = ({ children, typoSize = ODS_THEME_TYPOGRAPHY_SIZE._400 }) => {
   return (
     <OsdsText
       level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}

packages/manager/apps/pci-rancher/src/components/layout-helpers/CreateRancher/CreateRancher.tsx

@@ -1,6 +1,10 @@
+import {
+  PciDiscoveryBanner,
+  Subtitle,
+  Title,
+} from '@ovhcloud/manager-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
-  ODS_BUTTON_SIZE,
   ODS_BUTTON_VARIANT,
   ODS_INPUT_TYPE,
   ODS_MESSAGE_TYPE,
@@ -19,18 +23,16 @@ import {
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { isValidRancherName } from '@/utils/rancher';
+import { TrackingEvent, TrackingPageView } from '@/utils/tracking';
 import { getRanchersUrl } from '@/utils/route';
-import Title, { Subtitle } from '@/components/Title/Title';
+import { isValidRancherName } from '@/utils/rancher';
+import { useTrackingAction } from '@/hooks/useTrackingPage';
 import Block from '@/components/Block/Block';
 import {
   CreateRancherPayload,
   RancherPlan,
   RancherVersion,
 } from '@/api/api.type';
-import { useActivatePciProjectURL } from '@/hooks/useActivatePciProjectURL';
-import { useTrackingAction } from '@/hooks/useTrackingPage';
-import { TrackingEvent, TrackingPageView } from '@/utils/tracking';
 import { useSimpleTrackingAction } from '../../../hooks/useTrackingPage';
 
 const TileSection: React.FC<{
@@ -118,7 +120,6 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
   const [selectedVersion, setSelectedVersion] = useState(null);
 
   const navigate = useNavigate();
-  const activateProjectUrl = useActivatePciProjectURL(projectId);
 
   const isValidName = rancherName !== '' && isValidRancherName(rancherName);
   const hasInputError = rancherName !== '' && !isValidName;
@@ -156,32 +157,7 @@ const CreateRancher: React.FC<CreateRancherProps> = ({
   return (
     <div>
       <Title>{t('createRancherTitle')}</Title>
-      {isProjectDiscoveryMode && (
-        <OsdsMessage
-          color={ODS_THEME_COLOR_INTENT.warning}
-          type={ODS_MESSAGE_TYPE.warning}
-          className="my-6"
-        >
-          <div className="flex items-center justify-between">
-            <div className="max-w-3xl">
-              <OsdsText color={ODS_THEME_COLOR_INTENT.warning}>
-                <Trans>
-                  {t('createRancherDiscoveryMode')} <br />
-                </Trans>
-              </OsdsText>
-            </div>
-            <div className="ml-4">
-              <OsdsButton
-                size={ODS_BUTTON_SIZE.sm}
-                href={activateProjectUrl}
-                color={ODS_THEME_COLOR_INTENT.primary}
-              >
-                {t('createRancherDiscoveryModeActive')}
-              </OsdsButton>
-            </div>
-          </div>
-        </OsdsMessage>
-      )}
+      {isProjectDiscoveryMode && <PciDiscoveryBanner projectId={projectId} />}
       <OsdsMessage
         color={ODS_THEME_COLOR_INTENT.info}
         type={ODS_MESSAGE_TYPE.info}

packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ import { OsdsIcon, OsdsLink } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { Outlet, useHref, useParams } from 'react-router-dom';
 
+import { Title } from '@ovhcloud/manager-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { useMutationState } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +16,6 @@ import { RancherService } from '@/api/api.type';
 import { useTrackingPage } from '@/hooks/useTrackingPage';
 import { COMMON_PATH } from '@/routes';
 import { TrackingPageView } from '@/utils/tracking';
-import Title from '../../Title/Title';
 import RancherDetail from './RancherDetail';
 import TabBar from './TabBar';
 

packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail.tsx

@@ -1,5 +1,6 @@
 import { format } from 'date-fns';
 
+import { CommonTitle } from '@ovhcloud/manager-components';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import {
@@ -23,12 +24,12 @@ import {
 } from '@ovhcloud/ods-components/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHref } from 'react-router-dom';
 
+import { useHref } from 'react-router-dom';
 import { RancherService } from '@/api/api.type';
+import { TileBlock } from '@/components/TileBlock/TileBlock';
 import { useTrackingAction } from '@/hooks/useTrackingPage';
 import { TrackingEvent, TrackingPageView } from '@/utils/tracking';
-import { TileBlock } from '@/components/TileBlock/TileBlock';
 
 interface RancherDetailProps {
   rancher: RancherService;
@@ -82,13 +83,7 @@ const RancherDetail = ({
         <div className="p-3">
           <OsdsTile className="w-full h-full flex-col" inline rounded>
             <div className="flex flex-col w-full">
-              <OsdsText
-                size={ODS_TEXT_SIZE._400}
-                level={ODS_TEXT_LEVEL.heading}
-                color={ODS_THEME_COLOR_INTENT.text}
-              >
-                {t('general_informations')}
-              </OsdsText>
+              <CommonTitle>{t('general_informations')}</CommonTitle>
               <OsdsDivider separator />
               <TileBlock label={t('description')}>
                 <OsdsLink
@@ -127,13 +122,7 @@ const RancherDetail = ({
         <div className="p-3">
           <OsdsTile className="w-full h-full flex-col" inline rounded>
             <div className="flex flex-col w-full">
-              <OsdsText
-                size={ODS_TEXT_SIZE._400}
-                level={ODS_TEXT_LEVEL.heading}
-                color={ODS_THEME_COLOR_INTENT.text}
-              >
-                {t('security_and_access')}
-              </OsdsText>
+              <CommonTitle>{t('security_and_access')}</CommonTitle>
               <OsdsDivider separator />
               <TileBlock label={t('rancher_ui_access')}>
                 <OsdsClipboard aria-label="clipboard" value={url}>
@@ -186,13 +175,7 @@ const RancherDetail = ({
         <div className="p-3">
           <OsdsTile className="w-full h-full flex-col" inline rounded>
             <div className="flex flex-col w-full">
-              <OsdsText
-                size={ODS_TEXT_SIZE._400}
-                level={ODS_TEXT_LEVEL.heading}
-                color={ODS_THEME_COLOR_INTENT.text}
-              >
-                {t('consumption')}
-              </OsdsText>
+              <CommonTitle>{t('consumption')}</CommonTitle>
               <OsdsDivider separator />
               <TileBlock label={t('service_level')}>
                 <OsdsText color={ODS_THEME_COLOR_INTENT.text}>

packages/manager/apps/pci-rancher/src/pages/create/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
+import { PageLayout } from '@ovhcloud/manager-components';
 import {
   getRancherPlan,
   getRancherVersion,
   getReferenceRancherInfo,
 } from '@/api';
-import PageLayout from '@/components/PageLayout/PageLayout';
 import CreateRancher from '@/components/layout-helpers/CreateRancher/CreateRancher';
 import useCreateRancher from '@/hooks/useCreateRancher';
 import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';

packages/manager/apps/pci-rancher/src/pages/dashboard/index.tsx

@@ -1,3 +1,4 @@
+import { DashboardLayout, ErrorBanner } from '@ovhcloud/manager-components';
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -6,16 +7,14 @@ import {
   useParams,
   useResolvedPath,
 } from 'react-router-dom';
-import { ErrorBanner } from '@ovhcloud/manager-components';
 import Breadcrumb, {
   BreadcrumbHandleParams,
 } from '@/components/Breadcrumb/Breadcrumb';
 import Loading from '@/components/Loading/Loading';
 import Dashboard from '@/components/layout-helpers/Dashboard/Dashboard';
-import { DashboardTabItemProps } from '../../components/layout-helpers/Dashboard/Dashboard';
 import { useRancher } from '@/hooks/useRancher';
-import PageLayout from '@/components/PageLayout/PageLayout';
 import { getRanchersUrl } from '@/utils/route';
+import { DashboardTabItemProps } from '../../components/layout-helpers/Dashboard/Dashboard';
 
 export function breadcrumb({ params }: BreadcrumbHandleParams) {
   return params.serviceName;
@@ -63,12 +62,16 @@ export default function DashboardPage() {
   }
 
   return (
-    <PageLayout>
-      <Suspense fallback={<Loading />}>
-        <Breadcrumb items={[{ label: data?.data.targetSpec.name }]} />
-        {data?.data && <Dashboard tabs={tabsList} rancher={data.data} />}
-      </Suspense>
+    <Suspense fallback={<Loading />}>
+      <DashboardLayout
+        breadcrumb={
+          <Breadcrumb items={[{ label: data?.data.targetSpec.name }]} />
+        }
+        content={
+          data?.data && <Dashboard tabs={tabsList} rancher={data.data} />
+        }
+      />
       <Outlet />
-    </PageLayout>
+    </Suspense>
   );
 }

packages/manager/apps/pci-rancher/src/pages/index.tsx

@@ -1,13 +1,12 @@
-import React, { Suspense } from 'react';
-import { ErrorBanner } from '@ovhcloud/manager-components';
 import { Outlet } from 'react-router-dom';
+import { ErrorBanner, PageLayout } from '@ovhcloud/manager-components';
+import React, { Suspense } from 'react';
 import Breadcrumb, {
   BreadcrumbHandleParams,
 } from '@/components/Breadcrumb/Breadcrumb';
 import Loading from '@/components/Loading/Loading';
-import Listing from './listing';
 import { useRanchers } from '@/hooks/useRancher';
-import PageLayout from '@/components/PageLayout/PageLayout';
+import Listing from './listing';
 
 export function breadcrumb({ params }: BreadcrumbHandleParams) {
   return params.serviceName;

packages/manager/apps/pci-rancher/src/pages/listing/index.tsx

@@ -14,9 +14,9 @@ import {
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHref, useNavigate, useParams } from 'react-router-dom';
+import { Title } from '@ovhcloud/manager-components';
 import { RancherService } from '@/api/api.type';
 import TableContainer from '@/components/Table/TableContainer';
-import Title from '@/components/Title/Title';
 import { useTrackingAction } from '@/hooks/useTrackingPage';
 import { getOnboardingUrl } from '@/utils/route';
 import { TrackingEvent, TrackingPageView } from '@/utils/tracking';

packages/manager/apps/pci-rancher/src/pages/onboarding/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { OnboardingLayout } from '@ovhcloud/manager-components';
+import { OnboardingLayout, PageLayout } from '@ovhcloud/manager-components';
 import { useNavigate, useParams } from 'react-router-dom';
 import onboardingImgSrc from '../../assets/onboarding-img.png';
 import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
-import PageLayout from '@/components/PageLayout/PageLayout';
 import { getCreateRancherUrl } from '@/utils/route';
 import { useTrackingAction, useTrackingPage } from '@/hooks/useTrackingPage';
 import { TrackingEvent, TrackingPageView } from '@/utils/tracking';