feat(key-management-service): update dashboard header (#11811)

ref: MANAGER-13567 Signed-off-by: David Arsène <david.arsene.ext@ovhcloud.com>
ovh · May 24, 2024 · ff4077c · ff4077c
1 parent 78353c5
commit ff4077c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/...manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx b/...manager/apps/key-management-service/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -5,14 +5,21 @@ import {
   OsdsTabs,
   OsdsTabBar,
   OsdsTabBarItem,
+  OsdsChip,
 } from '@ovhcloud/ods-components/react';
-import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import {
+  ODS_CHIP_SIZE,
+  ODS_TEXT_LEVEL,
+  ODS_TEXT_SIZE,
+} from '@ovhcloud/ods-components';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { useTranslation } from 'react-i18next';
 
 export type DashboardTabItemProps = {
   name: string;
   title: string;
-  to: string;
+  disabled?: boolean;
+  to?: string;
 };
 
 export type DashboardLayoutProps = {
@@ -23,6 +30,7 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
   const [panel, setActivePanel] = useState('');
   const location = useLocation();
   const navigate = useNavigate();
+  const { t } = useTranslation('key-management-service/dashboard');
 
   useEffect(() => {
     const activeTab = tabs.find((tab) => tab.to === location.pathname);
@@ -51,10 +59,17 @@ const Dashboard: React.FC<DashboardLayoutProps> = ({ tabs }) => {
             <OsdsTabBarItem
               key={`osds-tab-bar-item-${tab.name}`}
               panel={tab.name}
+              disabled={tab.disabled}
+              className="flex items-center justify-center"
             >
               <NavLink to={tab.to} className="no-underline">
                 {tab.title}
               </NavLink>
+              {tab.disabled && (
+                <OsdsChip size={ODS_CHIP_SIZE.sm} inline className="ml-2">
+                  {t('key_management_service_dashboard_tab_comming_soon')}
+                </OsdsChip>
+              )}
             </OsdsTabBarItem>
           ))}
         </OsdsTabBar>

diff --git a/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx b/packages/manager/apps/key-management-service/src/pages/dashboard/index.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useResolvedPath } from 'react-router-dom';
+import { useParams, useResolvedPath } from 'react-router-dom';
 import {
   OsdsBreadcrumb,
   OsdsDivider,
@@ -16,19 +16,30 @@ import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import Dashboard from '@/components/layout-helpers/Dashboard/Dashboard';
 import Loading from '@/components/Loading/Loading';
 import { ROUTES_URLS } from '@/routes/routes.constants';
+import { useOKMSById } from '@/hooks/useOKMS';
 
 export default function DashboardPage() {
-  const { t } = useTranslation('key-management-service/dashboard');
+  const { t: tDashboard } = useTranslation('key-management-service/dashboard');
+  const { t: tListing } = useTranslation('key-management-service/listing');
+  const { okmsId } = useParams();
+  const { data: okms } = useOKMSById(okmsId);
+  const displayName = okms?.data?.iam?.displayName;
+
   const tabsList = [
     {
       name: 'general_infos',
-      title: t('general_informations'),
+      title: tDashboard('general_informations'),
       to: useResolvedPath('').pathname,
     },
     {
-      name: 'custom tab',
-      title: 'custom tab',
-      to: useResolvedPath('Tabs2').pathname,
+      name: 'encrypted_keys',
+      title: tDashboard('encrypted_keys'),
+      disabled: true,
+    },
+    {
+      name: 'certificates',
+      title: tDashboard('access_certificates'),
+      disabled: true,
     },
   ];
 
@@ -38,17 +49,23 @@ export default function DashboardPage() {
         items={[
           {
             href: ROUTES_URLS.listing,
-            label: t('key_management_service_dashboard_title'),
+            label: tListing('key_management_service_listing_title'),
+          },
+          {
+            href: ROUTES_URLS.dashboard,
+            label: okmsId,
           },
         ]}
       ></OsdsBreadcrumb>
-      <div className={'flex items-center justify-between mt-4'}>
+      <div className={'flex items-center justify-between mt-2'}>
         <OsdsText
           level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
           size={ODS_THEME_TYPOGRAPHY_SIZE._600}
           color={ODS_THEME_COLOR_INTENT.primary}
         >
-          {t('key_management_service_dashboard_title')}
+          {tDashboard('key_management_service_dashboard_title', {
+            okmsId: displayName,
+          })}
         </OsdsText>
         <KmsGuidesHeader />
       </div>

diff --git a/...ment-service/src/public/translations/key-management-service/dashboard/Messages_fr_FR.json b/...ment-service/src/public/translations/key-management-service/dashboard/Messages_fr_FR.json
@@ -1,9 +1,12 @@
 {
-  "key_management_service_dashboard_title": "Dashboard page",
+  "key_management_service_dashboard_title": "Mon KMS {{okmsId}}",
   "results": "résultats",
   "loading": "chargement",
   "error_service": "No services info",
   "general_informations": "Informations générales",
+  "encrypted_keys": "Clés de chiffrement",
+  "access_certificates": "Certificats d'accès",
+  "key_management_service_dashboard_tab_comming_soon": "prochainement",
   "key_management_service_dashboard_field_label_name": "Nom du KMS",
   "key_management_service_dashboard_field_label_id": "ID",
   "key_management_service_dashboard_field_label_urn": "URN",