feat(pci-object-storage): add container creation steps

ref: DTCORE-2884 Signed-off-by: Florian Renaut <[email protected]>
ovh · Dec 17, 2024 · f6a6a83 · f6a6a83
1 parent 2d3fb76
commit f6a6a83
Show file tree

Hide file tree

Showing 14 changed files with 371 additions and 27 deletions.
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_de_DE.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_de_DE.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "3-AZ Regionen",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Regionen",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Herzlichen Glückwunsch, Ihr Bucket ist fast einsatzbereit mit integrierter Resilienz, um maximale Betriebszeit zu gewährleisten. Bitte beachten Sie, dass dies keine externe Replikation Ihrer Daten umfasst. Wenn Ihr Anwendungsfall diese zusätzliche Schutzebene erfordert, erwägen Sie die Verwendung unserer asynchronen Replikation in einer oder mehreren Regionen (nur über die APIs verfügbar). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Um mehr zu erfahren und zu beginnen."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_en_GB.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_en_GB.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "3-AZ Regions",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Regions",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Congratulations, your bucket is almost ready to use with built-in resilience to ensure maximum uptime. Please note that this does not include off-site replication of your data. If your use case requires this additional layer of protection, consider using our asynchronous replication across one or more regions (available only via the APIs). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Learn more and get started."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_es_ES.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_es_ES.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Regiones 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Regiones",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Enhorabuena, su «bucket» está casi listo para su uso con una resiliencia integrada para garantizar un tiempo de funcionamiento máximo. Tenga en cuenta que esto no incluye la replicación de sus datos fuera de las instalaciones. Si su caso de uso requiere esta capa de protección adicional, considere la posibilidad de utilizar nuestra replicación asíncrona en una o varias regiones (disponible únicamente a través de las API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Para saber más y empezar."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_fr_CA.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_fr_CA.json
@@ -54,5 +54,9 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Régions 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Régions",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_deployment_mode_price_explanation": "*Le prix indiqué correspond au prix publique d'1 To de stockage pendant 30 jours. Pour plus d'informations, ",
+  "pci_projects_project_storages_containers_add_deployment_mode_price_explanation_link": "consulter la page des prix.",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Félicitations, votre bucket est presque prêt à être utilisé avec une résilience intégrée pour assurer un temps de fonctionnement maximal. Veuillez noter que cela n'inclut pas la réplication hors site de vos données. Si votre cas d'utilisation nécessite cette couche de protection supplémentaire, envisagez d'utiliser notre réplication asynchrone sur une ou plusieurs régions (disponible uniquement via les API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Pour en savoir plus et commencer."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_fr_FR.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_fr_FR.json
@@ -54,5 +54,9 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Régions 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Régions",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_deployment_mode_price_explanation": "*Le prix indiqué correspond au prix publique d'1 To de stockage pendant 30 jours. Pour plus d'informations, ",
+  "pci_projects_project_storages_containers_add_deployment_mode_price_explanation_link": "consulter la page des prix.",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Félicitations, votre bucket est presque prêt à être utilisé avec une résilience intégrée pour assurer un temps de fonctionnement maximal. Veuillez noter que cela n'inclut pas la réplication hors site de vos données. Si votre cas d'utilisation nécessite cette couche de protection supplémentaire, envisagez d'utiliser notre réplication asynchrone sur une ou plusieurs régions (disponible uniquement via les API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Pour en savoir plus et commencer."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_it_IT.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_it_IT.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Region 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Region",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zone"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zone",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Congratulazioni! Il tuo bucket è quasi pronto per essere utilizzato con una resilienza integrata per garantire il massimo tempo di funzionamento. Ti ricordiamo che questa operazione non include la replica dei tuoi dati fuori sede. Se il tuo caso d'uso richiede questo livello di protezione supplementare, considera di utilizzare la nostra replica asincrona su una o più Region (disponibile solo tramite le API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Per saperne di più e iniziare."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_pl_PL.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_pl_PL.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Regiony 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Regiony",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Gratulacje, Twój bucket jest prawie gotowy do użycia ze zintegrowaną odpornością, aby zapewnić maksymalny czas działania. Pamiętaj, że nie obejmuje to replikacji danych poza lokalizacją. Jeśli Twój przypadek zastosowania wymaga tej dodatkowej warstwy ochrony, rozważ użycie replikacji asynchronicznej w jednym lub kilku regionach (dostępnej tylko przez API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Dowiedz się więcej i rozpocznij."
 }
diff --git a/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_pt_PT.json b/...es/manager/apps/pci-object-storage/public/translations/containers/add/Messages_pt_PT.json
@@ -53,5 +53,7 @@
   "pci_projects_project_storages_containers_add_deployment_mode_localzone_label": "Local Zone",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region-3-az": "Regiões 3-AZ",
   "pci_projects_project_storages_containers_add_deployment_mode_flipping_region": "Regiões",
-  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones"
+  "pci_projects_project_storages_containers_add_deployment_mode_flipping_localzone": "Local Zones",
+  "pci_projects_project_storages_containers_add_replication_rules_info": "Parabéns! O seu bucket está quase pronto a ser utilizado com uma resiliência integrada para assegurar um tempo de funcionamento máximo. Tenha em conta que esta opção não inclui a replicação fora das instalações dos seus dados. Se o seu caso de utilização necessitar desta camada de proteção suplementar, considere a utilização da nossa replicação assíncrona numa ou várias regiões (disponível apenas através das API). ",
+  "pci_projects_project_storages_containers_add_replication_rules_info_link": "Para saber mais e começar."
 }
