feat(okms): add <OkmsChangelogButton /> button

Romain Jamet · Romain Jamet · commit b547cc0b2f91 · 2025-09-08T16:57:18.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/common/components/index.ts b/packages/manager/apps/key-management-service/src/common/components/index.ts
@@ -0,0 +1,7 @@
+export * from './Link/Link.component';
+export * from './RadioCard/RadioCard.component';
+export * from './confirmationModal/ConfirmationModal';
+export * from './drawer/DrawerInnerComponents.component';
+export * from './okmsChangelogButton/OkmsChangelogButton.component';
+export * from './okmsDatagrid/OkmsDatagrid.component';
+export * from './tabNavigation/TabNavigation.component';
diff --git a/packages/manager/apps/key-management-service/src/common/components/okmsChangelogButton/OkmsChangelogButton.component.tsx b/packages/manager/apps/key-management-service/src/common/components/okmsChangelogButton/OkmsChangelogButton.component.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ChangelogButton,
+  ChangelogLinks,
+} from '@ovh-ux/manager-react-components';
+
+const changelogLinks: 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 OkmsChangelogButton = () => {
+  return <ChangelogButton links={changelogLinks} />;
+};
diff --git a/packages/manager/apps/key-management-service/src/common/components/okmsDatagrid/ListingCells.component.tsx b/packages/manager/apps/key-management-service/src/common/components/okmsDatagrid/ListingCells.component.tsx
@@ -17,7 +17,7 @@ import { OKMS } from '@/types/okms.type';
 import { OkmsServiceState } from '@/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component';
 import { KMS_ROUTES_URLS } from '@/routes/routes.constants';
 import { OkmsDatagridType } from './okmsDatagrid.type';
