feat(okms): add changelog buttons

Romain Jamet · Romain Jamet · commit a753b2605ed1 · 2025-09-09T12:24:40.000+02:00
ref: #MANAGER-19653

Signed-off-by: Romain Jamet &lt;romain.jamet.ext@corp.ovh.com&gt;
diff --git a/packages/manager/apps/key-management-service/src/components/kmsChangelogButton/KmsChangelogButton.component.tsx b/packages/manager/apps/key-management-service/src/components/kmsChangelogButton/KmsChangelogButton.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ChangelogButton,
+  ChangelogLinks,
+} from '@ovh-ux/manager-react-components';
+
+const kmsChangelogLinks: ChangelogLinks = {
+  changelog:
+    'https://github.com/orgs/ovh/projects/16/views/6?sliceBy%5Bvalue%5D=Key+Management+Service',
+  roadmap:
+    'https://github.com/orgs/ovh/projects/16/views/1?sliceBy%5Bvalue%5D=Key+Management+Service',
+  'feature-request':
+    'https://github.com/ovh/management-security-operations-roadmap/issues/new',
+};
+
+export const KmsChangelogButton = () => {
+  return <ChangelogButton links={kmsChangelogLinks} />;
+};
diff --git a/packages/manager/apps/key-management-service/src/constants.ts b/packages/manager/apps/key-management-service/src/constants.ts
@@ -1,14 +1,3 @@
-import { ChangelogLinks } from '@ovh-ux/manager-react-components';
-
-export const CHANGELOG_LINKS: ChangelogLinks = {
-  changelog:
-    'https://github.com/orgs/ovh/projects/16/views/6?sliceBy%5Bvalue%5D=KMS',
-  roadmap:
-    'https://github.com/orgs/ovh/projects/16/views/1?sliceBy%5Bvalue%5D=KMS&pane=info',
-  'feature-request':
-    'https://github.com/ovh/management-security-operations-roadmap/issues/new',
-};
-
 export const SERVICE_KEYS_LABEL = 'Service Keys';
 export const URN_LABEL = 'URN';
 export const PATH_LABEL = 'Path';
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ChangelogButton,
+  ChangelogLinks,
+} from '@ovh-ux/manager-react-components';
+
+const secretMangerLinks: ChangelogLinks = {
+  changelog:
+    'https://github.com/orgs/ovh/projects/16/views/6?sliceBy%5Bvalue%5D=Secret+Manager',
+  roadmap:
+    'https://github.com/orgs/ovh/projects/16/views/1?sliceBy%5Bvalue%5D=Secret+Manager',
+  'feature-request':
+    'https://github.com/ovh/management-security-operations-roadmap/issues/new',
+};
+
+export const SecretManagerChangelogButton = () => {
+  return <ChangelogButton links={secretMangerLinks} />;
+};
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/Create.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/Create.page.tsx
@@ -4,6 +4,7 @@ import { BaseLayout, Notifications } from '@ovh-ux/manager-react-components';
 import { useTranslation } from 'react-i18next';
 import { OdsBreadcrumb } from '@ovhcloud/ods-components/react';
 import { RootBreadcrumbItem } from '@secret-manager/components/breadcrumb';
+import { SecretManagerChangelogButton } from '@secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component';
 import { DomainManagement } from './DomainManagement.component';
 import { SecretForm } from './SecretForm.component';
 import { OrderOkmsModalProvider } from '@/common/pages/OrderOkmsModal/OrderOkmsModalContext';
