} = {
+ guideLink1: {
+ DE: '/update-path',
+ ES: '/update-path',
+ IE: '/en/update-path',
+ IT: '/update-path',
+ PL: '/update-path',
+ PT: '/update-path',
+ FR: '/update-path',
+ GB: '/update-path',
+ CA: '/update-path',
+ QC: '/update-path',
+ WE: '/update-path',
+ WS: '/update-path',
+ US: '/update-path',
+ },
+ guideLink2: {
+ DE: '/guide-link-2-path',
+ ES: '/guide-link-2-path',
+ IE: '/en/guide-link-2-path',
+ IT: '/guide-link-2-path',
+ PL: '/guide-link-2-path',
+ PT: '/guide-link-2-path',
+ FR: '/guide-link-2-path',
+ GB: '/guide-link-2-path',
+ CA: '/update-path',
+ QC: '/update-path',
+ WE: '/update-path',
+ WS: '/update-path',
+ US: '/update-path',
+ },
+ guideLink3: {
+ DE: '/guide-link-3-path',
+ ES: '/guide-link-3-path',
+ IE: '/en/guide-link-3-path',
+ IT: '/guide-link-3-path',
+ PL: '/guide-link-3-path',
+ PT: '/guide-link-3-path',
+ FR: '/guide-link-3-path',
+ GB: '/guide-link-3-path',
+ CA: '/update-path',
+ QC: '/update-path',
+ WE: '/update-path',
+ WS: '/update-path',
+ US: '/update-path',
+ },
+ /*
+ addNewGuideLink : {
+ DEFAULT: '/guide-link-3-path',
+ DE: '/guide-link-3-path',
+ ES: '/guide-link-3-path',
+ ...
+ }
+ */
+};
+
+type GetGuideLinkProps = {
+ name?: string;
+ subsidiary: CountryCode | string;
+};
+
+function getGuideListLink({ subsidiary }: GetGuideLinkProps) {
+ const list: { [guideName: string]: string } = {};
+ const keys = Object.entries(GUIDE_LIST);
+ keys.forEach((key) => {
+ list[key[0]] = docUrl + GUIDE_LIST[key[0]][subsidiary as CountryCode];
+ });
+ return list;
+}
+
+interface GuideLinkProps {
+ [guideName: string]: string;
+}
+
+function useGuideUtils() {
+ const { shell } = useContext(ShellContext);
+ const { environment } = shell;
+ const [list, setList] = useState({});
+
+ useEffect(() => {
+ const getSubSidiary = async () => {
+ const env = await environment.getEnvironment();
+ const { ovhSubsidiary } = env.getUser();
+ const guideList = getGuideListLink({ subsidiary: ovhSubsidiary });
+ setList(guideList);
+ };
+ getSubSidiary();
+ }, []);
+ return list as GuideLinkProps;
+}
+
+export default useGuideUtils;
diff --git a/packages/manager/apps/sap-features-hub/src/index.scss b/packages/manager/apps/sap-features-hub/src/index.scss
new file mode 100644
index 000000000000..bb4185167bd1
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/index.scss
@@ -0,0 +1,7 @@
+@tailwind utilities;
+
+@import '@ovhcloud/ods-themes/default';
+
+html {
+ font-family: var(--ods-font-family-default);
+}
diff --git a/packages/manager/apps/sap-features-hub/src/index.tsx b/packages/manager/apps/sap-features-hub/src/index.tsx
new file mode 100644
index 000000000000..a2facf9a2a72
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+ ShellContext,
+ initShellContext,
+ initI18n,
+} from '@ovh-ux/manager-react-shell-client';
+import '@ovh-ux/manager-react-components/dist/style.css';
+import App from './App';
+import './vite-hmr';
+import './index.scss';
+
+import { UNIVERSE, SUB_UNIVERSE, APP_NAME, LEVEL2 } from './tracking.constant';
+
+const trackingContext = {
+ chapter1: UNIVERSE,
+ chapter2: SUB_UNIVERSE,
+ chapter3: APP_NAME,
+ appName: APP_NAME,
+ pageTheme: UNIVERSE,
+ level2Config: LEVEL2,
+};
+
+const init = async (appName: string) => {
+ const context = await initShellContext(appName, trackingContext);
+
+ await initI18n({
+ context,
+ reloadOnLocaleChange: true,
+ defaultNS: appName,
+ ns: ['listing', 'dashboard', 'onboarding'],
+ });
+
+ const region = context.environment.getRegion();
+ context.shell.tracking.setConfig(region, LEVEL2);
+ try {
+ await import(`./config-${region}.js`);
+ } catch (error) {
+ // nothing to do
+ }
+
+ ReactDOM.createRoot(document.getElementById('root')!).render(
+
+
+
+
+ ,
+ );
+};
+
+init('sap-features-hub');
diff --git a/packages/manager/apps/sap-features-hub/src/pages/404.tsx b/packages/manager/apps/sap-features-hub/src/pages/404.tsx
new file mode 100644
index 000000000000..d052f1ebcbbf
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/404.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function NotFound() {
+ // @TODO: add a redirection here in order to catch /:serviceName given from iframe
+
+ return 404 - route not found
;
+}
diff --git a/packages/manager/apps/sap-features-hub/src/pages/dashboard/general-informations/index.tsx b/packages/manager/apps/sap-features-hub/src/pages/dashboard/general-informations/index.tsx
new file mode 100644
index 000000000000..a785e6d2ff0f
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/dashboard/general-informations/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function GeneralInfos() {
+ return Information Générales Tab
;
+}
+
+export default GeneralInfos;
diff --git a/packages/manager/apps/sap-features-hub/src/pages/dashboard/index.tsx b/packages/manager/apps/sap-features-hub/src/pages/dashboard/index.tsx
new file mode 100644
index 000000000000..8ccc127990db
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/dashboard/index.tsx
@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+ Outlet,
+ NavLink,
+ useLocation,
+ useNavigate,
+ useParams,
+ useResolvedPath,
+} from 'react-router-dom';
+import { OdsTabs, OdsTab } from '@ovhcloud/ods-components/react';
+
+import { BaseLayout } from '@ovh-ux/manager-react-components';
+
+import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
+
+export type DashboardTabItemProps = {
+ name: string;
+ title: string;
+ to: string;
+};
+
+export type DashboardLayoutProps = {
+ tabs: DashboardTabItemProps[];
+};
+
+export default function DashboardPage() {
+ const [panel, setActivePanel] = useState('');
+ const { serviceName } = useParams();
+ const location = useLocation();
+ const navigate = useNavigate();
+ const { t } = useTranslation('dashboard');
+
+ const tabsList = [
+ {
+ name: 'general_informations',
+ title: 'Informations générales',
+ to: useResolvedPath('').pathname,
+ },
+ {
+ name: 'Tab 2',
+ title: 'Tab 2',
+ to: useResolvedPath('Tab2').pathname,
+ },
+ ];
+
+ useEffect(() => {
+ const activeTab = tabsList.find((tab) => tab.to === location.pathname);
+ if (activeTab) {
+ setActivePanel(activeTab.name);
+ } else {
+ setActivePanel(tabsList[0].name);
+ navigate(`${tabsList[0].to}`);
+ }
+ }, [location.pathname]);
+
+ const header = {
+ title: t('title'),
+ };
+
+ return (
+ }
+ header={header}
+ description="Description du sap-features-hub"
+ tabs={
+
+ {tabsList.map((tab: DashboardTabItemProps) => (
+
+
+ {tab.title}
+
+
+ ))}
+
+ }
+ >
+
+
+ );
+}
diff --git a/packages/manager/apps/sap-features-hub/src/pages/dashboard/tab2/index.tsx b/packages/manager/apps/sap-features-hub/src/pages/dashboard/tab2/index.tsx
new file mode 100644
index 000000000000..9cb100623734
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/dashboard/tab2/index.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Tab2() {
+ return Tab 2
;
+}
+
+export default Tab2;
diff --git a/packages/manager/apps/sap-features-hub/src/pages/index.tsx b/packages/manager/apps/sap-features-hub/src/pages/index.tsx
new file mode 100644
index 000000000000..84f751a77920
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function SapFeaturesHub() {
+ const { t } = useTranslation('sap-features-hub');
+
+ return (
+
+
{t('title')}
+
Start your application
+
-
;
+ },
+ }));
+ setColumns(newColumns);
+ }
+ }, [flattenData]);
+
+ if (isError) {
+ return ;
+ }
+
+ if (isLoading && pageIndex === 1) {
+ return (
+
+
+
+ );
+ }
+
+ const header = {
+ title: t('title'),
+ };
+
+ return (
+ } header={header}>
+
+ {columns && flattenData && (
+
+ )}
+
+
+ );
+}
diff --git a/packages/manager/apps/sap-features-hub/src/pages/listing/listing.spec.tsx b/packages/manager/apps/sap-features-hub/src/pages/listing/listing.spec.tsx
new file mode 100644
index 000000000000..722f04de9e63
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/listing/listing.spec.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { describe, it, vi, expect } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Listing from './index';
+
+vi.mock('@ovh-ux/manager-react-components', () => ({
+ BaseLayout: vi.fn().mockReturnValue(),
+ useResourcesIcebergV6: vi.fn().mockReturnValue({
+ flattenData: [],
+ isError: false,
+ error: {},
+ totalCount: 0,
+ hasNextPage: true,
+ fetchNextPage: vi.fn(),
+ isLoading: true,
+ status: {},
+ sorting: [],
+ setSorting: false,
+ pageIndex: 1,
+ }),
+ Datagrid: vi.fn().mockReturnValue(),
+}));
+
+vi.mock('react-router-dom', () => ({
+ useNavigate: vi.fn(),
+ useLocation: vi.fn(() => ({
+ hash: '',
+ key: 'default',
+ pathname: '/',
+ search: '',
+ state: null,
+ })),
+}));
+
+const queryClient = new QueryClient();
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const wrapper = ({ children }) => (
+ {children}
+);
+
+describe('listing page', () => {
+ it('displays loading spinner while main request are loading', () => {
+ const { getByTestId } = render(, { wrapper });
+ expect(getByTestId('listing-page-spinner')).toBeInTheDocument();
+ });
+});
diff --git a/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.scss b/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.scss
new file mode 100644
index 000000000000..995e5c3b0be6
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.scss
@@ -0,0 +1,10 @@
+.tile-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-gap: 30px;
+ padding-top: 3rem;
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
diff --git a/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.tsx b/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.tsx
new file mode 100644
index 000000000000..93e59c16a128
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/pages/onboarding/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, OnboardingLayout } from '@ovh-ux/manager-react-components';
+import useGuideUtils from '@/hooks/guide/useGuideUtils';
+import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
+import onboardingImgSrc from './onboarding-img.png';
+
+export default function Onboarding() {
+ const { t } = useTranslation('onboarding');
+ const link = useGuideUtils();
+
+ const tileList = [
+ {
+ id: 1,
+ texts: {
+ title: t('guide1Title'),
+ description: t('guide1Description'),
+ category: t('guideCategory'),
+ },
+ href: link?.guideLink1,
+ },
+ {
+ id: 2,
+ texts: {
+ title: t('guide2Title'),
+ description: t('guide2Description'),
+ category: t('guideCategory'),
+ },
+ href: link?.guideLink2,
+ },
+ {
+ id: 3,
+ texts: {
+ title: t('guide3Title'),
+ description: t('guide3Description'),
+ category: t('guideCategory'),
+ },
+ href: link?.guideLink3,
+ },
+ ];
+
+ const title: string = t('title');
+ const description: string = t('description');
+ const imgSrc = {
+ src: onboardingImgSrc,
+ };
+
+ return (
+ <>
+
+
+ {tileList.map((tile) => (
+
+ ))}
+
+
+ );
+}
diff --git a/packages/manager/apps/sap-features-hub/src/pages/onboarding/onboarding-img.png b/packages/manager/apps/sap-features-hub/src/pages/onboarding/onboarding-img.png
new file mode 100644
index 000000000000..1ac8d6473c95
Binary files /dev/null and b/packages/manager/apps/sap-features-hub/src/pages/onboarding/onboarding-img.png differ
diff --git a/packages/manager/apps/sap-features-hub/src/routes/routes.constant.ts b/packages/manager/apps/sap-features-hub/src/routes/routes.constant.ts
new file mode 100644
index 000000000000..8fcb96e6009d
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/routes/routes.constant.ts
@@ -0,0 +1,7 @@
+export const urls = {
+ root: '/',
+ onboarding: '/onboarding',
+ listing: '/',
+ dashboard: '/:serviceName',
+ tab2: 'Tab2',
+};
diff --git a/packages/manager/apps/sap-features-hub/src/routes/routes.tsx b/packages/manager/apps/sap-features-hub/src/routes/routes.tsx
new file mode 100644
index 000000000000..7cdcd5e49041
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/routes/routes.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { RouteObject } from 'react-router-dom';
+import { PageType } from '@ovh-ux/manager-react-shell-client';
+import NotFound from '@/pages/404';
+import { urls } from '@/routes/routes.constant';
+
+const lazyRouteConfig = (importFn: CallableFunction): Partial => {
+ return {
+ lazy: async () => {
+ const { default: moduleDefault, ...moduleExports } = await importFn();
+ return {
+ Component: moduleDefault,
+ ...moduleExports,
+ };
+ },
+ };
+};
+
+export const Routes: any = [
+ {
+ path: urls.root,
+ ...lazyRouteConfig(() => import('@/pages/layout')),
+ children: [
+ {
+ id: 'listing',
+ path: urls.listing,
+ ...lazyRouteConfig(() => import('@/pages/listing')),
+ handle: {
+ tracking: {
+ pageName: 'listing',
+ pageType: PageType.listing,
+ },
+ },
+ },
+ {
+ path: urls.dashboard,
+ ...lazyRouteConfig(() => import('@/pages/dashboard')),
+ children: [
+ {
+ id: 'dashboard',
+ path: '',
+ ...lazyRouteConfig(() =>
+ import('@/pages/dashboard/general-informations'),
+ ),
+ handle: {
+ tracking: {
+ pageName: 'dashboard',
+ pageType: PageType.dashboard,
+ },
+ },
+ },
+ {
+ id: 'dashboard.tab2',
+ path: 'Tab2',
+ ...lazyRouteConfig(() => import('@/pages/dashboard/tab2')),
+ handle: {
+ tracking: {
+ pageName: 'tab2',
+ pageType: PageType.dashboard,
+ },
+ },
+ },
+ ],
+ },
+ {
+ id: 'onboarding',
+ path: urls.onboarding,
+ ...lazyRouteConfig(() => import('@/pages/onboarding')),
+ handle: {
+ tracking: {
+ pageName: 'onboarding',
+ pageType: PageType.onboarding,
+ },
+ },
+ },
+ ],
+ },
+ {
+ path: '*',
+ element: ,
+ },
+];
diff --git a/packages/manager/apps/sap-features-hub/src/sap-features-hub.config.ts b/packages/manager/apps/sap-features-hub/src/sap-features-hub.config.ts
new file mode 100644
index 000000000000..8fa43a08a249
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/sap-features-hub.config.ts
@@ -0,0 +1,8 @@
+export default {
+ listing: {
+ datagrid: {
+ serviceKey: 'name',
+ },
+ },
+ rootLabel: 'sap-features-hub',
+};
diff --git a/packages/manager/apps/sap-features-hub/src/tracking.constant.ts b/packages/manager/apps/sap-features-hub/src/tracking.constant.ts
new file mode 100644
index 000000000000..b02f40ec8e75
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/tracking.constant.ts
@@ -0,0 +1,20 @@
+export const LEVEL2 = {
+ EU: {
+ config: {
+ level2: '0',
+ },
+ },
+ CA: {
+ config: {
+ level2: '0',
+ },
+ },
+ US: {
+ config: {
+ level2: '0',
+ },
+ },
+};
+export const UNIVERSE = 'HostedPrivatedCloud';
+export const SUB_UNIVERSE = 'HostedPrivatedCloud';
+export const APP_NAME = 'sap-features-hub';
diff --git a/packages/manager/apps/sap-features-hub/src/vite-hmr.ts b/packages/manager/apps/sap-features-hub/src/vite-hmr.ts
new file mode 100644
index 000000000000..473d87630039
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/src/vite-hmr.ts
@@ -0,0 +1,5 @@
+if (import.meta.hot) {
+ import.meta.hot.on('iframe-reload', () => {
+ window.location.reload();
+ });
+}
diff --git a/packages/manager/apps/sap-features-hub/tailwind.config.js b/packages/manager/apps/sap-features-hub/tailwind.config.js
new file mode 100644
index 000000000000..9697fd991205
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/tailwind.config.js
@@ -0,0 +1,22 @@
+import path from 'path';
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ './src/**/*.{js,jsx,ts,tsx}',
+ path.join(
+ path.dirname(require.resolve('@ovh-ux/manager-react-components')),
+ '**/*.{js,jsx,ts,tsx}',
+ ),
+ ],
+ theme: {
+ screens: {
+ xs: '0',
+ sm: '36em',
+ md: '48em',
+ lg: '62em',
+ xl: '75em',
+ xxl: '87.5em',
+ },
+ },
+};
diff --git a/packages/manager/apps/sap-features-hub/tsconfig.json b/packages/manager/apps/sap-features-hub/tsconfig.json
new file mode 100644
index 000000000000..e2104f471575
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "es2020"],
+ "noEmit": true,
+ "target": "es2020",
+ "types": ["vite/client", "node"],
+ "module": "ES2020",
+ "moduleResolution": "node",
+ "removeComments": true,
+ "outDir": "dist",
+ "esModuleInterop": true,
+ "isolatedModules": true,
+ "allowSyntheticDefaultImports": true,
+ "skipLibCheck": true,
+ "noImplicitAny": true,
+ "declaration": true,
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "jsx": "react",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src"],
+ "exclude": ["node_modules", "dist", "types", "src/__tests__"]
+}
diff --git a/packages/manager/apps/sap-features-hub/vite.config.mjs b/packages/manager/apps/sap-features-hub/vite.config.mjs
new file mode 100644
index 000000000000..f33ab6dc98cd
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/vite.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import { getBaseConfig } from '@ovh-ux/manager-vite-config';
+import { resolve } from 'path';
+
+export default defineConfig({
+ ...getBaseConfig(),
+ root: resolve(process.cwd()),
+});
diff --git a/packages/manager/apps/sap-features-hub/vitest.config.js b/packages/manager/apps/sap-features-hub/vitest.config.js
new file mode 100644
index 000000000000..8da64fe8a448
--- /dev/null
+++ b/packages/manager/apps/sap-features-hub/vitest.config.js
@@ -0,0 +1,34 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: [],
+ coverage: {
+ include: ['src'],
+ exclude: [],
+ },
+ testTimeout: 60_000,
+ fileParallelism: false,
+ maxWorkers: 1,
+ pollOptions: {
+ forks: {
+ singleFork: true,
+ },
+ threads: {
+ singleThread: true,
+ },
+ },
+ },
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src'),
+ },
+ mainFields: ['module'],
+ },
+});