-import { Link } from '@/common/components/Link/Link.component';
+import { Link } from '../Link/Link.component';
 
 export const DatagridCellId = (okms: OKMS) => {
   return <Clipboard className="w-full" value={okms.id} />;
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/regionSelector/RegionSelector.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/components/regionSelector/RegionSelector.component.tsx
@@ -8,7 +8,7 @@ import {
   OdsText,
 } from '@ovhcloud/ods-components/react';
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
-import { Link } from '@/common/components/Link/Link.component';
+import { Link } from '@/common/components';
 import { useRegionSelector } from '@/modules/secret-manager/hooks/useRegionSelector';
 
 export const RegionSelector = () => {
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
@@ -6,6 +6,7 @@ import { OdsBreadcrumb } from '@ovhcloud/ods-components/react';
 import { RootBreadcrumbItem } from '@secret-manager/components/breadcrumb';
 import { DomainManagement } from './DomainManagement.component';
 import { SecretForm } from './SecretForm.component';
+import { OkmsChangelogButton } from '@/common/components';
 import { OrderOkmsModalProvider } from '@/common/pages/OrderOkmsModal/OrderOkmsModalContext';
 
 export default function SecretCreatePage() {
@@ -18,7 +19,10 @@ export default function SecretCreatePage() {
   return (
     <OrderOkmsModalProvider>
       <BaseLayout
-        header={{ title: t('create_a_secret') }}
+        header={{
+          title: t('create_a_secret'),
+          changelogButton: <OkmsChangelogButton />,
+        }}
         breadcrumb={
           <OdsBreadcrumb>
             <RootBreadcrumbItem />
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/DomainSelector.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/DomainSelector.component.tsx
@@ -5,7 +5,7 @@ import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
 import { ODS_BADGE_SIZE } from '@ovhcloud/ods-components';
 import { OKMS } from '@/types/okms.type';
 import { OkmsServiceState } from '@/components/layout-helpers/Dashboard/okmsServiceState/OkmsServiceState.component';
-import { RadioCard } from '@/common/components/RadioCard/RadioCard.component';
+import { RadioCard } from '@/common/components';
 import { ActivateRegion } from './ActivateRegion.component';
 
 const DomainStatus = ({ id }: { id: string }) => {
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/RegionSelector.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/create/RegionSelector.component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { OdsText } from '@ovhcloud/ods-components/react';
 import { Region } from '@ovh-ux/manager-react-components';
-import { RadioCard } from '@/common/components/RadioCard/RadioCard.component';
+import { RadioCard } from '@/common/components';
 
 type RegionSelectorProps = {
   regions: string[];
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
@@ -24,9 +24,10 @@ import {
 import { decodeSecretPath } from '@/modules/secret-manager/utils/secretPath';
 import Loading from '@/components/Loading/Loading';
 import {
+  OkmsChangelogButton,
   TabNavigation,
   TabNavigationItem,
-} from '@/common/components/tabNavigation/TabNavigation.component';
+} from '@/common/components';
 
 export default function SecretDashboardPage() {
   const { domainId, secretPath } = useParams<LocationPathParams>();
@@ -63,6 +64,7 @@ export default function SecretDashboardPage() {
 
   const headerProps: HeadersProps = {
     title: secretPathDecoded,
+    changelogButton: <OkmsChangelogButton />,
   };
 
   if (isSecretPending) {
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/generalInformation/ActionsTile.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/generalInformation/ActionsTile.component.tsx
@@ -7,7 +7,7 @@ import {
   SECRET_MANAGER_ROUTES_URLS,
 } from '@secret-manager/routes/routes.constants';
 import { useParams } from 'react-router-dom';
-import { Link } from '@/common/components/Link/Link.component';
+import { Link } from '@/common/components';
 
 type ActionsTileParams = {
   secret: Secret;
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/versions/delete/DeleteSecretVersionModal.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/dashboard/versions/delete/DeleteSecretVersionModal.page.tsx
@@ -5,7 +5,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { decodeSecretPath } from '@secret-manager/utils/secretPath';
 import { useUpdateSecretVersion } from '@secret-manager/data/hooks/useUpdateSecretVersion';
 import { LocationPathParams } from '@secret-manager/routes/routes.constants';
-import { ConfirmationModal } from '@/common/components/confirmationModal/ConfirmationModal';
+import { ConfirmationModal } from '@/common/components';
 
 const DeleteSecretVersionModal = () => {
   const navigate = useNavigate();
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
@@ -16,9 +16,9 @@ import { filterDomainsByRegion } from '@secret-manager/utils/domains';
 import { RegionSelector } from '@secret-manager/components/regionSelector/RegionSelector.component';
 import { RootBreadcrumbItem } from '@secret-manager/components/breadcrumb';
 import { KMS_ROUTES_URLS } from '@/routes/routes.constants';
-import { OkmsDatagrid } from '@/common/components/okmsDatagrid/OkmsDatagrid.component';
 import { useOkmsDatagridList } from '@/data/hooks/useOkms';
 import { isErrorResponse } from '@/utils/api/api';
+import { OkmsChangelogButton, OkmsDatagrid } from '@/common/components';
 
 export default function SecretDomainsPage() {
   const { t } = useTranslation([
@@ -75,6 +75,7 @@ export default function SecretDomainsPage() {
     <BaseLayout
       header={{
         title: t('domains_list'),
+        changelogButton: <OkmsChangelogButton />,
       }}
       breadcrumb={
         <OdsBreadcrumb>
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/drawers/createVersionDrawer/CreateVersionDrawer.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/drawers/createVersionDrawer/CreateVersionDrawer.page.tsx
@@ -17,10 +17,7 @@ import {
   SECRET_MANAGER_ROUTES_URLS,
 } from '@secret-manager/routes/routes.constants';
 import { SecretDataFormField } from '@secret-manager/components/form/SecretDataFormField.component';
-import {
-  DrawerContent,
-  DrawerFooter,
-} from '@/common/components/drawer/DrawerInnerComponents.component';
+import { DrawerContent, DrawerFooter } from '@/common/components';
 
 type CreateVersionDrawerProps = {
   secret: SecretWithData;
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
@@ -32,6 +32,7 @@ import {
 } from './ListingCells.component';
 import { isErrorResponse } from '@/utils/api/api';
 import { PATH_LABEL } from '@/constants';
+import { OkmsChangelogButton } from '@/common/components';
 
 export default function SecretListingPage() {
   const navigate = useNavigate();
@@ -90,7 +91,10 @@ export default function SecretListingPage() {
 
   return (
     <BaseLayout
-      header={{ title: t('secret_manager') }}
+      header={{
+        title: t('secret_manager'),
+        changelogButton: <OkmsChangelogButton />,
+      }}
       breadcrumb={
         <OdsBreadcrumb>
           <RootBreadcrumbItem />
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/listing/ListingCells.component.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/listing/ListingCells.component.tsx
@@ -12,7 +12,7 @@ import {
   LocationPathParams,
   SECRET_MANAGER_ROUTES_URLS,
 } from '@secret-manager/routes/routes.constants';
-import { Link } from '@/common/components/Link/Link.component';
+import { Link } from '@/common/components';
 import { useFormatDate } from '@/common/hooks/useFormatDate';
 import { kmsIamActions } from '@/utils/iam/iam.constants';
 
diff --git a/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/modals/deleteSecretModal/DeleteSecretModal.page.tsx b/packages/manager/apps/key-management-service/src/modules/secret-manager/pages/modals/deleteSecretModal/DeleteSecretModal.page.tsx
@@ -8,7 +8,7 @@ import {
   LocationPathParams,
   SECRET_MANAGER_ROUTES_URLS,
 } from '@secret-manager/routes/routes.constants';
-import { ConfirmationModal } from '@/common/components/confirmationModal/ConfirmationModal';
+import { ConfirmationModal } from '@/common/components';
 
 const DeleteSecretModal = () => {
   const navigate = useNavigate();
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
@@ -32,6 +32,7 @@ import { BreadcrumbItem } from '@/hooks/breadcrumb/useBreadcrumb';
 import { useOkmsById } from '@/data/hooks/useOkms';
 import { OKMS } from '@/types/okms.type';
 import { OkmsCredential } from '@/types/okmsCredential.type';
+import { OkmsChangelogButton } from '@/common/components';
 
 export type CredentialContextType = {
   okms: OKMS;
@@ -108,6 +109,7 @@ const CredentialDashboard = () => {
         header={{
           title: credential.name || credential.id,
           headerButton: <KmsGuidesHeader />,
+          changelogButton: <OkmsChangelogButton />,
         }}
         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 { OkmsChangelogButton } from '@/common/components';
 
 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: <OkmsChangelogButton />,
         }}
         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,20 +6,20 @@ import {
   BaseLayout,
   HeadersProps,
   ErrorBanner,
-  ChangelogButton,
   useFeatureAvailability,
   useServiceDetails,
 } from '@ovh-ux/manager-react-components';
 import { OdsBadge } from '@ovhcloud/ods-components/react';
 import { queryClient } from '@ovh-ux/manager-react-core-application';
+import { OkmsChangelogButton } from '@/common/components';
 import KmsGuidesHeader from '@/components/Guide/KmsGuidesHeader';
 import Loading from '@/components/Loading/Loading';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 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';
@@ -150,7 +150,7 @@ export default function DashboardPage() {
   const headerProps: HeadersProps = {
     title: displayName,
     headerButton: <KmsGuidesHeader />,
-    changelogButton: <ChangelogButton links={CHANGELOG_LINKS} />,
+    changelogButton: <OkmsChangelogButton />,
   };
 
   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,8 +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 { OkmsDatagrid } from '@/common/components/okmsDatagrid/OkmsDatagrid.component';
+import { OkmsChangelogButton, OkmsDatagrid } from '@/common/components';
 
 export default function Listing() {
   const { t } = useTranslation('key-management-service/listing');
@@ -60,7 +58,7 @@ export default function Listing() {
   const headerProps: HeadersProps = {
     title: t('key_management_service_listing_title'),
     headerButton: <KmsGuidesHeader />,
-    changelogButton: <ChangelogButton links={CHANGELOG_LINKS} />,
+    changelogButton: <OkmsChangelogButton />,
   };
 
   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 { OkmsChangelogButton } from '@/common/components';
 
 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: <OkmsChangelogButton />,
         }}
         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 { OkmsChangelogButton } from '@/common/components';
 
 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: <OkmsChangelogButton />,
         }}
         onClickReturn={() => {
           navigate(KMS_ROUTES_URLS.serviceKeyListing(okmsId));
