[manager-components]: Add a new component RegionLabel

[darsene]

Have you already checked if a similar item is present on manager-components?

• Yes, I have already checked the existing components/hooks/utils.

What do you expect from this request?

Component

Description

As regions are managed by code, for each µapp we need to create a translated label like "region_eu_west_par": "Europe (France - Paris)",
So we can create a component with all the given translations to avoid duplicating them in each product/project

Where do you expect to use this?

KMS / Managed VCD

Do you have mock-up?

nop, it's just a label

When do you expect this to be delivered?

No response

Additional Information

Component must have 2 modes,

1. [default]mode=region. name looks like eu-west-par
2. mode=datacenter. name looks like SBG

Component usage:

<Region mode="region" name="eu-west-par" />

or

<Region mode="datacenter" name="SBG" code="5" />

List of regions and it's corresponding labels for fr_FR,

For mode=region,

• region_eu-west-par - Europe (France - Paris)
• region_eu-west-gra - Europe (France - Gravelines)
• region_eu-west-rbx - Europe (France - Roubaix)
• region_eu-west-sbg - Europe (France - Strasbourg)
• region_eu-west-lim - Europe (Germany - Limburg)
• region_eu-central-waw - Europe (Poland - Warsaw)
• region_eu-west-eri - Europe (UK - Erith)
• region_us-east-vin - North America (US - East - Vinthill)
• region_us-west-hil - North America (US - West - Hillsboro)
• region_ca-east-bhs - North America (Canada - East - Beauharnois)
• region_ap-southeast-sgp - Asia Pacific (Singapore - Singapore)
• region_ap-southeast-syd - Asia Pacific (Australia - Sydney)
• region_ca-east-tor - North America (Canada - East - Toronto)
• region_ap-south-mum - Asia Pacific (India - Mumbai)
• region_eu-west-lz-bru - Europe (Belgium - Brussels) (LZ)
• region_eu-west-lz-mad - Europe (Spain - Madrid) (LZ)
• region_eu-west-gra-snc - Europe (France - Gravelines) (SNC)
• region_us-east-lz-dal - North America (US - East - Dallas)
• region_us-west-lz-lax - North America (US - West - Los Angeles)
• region_us-east-lz-chi - North America (US - East - Chicago)
• region_us-east-lz-nyc - North America (US - East - New York)
• region_us-east-lz-mia - North America (US - East - Miami)
• region_us-west-lz-pao - North America (US - West - Palo Alto)
• region_us-west-lz-den - North America (US - West - Denver)
• region_us-east-lz-atl - North America (US - East - Atlanta)
• region_eu-west-lz-mrs - Europe (France - Marseille)
• region_eu-west-rbx-snc - Europe (France - Roubaix) (SNC)
• region_eu-west-sbg-snc - Europe (France - Strasbourg) (SNC)
• region_labeu-west-1-preprod - LABEU (France - Croix) (PREPROD)
• region_labeu-west-1-dev-2 - LABEU (France - Croix) (DEV-2)
• region_labeu-west-1-dev-1 - LABEU (France - Croix) (DEV-1)

For mode=datacenter,

• region_ERI - Londres (ERI{{number}}) - Angleterre
• region_BHS - Beauharnois (BHS{{number}}) - Canada
• region_DC - Beauharnois (DC{{number}}) - Canada
• region_P - Paris (P{{number}}) - France
• region_GRA - Gravelines (GRA{{number}}) - France
• region_HIL - Hillsboro (HIL{{number}}) - États-Unis
• region_LIM - Limburg (LIM{{number}}) - Allemagne
• region_RBX - Roubaix (RBX{{number}}) - France
• region_SBG - Strasbourg (SBG{{number}}) - France
• region_SGP - Singapour (SGP{{number}}) - Asie
• region_SYD - Sydney (SYD{{number}}) - Australie
• region_VIN - Vint Hill (VIN{{number}}) - États-Unis
• region_WAW - Varsovie (WAW{{number}}) - Pologne
• region_RBX_HZ - Roubaix (RBXHZ) - France
• region_GSW - (GSW) - France
• region_YNM - Mumbai (YNM{{number}}) - Ind

code is quite simple

type TRegion = {
  code: string;
};

export default function RegionLabel({ code }: TRegion) {
  const { t } = useTranslation('region');
  const key = code?.replaceAll('-', '_')?.toLocaleLowerCase();

  return <>{key ? t(`region_${key}`) : '-'}</>;

with translation files