feat(pci-private-network): create µapp

ref: DTCORE-2033 Signed-off-by: Yoann Fievez <[email protected]> Co-Authored-By: Florian Renaut <[email protected]> Co-Authored-By: Mohammed Hamdoune <[email protected]> Co-Authored-By: LIDRISSI Hamid <[email protected]>
ovh · Jun 19, 2024 · 155f659 · 155f659
1 parent 5886a39
commit 155f659
Show file tree

Hide file tree

Showing 188 changed files with 8,939 additions and 29 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -29,6 +29,7 @@ module.exports = {
         '/apps/pci-users/',
         '/apps/pci-public-ip',
         '/apps/pci-gateway/',
+        '/apps/pci-private-network',
       ],
       moduleNameMapper: {
         '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

diff --git a/packages/manager-components/package.json b/packages/manager-components/package.json
@@ -79,6 +79,7 @@
     "react-dom": "18.2.0",
     "react-i18next": "^11.18.1",
     "react-router-dom": "^6.21.0",
+    "react-use": "^17.5.0",
     "storybook": "7.5.3",
     "storybook-addon-react-router-v6": "^2.0.10",
     "ts-jest": "^29.1.1",

diff --git a/packages/manager-components/src/components/container/step/Step.component.tsx b/packages/manager-components/src/components/container/step/Step.component.tsx
@@ -17,8 +17,16 @@ type TStepProps = {
   isChecked: boolean;
   isLocked: boolean;
   order: number;
-  next?: { action: (id: string) => void; label: string; isDisabled: boolean };
-  edit?: { action: (id: string) => void; label: string; isDisabled: boolean };
+  next?: {
+    action: (id: string) => void;
+    label: string | JSX.Element;
+    isDisabled: boolean;
+  };
+  edit?: {
+    action: (id: string) => void;
+    label: string | JSX.Element;
+    isDisabled: boolean;
+  };
   children?: JSX.Element | JSX.Element[];
 };
 

diff --git a/packages/manager-components/src/components/navigation/card/card.component.tsx b/packages/manager-components/src/components/navigation/card/card.component.tsx
@@ -34,7 +34,7 @@ export interface CardProps {
   img?: ImageDetails;
   texts: {
     title: string;
-    description: string;
+    description?: string;
     category: string;
   };
   badges?: Badge[];
@@ -114,15 +114,17 @@ export const Card: React.FC<CardProps> = ({
           >
             {title}
           </OsdsText>
-          <OsdsText
-            className="block mb-4"
-            level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._400}
-            color={ODS_THEME_COLOR_INTENT.text}
-            hue={ODS_THEME_COLOR_HUE._500}
-          >
-            {description}
-          </OsdsText>
+          {description && (
+            <OsdsText
+              className="block mb-4"
+              level={ODS_TEXT_LEVEL.body}
+              size={ODS_TEXT_SIZE._400}
+              color={ODS_THEME_COLOR_INTENT.text}
+              hue={ODS_THEME_COLOR_HUE._500}
+            >
+              {description}
+            </OsdsText>
+          )}
 
           <Links
             tab-index="-1"

diff --git a/packages/manager-components/src/hooks/index.ts b/packages/manager-components/src/hooks/index.ts
@@ -1 +1,4 @@
+export * from './useCatalogPrice';
+export * from './useMe';
+export * from './useProjectUrl';
 export * from './pci-project-provider';
diff --git a/...ps/pci-gateway/src/hooks/catalog-price.ts → ...r-components/src/hooks/useCatalogPrice.ts b/...ps/pci-gateway/src/hooks/catalog-price.ts → ...r-components/src/hooks/useCatalogPrice.ts
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useContext } from 'react';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import { useMe } from '@/api/hooks/useMe';
+import { useMe } from './useMe';
 
 const ASIA_FORMAT = ['SG', 'ASIA', 'AU', 'IN'];
 const FRENCH_FORMAT = [

diff --git a/...r/apps/pci-gateway/src/api/hooks/useMe.ts → ...ges/manager-components/src/hooks/useMe.ts b/...r/apps/pci-gateway/src/api/hooks/useMe.ts → ...ges/manager-components/src/hooks/useMe.ts
diff --git a/...apps/pci-gateway/src/hooks/project-url.ts → ...ger-components/src/hooks/useProjectUrl.ts b/...apps/pci-gateway/src/hooks/project-url.ts → ...ger-components/src/hooks/useProjectUrl.ts
diff --git a/packages/manager/apps/catalog/src/utils/trackingError.ts b/packages/manager/apps/catalog/src/utils/trackingError.ts
@@ -22,7 +22,9 @@ export function useSendErrorTracking({ error }: ErrorObject) {
   React.useEffect(() => {
     env.then((response: any) => {
       const { applicationName } = response;
-      const name = `errors::${getTypology(error as ErrorMessage)}::${applicationName}`;
+      const name = `errors::${getTypology(
+        error as ErrorMessage,
+      )}::${applicationName}`;
       tracking.trackPage({
         name,
         level2: '81',

diff --git a/packages/manager/apps/pci-gateway/src/api/hooks/cloud-catalog.ts b/packages/manager/apps/pci-gateway/src/api/hooks/cloud-catalog.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMe } from '@/api/hooks/useMe';
+import { useMe } from '@ovhcloud/manager-components';
 import { getCloudCatalog, getCloudCatalogUrl } from '@/api/data/cloud-catalog';
 
 export const getCloudCatalogQuery = (ovhSubsidiary: string) => ({

diff --git a/packages/manager/apps/pci-gateway/src/api/hooks/gateway-plans.ts b/packages/manager/apps/pci-gateway/src/api/hooks/gateway-plans.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMe } from '@/api/hooks/useMe';
+import { useMe } from '@ovhcloud/manager-components';
 import { getAvailableGatewayPlans } from '@/api/data/gateway-plans';
 
 export const getAvailableGatewayPlansQuery = (

diff --git a/packages/manager/apps/pci-gateway/src/api/hooks/useCatalog.ts b/packages/manager/apps/pci-gateway/src/api/hooks/useCatalog.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMe } from '@/api/hooks/useMe';
+import { useMe } from '@ovhcloud/manager-components';
 import { getCatalog, getCatalogUrl } from '@/api/data/catalog';
 
 export const getCatalogQuery = (ovhSubsidiary: string) => ({

diff --git a/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx b/packages/manager/apps/pci-gateway/src/pages/add/AddGateway.page.tsx
@@ -20,6 +20,7 @@ import {
   PciGuidesHeader,
   useNotifications,
   useProject,
+  useProjectUrl,
 } from '@ovhcloud/manager-components';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-components';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
@@ -28,7 +29,6 @@ import { SizeStep } from '@/pages/add/SizeStep';
 import { LocationStep } from '@/pages/add/LocationStep';
 import { NetworkStep } from '@/pages/add/NetworkStep';
 import { useNewGatewayStore } from '@/pages/add/useStore';
-import { useProjectUrl } from '@/hooks/project-url';
 import { PUBLIC_GATEWAYS_READ_MORE_GUIDE } from '@/constants';
 import { ACTION_PREFIX } from '@/tracking.constants';
 import HidePreloader from '@/core/HidePreloader';

diff --git a/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx b/packages/manager/apps/pci-gateway/src/pages/add/LocationStep.tsx
@@ -1,10 +1,11 @@
 import {
   StepComponent,
   TilesInputComponent,
+  useProjectUrl,
 } from '@ovhcloud/manager-components';
 import { useTranslation } from 'react-i18next';
 import { useContext, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import {
   OsdsIcon,
   OsdsLink,
@@ -22,7 +23,6 @@ import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { clsx } from 'clsx';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
 import { TAvailableRegion, useData } from '@/api/hooks/data';
-import { useProjectUrl } from '@/hooks/project-url';
 
 type IState = {
   regions: TAvailableRegion[];
@@ -44,6 +44,7 @@ export const LocationStep = () => {
   const { t: tAdd } = useTranslation('add');
   const { t: tRegionsList } = useTranslation('regions-list');
   const { projectId } = useParams();
+  const [searchParams] = useSearchParams();
   const { tracking } = useContext(ShellContext).shell;
   const store = useNewGatewayStore();
 
@@ -81,6 +82,22 @@ export const LocationStep = () => {
     }));
   }, [store.form.regionName]);
 
+  useEffect(() => {
+    const regionName = searchParams.get('region');
+    if (regionName) {
+      const targetRegion = state.regions.find(
+        (region) => region.name === regionName,
+      );
+      if (targetRegion) {
+        setState((prev) => ({
+          ...prev,
+          region: targetRegion,
+        }));
+        store.updateForm.regionName(targetRegion.name);
+      }
+    }
+  }, [searchParams, state.regions]);
+
   return (
     <StepComponent
       id={StepsEnum.LOCATION}

diff --git a/packages/manager/apps/pci-gateway/src/pages/add/NetworkStep.tsx b/packages/manager/apps/pci-gateway/src/pages/add/NetworkStep.tsx
@@ -23,7 +23,7 @@ import {
   ODS_MESSAGE_TYPE,
   ODS_SPINNER_SIZE,
 } from '@ovhcloud/ods-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
 import { useSubnets } from '@/api/hooks/useSubnets';
@@ -64,6 +64,7 @@ export const NetworkStep = (): JSX.Element => {
   const { t: tGlobal } = useTranslation('global');
   const navigate = useNavigate();
   const store = useNewGatewayStore();
+  const [searchParams] = useSearchParams();
 
   const invalidateGatewaysList = () => {
     queryClient.invalidateQueries({
@@ -240,6 +241,18 @@ export const NetworkStep = (): JSX.Element => {
     );
   }, [store.form.regionName]);
 
+  useEffect(() => {
+    const networkId = searchParams.get('network');
+    if (networkId) {
+      const targetNetwork = privateNetworks?.find(
+        (network) => network.id === networkId,
+      );
+      if (targetNetwork) {
+        store.updateForm.network(targetNetwork.id, store.form.network.subnetId);
+      }
+    }
+  }, [searchParams, privateNetworks]);
+
   return (
     <StepComponent
       id={StepsEnum.NETWORK}

diff --git a/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx b/packages/manager/apps/pci-gateway/src/pages/add/SizeStep.tsx
@@ -4,6 +4,7 @@ import { OsdsText } from '@ovhcloud/ods-components/react';
 import {
   StepComponent,
   TilesInputComponent,
+  useCatalogPrice,
 } from '@ovhcloud/manager-components';
 import {
   ODS_THEME_COLOR_INTENT,
@@ -14,7 +15,6 @@ import { useParams } from 'react-router-dom';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { StepsEnum, useNewGatewayStore } from '@/pages/add/useStore';
 import { TSizeItem, useData } from '@/api/hooks/data';
-import { useCatalogPrice } from '@/hooks/catalog-price';
 
 export const SizeStep = (): JSX.Element => {
   const { projectId } = useParams();

diff --git a/packages/manager/apps/pci-gateway/src/pages/edit/SizeLabel.component.tsx b/packages/manager/apps/pci-gateway/src/pages/edit/SizeLabel.component.tsx
@@ -4,8 +4,8 @@ import {
   ODS_THEME_TYPOGRAPHY_LEVEL,
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
+import { useCatalogPrice } from '@ovhcloud/manager-components';
 import { TSizeItem } from '@/api/hooks/data';
-import { useCatalogPrice } from '@/hooks/catalog-price';
 
 export const SizeLabelComponent = ({ item }: { item: TSizeItem }) => {
   const {

diff --git a/packages/manager/apps/pci-private-network/.eslintrc.cjs b/packages/manager/apps/pci-private-network/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    '../../../../.eslintrc.js',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  globals: {
+    __VERSION__: true,
+  },
+  rules: {
+    'import/extensions': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'arrow-body-style': ['error', 'as-needed'],
+    'prefer-const': 'error',
+  },
+};
diff --git a/packages/manager/apps/pci-private-network/.gitignore b/packages/manager/apps/pci-private-network/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/manager/apps/pci-private-network/README.md b/packages/manager/apps/pci-private-network/README.md
@@ -0,0 +1 @@
+# PCI Private Network 
diff --git a/packages/manager/apps/pci-private-network/index.html b/packages/manager/apps/pci-private-network/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-private-network/package.json b/packages/manager/apps/pci-private-network/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@ovh-ux/manager-pci-private-network-app",
+  "version": "0.0.0",
+  "private": true,
+  "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-private-network-app' --include-dependencies -- npm run build --if-present",
+    "start:dev": "lerna exec --stream --scope='@ovh-ux/manager-pci-private-network-app' --include-dependencies -- npm run dev --if-present",
+    "start:watch": "lerna exec --stream --parallel --scope='@ovh-ux/manager-pci-private-network-app' --include-dependencies -- npm run dev:watch --if-present",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@ovh-ux/manager-config": "^7.3.1",
+    "@ovh-ux/manager-core-api": "^0.7.1",
+    "@ovh-ux/manager-react-core-application": "^0.8.3",
+    "@ovh-ux/manager-react-shell-client": "^0.6.0",
+    "@ovh-ux/manager-tailwind-config": "^0.2.0",
+    "@ovh-ux/shell": "^3.2.0",
+    "@ovhcloud/manager-components": "^1.13.0",
+    "@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.37.1",
+    "@tanstack/react-query-devtools": "^5.37.1",
+    "@tanstack/react-table": "^8.17.3",
+    "clsx": "2.1.1",
+    "date-fns": "^3.3.1",
+    "element-internals-polyfill": "^1.3.10",
+    "file-saver": "^2.0.5",
+    "i18next": "^23.8.2",
+    "i18next-http-backend": "^2.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.50.1",
+    "react-i18next": "^14.0.5",
+    "react-router-dom": "^6.22.0",
+    "react-use": "^17.5.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@ovh-ux/manager-vite-config": "^0.6.1",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.2.2",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "postcss": "^8.4.35",
+    "rollup": "^4.9.6",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.13",
+    "vitest": "^1.6.0"
+  },
+  "regions": [
+    "CA",
+    "EU",
+    "US"
+  ],
+  "universes": [
+    "@ovh-ux/manager-public-cloud"
+  ]
+}
diff --git a/packages/manager/apps/pci-private-network/postcss.config.cjs b/packages/manager/apps/pci-private-network/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/manager/apps/pci-private-network/public/assets/private-networks.png b/packages/manager/apps/pci-private-network/public/assets/private-networks.png