feat(dedicated): vrack services microapp (#10924)

ref: MANAGER-11827

Signed-off-by: Nicolas Pierre-charles <[email protected]>
Co-authored-by: Quentin Pavy <[email protected]>
Co-authored-by: CDS Translator Agent <[email protected]>

Author: 3 people

.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     'prettier/prettier': 'warn',
     'import/extensions': 'off',
     'import/no-cycle': 'off',
-    'import/prefer-default-export': 'off'
+    'import/prefer-default-export': 'off',
   },
   ignorePatterns: [
     '**/vendor/**',
@@ -101,11 +101,14 @@ module.exports = {
       },
     },
     {
-      files: ['*.test.ts'],
+      files: ['*.test.ts', '*.step.ts', '*.spec.ts'],
       extends: [
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
       ],
+      rules: {
+        'func-names': 'off',
+      },
       env: {
         mocha: true,
         node: true,

.github/CODEOWNERS

@@ -13,10 +13,13 @@
 # React Stack
 *.jsx @ovh/team-manager-transfo @ovh/su-digital-tools-core-stack
 *.tsx @ovh/team-manager-transfo @ovh/su-digital-tools-core-stack
+/playwright-helpers/ @ovh/team-manager-transfo
 
 # Continuous Integration and scripts
 .github/workflows @ovh/su-digital-tools-core-service-delivery
 .nvmrc @ovh/su-digital-tools-core-service-delivery
 /scripts/ @ovh/su-digital-tools-core-service-delivery
 /scripts/start-application.js @ovh/team-manager-dev
 /scripts/run-playwright.js @ovh/team-manager-transfo
+/scripts/run-playwright-bdd.js @ovh/team-manager-transfo
+/scripts/.env.development @ovh/team-manager-transfo

.sonarcloud.properties

@@ -9,7 +9,7 @@ sonar.sourceEncoding=UTF-8
 sonar.ws.timeout=60
 sonar.projectVersion=silicon-hyena
 
-sonar.exclusions=node_modules/**, **/node_modules/**, **/dist/**, **/semantic/**, **/coverage/**, **/static/**
+sonar.exclusions=node_modules/**, **/node_modules/**, **/dist/**, **/semantic/**, **/coverage/**, **/static/**, **/mock/**, **/mockServiceWorker.js
 sonar.coverage.exclusions=**/*.spec.js
 sonar.cpd.exclusions=**/index.js, **/module.js, **/*.module.js, **/routing.js, **/*.routing.js, **/routes.js, **/*.routes.js, **/rollup.config.js, **/webpack.config.js
 

package.json

@@ -48,6 +48,7 @@
   "resolutions": {
     "@babel/runtime": "7.22.15",
     "@rollup/plugin-commonjs": "11.0.2",
+    "@types/react": "18.2.55",
     "@uirouter/angularjs": "1.0.23",
     "flatpickr": "4.6.9",
     "graphql": "16.6.0",
@@ -60,6 +61,7 @@
     "@babel/helper-string-parser": "^7.18.10",
     "@commitlint/cli": "^v18.4.4",
     "@commitlint/config-angular": "^v18.4.4",
+    "@cucumber/cucumber": "^10.0.1",
     "@ovh-ux/codename-generator": "^1.0.0",
     "@playwright/test": "^1.34.3",
     "@testing-library/jest-dom": "^6.2.1",
@@ -95,6 +97,7 @@
     "lerna": "^5.5.0",
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.11",
+    "msw": "2.1.7",
     "npm-run-all": "^4.1.5",
     "ora": "^3.4.0",
     "p-series": "^2.1.0",
@@ -111,6 +114,7 @@
     "stylelint-prettier": "^1.1.2",
     "stylelint-scss": "^3.18.0",
     "turbo": "^1.4.3",
+    "vite": "^4.5.2",
     "whatwg-fetch": "^3.6.2"
   },
   "engines": {

packages/manager-components/src/components/content/headers/headers.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import Headers, { HeadersProps } from './headers.component';
-import ActionButton from '../../navigation/buttons/action/action.component';
-import GuideButton from '../../navigation/buttons/guide/guide.component';
+import ActionMenu from '../../navigation/menus/action/action.component';
+import GuideButton from '../../navigation/menus/guide/guide.component';
 
 const Heading: HeadersProps = {
   title: 'Example for header',
@@ -47,7 +47,7 @@ const guideItems = [
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
   description: 'description for header',
-  headerButton: <ActionButton items={actionItems} />,
+  headerButton: <ActionMenu items={actionItems} />,
 };
 const HeadingWithGuideButton: HeadersProps = {
   title: 'Example for header with guides',

packages/manager-components/src/components/navigation/buttons/action/action.spec.tsx

@@ -38,19 +38,21 @@ export interface CardProps {
     category: string;
   };
   badges?: Badge[];
-  trackingLabel?: string;
   hoverable?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+  [attribute: string]: any;
 }
 
-export const Card = ({
+export const Card: React.FC<CardProps> = ({
   href,
   isExternalHref,
   img,
   badges,
   texts,
-  trackingLabel,
   hoverable,
-}: CardProps) => {
+  onClick,
+  ...props
+}) => {
   const { title, description, category } = texts;
   const { t } = useTranslation('card');
 
@@ -59,14 +61,15 @@ export const Card = ({
       target={OdsHTMLAnchorElementTarget._blank}
       href={href}
       className="no-underline"
+      onClick={onClick}
+      {...props}
     >
       <OsdsTile
         className="w-full h-full"
         color={ODS_THEME_COLOR_INTENT.primary}
         rounded
         inline
         variant={ODS_TILE_VARIANT.stroked}
-        data-tracking={trackingLabel}
         hoverable={hoverable}
       >
         <div className="flex flex-col ">
@@ -85,13 +88,14 @@ export const Card = ({
             hue={ODS_THEME_COLOR_HUE._500}
           >
             {category}
-            <span className="inline-flex ml-3">
+            <span style={{ marginLeft: 'var(--ods-size-03)' }}>
               {badges?.map((b) => (
                 <OsdsChip
                   className="mr-1"
                   key={b.text}
                   color={b.color}
                   size={ODS_CHIP_SIZE.sm}
+                  inline
                 >
                   {b.text}
                 </OsdsChip>

packages/manager-components/src/components/navigation/buttons/action/action.stories.tsx

@@ -63,10 +63,6 @@ const meta: Meta<typeof Card> = {
       description:
         'Display examples of badges in the story (in the actual code there is a badge slot)',
     },
-    trackingLabel: {
-      control: 'text',
-      description: 'Tracking label when use click on card',
-    },
   },
   args: defaultProps,
 };

packages/manager-components/src/components/navigation/card/card.component.tsx

@@ -1,2 +1,2 @@
 export * from './card/card.component';
-export * from './buttons';
+export * from './menus';