@@ -18,7 +19,10 @@ export default function SecretCreatePage() {
   return (
     <OrderOkmsModalProvider>
       <BaseLayout
-        header={{ title: t('create_a_secret') }}
+        header={{
+          title: t('create_a_secret'),
+          changelogButton: <SecretManagerChangelogButton />,
+        }}
         breadcrumb={
           <OdsBreadcrumb>
             <RootBreadcrumbItem />
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/Dashboard.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/Dashboard.page.tsx
@@ -21,6 +21,7 @@ import {
   RootBreadcrumbItem,
   SecretBreadcrumbItem,
 } from '@secret-manager/components/breadcrumb';
+import { SecretManagerChangelogButton } from '@secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component';
 import { decodeSecretPath } from '@/modules/secret-manager/utils/secretPath';
 import Loading from '@/components/Loading/Loading';
 import {
@@ -63,6 +64,7 @@ export default function SecretDashboardPage() {
 
   const headerProps: HeadersProps = {
     title: secretPathDecoded,
+    changelogButton: <SecretManagerChangelogButton />,
   };
 
   if (isSecretPending) {
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/domains/Domains.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/domains/Domains.page.tsx
@@ -15,6 +15,7 @@ import {
 import { filterDomainsByRegion } from '@secret-manager/utils/domains';
 import { RegionSelector } from '@secret-manager/components/regionSelector/RegionSelector.component';
 import { RootBreadcrumbItem } from '@secret-manager/components/breadcrumb';
+import { SecretManagerChangelogButton } from '@secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component';
 import { KMS_ROUTES_URLS } from '@/routes/routes.constants';
 import { OkmsDatagrid } from '@/common/components/okmsDatagrid/OkmsDatagrid.component';
 import { useOkmsDatagridList } from '@/data/hooks/useOkms';
@@ -75,6 +76,7 @@ export default function SecretDomainsPage() {
     <BaseLayout
       header={{
         title: t('domains_list'),
+        changelogButton: <SecretManagerChangelogButton />,
       }}
       breadcrumb={
         <OdsBreadcrumb>
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/listing/Listing.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/listing/Listing.page.tsx
@@ -24,6 +24,7 @@ import {
 import { useSecretList } from '@secret-manager/data/hooks/useSecretList';
 import { RegionSelector } from '@secret-manager/components/regionSelector/RegionSelector.component';
 import { useBackToDomainListUrl } from '@secret-manager/hooks/useBackToDomainListUrl';
+import { SecretManagerChangelogButton } from '@secret-manager/components/secretManagerChangelogButton/SecretManagerChangelogButton.component';
 import {
   DatagridAction,
   DatagridCellPath,
@@ -90,7 +91,10 @@ export default function SecretListingPage() {
 
   return (
     <BaseLayout
-      header={{ title: t('secret_manager') }}
+      header={{
+        title: t('secret_manager'),
+        changelogButton: <SecretManagerChangelogButton />,
+      }}
       breadcrumb={
         <OdsBreadcrumb>
           <RootBreadcrumbItem />
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/Credential.page.tsx
@@ -20,6 +20,7 @@ import {
 } from '@ovh-ux/manager-react-components';
 import { queryClient } from '@ovh-ux/manager-react-core-application';
 import { OdsTabs, OdsTab } from '@ovhcloud/ods-components/react';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 import {
   getOkmsCredentialQueryKey,
   useOkmsCredentialById,
@@ -108,6 +109,7 @@ const CredentialDashboard = () => {
         header={{
           title: credential.name || credential.id,
           headerButton: <KmsGuidesHeader />,
+          changelogButton: <KmsChangelogButton />,
         }}
         backLinkLabel={t(
           'key_management_service_credential_dashboard_backlink',
diff --git a/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx b/packages/manager/apps/key-management-service/src/pages/credential/create/CreateCredential.page.tsx
@@ -19,6 +19,7 @@ import CreateGeneralInformations from '@/pages/credential/create/CreateGeneralIn
 import CreateAddIdentities from '@/pages/credential/create/CreateAddIdentities.component';
 import CreateCredentialConfirmation from '@/pages/credential/create/confirmation/CreateCredentialConfirmation.component';
 import { CertificateType, OkmsCredential } from '@/types/okmsCredential.type';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 
 const CreateCredential = () => {
   const navigate = useNavigate();
@@ -100,6 +101,7 @@ const CreateCredential = () => {
           title: t('key_management_service_credential_create_title'),
           description: t('key_management_service_credential_create_subtitle'),
           headerButton: <KmsGuidesHeader />,
+          changelogButton: <KmsChangelogButton />,
         }}
         message={<Notifications />}
       >
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
@@ -6,7 +6,6 @@ import {
   BaseLayout,
   HeadersProps,
   ErrorBanner,
-  ChangelogButton,
   useFeatureAvailability,
   useServiceDetails,
 } from '@ovh-ux/manager-react-components';
@@ -19,12 +18,13 @@ import { KMS_ROUTES_URIS, KMS_ROUTES_URLS } from '@/routes/routes.constants';
 import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
 import { okmsQueryKeys } from '@/data/api/okms';
 import { useOkmsById } from '@/data/hooks/useOkms';
-import { CHANGELOG_LINKS, SERVICE_KEYS_LABEL } from '@/constants';
+import { SERVICE_KEYS_LABEL } from '@/constants';
 import KmsTabs, {
   KmsTabProps,
 } from '@/components/layout-helpers/Dashboard/KmsTabs';
 import { KMS_FEATURES } from '@/utils/feature-availability/feature-availability.constants';
 import { KmsDashboardOutletContext } from './KmsDashboard.type';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 
 export default function DashboardPage() {
   const { t } = useTranslation([
@@ -150,7 +150,7 @@ export default function DashboardPage() {
   const headerProps: HeadersProps = {
     title: displayName,
     headerButton: <KmsGuidesHeader />,
-    changelogButton: <ChangelogButton links={CHANGELOG_LINKS} />,
+    changelogButton: <KmsChangelogButton />,
   };
 
   const contextValue: KmsDashboardOutletContext = {
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
@@ -9,7 +9,6 @@ import {
 import { OdsButton, OdsMessage } from '@ovhcloud/ods-components/react';
 import {
   BaseLayout,
-  ChangelogButton,
   Notifications,
   RedirectionGuard,
   useNotifications,
@@ -26,7 +25,7 @@ import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import { useAutoRefetch } from '@/data/hooks/useAutoRefetch';
 import { okmsQueryKeys } from '@/data/api/okms';
 import kmsListingTestIds from './KmsListing.constants';
-import { CHANGELOG_LINKS } from '@/constants';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 import { OkmsDatagrid } from '@/common/components/okmsDatagrid/OkmsDatagrid.component';
 
 export default function Listing() {
@@ -60,7 +59,7 @@ export default function Listing() {
   const headerProps: HeadersProps = {
     title: t('key_management_service_listing_title'),
     headerButton: <KmsGuidesHeader />,
-    changelogButton: <ChangelogButton links={CHANGELOG_LINKS} />,
+    changelogButton: <KmsChangelogButton />,
   };
 
   return (
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/create/CreateKey.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/create/CreateKey.page.tsx
@@ -40,6 +40,7 @@ import { KeyTypeSection } from './KeyTypeSection.component';
 import { KeyUsageSection } from './KeyUsageSection.component';
 import { CREATE_KEY_TEST_IDS } from './CreateKey.constants';
 import { SERVICE_KEYS_LABEL } from '@/constants';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 
 export default function CreateKey() {
   const { okmsId } = useParams() as { okmsId: string };
@@ -180,6 +181,7 @@ export default function CreateKey() {
           title: t('key_management_service_service-keys_create_title'),
           description: t('key_management_service_service-keys_create_subtitle'),
           headerButton: <KmsGuidesHeader />,
+          changelogButton: <KmsChangelogButton />,
         }}
         message={<Notifications />}
       >
diff --git a/packages/manager/apps/key-management-service/src/pages/serviceKey/dashboard/ServiceKeyDashboard.page.tsx b/packages/manager/apps/key-management-service/src/pages/serviceKey/dashboard/ServiceKeyDashboard.page.tsx
@@ -26,6 +26,7 @@ import { okmsQueryKeys } from '@/data/api/okms';
 import { SERVICE_KEYS_LABEL } from '@/constants';
 import { GeneralInformationTile } from './GeneralInformationTile.component';
 import { CryptoPropertiesTile } from './CryptoPropertiesTile.component';
+import { KmsChangelogButton } from '@/components/kmsChangelogButton/KmsChangelogButton.component';
 
 export default function ServiceKeyDashboard() {
   const { okmsId, keyId } = useParams() as {
@@ -114,6 +115,7 @@ export default function ServiceKeyDashboard() {
         header={{
           title: kmsKey.name || kmsKey.id,
           headerButton: <KmsGuidesHeader />,
+          changelogButton: <KmsChangelogButton />,
         }}
         onClickReturn={() => {
           navigate(KMS_ROUTES_URLS.serviceKeyListing(okmsId));
