diff --git a/packages/manager/apps/pci-rancher/public/translations/dashboard/Messages_fr_FR.json b/packages/manager/apps/pci-rancher/public/translations/dashboard/Messages_fr_FR.json index 8e120e42aa6e..d315b6f8f529 100644 --- a/packages/manager/apps/pci-rancher/public/translations/dashboard/Messages_fr_FR.json +++ b/packages/manager/apps/pci-rancher/public/translations/dashboard/Messages_fr_FR.json @@ -10,6 +10,8 @@ "service_level": "Offre", "count_cpu_orchestrated": "Nombre de vCPUs orchestrés", "security_and_access": "Accès et sécurité", + "egress_title": "Rancher egress CIDRs", + "egress_tooltip": "Ces CIDRs représentent les plages d'adresses IP de sortie utilisées par Rancher. Il peut être nécessaire d'autoriser ces adresses IP (whitelisting) à accéder à vos plateformes tierces (ex: appels APIs pour provisionner des ressources).", "rancher_ui_access": "Accès à l'interface Rancher", "rancher_button_acces": "Accéder à Rancher", "generate_access": "Générer vos accès temporaires", diff --git a/packages/manager/apps/pci-rancher/src/_mock_/rancher.ts b/packages/manager/apps/pci-rancher/src/_mock_/rancher.ts index 9f9bb97d9aa0..d02d0b38efed 100644 --- a/packages/manager/apps/pci-rancher/src/_mock_/rancher.ts +++ b/packages/manager/apps/pci-rancher/src/_mock_/rancher.ts @@ -25,6 +25,9 @@ export const rancherMocked: RancherService = { datetime: '2023-12-12', orchestratedVcpus: 2, }, + networking: { + egressCIDRBlocks: ['192.0.2.0/24', '198.51.100.0/24'], + }, }, currentTasks: [], resourceStatus: ResourceStatus.READY, diff --git a/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx b/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx index 2d52c2d7191c..6e844bcda2ed 100644 --- a/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx +++ b/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx @@ -9,12 +9,18 @@ import { useNotifications, } from '@ovh-ux/manager-react-components'; import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; -import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming'; +import { + ODS_THEME_COLOR_HUE, + ODS_THEME_COLOR_INTENT, +} from '@ovhcloud/ods-common-theming'; import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT, ODS_ICON_NAME, + ODS_ICON_SIZE, ODS_MESSAGE_TYPE, + ODS_TEXT_LEVEL, + ODS_TEXT_SIZE, } from '@ovhcloud/ods-components'; import { OsdsButton, @@ -23,6 +29,9 @@ import { OsdsMessage, OsdsText, OsdsTile, + OsdsTooltipContent, + OsdsTooltip, + OsdsIcon, } from '@ovhcloud/ods-components/react'; import React, { useCallback, useEffect, useState } from 'react'; import { useHref } from 'react-router-dom'; @@ -42,6 +51,9 @@ import { useTrackingAction } from '@/hooks/useTrackingPage/useTrackingPage'; import { getLatestVersionAvailable } from '@/utils/rancher'; import { TrackingEvent, TrackingPageView } from '@/utils/tracking'; +// to delete when return from API is OK +const egressCIDRBlocksFake = ['192.0.2.0/24', '198.51.100.0/24']; + export interface RancherDetailProps { rancher: RancherService; editNameResponseType: ODS_MESSAGE_TYPE | null; @@ -245,6 +257,49 @@ const RancherDetail = ({ isDisabled={!isReadyStatus} /> +
+
+ + {t('egress_title')} + + + + + {t('egress_tooltip')} + + +
+ + {/* {currentState.networking.egressCIDRBlocks.map((ip) => ( */} + {egressCIDRBlocksFake.map((ip) => ( + + {t('copy')} + {t('error')} + + ))} + + +
diff --git a/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.test.tsx b/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.test.tsx index fff93f41ec09..c4260d3b225d 100644 --- a/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.test.tsx +++ b/packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.test.tsx @@ -3,7 +3,7 @@ import dashboardTranslation from '@translation/dashboard/Messages_fr_FR.json'; import updateTranslation from '@translation/updateSoftware/Messages_fr_FR.json'; import { versionsMocked } from '@/_mock_/version'; import { rancherMocked } from '@/_mock_/rancher'; -import { RancherPlanName, ResourceStatus } from '@/types/api.type'; +import { ResourceStatus } from '@/types/api.type'; import { fireEvent, render, waitFor } from '@/utils/test/test.provider'; import RancherDetail, { RancherDetailProps } from './RancherDetail.component'; @@ -43,164 +43,180 @@ describe('RancherDetail', () => { expect(generalInfo).not.toBeNull(); expect(securityAndAccess).not.toBeNull(); }); - - it('Given that the General info tab is displayed, it should contain the description and the version of the service I configured.', async () => { + it("Given that I'm on the dashboard, I should see egressCIDRBlocks", async () => { const screen = await setupSpecTest(); - const descriptionLabel = screen.getByText(dashboardTranslation.description); - const rancherVersionLabel = screen.getAllByText( - dashboardTranslation.rancher_version, - ); - const rancherName = screen.getByText(rancherMocked.targetSpec.name); - const rancherVersionValue = screen.getByText( - rancherMocked.targetSpec.version, + const egressCIDRBlocks = screen.getByText( + dashboardTranslation.egress_title, ); - expect(descriptionLabel).not.toBeNull(); - expect(rancherVersionLabel).not.toBeNull(); - expect(rancherName).not.toBeNull(); - expect(rancherVersionValue).not.toBeNull(); + expect(egressCIDRBlocks).not.toBeNull(); }); + it("Given that I'm on the dashboard, I should see egressCIDR tooltip", async () => { + const screen = await setupSpecTest(); + + const egressToolTip = screen.getByText(dashboardTranslation.egress_tooltip); - describe('Edit name', () => { - it('Given that I can edit the name, I should be able to click on edit icon to get the right to change the name', async () => { - const { getAllByText } = await setupSpecTest(); + expect(egressToolTip).not.toBeNull(); + }); +}); - const rancherName = getAllByText(rancherMocked.currentState.name); - await fireEvent.click(rancherName[0]); +it('Given that the General info tab is displayed, it should contain the description and the version of the service I configured.', async () => { + const screen = await setupSpecTest(); + + const descriptionLabel = screen.getByText(dashboardTranslation.description); + const rancherVersionLabel = screen.getAllByText( + dashboardTranslation.rancher_version, + ); + const rancherName = screen.getByText(rancherMocked.targetSpec.name); + const rancherVersionValue = screen.getByText( + rancherMocked.targetSpec.version, + ); + + expect(descriptionLabel).not.toBeNull(); + expect(rancherVersionLabel).not.toBeNull(); + expect(rancherName).not.toBeNull(); + expect(rancherVersionValue).not.toBeNull(); +}); - expect(rancherName).not.toBeNull(); - const link = rancherName[0].closest('osds-link'); +describe('Edit name', () => { + it('Given that I can edit the name, I should be able to click on edit icon to get the right to change the name', async () => { + const { getAllByText } = await setupSpecTest(); - expect(link).toHaveAttribute('href', '/edit'); - expect(link).not.toHaveAttribute('disabled'); - }); + const rancherName = getAllByText(rancherMocked.currentState.name); + await fireEvent.click(rancherName[0]); - it('Given that rancher is not ready i should not be able to edit the name', async () => { - const { getAllByText } = await setupSpecTest({ - ...defaultProps, - rancher: { - ...rancherMocked, - resourceStatus: ResourceStatus.UPDATING, - }, - }); + expect(rancherName).not.toBeNull(); + const link = rancherName[0].closest('osds-link'); - const rancherName = getAllByText(rancherMocked.currentState.name); + expect(link).toHaveAttribute('href', '/edit'); + expect(link).not.toHaveAttribute('disabled'); + }); - const link = rancherName[0].closest('osds-link'); - expect(link).toHaveAttribute('disabled'); + it('Given that rancher is not ready i should not be able to edit the name', async () => { + const { getAllByText } = await setupSpecTest({ + ...defaultProps, + rancher: { + ...rancherMocked, + resourceStatus: ResourceStatus.UPDATING, + }, }); + + const rancherName = getAllByText(rancherMocked.currentState.name); + + const link = rancherName[0].closest('osds-link'); + expect(link).toHaveAttribute('disabled'); }); +}); - it('Given that the Consumption tile is displayed, it should contain the offer I configured, the nb of CPUs orchestrated and the last update date', async () => { - const screen = await setupSpecTest(); +it('Given that the Consumption tile is displayed, it should contain the offer I configured, the nb of CPUs orchestrated and the last update date', async () => { + const screen = await setupSpecTest(); + + const descriptionLabel = screen.getByText(dashboardTranslation.consumption); + const vcpus = screen.getByText( + rancherMocked.currentState.usage?.orchestratedVcpus.toString() ?? '', + ); + + expect(descriptionLabel).not.toBeNull(); + expect(vcpus).not.toBeNull(); +}); + +it('Given that the Security and access tile is displayed, it should contain the url to access the service and the button to generate the access', async () => { + const screen = await setupSpecTest(); + + const descriptionLabel = screen.getByText( + dashboardTranslation.security_and_access, + ); + const rancherUrlClipboard = screen.getByLabelText('clipboard'); + const rancherButtonAccess = screen.getByText( + dashboardTranslation.rancher_button_acces, + ); + + expect(descriptionLabel).not.toBeNull(); + expect(rancherUrlClipboard.getAttribute('value')).toBe( + rancherMocked.currentState.url, + ); + expect(rancherButtonAccess).not.toBeNull(); +}); - const descriptionLabel = screen.getByText(dashboardTranslation.consumption); - const vcpus = screen.getByText( - rancherMocked.currentState.usage?.orchestratedVcpus.toString() ?? '', +describe('Update software', () => { + it('Given that the update software is displayed, it should contain the version of the software and the button to update', async () => { + const screen = await setupSpecTest({ + ...defaultProps, + }); + + const updateSoftwareLabel = screen.getByText( + updateTranslation.updateSoftwareBannerAvailableUpdate, ); - expect(descriptionLabel).not.toBeNull(); - expect(vcpus).not.toBeNull(); + const updateSoftwareButton = screen.getAllByText( + updateTranslation.updateSoftwareAvailableUpdate, + ); + + expect(updateSoftwareLabel).not.toBeNull(); + expect(updateSoftwareButton).not.toBeNull(); }); - it('Given that the Security and access tile is displayed, it should contain the url to access the service and the button to generate the access', async () => { - const screen = await setupSpecTest(); + it('Given there is higher version but there is current update mutation, i should not see update software banner', async () => { + const screen = await setupSpecTest({ + ...defaultProps, + updateSoftwareResponseType: 'pending', + }); - const descriptionLabel = screen.getByText( - dashboardTranslation.security_and_access, + const updateSoftwareLabel = screen.queryByText( + updateTranslation.updateSoftwareBannerAvailableUpdate.replaceAll( + '{{version}}', + versionsMocked[1].name, + ), ); - const rancherUrlClipboard = screen.getByLabelText('clipboard'); - const rancherButtonAccess = screen.getByText( - dashboardTranslation.rancher_button_acces, + const updateSoftwareButton = screen.queryByText( + updateTranslation.updateSoftwareAvailableUpdate, ); - expect(descriptionLabel).not.toBeNull(); - expect(rancherUrlClipboard.getAttribute('value')).toBe( - rancherMocked.currentState.url, - ); - expect(rancherButtonAccess).not.toBeNull(); + expect(updateSoftwareLabel).toBeNull(); + expect(updateSoftwareButton).toBeNull(); }); - describe('Update software', () => { - it('Given that the update software is displayed, it should contain the version of the software and the button to update', async () => { - const screen = await setupSpecTest({ - ...defaultProps, - }); + it('Given there is higher version but rancher status is not status ready, i should not see update software banner', async () => { + const screen = await setupSpecTest({ + ...defaultProps, + rancher: { + ...rancherMocked, + resourceStatus: ResourceStatus.UPDATING, + }, + }); - const updateSoftwareLabel = screen.getByText( - updateTranslation.updateSoftwareBannerAvailableUpdate, - ); + const updateSoftwareLabel = screen.queryByText( + updateTranslation.updateSoftwareBannerAvailableUpdate.replaceAll( + '{{version}}', + versionsMocked[1].name, + ), + ); + const updateSoftwareButton = screen.queryByText( + updateTranslation.updateSoftwareAvailableUpdate, + ); - const updateSoftwareButton = screen.getAllByText( - updateTranslation.updateSoftwareAvailableUpdate, - ); + expect(updateSoftwareLabel).toBeNull(); + expect(updateSoftwareButton).toBeNull(); + }); + it('should render upgrade plan information when isEligibleForUpgrade is true', async () => { + const screen = await setupSpecTest(); - expect(updateSoftwareLabel).not.toBeNull(); - expect(updateSoftwareButton).not.toBeNull(); - }); + const upgradePlanTitle = screen.getByText( + dashboardTranslation.upgradePlanTitle, + ); + const upgradePlanDescription = screen.getByText( + dashboardTranslation.upgradePlanDescription, + ); + const upgradePlanButton = screen.getByText( + dashboardTranslation.upgradePlanButton, + ); - it('Given there is higher version but there is current update mutation, i should not see update software banner', async () => { - const screen = await setupSpecTest({ - ...defaultProps, - updateSoftwareResponseType: 'pending', - }); - - const updateSoftwareLabel = screen.queryByText( - updateTranslation.updateSoftwareBannerAvailableUpdate.replaceAll( - '{{version}}', - versionsMocked[1].name, - ), - ); - const updateSoftwareButton = screen.queryByText( - updateTranslation.updateSoftwareAvailableUpdate, - ); - - expect(updateSoftwareLabel).toBeNull(); - expect(updateSoftwareButton).toBeNull(); - }); + expect(upgradePlanTitle).toBeInTheDocument(); + expect(upgradePlanDescription).toBeInTheDocument(); + expect(upgradePlanButton).toBeInTheDocument(); - it('Given there is higher version but rancher status is not status ready, i should not see update software banner', async () => { - const screen = await setupSpecTest({ - ...defaultProps, - rancher: { - ...rancherMocked, - resourceStatus: ResourceStatus.UPDATING, - }, - }); - - const updateSoftwareLabel = screen.queryByText( - updateTranslation.updateSoftwareBannerAvailableUpdate.replaceAll( - '{{version}}', - versionsMocked[1].name, - ), - ); - const updateSoftwareButton = screen.queryByText( - updateTranslation.updateSoftwareAvailableUpdate, - ); - - expect(updateSoftwareLabel).toBeNull(); - expect(updateSoftwareButton).toBeNull(); - }); - it('should render upgrade plan information when isEligibleForUpgrade is true', async () => { - const screen = await setupSpecTest(); - - const upgradePlanTitle = screen.getByText( - dashboardTranslation.upgradePlanTitle, - ); - const upgradePlanDescription = screen.getByText( - dashboardTranslation.upgradePlanDescription, - ); - const upgradePlanButton = screen.getByText( - dashboardTranslation.upgradePlanButton, - ); - - expect(upgradePlanTitle).toBeInTheDocument(); - expect(upgradePlanDescription).toBeInTheDocument(); - expect(upgradePlanButton).toBeInTheDocument(); - - const linkIcon = screen.getByText(dashboardTranslation.upgradePlanButton); - expect(linkIcon).not.toBeDisabled(); - }); + const linkIcon = screen.getByText(dashboardTranslation.upgradePlanButton); + expect(linkIcon).not.toBeDisabled(); }); }); diff --git a/packages/manager/apps/pci-rancher/src/types/api.type.ts b/packages/manager/apps/pci-rancher/src/types/api.type.ts index 4a51f7e4bf62..e656123374fb 100644 --- a/packages/manager/apps/pci-rancher/src/types/api.type.ts +++ b/packages/manager/apps/pci-rancher/src/types/api.type.ts @@ -75,6 +75,9 @@ export interface RancherService { description: string; }, ]; + networking: { + egressCIDRBlocks: string[]; + }; }; currentTasks: Array; resourceStatus: ResourceStatus;