New release - Public Cloud - w50

packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.controller.js

@@ -1,5 +1,4 @@
 import find from 'lodash/find';
-
 import {
   ALERT_ID,
   DASHBOARD_STATE_NAME,
@@ -24,6 +23,7 @@ export default class AgoraIpV6OrderController {
     atInternet,
     User,
     coreConfig,
+    ovhManagerRegionService,
   ) {
     this.$q = $q;
     this.$state = $state;
@@ -40,6 +40,7 @@ export default class AgoraIpV6OrderController {
     this.loading = {};
     this.ADDITIONAL_IP = ADDITIONAL_IP;
     this.type = IP_TYPE_TITLE.IPv6;
+    this.ovhManagerRegionService = ovhManagerRegionService;
   }
 
   $onInit() {
@@ -148,7 +149,9 @@ export default class AgoraIpV6OrderController {
 
     this.catalogByLocation = this.ipv6RegionsWithPlan.map(
       ({ regionId, plan }) => {
-        const countryCode = this.constructor.getMacroRegion(regionId);
+        const countryCode = this.ovhManagerRegionService.getMacroRegionLowercase(
+          regionId,
+        );
         const nbIpv6onRegion = this.regionState[regionId]
           ? this.regionState[regionId]
           : 0;
@@ -165,31 +168,6 @@ export default class AgoraIpV6OrderController {
     );
   }
 
-  static getMacroRegion(region) {
-    const localZonePattern = /^lz/i;
-    const devZonePattern = /^1-/i;
-
-    let macro;
-    const local = region
-      .split('-')
-      ?.slice(2)
-      ?.join('-');
-
-    if (devZonePattern.test(local)) {
-      macro = [local];
-    } else {
-      const nbOfSlice = localZonePattern.test(local) ? 3 : 2;
-      macro = /[\D]{2,3}/.exec(
-        region
-          .split('-')
-          ?.slice(nbOfSlice)
-          ?.join('-'),
-      );
-    }
-
-    return (macro && macro[0]) || '';
-  }
-
   redirectToPaymentPage() {
     this.trackSelectRegion(
       this.model.selectedPlan.location.replaceAll(' ', '-'),

packages/manager/apps/dedicated/client/app/components/ip/agoraOrder/ipv6/ipv6.module.js

@@ -7,6 +7,7 @@ import ngOvhUtils from '@ovh-ux/ng-ovh-utils';
 
 import '@ovh-ux/ui-kit';
 import '@uirouter/angularjs';
+import { region } from '@ovh-ux/manager-components';
 
 import routing from './ipv6.routes';
 import component from './ipv6.component';
@@ -25,6 +26,7 @@ angular
     'pascalprecht.translate',
     'ui.router',
     'ovhManagerCatalogPrice',
+    region,
   ])
   .config(routing)
   .component('agoraIpV6Order', component)

packages/manager/apps/pci-block-storage/src/api/data/volume.ts

@@ -194,12 +194,14 @@ export const addVolume = async ({
   volumeCapacity,
   volumeType,
 }: AddVolumeProps): Promise<void> => {
-  const { data } = await v6.post<void>(`/cloud/project/${projectId}/volume`, {
-    name,
-    region: regionName,
-    size: volumeCapacity,
-    type: volumeType,
-  });
+  const { data } = await v6.post<void>(
+    `/cloud/project/${projectId}/region/${regionName}/volume`,
+    {
+      name,
+      size: volumeCapacity,
+      type: volumeType,
+    },
+  );
 
   return data;
 };

packages/manager/apps/pci-block-storage/src/api/hooks/useInstance.spec.tsx

@@ -1,7 +1,7 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { describe, it, vi } from 'vitest';
-import { getInstances, TInstance } from '@ovh-ux/manager-pci-common';
+import { getInstancesByRegion, TInstance } from '@ovh-ux/manager-pci-common';
 import { useInstance, useInstances } from '@/api/hooks/useInstance';
 import { getInstance, Instance } from '@/api/data/instance';
 
@@ -10,7 +10,7 @@ vi.mock('@/api/data/instance', () => ({
 }));
 
 vi.mock('@ovh-ux/manager-pci-common', () => ({
-  getInstances: vi.fn(),
+  getInstancesByRegion: vi.fn(),
 }));
 
 const queryClient = new QueryClient();
@@ -86,22 +86,22 @@ describe('useInstance', () => {
 
 describe('useInstances', () => {
   it('returns instances data when region is provided', async () => {
-    vi.mocked(getInstances).mockResolvedValue(mockInstances);
+    vi.mocked(getInstancesByRegion).mockResolvedValue(mockInstances);
 
     const { result } = renderHook(() => useInstances('123', 'region1'), {
       wrapper,
     });
 
     await waitFor(() => {
-      expect(getInstances).toHaveBeenCalledWith('123', 'region1');
+      expect(getInstancesByRegion).toHaveBeenCalledWith('123', 'region1');
       expect(result.current.data).toEqual(mockInstances);
     });
   });
 
   it('does not fetch data when region is not provided', () => {
     const { result } = renderHook(() => useInstances('123', null), { wrapper });
 
-    expect(getInstances).not.toHaveBeenCalled();
+    expect(getInstancesByRegion).not.toHaveBeenCalled();
     expect(result.current.isPending).toBe(true);
   });
 });

packages/manager/apps/pci-block-storage/src/api/hooks/useInstance.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getInstances } from '@ovh-ux/manager-pci-common';
+import { getInstancesByRegion } from '@ovh-ux/manager-pci-common';
 import { getInstance, Instance } from '@/api/data/instance';
 
 export const getInstanceQueryKey = (projectId: string, instanceId: string) => [
@@ -26,6 +26,6 @@ export const useInstances = (projectId: string, region: string) =>
   useQuery({
     queryKey: getInstancesQueryKey(projectId, region),
     queryFn: (): Promise<Required<Instance>[]> =>
-      getInstances(projectId, region) as Promise<Required<Instance>[]>,
+      getInstancesByRegion(projectId, region) as Promise<Required<Instance>[]>,
     enabled: !!region,
   });

packages/manager/apps/pci-block-storage/src/main.tsx

@@ -7,6 +7,7 @@ import {
 } from '@ovh-ux/manager-react-shell-client';
 import App from './App';
 
+import '@ovh-ux/manager-pci-common/dist/style.css';
 import './index.css';
 
 import '@/vite-hmr.ts';

packages/manager/apps/pci-gateway/src/api/hooks/data.ts

@@ -1,25 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { getMacroRegion } from '@ovh-ux/manager-react-components';
 import { TCatalog } from '@ovh-ux/manager-pci-common';
 import { useCloudCatalog } from '@/api/hooks/cloud-catalog';
 import { useAvailableGatewayPlans } from '@/api/hooks/gateway-plans';
 import { TAvailableGatewayPlansResponse } from '@/api/data/gateway-plans';
 import { useInactiveRegions } from '@/api/hooks/useInactiveRegions';
 
-const getMacroRegion = (region: string) => {
-  const regionSubStrings = region.split('-');
-
-  const macroRegionMap = [
-    null,
-    regionSubStrings[0].split(/(\d)/)[0],
-    regionSubStrings[0],
-    regionSubStrings[2],
-    regionSubStrings[2] === 'LZ' ? regionSubStrings[3] : regionSubStrings[2],
-    regionSubStrings[3],
-  ];
-  return macroRegionMap[regionSubStrings.length] || 'Unknown_Macro_Region';
-};
-
 const getLitteralProductSize = (productName: string): string => {
   const [, size] = /-([^-]+)$/.exec(productName) || [];
   return size || '';

packages/manager/apps/pci-kubernetes/src/components/network/GatewayModeSelector.component.tsx

@@ -78,7 +78,7 @@ export const GatewayModeSelector = ({
           >
             <OsdsText
               color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_TEXT_SIZE._500}
+              size={ODS_TEXT_SIZE._400}
               slot="end"
             >
               {tAdd('kubernetes_network_form_gateway_mode_auto')}
@@ -92,7 +92,7 @@ export const GatewayModeSelector = ({
           >
             <OsdsText
               color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_TEXT_SIZE._500}
+              size={ODS_TEXT_SIZE._400}
               slot="end"
             >
               {tAdd('kubernetes_network_form_gateway_mode_custom')}

packages/manager/apps/pci-kubernetes/src/components/network/GatewaySelector.component.tsx

@@ -93,7 +93,7 @@ export const GatewaySelector = ({
           >
             <OsdsText
               color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_TEXT_SIZE._500}
+              size={ODS_TEXT_SIZE._400}
               slot="end"
             >
               {tAdd('kubernetes_network_form_gateway_public')}
@@ -103,7 +103,7 @@ export const GatewaySelector = ({
         {!gateway.isEnabled && (
           <OsdsText
             level={ODS_TEXT_LEVEL.body}
-            size={ODS_TEXT_SIZE._400}
+            size={ODS_TEXT_SIZE._300}
             color={ODS_THEME_COLOR_INTENT.text}
             className="block mx-9 my-4"
           >
@@ -117,7 +117,7 @@ export const GatewaySelector = ({
           >
             <OsdsText
               color={ODS_THEME_COLOR_INTENT.text}
-              size={ODS_TEXT_SIZE._500}
+              size={ODS_TEXT_SIZE._400}
               slot="end"
             >
               {tAdd('kubernetes_network_form_gateway_private')}

packages/manager/apps/pci-kubernetes/src/main.tsx

@@ -7,6 +7,7 @@ import {
 } from '@ovh-ux/manager-react-shell-client';
 import App from './App';
 
+import '@ovh-ux/manager-pci-common/dist/style.css';
 import './index.css';
 
 import '@/vite-hmr.ts';

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/NodePools.page.tsx

@@ -65,7 +65,7 @@ export default function NodePoolsPage() {
         <div className="flex flex-row">
           <OsdsButton
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.flat}
             color={ODS_THEME_COLOR_INTENT.primary}
             className="xs:mb-0.5 sm:mb-0"
             onClick={() => {
@@ -77,7 +77,7 @@ export default function NodePoolsPage() {
           <OsdsButton
             data-testid="refresh-button"
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.flat}
             color={ODS_THEME_COLOR_INTENT.primary}
             className="xs:mb-0.5 sm:mb-0 ml-0.5"
             onClick={() => {
@@ -87,7 +87,7 @@ export default function NodePoolsPage() {
             <OsdsIcon
               size={ODS_ICON_SIZE.xs}
               name={ODS_ICON_NAME.REFRESH}
-              className="mr-2"
+              className="mr-2 bg-white"
               color={ODS_THEME_COLOR_INTENT.primary}
             />
           </OsdsButton>

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/Scale.page.tsx

@@ -89,7 +89,6 @@ export default function ScalePage(): JSX.Element {
         trackClick(`details::nodepools::scale::cancel`);
         goBack();
       }}
-      color={ODS_THEME_COLOR_INTENT.text}
     >
       <slot name="content">
         {!isPoolsPending && !isScaling ? (

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/__snapshots__/NodePools.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`NodePools > should show spinner if nodepools are loading 1`] = `
         class="xs:mb-0.5 sm:mb-0"
         color="primary"
         size="sm"
-        variant="stroked"
+        variant="flat"
       >
         kube_node_pool_add
       </osds-button>
@@ -21,10 +21,10 @@ exports[`NodePools > should show spinner if nodepools are loading 1`] = `
         color="primary"
         data-testid="refresh-button"
         size="sm"
-        variant="stroked"
+        variant="flat"
       >
         <osds-icon
-          class="mr-2"
+          class="mr-2 bg-white"
           color="primary"
           name="refresh"
           size="xs"

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/__snapshots__/Scale.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Scale > should render correctly 1`] = `
 <div>
   <osds-modal
-    color="text"
     headline="kube_common_node_pool_autoscaling_title"
   >
     <slot

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/nodes/Nodes.page.tsx

@@ -27,6 +27,7 @@ import {
   Datagrid,
   FilterAdd,
   FilterList,
+  Headers,
   Notifications,
   useColumnFilters,
   useDataGrid,
@@ -77,19 +78,13 @@ export default function NodesPage(): JSX.Element {
 
   return (
     <>
-      <OsdsText
-        color={ODS_TEXT_COLOR_INTENT.text}
-        level={ODS_TEXT_LEVEL.heading}
-        size={ODS_THEME_TYPOGRAPHY_SIZE._700}
-      >
-        {pool?.name}
-      </OsdsText>
+      <Headers title={pool?.name} />
 
       <Notifications />
       <div>
         <OsdsLink
           color={ODS_THEME_COLOR_INTENT.primary}
-          className="mt-10"
+          className="mt-6"
           href={backLink}
         >
           <OsdsIcon
@@ -118,7 +113,7 @@ export default function NodesPage(): JSX.Element {
         <div className="flex flex-row">
           <OsdsButton
             size={ODS_BUTTON_SIZE.sm}
-            variant={ODS_BUTTON_VARIANT.stroked}
+            variant={ODS_BUTTON_VARIANT.flat}
             color={ODS_THEME_COLOR_INTENT.primary}
             className="xs:mb-0.5 sm:mb-0 ml-0.5"
             onClick={() => {
@@ -128,7 +123,7 @@ export default function NodesPage(): JSX.Element {
             <OsdsIcon
               size={ODS_ICON_SIZE.xs}
               name={ODS_ICON_NAME.REFRESH}
-              className="mr-2"
+              className="mr-2 bg-white"
               color={ODS_THEME_COLOR_INTENT.primary}
             />
           </OsdsButton>

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/nodes/Switch.page.tsx

@@ -74,7 +74,6 @@ export default function SwitchPage(): JSX.Element {
       onOdsModalClose={() => {
         goBack();
       }}
-      color={ODS_THEME_COLOR_INTENT.text}
     >
       <slot name="content">
         {!isNodesPending ? (