Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/manager 13826 KMS Onboarding #11555

Merged
merged 1 commit into from
Apr 30, 2024
Merged

Feat/manager 13826 KMS Onboarding #11555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 52 additions & 25 deletions packages/manager-components/src/components/templates/onboarding/onboarding.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -16,6 +19,7 @@ export type OnboardingLayoutProps = PropsWithChildren<{
orderButtonLabel: string;
orderHref?: string;
description?: string;
additionalDescriptions?: string[];
moreInfoHref?: string;
moreInfoButtonLabel?: string;
onOrderButtonClick?: () => void;
Expand All @@ -30,6 +34,7 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
hideHeadingSection,
title,
description,
additionalDescriptions,
orderHref,
orderButtonLabel,
moreInfoHref,
Expand All @@ -55,38 +60,60 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
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}
</OsdsText>
<OsdsText
level={ODS_TEXT_LEVEL.body}
className="block text-center mb-2"
>
{description}
</OsdsText>
<div className="flex sm:py-8 xs:w-full xs:flex-col sm:items-center sm:w-fit sm:flex-row">
<div className="w-full xs:py-3">
{description && (
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._800}
className="block text-center mb-4"
>
{description}
</OsdsText>
)}{' '}
{additionalDescriptions?.map((desc) => (
<OsdsText
level={ODS_TEXT_LEVEL.body}
size={ODS_TEXT_SIZE._800}
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}
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
55 changes: 11 additions & 44 deletions packages/manager/apps/key-management-service/src/pages/onboarding/index.tsx
View file
Open in desktop
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>
);
}
Binary file modified ...ges/manager/apps/key-management-service/src/pages/onboarding/onboarding-img.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 6 additions & 16 deletions ...ent-service/src/public/translations/key-management-service/onboarding/Messages_fr_FR.json
View file
Open in desktop
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"
}
Loading