Skip to content

Commit

Permalink
feat(*): add kms onboarding page
Browse files Browse the repository at this point in the history
ref: MANAGER-13826

Signed-off-by: Vincent BONMARCHAND <vincent.bonmarchand.ext@corp.ovh.com>
  • Loading branch information
vovh committed May 14, 2024
1 parent 9be1360 commit cc4333f
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 86 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { PropsWithChildren } from 'react';
import {
OsdsButton,
OsdsDivider,
OsdsIcon,
OsdsText,
OsdsDivider,
} 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_DIVIDER_SIZE,
ODS_TEXT_COLOR_INTENT,
ODS_TEXT_LEVEL,
Expand All @@ -24,7 +28,8 @@ export type OnboardingLayoutProps = PropsWithChildren<{
title: string;
orderButtonLabel: string;
orderHref?: string;
description?: React.ReactNode;
description?: string;
additionalDescriptions?: string[];
moreInfoHref?: string;
moreInfoButtonLabel?: string;
onOrderButtonClick?: () => void;
Expand All @@ -40,6 +45,7 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
hideHeadingSection,
title,
description,
additionalDescriptions,
orderHref,
orderButtonLabel,
moreInfoHref,
Expand Down Expand Up @@ -72,37 +78,60 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
{title}
</OsdsText>
<OsdsDivider size={ODS_DIVIDER_SIZE.seven} />
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._400}
color={ODS_TEXT_COLOR_INTENT.text}
className="block text-center max-w-4xl"
>
{description}
</OsdsText>
<div className="flex sm:py-6 xs:w-full xs:flex-col sm:items-center sm:w-fit sm:flex-row">
<div className="w-full xs:py-3 mt-2">
{description && (
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._800}
color={ODS_TEXT_COLOR_INTENT.text}
className="block text-center mb-4"
>
{description}
</OsdsText>
)}{' '}
{additionalDescriptions?.map((desc) => (
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._800}
color={ODS_TEXT_COLOR_INTENT.text}
className="block text-center mb-4"
key={desc}
>
{desc}
</OsdsText>
))}
<div className="flex sm:py-8 xs:w-full xs:flex-col sm:items-center sm:flex-row w-full justify-center">
<OsdsButton
inline
color={ODS_THEME_COLOR_INTENT.primary}
size={ODS_BUTTON_SIZE.md}
href={orderHref}
onClick={onOrderButtonClick}
>
{orderButtonLabel}
</OsdsButton>

{moreInfoButtonLabel && moreInfoHref && (
<OsdsButton
inline
className="sm:ml-1"
color={ODS_THEME_COLOR_INTENT.primary}
variant={ODS_BUTTON_VARIANT.stroked}
size={ODS_BUTTON_SIZE.md}
href={orderHref}
onClick={onOrderButtonClick}
{...(isActionDisabled && { disabled: true })}
href={moreInfoHref}
target={OdsHTMLAnchorElementTarget._blank}
>
{orderButtonLabel}
{moreInfoButtonLabel}
<span slot="end">
<OsdsIcon
className="ml-4 cursor-pointer"
name={ODS_ICON_NAME.EXTERNAL_LINK}
size={ODS_ICON_SIZE.xs}
hoverable
></OsdsIcon>
</span>
</OsdsButton>
</div>
{moreInfoButtonLabel && moreInfoHref && (
<div className="w-full sm:m-2 xs:py-3 xs:mb-6">
<OsdsButton
className="sm:ml-1"
color={ODS_THEME_COLOR_INTENT.primary}
variant={ODS_BUTTON_VARIANT.stroked}
size={ODS_BUTTON_SIZE.md}
>
{moreInfoButtonLabel}
</OsdsButton>
</div>
)}
</div>
</section>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
<OnboardingLayout
title={title}
title={t('title')}
img={{ src: onboardingImgSrc }}
description={description}
description={t('description')}
additionalDescriptions={[t('description_secondary')]}
orderButtonLabel={t('orderButtonLabel')}
orderHref={t('orderButtonLink')}
onOrderButtonClick={() =>
navigate(ROUTES_URLS.createKeyManagementService)
}
moreInfoButtonLabel={t('moreInfoButtonLabel')}
moreInfoHref={t('moreInfoButtonLink')}
>
<aside className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 pt-12">
{tileList.map((tile) => (
<Card key={tile.id} href={tile.href} texts={tile.texts} />
))}
</aside>
</OnboardingLayout>
></OnboardingLayout>
);
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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"
}

0 comments on commit cc4333f

Please sign in to comment.