From eab7f577225235b7bc2b97d76bc4556b864cbde2 Mon Sep 17 00:00:00 2001 From: Vincent BONMARCHAND Date: Wed, 24 Apr 2024 18:03:36 +0200 Subject: [PATCH] feat(*): add kms onboarding page ref: MANAGER-13826 Signed-off-by: Vincent BONMARCHAND --- .../onboarding/onboarding.component.tsx | 77 ++++++++++++------ .../src/pages/onboarding/index.tsx | 55 +++---------- .../src/pages/onboarding/onboarding-img.png | Bin 8250 -> 1203 bytes .../onboarding/Messages_fr_FR.json | 22 ++--- 4 files changed, 69 insertions(+), 85 deletions(-) diff --git a/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx b/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx index a2b2439bf5e2..8d7748f3b670 100644 --- a/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx +++ b/packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx @@ -1,8 +1,11 @@ import React, { PropsWithChildren } from 'react'; -import { OsdsButton, OsdsText } from '@ovhcloud/ods-components/react'; +import { OsdsButton, OsdsIcon, OsdsText } from '@ovhcloud/ods-components/react'; +import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core'; import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT, + ODS_ICON_NAME, + ODS_ICON_SIZE, ODS_TEXT_LEVEL, ODS_TEXT_SIZE, } from '@ovhcloud/ods-components'; @@ -16,6 +19,7 @@ export type OnboardingLayoutProps = PropsWithChildren<{ orderButtonLabel: string; orderHref?: string; description?: string; + additionalDescriptions?: string[]; moreInfoHref?: string; moreInfoButtonLabel?: string; onOrderButtonClick?: () => void; @@ -30,6 +34,7 @@ export const OnboardingLayout: React.FC = ({ hideHeadingSection, title, description, + additionalDescriptions, orderHref, orderButtonLabel, moreInfoHref, @@ -55,38 +60,60 @@ export const OnboardingLayout: React.FC = ({ color={ODS_THEME_COLOR_INTENT.primary} level={ODS_TEXT_LEVEL.heading} size={ODS_TEXT_SIZE._700} - className="block text-center mb-3" + className="block text-center mb-4" > {title} - - {description} - -
-
+ {description && ( + + {description} + + )}{' '} + {additionalDescriptions?.map((desc) => ( + + {desc} + + ))} +
+ + {orderButtonLabel} + + + {moreInfoButtonLabel && moreInfoHref && ( - {orderButtonLabel} + {moreInfoButtonLabel} + + + -
- {moreInfoButtonLabel && moreInfoHref && ( -
- - {moreInfoButtonLabel} - -
)}
diff --git a/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx b/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx index af10bd6b1030..61fb78bf1460 100644 --- a/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx +++ b/packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx @@ -1,59 +1,26 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Card, OnboardingLayout } from '@ovhcloud/manager-components'; +import { useNavigate } from 'react-router-dom'; +import { OnboardingLayout } from '@ovhcloud/manager-components'; import onboardingImgSrc from './onboarding-img.png'; +import { ROUTES_URLS } from '@/routes/routes.constants'; export default function Onboarding() { const { t } = useTranslation('key-management-service/onboarding'); - - const tileList = [ - { - id: 1, - texts: { - title: t('guide1Title'), - description: t('guide1Description'), - category: t('guideCategory'), - }, - href: 'https://ovh/com/link/1', - }, - { - id: 2, - texts: { - title: t('guide2Title'), - description: t('guide2Description'), - category: t('guideCategory'), - }, - href: 'https://ovh/com/link/2', - }, - { - id: 3, - texts: { - title: t('guide3Title'), - description: t('guide3Description'), - category: t('guideCategory'), - }, - href: 'https://ovh/com/link/3', - }, - ]; - - const title: string = t('title'); - const description: string = t('description'); + const navigate = useNavigate(); return ( + navigate(ROUTES_URLS.createKeyManagementService) + } moreInfoButtonLabel={t('moreInfoButtonLabel')} moreInfoHref={t('moreInfoButtonLink')} - > - - + > ); } diff --git a/packages/manager/apps/key-management-service/src/pages/onboarding/onboarding-img.png b/packages/manager/apps/key-management-service/src/pages/onboarding/onboarding-img.png index 1ac8d6473c95008e4a957539d3567870852b874e..68a48f1197edfa632a52b725bb2d676b893ad32b 100644 GIT binary patch literal 1203 zcmV;k1WfyhP)|+1cVdNe3ML)6Er;m8INpB+Gw@fT?wF}p`oFnVQXN8Z*;~T5D#6tgYqQ6TQf+`;umXULB7D9 zaRgG_f|L>X69a#>haF04Z(|9b`?+{H4%87MT8v`-Z7h*5u%C*(6uEsa5;!EWnqx)} zS`%O_hMH)BD-6D&3f_Smi4x2TmrmJqPiJ5O4wQVT|uifb(gQ15uW0RJuJRL4TqkeQ+~Gk@`lYx3Dwn zLIs2uxIMZCZGe2%@Cem^yr?TEVFhlF#yCP35DctK)ftX(0;|!G-HfNS{tmFU6ZCc8 z!o0`S#l@Z~1DIx4jCBSa=`cpCgY!*fj4Xp0uvcexr{m*2{-zE-c{Kf)^7flK>C`3e5?PV%CcC&((#dtLnI%Kieo)JvQn{sIeeYL9lX<7Gxf zd2#qdnNZB^Z6EvvX3(`1PQ2Vt`k`nlnDw6fj&hN}Np9KB&>qWjo}rcw(7ZR>*It{g zFZpFp7%0*ovL2Ld7O5$s@Oal_q>9^NasnPoH z@D8u2 z-viW-?E>CDn3a?8qpS@B=pQpMh&4el^j}rESeS4dL@@b+$xbd}*mF>Ys%& ziTI_m7O9u%4aw9$h84mVki=_wuY&%W_!%wb4atE~F5wu%x$=&Fdvs}!t>qLv@n4pB ziy|V6<-|FqI_?PN!*nieomjb&p7;x_M>!){z>ZUjW|O6g=Kbs87syJ;OLi5)sR@(u zpm44|jPUNlAaXe=VIY<7y}X$gW7(bd+R%~NB*W=J z^}C0J_Ks$-1vLA^h0rkrwe#*oHRrVSkq0MA9C@Jd&+V9jLZp;a&OWCFECN>?g(d1# z={nA76;dVBc*o!2R|p7Yiu2DG&D3cG&F1<{{YZZ*sxHq RcoF~r002ovPDHLkV1i&cI~o80 literal 8250 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 KUaD&K;y(a7f*-B` diff --git a/packages/manager/apps/key-management-service/src/public/translations/key-management-service/onboarding/Messages_fr_FR.json b/packages/manager/apps/key-management-service/src/public/translations/key-management-service/onboarding/Messages_fr_FR.json index 69e16837eca0..0038f6b933d7 100644 --- a/packages/manager/apps/key-management-service/src/public/translations/key-management-service/onboarding/Messages_fr_FR.json +++ b/packages/manager/apps/key-management-service/src/public/translations/key-management-service/onboarding/Messages_fr_FR.json @@ -1,18 +1,8 @@ { - "title": "key-management-service", - "description": "Découvrez des services de stockage managés qui s’appuient sur le système de fichiers OpenZFS. Bénéficiez en quelques clics d’espaces de stockage centralisés pour entreposer ou sauvegarder vos données et fichiers.", - "orderButtonLabel": "Commander un key-management-service", - "orderButtonLink": "/#/dedicated/key-management-service/order", - "moreInfoButtonLabel": "En savoir plus sur key-management-service", - "moreInfoButtonLink": "/#/dedicated/key-management-service/info", - "guideCategory": "Tutoriel", - "guide1Title": "Premiers pas avec un key-management-service", - "guide1Description": "Découvrez comment gérer un NAS-HA depuis l'espace-client OVHcloud", - "guide1Link": "https://help.ovhcloud.com/csm/fr-public-cloud-storage-nas-get-started?id=kb_article_view&sysparm_article=KB0046704", - "guide2Title": "Monter votre NAS via un partage NFS", - "guide2Description": "Découvrez comment monter un NAS via un partage NFS", - "guide2Link": "https://help.ovhcloud.com/csm/fr-public-cloud-storage-nas-nfs?id=kb_article_view&sysparm_article=KB0046742", - "guide3Title": "Monter votre NAS sur Windows Server via CIFS", - "guide3Description": "Découvrez comment monter un NAS sur Windows Server via le protocole CIFS", - "guide3Link": "https://help.ovhcloud.com/csm/fr-public-cloud-storage-nas-cifs?id=kb_article_view&sysparm_article=KB0046672" + "title": "OVHcloud Key Management Service", + "description": "Gardez le contrôle du chiffrement de vos données sensibles.", + "description_secondary": "OVHcloud KMS est le service centralisé de chiffrement entièrement managé pour sécuriser vos données dans vos applications et vos services OVHcloud", + "orderButtonLabel": "Commander un KMS", + "moreInfoButtonLabel": "En savoir plus", + "moreInfoButtonLink": "https://help.ovhcloud.com/csm/fr-documentation-manage-operate?id=kb_browse_cat&kb_id=3d4a8129a884a950f07829d7d5c75243" }