feat(key-management-service): add guides in header page template (#11630

) ref: MANAGER-13983 Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
ovh · May 15, 2024 · eae9871 · eae9871
1 parent 403c833
commit eae9871
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 30 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
@@ -119,7 +119,7 @@ export const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
                 color={ODS_THEME_COLOR_INTENT.primary}
                 variant={ODS_BUTTON_VARIANT.stroked}
                 size={ODS_BUTTON_SIZE.md}
-                onClick={onmoreInfoButtonClick}
+                onClick={onOrderButtonClick}
                 {...(isActionDisabled && { disabled: true })}
                 href={moreInfoHref}
                 target={OdsHTMLAnchorElementTarget._blank}

diff --git a/packages/manager/apps/key-management-service/package.json b/packages/manager/apps/key-management-service/package.json
@@ -24,6 +24,7 @@
     "@ovh-ux/manager-config": "^7.3.0",
     "@ovh-ux/manager-core-api": "*",
     "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-module-order": "*",
     "@ovh-ux/manager-react-shell-client": "^0.5.0",
     "@ovh-ux/manager-tailwind-config": "*",
     "@ovhcloud/manager-components": "^1.12.0",

diff --git a/packages/manager/apps/key-management-service/src/App.tsx b/packages/manager/apps/key-management-service/src/App.tsx
@@ -1,13 +1,19 @@
 import React, { useEffect, useContext } from 'react';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { odsSetup } from '@ovhcloud/ods-common-core';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
-import queryClient from './query.client';
-
 import appRoutes from './routes/routes';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 300_000,
+    },
+  },
+});
+
 odsSetup();
 const router = createHashRouter(appRoutes);
 

diff --git a/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx b/packages/manager/apps/key-management-service/src/components/Guide/KmsGuidesHeader.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { GuideButton } from '@ovhcloud/manager-components';
+import { useKmsGuides } from '@/hooks/useKmsGuides';
+
+export default function KmsGuidesHeader() {
+  const { kmsGuides } = useKmsGuides();
+
+  return <GuideButton items={kmsGuides} />;
+}
diff --git a/packages/manager/apps/key-management-service/src/hooks/useKmsGuides.ts b/packages/manager/apps/key-management-service/src/hooks/useKmsGuides.ts
@@ -0,0 +1,40 @@
+import { useEnvironment } from '@ovh-ux/manager-react-shell-client';
+import { GuideItem } from '@ovhcloud/manager-components';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type GuideLinks = Record<string, GuideItem[]>;
+
+export function useKmsGuides() {
+  const { ovhSubsidiary } = useEnvironment().getUser();
+  const { t } = useTranslation('key-management-service/guide');
+  const [kmsGuides, setKmsGuides] = useState<GuideItem[]>([]);
+
+  const KMS_GUIDES: GuideLinks = {
+    FR: [
+      {
+        id: 1,
+        href:
+          'https://help.ovhcloud.com/csm/fr-documentation-manage-operate?id=kb_browse_cat&kb_id=3d4a8129a884a950f07829d7d5c75243',
+        target: OdsHTMLAnchorElementTarget._blank,
+        label: t('guides_header_find_out_more'),
+      },
+    ],
+    DEFAULT: [
+      {
+        id: 1,
+        href:
+          'https://help.ovhcloud.com/csm/en-gb-documentation-manage-operate?id=kb_browse_cat&kb_id=3d4a8129a884a950f07829d7d5c75243',
+        target: OdsHTMLAnchorElementTarget._blank,
+        label: t('guides_header_find_out_more'),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    setKmsGuides(KMS_GUIDES[ovhSubsidiary] ?? KMS_GUIDES.DEFAULT);
+  }, [ovhSubsidiary]);
+
+  return { kmsGuides, kmsOnboardingGuide: kmsGuides[0] };
+}
diff --git a/packages/manager/apps/key-management-service/src/index.tsx b/packages/manager/apps/key-management-service/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
-  ShellProvider,
+  ShellContext,
   initShellContext,
   initI18n,
 } from '@ovh-ux/manager-react-shell-client';
@@ -24,14 +24,14 @@ const init = async (appName: string) => {
     context,
     reloadOnLocaleChange: true,
     defaultNS: appName,
-    ns: [appName, `${appName}/listing`],
+    ns: [`${appName}/listing`, `${appName}/dashboard`],
   });
 
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-      <ShellProvider client={context}>
+      <ShellContext.Provider value={context}>
         <App />
-      </ShellProvider>
+      </ShellContext.Provider>
     </React.StrictMode>,
   );
 };

diff --git a/packages/manager/apps/key-management-service/src/pages/create/index.tsx b/packages/manager/apps/key-management-service/src/pages/create/index.tsx
@@ -15,6 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { ROUTES_URLS } from '@/routes/routes.constants';
 import RegionSelector from '@/components/layout-helpers/Create/RegionSelector';
 import OrderConfirmation from '@/components/layout-helpers/Create/OrderConfirmation';