diff --git a/packages/manager/apps/pci-object-storage/src/constants.ts b/packages/manager/apps/pci-object-storage/src/constants.ts
@@ -232,3 +232,52 @@ export const OBJECT_CONTAINER_OFFERS_LABELS = {
     price: null,
   },
 };
+
+export const STORAGE_ASYNC_REPLICATION_LINK = {
+  DEFAULT:
+    'https://help.ovhcloud.com/csm/en-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062417',
+  ASIA:
+    'https://help.ovhcloud.com/csm/asia-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062424',
+  AU:
+    'https://help.ovhcloud.com/csm/en-au-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062420',
+  CA:
+    'https://help.ovhcloud.com/csm/en-ca-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062423',
+  DE:
+    'https://help.ovhcloud.com/csm/de-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062426',
+  ES:
+    'https://help.ovhcloud.com/csm/es-es-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062427',
+  EU:
+    'https://help.ovhcloud.com/csm/en-ie-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062415',
+  FR:
+    'https://help.ovhcloud.com/csm/fr-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062418',
+  GB:
+    'https://help.ovhcloud.com/csm/en-gb-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062422',
+  IE:
+    'https://help.ovhcloud.com/csm/en-ie-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062415',
+  IN:
+    'https://help.ovhcloud.com/csm/asia-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062424',
+  IT:
+    'https://help.ovhcloud.com/csm/it-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062425',
+  MA:
+    'https://help.ovhcloud.com/csm/fr-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062418',
+  NL:
+    'https://help.ovhcloud.com/csm/en-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062417',
+  PL:
+    'https://help.ovhcloud.com/csm/pl-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062421',
+  PT:
+    'https://help.ovhcloud.com/csm/pt-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062414',
+  QC:
+    'https://help.ovhcloud.com/csm/fr-ca-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062413',
+  SG:
+    'https://help.ovhcloud.com/csm/en-sg-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062416',
+  SN:
+    'https://help.ovhcloud.com/csm/fr-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062418',
+  TN:
+    'https://help.ovhcloud.com/csm/fr-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062418',
+  US:
+    'https://support.us.ovhcloud.com/hc/en-us/articles/34270032176019-Object-Storage-Master-asynchronous-replication-across-your-buckets',
+  WE:
+    'https://help.ovhcloud.com/csm/en-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062417',
+  WS:
+    'https://help.ovhcloud.com/csm/es-public-cloud-storage-s3-asynchronous-replication-buckets?id=kb_article_view&sysparm_article=KB0062419',
+};
diff --git a/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx b/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx
@@ -1,20 +1,56 @@
+import {
+  OsdsFormField,
+  OsdsIcon,
+  OsdsInput,
+  OsdsLink,
+  OsdsMessage,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_SIZE,
+} from '@ovhcloud/ods-common-theming';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import {
+  ODS_ICON_NAME,
+  ODS_ICON_SIZE,
+  ODS_INPUT_TYPE,
+  ODS_MESSAGE_TYPE,
+} from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { StepComponent } from '@ovh-ux/manager-react-components';
+import { useContext, useState } from 'react';
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useContainerCreationStore } from '../useContainerCreationStore';
 import {
   OBJECT_CONTAINER_MODE_LOCAL_ZONE,
+  OBJECT_CONTAINER_MODE_MONO_ZONE,
+  OBJECT_CONTAINER_MODE_MULTI_ZONES,
   OBJECT_CONTAINER_OFFER_STORAGE_STANDARD,
   OBJECT_CONTAINER_OFFER_SWIFT,
+  STORAGE_ASYNC_REPLICATION_LINK,
 } from '@/constants';
 
