feat(pci-quota): initialize react app

ref: DTCORE-2865 Signed-off-by: Yoann Fievez <[email protected]>
ovh · Nov 25, 2024 · 551a60c · 551a60c
1 parent 6b4ac70
commit 551a60c
Show file tree

Hide file tree

Showing 35 changed files with 627 additions and 31 deletions.
diff --git a/packages/manager/apps/pci-quota/README.md b/packages/manager/apps/pci-quota/README.md
@@ -0,0 +1 @@
+# PCI Quota and Regions
diff --git a/packages/manager/apps/pci-quota/index.html b/packages/manager/apps/pci-quota/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>OVHcloud</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./src/main.tsx"></script>
+    </body>
+</html>
diff --git a/packages/manager/apps/pci-quota/package.json b/packages/manager/apps/pci-quota/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "@ovh-ux/manager-pci-quota-app",
+  "version": "0.0.0",
+  "private": true,
+  "description": "PCI Quota and Regions react app",
+  "type": "module",
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json && vite build",
+    "coverage": "vitest run --coverage",
+    "dev": "vite",
+    "lint": "eslint ./src",
+    "start": "lerna exec --stream --scope='@ovh-ux/manager-pci-quota-app' --include-dependencies -- npm run build --if-present",
+    "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-pci-quota-app' --include-dependencies -- npm run dev --if-present",
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-pci-quota-app' --include-dependencies -- npm run dev:watch --if-present",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@ovh-ux/manager-config": "^8.0.0",
+    "@ovh-ux/manager-core-api": "^0.9.0",
+    "@ovh-ux/manager-pci-common": "^0.8.1",
+    "@ovh-ux/manager-react-components": "^1.41.2",
+    "@ovh-ux/manager-react-core-application": "^0.11.1",
+    "@ovh-ux/manager-react-shell-client": "^0.8.1",
+    "@ovh-ux/manager-tailwind-config": "^0.2.0",
+    "@ovh-ux/shell": "^4.0.1",
+    "@ovhcloud/ods-common-core": "17.2.2",
+    "@ovhcloud/ods-common-stencil": "17.2.2",
+    "@ovhcloud/ods-common-theming": "17.2.2",
+    "@ovhcloud/ods-components": "17.2.2",
+    "@ovhcloud/ods-theme-blue-jeans": "17.2.2",
+    "@tanstack/react-query": "^5.51.21",
+    "@tanstack/react-table": "^8.20.1",
+    "element-internals-polyfill": "^1.3.12",
+    "i18next": "^23.8.2",
+    "i18next-http-backend": "^2.5.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.1",
+    "react-i18next": "^14.0.5",
+    "react-router-dom": "^6.24.1",
+    "react-use": "^17.5.0",
+    "zustand": "^4.5.5"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@ovh-ux/manager-vite-config": "^0.8.2",
+    "@tanstack/react-query-devtools": "^5.50.1",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "postcss": "^8.4.38",
+    "rollup": "^4.18.0",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.3",
+    "vitest": "^1.6.0"
+  },
+  "regions": [
+    "CA",
+    "EU",
+    "US"
+  ],
+  "universes": [
+    "@ovh-ux/manager-public-cloud"
+  ]
+}
diff --git a/packages/manager/apps/pci-quota/postcss.config.cjs b/packages/manager/apps/pci-quota/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_de_DE.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_de_DE.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_en_GB.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_en_GB.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_es_ES.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_es_ES.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_fr_CA.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_fr_CA.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_fr_FR.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_fr_FR.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_it_IT.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_it_IT.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_pl_PL.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_pl_PL.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/public/translations/common/Messages_pt_PT.json b/packages/manager/apps/pci-quota/public/translations/common/Messages_pt_PT.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/manager/apps/pci-quota/src/App.tsx b/packages/manager/apps/pci-quota/src/App.tsx
@@ -0,0 +1,23 @@
+import { odsSetup } from '@ovhcloud/ods-common-core';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { HashRouter } from 'react-router-dom';
+import RoutesComponent from '@/routes';
+import queryClient from './queryClient';
+
+import '@ovhcloud/ods-theme-blue-jeans';
+
+odsSetup();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HashRouter>
+        <RoutesComponent />
+      </HashRouter>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}
+
+export default App;
diff --git a/packages/manager/apps/pci-quota/src/components/common.module.css b/packages/manager/apps/pci-quota/src/components/common.module.css
@@ -0,0 +1,28 @@
+.linkContainer a {
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 600;
+  color: rgb(0, 80, 215);
+  transition: background-size 0.2s ease-in 0s, color 0.1s ease-in-out 0s;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  background-size: 0 2px;
+  background-image: linear-gradient(currentcolor, currentcolor);
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: auto;
+}
+
+.linkContainer a:hover {
+  transition: background-size 0.2s ease-out 0s;
+  background-size: 100% 2px;
+}
+
+.linkContainer a:focus {
+  transition: background-size 0.2s ease-out 0s;
+  background-size: 100% 2px;
+}
+
+.linkContainer a:active {
+  transition: color ease-in-out 0s;
+}
diff --git a/packages/manager/apps/pci-quota/src/constants.ts b/packages/manager/apps/pci-quota/src/constants.ts
@@ -0,0 +1,18 @@
+export const ACTIVE_STATUS = ['ok', 'READY'];
+export const PENDING_STATUS = ['PENDING', 'CREATING', 'UPDATING', 'DELETING'];
+
+export const HORIZON_LINK = {
+  EU: 'https://horizon.cloud.ovh.net/auth/login?username={username}',
+  CA: 'https://horizon.cloud.ovh.net/auth/login?username={username}',
+  US: 'https://horizon.cloud.ovh.us/auth/login?username={username}',
+};
+
+export const HORIZON_LINK_TRUSTED = {
+  EU:
+    'https://horizon.trustedzone.cloud.ovh.net/auth/login?username={username}',
+  CA:
+    'https://horizon.trustedzone.cloud.ovh.net/auth/login?username={username}',
+  US: '',
+};
+
+export const ALPHA_CHARACTERS_REGEX = /^[a-zA-Z-]+$/;
diff --git a/packages/manager/apps/pci-quota/src/core/HidePreloader.tsx b/packages/manager/apps/pci-quota/src/core/HidePreloader.tsx
@@ -0,0 +1,12 @@
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useContext, useEffect } from 'react';
+
+export default function HidePreloader() {
+  const { ux } = useContext(ShellContext).shell;
+
+  useEffect(() => {
+    ux.hidePreloader();
+  }, []);
+
+  return null;
+}
diff --git a/packages/manager/apps/pci-quota/src/core/ShellRoutingSync.tsx b/packages/manager/apps/pci-quota/src/core/ShellRoutingSync.tsx
@@ -0,0 +1,16 @@
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ShellRoutingSync() {
+  const location = useLocation();
+
+  const { routing } = useContext(ShellContext).shell;
+  useEffect(() => {
+    routing.stopListenForHashChange();
+  }, []);
+  useEffect(() => {
+    routing.onHashChange();
+  }, [location]);
+  return null;
+}
diff --git a/packages/manager/apps/pci-quota/src/hooks/usePageTracking.ts b/packages/manager/apps/pci-quota/src/hooks/usePageTracking.ts
@@ -0,0 +1,33 @@
+import { useContext, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { useProject } from '@ovh-ux/manager-pci-common';
+import { PAGE_PREFIX, PCI_LEVEL2 } from '@/tracking.constants';
+
+const DISCOVERY_PLANCODE = 'project.discovery';
+
+export default function usePageTracking() {
+  const location = useLocation();
+  const { data: project } = useProject();
+  const { setPciProjectMode, trackPage } = useContext(
+    ShellContext,
+  ).shell.tracking;
+
+  useEffect(() => {
+    if (project) {
+      setPciProjectMode({
+        projectId: project.project_id,
+        isDiscoveryProject: project.planCode === DISCOVERY_PLANCODE,
+      });
+    }
+  }, [project]);
+
+  useEffect(() => {
+    const pageId = location.pathname.split('/').pop();
+    const pageKey = pageId === 'quota' ? '' : `::${pageId}`;
+    trackPage({
+      name: `${PAGE_PREFIX}::${pageKey}`,
+      level2: PCI_LEVEL2,
+    });
+  }, [location]);
+}
diff --git a/packages/manager/apps/pci-quota/src/index.css b/packages/manager/apps/pci-quota/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/manager/apps/pci-quota/src/layout.ts b/packages/manager/apps/pci-quota/src/layout.ts
@@ -0,0 +1,7 @@
+export enum BreakPoints {
+  XS = 0,
+  SM = 540,
+  MD = 720,
+  LG = 960,
+  XL = 1140,
+}
diff --git a/packages/manager/apps/pci-quota/src/main.tsx b/packages/manager/apps/pci-quota/src/main.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import {
+  initI18n,
+  initShellContext,
+  ShellContext,
+} from '@ovh-ux/manager-react-shell-client';
+import App from './App';
+
+import './index.css';
+
+import '@/vite-hmr.ts';
+
+const init = async (
+  appName: string,
+  { reloadOnLocaleChange } = { reloadOnLocaleChange: false },
+) => {
+  const context = await initShellContext(appName);
+
+  const region = context.environment.getRegion();
+  try {
+    await import(`./config-${region}.js`);
+  } catch (error) {
+    // nothing to do
+  }
+
+  await initI18n({
+    context,
+    reloadOnLocaleChange,
+    ns: ['common'],
+    defaultNS: 'common',
+  });
+
+  ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+      <ShellContext.Provider value={context}>
+        <App />
+      </ShellContext.Provider>
+    </React.StrictMode>,
+  );
+};
+
+init('pci-quota');
diff --git a/packages/manager/apps/pci-quota/src/pages/Layout.tsx b/packages/manager/apps/pci-quota/src/pages/Layout.tsx
@@ -0,0 +1,55 @@
+import { Outlet, useRouteError } from 'react-router-dom';
+
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { Suspense, useContext } from 'react';
+import { ErrorBanner } from '@ovh-ux/manager-react-components';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { useProject } from '@ovh-ux/manager-pci-common';
+import ShellRoutingSync from '@/core/ShellRoutingSync';
+import HidePreloader from '@/core/HidePreloader';
+
+import usePageTracking from '@/hooks/usePageTracking';
+
+export default function Layout() {
+  const { isSuccess } = useProject();
+  usePageTracking();
+  return (
+    <div className="application">
+      <Suspense>
+        <ShellRoutingSync />
+        {isSuccess && (
+          <>
+            <HidePreloader />
+            <Outlet />
+          </>
+        )}
+      </Suspense>
+    </div>
+  );
+}
+
+export const ErrorBoundary = () => {
+  const error = useRouteError() as ApiError;
+  const nav = useContext(ShellContext).shell.navigation;
+
+  const redirectionApplication = 'public-cloud';
+
+  const navigateToHomePage = () => {
+    nav.navigateTo(redirectionApplication, '', {});
+  };
+
+  const reloadPage = () => {
+    nav.reload();
+  };
+  return (
+    <Suspense>
+      <ErrorBanner
+        onReloadPage={reloadPage}
+        onRedirectHome={navigateToHomePage}
+        error={error.response}
+      />
+      <ShellRoutingSync />
+      <HidePreloader />
+    </Suspense>
+  );
+};
diff --git a/packages/manager/apps/pci-quota/src/queryClient.ts b/packages/manager/apps/pci-quota/src/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 300_000,
+    },
+  },
+});
+
+export default queryClient;
diff --git a/packages/manager/apps/pci-quota/src/routes.tsx b/packages/manager/apps/pci-quota/src/routes.tsx
@@ -0,0 +1,18 @@
+import { lazy } from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+const ROUTE_PATHS = {
+  ROOT: '/pci/projects/:projectId/quota',
+  LISTING: '',
+};
+
+const LayoutPage = lazy(() => import('@/pages/Layout'));
+
+const RoutesComponent = () => (
+  <Routes>
+    <Route id="root" path={ROUTE_PATHS.ROOT} Component={LayoutPage}></Route>
+    <Route path="" element={<>Page not found</>}></Route>
+  </Routes>
+);
+
+export default RoutesComponent;
diff --git a/packages/manager/apps/pci-quota/src/sampleTest.spec.ts b/packages/manager/apps/pci-quota/src/sampleTest.spec.ts
@@ -0,0 +1,5 @@
+describe('Sample Test', () => {
+  it('should test that true === true', () => {
+    expect(true).toBe(true);
+  });
+});