+import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 
 export default function Create() {
   const { t } = useTranslation('key-management-service/create');
@@ -38,6 +39,7 @@ export default function Create() {
         >
           {t('key_management_service_create_title')}
         </OsdsText>
+        <KmsGuidesHeader />
       </div>
       <OsdsText
         level={ODS_THEME_TYPOGRAPHY_LEVEL.subheading}

diff --git a/packages/manager/apps/key-management-service/src/pages/listing/index.tsx b/packages/manager/apps/key-management-service/src/pages/listing/index.tsx
@@ -32,6 +32,7 @@ import {
   DatagridCellName,
   DatagridCellRegion,
 } from '@/components/Listing/ListingCells';
+import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 
 export default function Listing() {
   const { t } = useTranslation('key-management-service/listing');
@@ -86,6 +87,7 @@ export default function Listing() {
         >
           {t('key_management_service_listing_title')}
         </OsdsText>
+        <KmsGuidesHeader />
       </div>
       <OsdsDivider></OsdsDivider>
       <Notifications />
@@ -95,7 +97,7 @@ export default function Listing() {
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.stroked}
           color={ODS_THEME_COLOR_INTENT.primary}
-          href={ROUTES_URLS.createKeyManagementService}
+          onClick={() => navigate(ROUTES_URLS.createKeyManagementService)}
         >
           {t('key_management_service_listing_add_kms_button')}
         </OsdsButton>

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
@@ -1,13 +1,15 @@
+import { OnboardingLayout } from '@ovhcloud/manager-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { OnboardingLayout } from '@ovhcloud/manager-components';
-import onboardingImgSrc from './onboarding-img.png';
+import { useKmsGuides } from '@/hooks/useKmsGuides';
 import { ROUTES_URLS } from '@/routes/routes.constants';
+import onboardingImgSrc from './onboarding-img.png';
 
 export default function Onboarding() {
   const { t } = useTranslation('key-management-service/onboarding');
   const navigate = useNavigate();
+  const { kmsOnboardingGuide } = useKmsGuides();
 
   return (
     <OnboardingLayout
@@ -19,8 +21,8 @@ export default function Onboarding() {
       onOrderButtonClick={() =>
         navigate(ROUTES_URLS.createKeyManagementService)
       }
-      moreInfoButtonLabel={t('moreInfoButtonLabel')}
-      moreInfoHref={t('moreInfoButtonLink')}
+      moreInfoButtonLabel={kmsOnboardingGuide?.label?.toString()}
+      moreInfoHref={kmsOnboardingGuide?.href}
     ></OnboardingLayout>
   );
 }
diff --git a/...nagement-service/src/public/translations/key-management-service/guide/Messages_fr_FR.json b/...nagement-service/src/public/translations/key-management-service/guide/Messages_fr_FR.json
@@ -0,0 +1,3 @@
+{
+  "guides_header_find_out_more": "En savoir plus"
+}
diff --git a/packages/manager/apps/key-management-service/src/query.client.ts b/packages/manager/apps/key-management-service/src/query.client.ts
diff --git a/packages/manager/core/shell-client/src/initI18n.ts b/packages/manager/core/shell-client/src/initI18n.ts
@@ -3,11 +3,12 @@ import I18NextHttpBackend from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 import { ShellContextType } from './ShellContext';
 
-export const defaultLocale = 'fr-FR';
+export const defaultLocale = 'fr_FR';
 export const defaultAvailableLocales = [defaultLocale];
 
 export const ovhLocaleToI18next = (ovhLocale = '') =>
   ovhLocale.replace('_', '-');
+
 export const i18nextLocaleToOvh = (i18nextLocale = '') =>
   i18nextLocale.replace('-', '_');
 
@@ -38,21 +39,21 @@ export const initI18n = async ({
         value ? value.replace(/&amp;/g, '&') : value,
     })
     .init({
-      lng: ovhLocaleToI18next(locale),
+      lng: locale,
       fallbackLng: defaultLocale,
       defaultNS,
       ns,
-      supportedLngs: availableLocales.map(ovhLocaleToI18next),
+      supportedLngs: availableLocales,
       postProcess: 'normalize',
       interpolation: {
         escapeValue: false,
       },
       backend: {
         allowMultiLoading: false,
         loadPath: (lngs: string[], namespaces: string[]) =>
-          `${import.meta.env.BASE_URL}translations/${
-            namespaces[0]
-          }/Messages_${i18nextLocaleToOvh(lngs[0])}.json`,
+          `${import.meta.env.BASE_URL}translations/${namespaces[0]}/Messages_${
+            lngs[0]
+          }.json`,
       },
     });