+const validNameRegex = /^[a-z0-9]([a-z0-9.-]{1,61})[a-z0-9]$/;
+
 export function ContainerNameStep() {
   const { t } = useTranslation(['containers/add', 'pci-common']);
+  const context = useContext(ShellContext);
+  const { ovhSubsidiary } = context.environment.getUser();
   const {
     form,
     stepper,
+    setContainerName,
     submitContainerName,
     editContainerName,
   } = useContainerCreationStore();
+  const [isTouched, setIsTouched] = useState(false);
+  const isValid = validNameRegex.test(form.containerName);
+  const shouldDisplayError = isTouched && !isValid;
+  const asyncReplicationLink =
+    STORAGE_ASYNC_REPLICATION_LINK[ovhSubsidiary] ||
+    STORAGE_ASYNC_REPLICATION_LINK.DEFAULT;
+
   return (
     <StepComponent
       title={t('pci_projects_project_storages_containers_add_name_title')}
@@ -30,15 +66,80 @@ export function ContainerNameStep() {
       }
       next={{
         action: submitContainerName,
-        label: t('pci-common:common_stepper_next_button_label'),
-        isDisabled: false,
+        label: t('pci_projects_project_storages_containers_add_submit_label'),
+        isDisabled: !isValid,
       }}
       edit={{
         action: editContainerName,
-        label: t('pci-common:common_stepper_modify_this_step'),
+        label: t('pci_projects_project_storages_containers_add_cancel_label'),
       }}
     >
-      <span>TODO container name</span>
+      <OsdsFormField
+        error={
+          shouldDisplayError
+            ? t('pci-common:common_field_error_pattern')
+            : undefined
+        }
+      >
+        <OsdsInput
+          value={form.containerName}
+          onOdsInputBlur={() => setIsTouched(true)}
+          onOdsValueChange={(event) => setContainerName(event.detail.value)}
+          type={ODS_INPUT_TYPE.text}
+          color={ODS_THEME_COLOR_INTENT.primary}
+          inline
+        />
+      </OsdsFormField>
+      <OsdsText
+        size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+        color={
+          shouldDisplayError
+            ? ODS_THEME_COLOR_INTENT.error
+            : ODS_THEME_COLOR_INTENT.text
+        }
+      >
+        {t(
+          'pci_projects_project_storages_containers_add_pattern_help_storage-s3',
+        )}
+      </OsdsText>
+      {(form.deploymentMode === OBJECT_CONTAINER_MODE_MONO_ZONE ||
+        form.deploymentMode === OBJECT_CONTAINER_MODE_MULTI_ZONES) && (
+        <OsdsMessage
+          className="mt-4"
+          type={ODS_MESSAGE_TYPE.info}
+          color={ODS_THEME_COLOR_INTENT.info}
+        >
+          <p>
+            <OsdsText
+              size={ODS_THEME_TYPOGRAPHY_SIZE._400}
+              color={ODS_THEME_COLOR_INTENT.text}
+            >
+              {t(
+                'pci_projects_project_storages_containers_add_replication_rules_info',
+              )}
+            </OsdsText>
+            <OsdsLink
+              color={ODS_THEME_COLOR_INTENT.primary}
+              href={asyncReplicationLink}
+              target={OdsHTMLAnchorElementTarget._blank}
+            >
+              {t(
+                'pci_projects_project_storages_containers_add_replication_rules_info_link',
+              )}
+              <span slot="end">
+                <OsdsIcon
+                  aria-hidden="true"
+                  className="ml-4"
+                  name={ODS_ICON_NAME.EXTERNAL_LINK}
+                  hoverable
+                  size={ODS_ICON_SIZE.xxs}
+                  color={ODS_THEME_COLOR_INTENT.primary}
+                />
+              </span>
+            </OsdsLink>
+          </p>
+        </OsdsMessage>
+      )}
     </StepComponent>
   );
 }
diff --git a/.../pci-object-storage/src/pages/objects/container/new/step/DeploymentModeStep.component.tsx b/.../pci-object-storage/src/pages/objects/container/new/step/DeploymentModeStep.component.tsx
@@ -52,7 +52,7 @@ export function DeploymentModeStep() {
       next={{
         action: submitDeploymentMode,
         label: t('pci-common:common_stepper_next_button_label'),
-        isDisabled: false,
+        isDisabled: !form.deploymentMode,
       }}
       edit={{
         action: editDeploymentMode,