From 8dc5508348ad73f0b42c8c3cb361bee2d1fc789a Mon Sep 17 00:00:00 2001 From: Nicolas Pierre-charles Date: Fri, 1 Dec 2023 17:58:42 +0100 Subject: [PATCH] feat(vrack-services): overview page Signed-off-by: Nicolas Pierre-charles --- .../apps/vrack-services/e2e/constants.ts | 1 - .../e2e/features/listing.feature | 3 +- .../apps/vrack-services/e2e/given.step.ts | 18 +-- .../apps/vrack-services/e2e/then.step.ts | 9 +- .../apps/vrack-services/e2e/when.step.ts | 4 +- .../apps/vrack-services/mock/handlers.ts | 13 +- .../apps/vrack-services/mock/order/cart.ts | 6 +- .../mock/order/order-details.ts | 36 +++--- .../mock/vrack-services/vrack-services.ts | 2 +- .../mock/vrack-services/zone.ts | 2 +- .../vrack-services/mock/vrack/association.ts | 2 +- .../apps/vrack-services/mock/vrack/vrack.ts | 2 +- .../src/components/Breadcrumb.tsx | 2 +- .../layout-helpers/DashboardLayout.tsx | 13 +- .../src/pages/dashboard/[id]/Endpoints.tsx | 11 ++ .../src/pages/dashboard/[id]/Overview.tsx | 117 ++++++++++++++++++ .../src/pages/dashboard/[id]/Subnets.tsx | 12 ++ .../src/pages/dashboard/[id]/Tabs1.tsx | 30 ----- .../src/pages/dashboard/[id]/Tabs2.tsx | 9 -- .../src/pages/dashboard/[id]/_layout.tsx | 68 +++++----- .../src/pages/dashboard/[id]/index.tsx | 7 +- .../src/pages/dashboard/dashboard.e2e.ts | 7 -- .../components/VrackServicesDataGrid.tsx | 8 +- .../dashboard/Messages_fr_FR.json | 59 ++++----- .../apps/vrack-services/src/utils/date.ts | 6 +- .../manager/apps/vrack-services/tsconfig.json | 3 +- playwright-helpers/mock.ts | 4 +- 27 files changed, 280 insertions(+), 174 deletions(-) create mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Endpoints.tsx create mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Overview.tsx create mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Subnets.tsx delete mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs1.tsx delete mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs2.tsx delete mode 100644 packages/manager/apps/vrack-services/src/pages/dashboard/dashboard.e2e.ts diff --git a/packages/manager/apps/vrack-services/e2e/constants.ts b/packages/manager/apps/vrack-services/e2e/constants.ts index e7c11a34c0a0..88a0f0554f14 100644 --- a/packages/manager/apps/vrack-services/e2e/constants.ts +++ b/packages/manager/apps/vrack-services/e2e/constants.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/prefer-default-export */ import { config } from '../../../../../playwright-helpers/config'; export const urls = { diff --git a/packages/manager/apps/vrack-services/e2e/features/listing.feature b/packages/manager/apps/vrack-services/e2e/features/listing.feature index 44509ffcd598..0808d6a751a1 100644 --- a/packages/manager/apps/vrack-services/e2e/features/listing.feature +++ b/packages/manager/apps/vrack-services/e2e/features/listing.feature @@ -27,6 +27,7 @@ Feature: Listing page Scenario: User has an error when associating a vRack Services Given User has a vRack Services in DRAFT state + Given User has an eligible vRacks to be associated to his vRack Services Given The service to associate a vRack Services is KO When User click on the link to associate a vRack Then User sees a modal to select an eligible vRack @@ -35,7 +36,7 @@ Feature: Listing page Scenario Outline: User associate a vRack Services with no eligible vRack Given User has a vRack Services in DRAFT state - Given User has no eligible vRack for this vRack Services + Given User has no eligible vRacks to be associated to his vRack Services Given User has a vRack order When User click on the link to associate a vRack Then User sees a modal to create a new vRack diff --git a/packages/manager/apps/vrack-services/e2e/given.step.ts b/packages/manager/apps/vrack-services/e2e/given.step.ts index fefecd29be99..607de1a360eb 100644 --- a/packages/manager/apps/vrack-services/e2e/given.step.ts +++ b/packages/manager/apps/vrack-services/e2e/given.step.ts @@ -1,10 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { Given } from '@cucumber/cucumber'; -import { ICustomWorld } from '../../../../../playwright-helpers/custom-world'; +import { ICustomWorld } from '@playwright-helpers/custom-world'; import { urls } from './constants'; import { ConfigParams } from '../mock/handlers'; -import { OrderStatus, ProductStatus } from '../src/api'; +import { OrderStatus, ProductStatus } from '@/api'; import { creationServiceError } from '../src/public/translations/vrack-services/create/Messages_fr_FR.json'; +import { updateError } from '../src/public/translations/vrack-services/listing/Messages_fr_FR.json'; Given( 'User wants to create a vRack Services with name {string} and zone {word}', @@ -59,6 +60,7 @@ Given('The service to edit a vRack Services is KO', function( this: ICustomWorld, ) { this.handlersConfig.updateKo = true; + this.testContext.errorMessage = updateError; }); Given('The service to associate a vRack Services is KO', function( @@ -67,11 +69,13 @@ Given('The service to associate a vRack Services is KO', function( this.handlersConfig.associationKo = true; }); -Given('User has no eligible vRack for this vRack Services', function( - this: ICustomWorld, -) { - this.handlersConfig.nbEligibleVrackServices = 0; -}); +Given( + 'User has {word} eligible vRacks to be associated to his vRack Services', + function(this: ICustomWorld, anyEligibleVrack: 'an' | 'no') { + this.handlersConfig.nbEligibleVrackServices = + anyEligibleVrack === 'an' ? 5 : 0; + }, +); Given('User has a vRack order {word}', function( this: ICustomWorld, diff --git a/packages/manager/apps/vrack-services/e2e/then.step.ts b/packages/manager/apps/vrack-services/e2e/then.step.ts index 0f4ff7c7bfc1..5be7d2cc0ae4 100644 --- a/packages/manager/apps/vrack-services/e2e/then.step.ts +++ b/packages/manager/apps/vrack-services/e2e/then.step.ts @@ -1,11 +1,8 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { Then } from '@cucumber/cucumber'; import { expect } from '@playwright/test'; -import { ICustomWorld } from '../../../../../playwright-helpers/custom-world'; -import { - modalDescriptionLine1, - creationServiceError, -} from '../src/public/translations/vrack-services/create/Messages_fr_FR.json'; +import { ICustomWorld } from '@playwright-helpers/custom-world'; +import { modalDescriptionLine1 } from '../src/public/translations/vrack-services/create/Messages_fr_FR.json'; import { deliveringVrackServicesMessage, emptyDataGridMessage, @@ -44,7 +41,7 @@ Then('User sees {word} error message', async function( anyErrorMessage: 'an' | 'no', ) { const error = await this.page.locator('osds-message', { - hasText: creationServiceError, + hasText: this.testContext.errorMessage, }); if (anyErrorMessage === 'an') { await expect(error).toBeVisible(); diff --git a/packages/manager/apps/vrack-services/e2e/when.step.ts b/packages/manager/apps/vrack-services/e2e/when.step.ts index 5862b8d3a451..43ba8def4aee 100644 --- a/packages/manager/apps/vrack-services/e2e/when.step.ts +++ b/packages/manager/apps/vrack-services/e2e/when.step.ts @@ -1,5 +1,5 @@ import { When } from '@cucumber/cucumber'; -import { ICustomWorld } from '../../../../../playwright-helpers/custom-world'; +import { ICustomWorld } from '@playwright-helpers/custom-world'; import { vrackList } from '../mock/vrack/vrack'; import { ConfigParams, setupPlaywrightHandlers } from '../mock/handlers'; import { associateVrackButtonLabel } from '../src/public/translations/vrack-services/listing/Messages_fr_FR.json'; @@ -18,7 +18,7 @@ When('User navigates to vRack Services Listing page', async function( this.handlersConfig.nbVs = this.handlersConfig.nbVs ?? 5; this.testContext.initialUrl = urls.listing; await setupPlaywrightHandlers(this); - await this.page.waitForURL(urls.listing, { waitUntil: 'load' }); + await this.page.goto(urls.listing, { waitUntil: 'load' }); }); When('User clicks on the vRack Services configuration button', async function( diff --git a/packages/manager/apps/vrack-services/mock/handlers.ts b/packages/manager/apps/vrack-services/mock/handlers.ts index 7cebc5d16bb6..3629a78f5ff4 100644 --- a/packages/manager/apps/vrack-services/mock/handlers.ts +++ b/packages/manager/apps/vrack-services/mock/handlers.ts @@ -1,9 +1,9 @@ -import { BrowserContext } from '@playwright/test'; -import { toPlaywrightMockHandler } from '../../../../../playwright-helpers/mock'; +import { ICustomWorld } from '@playwright-helpers/custom-world'; import { toMswHandlers, Handler, } from '../../../../super-components/_common/msw-helpers'; +import { toPlaywrightMockHandler } from '../../../../../playwright-helpers/mock'; import { getVrackServicesMocks, GetVrackServicesMocksParams, @@ -40,12 +40,9 @@ export const getConfig = (params: ConfigParams): Handler[] => export const getMswHandlers = (params: ConfigParams = {}) => toMswHandlers(getConfig(params)); -export const setupPlaywrightHandlers = async ( - context: BrowserContext, - params: ConfigParams = {}, -) => +export const setupPlaywrightHandlers = async (world: ICustomWorld) => Promise.all( - getConfig(params) + getConfig(world.handlersConfig) .reverse() - .map(toPlaywrightMockHandler(context)), + .map(toPlaywrightMockHandler(world.context)), ); diff --git a/packages/manager/apps/vrack-services/mock/order/cart.ts b/packages/manager/apps/vrack-services/mock/order/cart.ts index 4999cd567266..127098fad29d 100644 --- a/packages/manager/apps/vrack-services/mock/order/cart.ts +++ b/packages/manager/apps/vrack-services/mock/order/cart.ts @@ -1,6 +1,6 @@ -import { Handler } from '../../../../../super-components/_common/msw-helpers'; -import { Cart, Item } from '../../src/api/order/order.type'; -import { ResponseData } from '../../src/api/api.type'; +import { Handler } from '@super-components/_common/msw-helpers'; +import { Cart, Item } from '@/api/order/order.type'; +import { ResponseData } from '@/api/api.type'; const getCart = (): Cart => { const expire = new Date(); diff --git a/packages/manager/apps/vrack-services/mock/order/order-details.ts b/packages/manager/apps/vrack-services/mock/order/order-details.ts index 26c1b1edfbaf..3a7747354534 100644 --- a/packages/manager/apps/vrack-services/mock/order/order-details.ts +++ b/packages/manager/apps/vrack-services/mock/order/order-details.ts @@ -1,5 +1,5 @@ -import { OrderData, OrderDetail } from '../../src/api/order'; -import { Handler } from '../../../../../super-components/_common/msw-helpers'; +import { Handler } from '@super-components/_common/msw-helpers'; +import { OrderData, OrderDetail } from '@/api/order'; const orderList = [1, 2, 3]; @@ -130,14 +130,16 @@ export const getOrderDetailsMocks = ({ deliveringVrackServicesOrders, }: GetOrderDetailsMocksParams): Handler[] => [ { - url: '/me/order', - response: orderList, - api: 'v6', - }, - { - url: '/me/order/:id', - response: ({ params }: { params?: { id: number } }) => - orderDataById[params?.id] || orderDataById[1], + url: '/me/order/:id/details/:detailid', + response: (data: { url: () => string; params: { detailid: string } }) => { + const detailid = + data.params?.detailid || + data + .url() + .split('/') + .pop(); + return orderDetailsById[Number(detailid)] || orderDetailsById[930000003]; + }, api: 'v6', }, { @@ -171,12 +173,14 @@ export const getOrderDetailsMocks = ({ api: 'v6', }, { - url: `/me/order/:id/details/:detailid`, - response: ({ - params: { detailid }, - }: { - params: { id: string; detailid: number }; - }) => orderDetailsById[detailid] || orderDetailsById[930000003], + url: '/me/order/:id', + response: ({ params }: { params?: { id: number } }) => + orderDataById[params?.id] || orderDataById[1], + api: 'v6', + }, + { + url: '/me/order', + response: orderList, api: 'v6', }, ]; diff --git a/packages/manager/apps/vrack-services/mock/vrack-services/vrack-services.ts b/packages/manager/apps/vrack-services/mock/vrack-services/vrack-services.ts index 9f68a45fff98..503f7f8e2d90 100644 --- a/packages/manager/apps/vrack-services/mock/vrack-services/vrack-services.ts +++ b/packages/manager/apps/vrack-services/mock/vrack-services/vrack-services.ts @@ -1,5 +1,5 @@ +import { Handler } from '@super-components/_common/msw-helpers'; import { ResponseData, Status } from '../../src/api/api.type'; -import { Handler } from '../../../../../super-components/_common/msw-helpers'; import { VrackServices, ProductStatus, diff --git a/packages/manager/apps/vrack-services/mock/vrack-services/zone.ts b/packages/manager/apps/vrack-services/mock/vrack-services/zone.ts index 447225857a56..4e69e80b452e 100644 --- a/packages/manager/apps/vrack-services/mock/vrack-services/zone.ts +++ b/packages/manager/apps/vrack-services/mock/vrack-services/zone.ts @@ -1,4 +1,4 @@ -import { Handler } from '../../../../../super-components/_common/msw-helpers'; +import { Handler } from '@super-components/_common/msw-helpers'; const zoneList = [ { diff --git a/packages/manager/apps/vrack-services/mock/vrack/association.ts b/packages/manager/apps/vrack-services/mock/vrack/association.ts index 9ccc1937619a..8df16288c43c 100644 --- a/packages/manager/apps/vrack-services/mock/vrack/association.ts +++ b/packages/manager/apps/vrack-services/mock/vrack/association.ts @@ -1,4 +1,4 @@ -import { Handler } from '../../../../../super-components/_common/msw-helpers'; +import { Handler } from '@super-components/_common/msw-helpers'; import { AllowedServicesResponse, Status, Task } from '../../src/api/api.type'; import { vrackServicesList } from '../vrack-services/vrack-services'; diff --git a/packages/manager/apps/vrack-services/mock/vrack/vrack.ts b/packages/manager/apps/vrack-services/mock/vrack/vrack.ts index f336c5c10667..4738b5cf2550 100644 --- a/packages/manager/apps/vrack-services/mock/vrack/vrack.ts +++ b/packages/manager/apps/vrack-services/mock/vrack/vrack.ts @@ -1,4 +1,4 @@ -import { Handler } from '../../../../../super-components/_common/msw-helpers'; +import { Handler } from '@super-components/_common/msw-helpers'; export const vrackList = [ 'pn-00001', diff --git a/packages/manager/apps/vrack-services/src/components/Breadcrumb.tsx b/packages/manager/apps/vrack-services/src/components/Breadcrumb.tsx index d1b9540882d6..e35f9eedda0e 100644 --- a/packages/manager/apps/vrack-services/src/components/Breadcrumb.tsx +++ b/packages/manager/apps/vrack-services/src/components/Breadcrumb.tsx @@ -50,7 +50,7 @@ export const Breadcrumb: React.FC = () => { }); }, [matches]); - const rootName = `${window.location.origin}/#/vrack-services`; + const rootName = `${window.location.origin}/#`; const crumbs = [...categoryCrumbs, ...matchCrumbs]; const data = crumbs.map((crumb) => ({ label: crumb.label, diff --git a/packages/manager/apps/vrack-services/src/components/layout-helpers/DashboardLayout.tsx b/packages/manager/apps/vrack-services/src/components/layout-helpers/DashboardLayout.tsx index 2cdccdeba586..e91fd39716ec 100644 --- a/packages/manager/apps/vrack-services/src/components/layout-helpers/DashboardLayout.tsx +++ b/packages/manager/apps/vrack-services/src/components/layout-helpers/DashboardLayout.tsx @@ -8,6 +8,7 @@ import { } from '@ovhcloud/ods-components/tabs/react'; import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components/text'; import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { useTranslation } from 'react-i18next'; import { PageLayout } from './PageLayout'; export type DashboardTabItemProps = { @@ -21,6 +22,7 @@ export type DashboardLayoutProps = { }; export const DashboardLayout: React.FC = ({ tabs }) => { + const { t } = useTranslation('vrack-services/dashboard'); const [activePanel, setActivePanel] = useState(''); const location = useLocation(); const navigate = useNavigate(); @@ -39,11 +41,20 @@ export const DashboardLayout: React.FC = ({ tabs }) => {
- {location.pathname.split('/')[2]} + {t('title')} + + + {t('description')}
diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Endpoints.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Endpoints.tsx new file mode 100644 index 000000000000..bd4b8bbcba7c --- /dev/null +++ b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Endpoints.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import i18next from 'i18next'; + +export function breadcrumb() { + return i18next.t('vrack-services/dashboard:endpointsTabLabel'); +} +const Endpoints: React.FC = () => { + return

Tabs to custom

; +}; + +export default Endpoints; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Overview.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Overview.tsx new file mode 100644 index 000000000000..7498ecff2395 --- /dev/null +++ b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Overview.tsx @@ -0,0 +1,117 @@ +/* eslint-disable import/prefer-default-export */ +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { useEnvironment } from '@ovh-ux/manager-react-core-application'; +import { OsdsTile } from '@ovhcloud/ods-components/tile/react'; +import { useTranslation } from 'react-i18next'; +import { useQuery } from '@tanstack/react-query'; +import { OsdsText } from '@ovhcloud/ods-components/text/react'; +import { OsdsDivider } from '@ovhcloud/ods-components/divider/react'; +import { OsdsLink } from '@ovhcloud/ods-components/link/react'; +import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components/text'; +import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { ApiError, ErrorPage } from '@/components/Error'; +import { + getVrackServicesResourceList, + getVrackServicesResourceListQueryKey, +} from '@/api'; +import { formatDateString } from '@/utils/date'; +import { ProductStatusCell } from '@/pages/index/components/VrackServicesDataGridCells'; + +type TileBlockProps = { + label: string; +}; + +const TileBlock: React.FC> = ({ + label, + children, +}) => ( +
+ + {label} + + + {children} + + +
+); + +export const OverviewTab: React.FC = () => { + const { t, i18n } = useTranslation('vrack-services/dashboard'); + const environment = useEnvironment(); + const { id } = useParams(); + const urls = environment.getApplicationURLs(); + + const { data, isLoading, error } = useQuery({ + queryKey: getVrackServicesResourceListQueryKey, + queryFn: () => getVrackServicesResourceList(), + }); + + if (error) { + return ; + } + + const vrackServices = data?.data?.find((vs) => vs.id === id); + + return ( +
+
+ +
+ + {t('tileTitle')} + + + + {vrackServices?.displayName || vrackServices?.id} + + + + + + {t(vrackServices?.currentState.zone)} + + + {vrackServices?.currentState.vrackId ? ( + + {vrackServices?.currentState.vrackId} + + ) : ( + '-' + )} + + + {formatDateString(vrackServices?.createdAt, i18n.language)} + +
+ +
+
+ ); +}; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Subnets.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Subnets.tsx new file mode 100644 index 000000000000..5f9430181202 --- /dev/null +++ b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Subnets.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import i18next from 'i18next'; + +export function breadcrumb() { + return i18next.t('vrack-services/dashboard:subnetsTabLabel'); +} + +const Subnets: React.FC = () => { + return

Tabs to custom

; +}; + +export default Subnets; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs1.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs1.tsx deleted file mode 100644 index c10079488234..000000000000 --- a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs1.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { MscBillingTile } from '@ovhcloud/msc-react-billing-tile'; -import { useParams } from 'react-router-dom'; -import { useEnvironment } from '@ovh-ux/manager-react-core-application'; -import { Locale } from '@ovhcloud/msc-utils'; - -function Tabs1() { - const environment = useEnvironment(); - const locale = environment.getUserLocale() as Locale; - const { id } = useParams(); - - return ( -
-
- -
-
- -
-
- -
-
- ); -} - -export default Tabs1; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs2.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs2.tsx deleted file mode 100644 index c4dd5b4d2724..000000000000 --- a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/Tabs2.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import i18next from 'i18next'; - -export function breadcrumb() { - return i18next.t('vrack-services:tabs_2'); -} -export default function Tabs2() { - return

Tabs to custom

; -} diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/_layout.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/_layout.tsx index acbf70d0bf78..e803f2a08a52 100644 --- a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/_layout.tsx +++ b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/_layout.tsx @@ -1,65 +1,55 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useParams, useResolvedPath } from 'react-router-dom'; -import { useQueries } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { BreadcrumbHandleParams } from '../../../components/Breadcrumb'; import { - getvrackServicesResourceVrackServicesId, - getvrackServicesResourceVrackServicesIdQueryKey, -} from '../../../api'; + getVrackServicesResourceList, + getVrackServicesResourceListQueryKey, +} from '@/api'; import { DashboardLayout } from '../../../components/layout-helpers'; -import { ErrorPage } from '../../../components/Error'; +import { ApiError, ErrorPage } from '../../../components/Error'; export function breadcrumb({ params }: BreadcrumbHandleParams) { return params.id; } -export default function DashboardPage() { +const DashboardPage: React.FC = () => { const { t } = useTranslation('vrack-services/dashboard'); const { id } = useParams(); - const results: any = useQueries({ - queries: [ - { - queryKey: [ - getvrackServicesResourceVrackServicesIdQueryKey({ - vrackServicesId: id, - }), - ], - queryFn: () => - getvrackServicesResourceVrackServicesId({ vrackServicesId: id }), - staleTime: Infinity, - }, - // { - // queryKey: [ - // getvrackServicesResourceVrackServicesIdServiceInfosQueryKey({ - // vrackServicesId, - // }), - // ], - // queryFn: () => - // getvrackServicesResourceVrackServicesIdServiceInfos({ - // vrackServicesId, - // }), - // staleTime: Infinity, - // }, - ], + + const { data, isError, error, isLoading } = useQuery({ + queryKey: getVrackServicesResourceListQueryKey, + queryFn: () => getVrackServicesResourceList(), }); const tabsList = [ { - name: 'general_infos', - title: t('general_informations'), + name: 'overview', + title: t('overviewTabLabel'), to: useResolvedPath('').pathname, }, { - name: 'custom tab', - title: 'custom tab', - to: useResolvedPath('Tabs2').pathname, + name: 'subnets', + title: t('subnetsTabLabel'), + to: useResolvedPath('Subnets').pathname, + }, + { + name: 'endpoints', + title: t('endpointsTabLabel'), + to: useResolvedPath('Endpoints').pathname, }, ]; - if (results[0].status === 'success' && results[0]?.data?.status !== 200) { - return ; + if ( + isError || + (!isLoading && + !data?.data?.find((vrackServices) => vrackServices.id === id)) + ) { + return ; } return ; -} +}; + +export default DashboardPage; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/index.tsx b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/index.tsx index fb4332abf986..171dfff0b876 100644 --- a/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/index.tsx +++ b/packages/manager/apps/vrack-services/src/pages/dashboard/[id]/index.tsx @@ -1,6 +1,3 @@ -import React from 'react'; -import Tabs1 from './Tabs1'; +import { OverviewTab } from './Overview'; -export default function DashboardIndex() { - return ; -} +export default OverviewTab; diff --git a/packages/manager/apps/vrack-services/src/pages/dashboard/dashboard.e2e.ts b/packages/manager/apps/vrack-services/src/pages/dashboard/dashboard.e2e.ts deleted file mode 100644 index fc0e547aa146..000000000000 --- a/packages/manager/apps/vrack-services/src/pages/dashboard/dashboard.e2e.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { test, expect } from '@playwright/test'; -import '@playwright-helpers/login'; - -test('Navigates to a dashboard page', async ({ page }) => { - await page.click(':nth-child(1) > a'); - await expect(page.locator('h1')).toContainText('Dashboard page'); -}); diff --git a/packages/manager/apps/vrack-services/src/pages/index/components/VrackServicesDataGrid.tsx b/packages/manager/apps/vrack-services/src/pages/index/components/VrackServicesDataGrid.tsx index ad041f04f005..65b9f95fb112 100644 --- a/packages/manager/apps/vrack-services/src/pages/index/components/VrackServicesDataGrid.tsx +++ b/packages/manager/apps/vrack-services/src/pages/index/components/VrackServicesDataGrid.tsx @@ -102,8 +102,12 @@ export const VrackServicesDatagrid: React.FC = () => { title: t('createdAt'), field: 'createdAt', isSortable: true, - formatter: (createdAt: string) => - formatDateString(createdAt, i18n.language), + formatter: (createdAt: string) => { + const date = new Date(createdAt); + return date.toString() !== 'Invalid Date' + ? date.toLocaleDateString(i18n.language) + : '-'; + }, }, { title: t('actions'), diff --git a/packages/manager/apps/vrack-services/src/public/translations/vrack-services/dashboard/Messages_fr_FR.json b/packages/manager/apps/vrack-services/src/public/translations/vrack-services/dashboard/Messages_fr_FR.json index ebf33eb37940..f587dac47049 100644 --- a/packages/manager/apps/vrack-services/src/public/translations/vrack-services/dashboard/Messages_fr_FR.json +++ b/packages/manager/apps/vrack-services/src/public/translations/vrack-services/dashboard/Messages_fr_FR.json @@ -1,31 +1,32 @@ { - "title": "Dashboard page", - "error_service": "No services info", - "general_informations": "Informations générales", - "vrack_services_dashboard_description": "Les vRack Services vous permettent de bénéficier de services réseau sur le vRack. Le premier service réseau disponible est le Service Endpoint. Ce dernier vous permet d'exposer, via une adresse IP, un service managé par OVHcloud sur votre vRack. D'autres services seront disponibles à l'avenir.", - "vrack_services_dashboard_tab_overview": "Général", - "vrack_services_dashboard_tab_subnet": "Subnet", - "vrack_services_dashboard_tab_endpoints": "Endpoints", - "vrack_services_dashboard_information_tile": "Informations", - "vrack_services_dashboard_information_tile_name": "Nom", - "vrack_services_dashboard_information_tile_status": "Statut", - "vrack_services_dashboard_information_tile_localization": "Localisation", - "vrack_services_dashboard_information_tile_vrack": "vRack", - "vrack_services_dashboard_information_tile_creation_date": "Date de création", - "vrack_services_datacenter_ERI": "London (ERI)", - "vrack_services_datacenter_BHS": "Beauharnois (BHS)", - "vrack_services_datacenter_DC": "Beauharnois (DC)", - "vrack_services_datacenter_P": "Paris (P)", - "vrack_services_datacenter_GRA": "Gravelines (GRA)", - "vrack_services_datacenter_HIL": "Hillsboro (HIL)", - "vrack_services_datacenter_LIM": "Limburg (LIM)", - "vrack_services_datacenter_RBX": "Roubaix (RBX)", - "vrack_services_datacenter_SBG": "Strasbourg (SBG)", - "vrack_services_datacenter_SGP": "Singapore (SGP)", - "vrack_services_datacenter_SYD": "Sydney (SYD)", - "vrack_services_datacenter_VIN": "Vint Hill (VIN)", - "vrack_services_datacenter_WAW": "Warsaw (WAW)", - "vrack_services_datacenter_RBX_HZ": "Roubaix (RBX)", - "vrack_services_datacenter_GSW": "Clichy (GSW)", - "vrack_services_datacenter_YNM": "Mumbai (YNM)" + "title": "vRack Services", + "description": "Les vRack Services vous permettent de bénéficier de services réseau sur le vRack. Le premier service réseau disponible est le Service Endpoint. Ce dernier vous permet d'exposer, via une adresse IP, un service managé par OVHcloud sur votre vRack. D'autres services seront disponibles à l'avenir.", + "overviewTabLabel": "Général", + "subnetsTabLabel": "Subnets", + "endpointsTabLabel": "Endpoints", + "tileTitle": "Informations", + "displayName": "Nom", + "productStatus": "Statut", + "zone": "Régionalisation", + "vrackId": "Private Network", + "createdAt": "Date de création", + "ERI": "London (ERI)", + "BHS": "Beauharnois (BHS)", + "DC": "Beauharnois (DC)", + "P": "Paris (P)", + "GRA": "Gravelines (GRA)", + "HIL": "Hillsboro (HIL)", + "LIM": "Limburg (LIM)", + "RBX": "Roubaix (RBX)", + "SBG": "Strasbourg (SBG)", + "SGP": "Singapore (SGP)", + "SYD": "Sydney (SYD)", + "VIN": "Vint Hill (VIN)", + "WAW": "Warsaw (WAW)", + "RBX_HZ": "Roubaix (RBX)", + "GSW": "Clichy (GSW)", + "YNM": "Mumbai (YNM)", + "ACTIVE": "Actif", + "DISABLED": "Inactif", + "DRAFT": "A configurer" } diff --git a/packages/manager/apps/vrack-services/src/utils/date.ts b/packages/manager/apps/vrack-services/src/utils/date.ts index aa5c4fdbc63a..96b4401bb1cc 100644 --- a/packages/manager/apps/vrack-services/src/utils/date.ts +++ b/packages/manager/apps/vrack-services/src/utils/date.ts @@ -2,6 +2,10 @@ export const formatDateString = (dateString: string, locale?: string) => { const date = new Date(dateString); return date.toString() !== 'Invalid Date' - ? date.toLocaleDateString(locale) + ? date.toLocaleString(locale, { + day: 'numeric', + month: 'short', + year: 'numeric', + }) : '-'; }; diff --git a/packages/manager/apps/vrack-services/tsconfig.json b/packages/manager/apps/vrack-services/tsconfig.json index f1cae0b38ba0..3fb8c6b8fd96 100644 --- a/packages/manager/apps/vrack-services/tsconfig.json +++ b/packages/manager/apps/vrack-services/tsconfig.json @@ -20,7 +20,8 @@ "baseUrl": ".", "paths": { "@/*": ["./src/*"], - "@playwright-helpers/*": ["../../../../playwright-helpers/*"] + "@playwright-helpers/*": ["../../../../playwright-helpers/*"], + "@super-components/*": ["../../../../packages/super-components/*"] } }, "include": ["**/*.ts", "**/*.tsx"], diff --git a/playwright-helpers/mock.ts b/playwright-helpers/mock.ts index 7a900c0136f1..0fb5a9c75fdd 100644 --- a/playwright-helpers/mock.ts +++ b/playwright-helpers/mock.ts @@ -16,7 +16,7 @@ export const toPlaywrightMockHandler = (context: BrowserContext) => ({ const fullUrl = new RegExp( `${baseUrl ?? apiClient[api].getUri()}${ url.startsWith('/') ? '' : '/' - }${url}$`.replace(/:[a-zA-Z]+/gm, '[^/]+'), + }${url}`.replace(/:[a-zA-Z]+/gm, '[^/]+'), ); return context.route( fullUrl, @@ -36,3 +36,5 @@ export const toPlaywrightMockHandler = (context: BrowserContext) => ({ { times: once ? 1 : undefined }, ); }; + +export default toPlaywrightMockHandler;