From 181d28c8bb1f7136c749dd59d1c9501b66a4ebb4 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Tue, 14 Jan 2025 10:36:03 +0100
Subject: [PATCH 01/14] feat(mrc): add changelog component to mrc v1.x

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../content/headers/headers.component.tsx     |  4 +-
 .../content/headers/headers.spec.tsx          |  4 +-
 .../content/headers/headers.stories.tsx       | 39 ++++++++--
 .../menus/changelog/changelog.component.tsx   | 71 +++++++++++++++++++
 .../menus/changelog/changelog.icon.tsx        | 34 +++++++++
 .../menus/changelog/changelog.stories.tsx     | 43 +++++++++++
 .../menus/translations/Messages_fr_FR.json    |  9 ++-
 7 files changed, 196 insertions(+), 8 deletions(-)
 create mode 100644 packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
 create mode 100644 packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
 create mode 100644 packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx

diff --git a/packages/manager-react-components/src/components/content/headers/headers.component.tsx b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
index b598e960aaf9..41c5c50c7d9f 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.component.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
@@ -23,7 +23,9 @@ export const Headers: React.FC<HeadersProps> = ({
           <Description className="mb-6">{description}</Description>
         )}
       </div>
-      {headerButton && <div>{headerButton}</div>}
+      {headerButton && (
+        <div className="flex flex-wrap justify-end">{headerButton}</div>
+      )}
     </div>
   );
 };
diff --git a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
index 9e19eeb69a13..081721906af4 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
@@ -4,7 +4,7 @@ import { render } from '../../../utils/test.provider';
 import {
   header,
   subHeader,
-  headerWithGuides,
+  headerWithHeaderButtons,
   headerWithActions,
 } from './headers.stories';
 import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
@@ -41,7 +41,7 @@ describe('Headers component', () => {
   });
 
   it('renders header with guides correctly', async () => {
-    render(headerWithGuides());
+    render(headerWithHeaderButtons());
     await waitFor(() => {
       expect(
         screen.getByText('Example for header with guides'),
diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index ca40e8b2ee60..c2542a9b620a 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -4,6 +4,9 @@ import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import Headers, { HeadersProps } from './headers.component';
 import ActionMenu from '../../navigation/menus/action/action.component';
 import GuideButton from '../../navigation/menus/guide/guide.component';
+import ChangelogButton, {
+  ChangelogItem,
+} from '../../navigation/menus/changelog/changelog.component';
 
 const Heading: HeadersProps = {
   title: 'Example for header',
@@ -44,20 +47,48 @@ const guideItems = [
   },
 ];
 
+const changelogItems: ChangelogItem[] = [
+  {
+    id: 1,
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'roadmap',
+  },
+  {
+    id: 2,
+    href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'changelog',
+  },
+  {
+    id: 3,
+    href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'feature-request',
+  },
+];
+
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
   description: 'description for header',
   headerButton: <ActionMenu items={actionItems} />,
 };
-const HeadingWithGuideButton: HeadersProps = {
-  title: 'Example for header with guides',
+const HeadingWithHeaderButtons: HeadersProps = {
+  title: 'Example for header with guides and changelogs',
   description: 'description for subheader',
-  headerButton: <GuideButton items={guideItems} />,
+  headerButton: (
+    <>
+      <ChangelogButton items={changelogItems} />
+      <GuideButton items={guideItems} />
+    </>
+  ),
 };
 
 export const header = () => <Headers {...Heading} />;
 export const subHeader = () => <Headers {...SubHeading} />;
-export const headerWithGuides = () => <Headers {...HeadingWithGuideButton} />;
+export const headerWithHeaderButtons = () => (
+  <Headers {...HeadingWithHeaderButtons} />
+);
 export const headerWithActions = () => <Headers {...HeadingWithActionButton} />;
 
 const meta: Meta = {
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
new file mode 100644
index 000000000000..68fcf2968a24
--- /dev/null
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import {
+  OsdsMenu,
+  OsdsMenuGroup,
+  OsdsMenuItem,
+  OsdsButton,
+} from '@ovhcloud/ods-components/react';
+import {
+  OdsHTMLAnchorElementRel,
+  OdsHTMLAnchorElementTarget,
+} from '@ovhcloud/ods-common-core';
+import { useTranslation } from 'react-i18next';
+import { Links, LinkType } from '../../../typography';
+import '../translations/translation';
+import GithubIcon from './changelog.icon';
+
+export interface ChangelogItem {
+  id: number;
+  href: string;
+  download?: string;
+  target?: OdsHTMLAnchorElementTarget;
+  rel?: OdsHTMLAnchorElementRel;
+  labelKey: string;
+  onClick?: () => void;
+}
+
+export interface ChangelogButtonProps {
+  items: ChangelogItem[];
+}
+
+export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
+  const { t } = useTranslation('buttons');
+  return (
+    <>
+      <OsdsMenu>
+        <OsdsButton
+          slot="menu-title"
+          color={ODS_THEME_COLOR_INTENT.primary}
+          variant={ODS_BUTTON_VARIANT.ghost}
+          size={ODS_BUTTON_SIZE.sm}
+          className="whitespace-nowrap"
+        >
+          <span slot="start">
+            <GithubIcon />
+          </span>
+          {t('user_account_changelog_header')}
+        </OsdsButton>
+
+        {items.map((item) => (
+          <OsdsMenuGroup key={item.id}>
+            <OsdsMenuItem>
+              <Links
+                href={item.href}
+                target={item.target}
+                download={item.download}
+                rel={item.rel}
+                type={LinkType.external}
+                label={t(`user_account_changelog_${item.labelKey}`)}
+                onClickReturn={item.onClick}
+              />
+            </OsdsMenuItem>
+          </OsdsMenuGroup>
+        ))}
+      </OsdsMenu>
+    </>
+  );
+};
+
+export default ChangelogButton;
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
new file mode 100644
index 000000000000..bba5cb69df1a
--- /dev/null
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
@@ -0,0 +1,34 @@
+const GithubIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0,0,256,256"
+      width="24px"
+      height="24px"
+      fill-rule="nonzero"
+    >
+      <g
+        fill="#0050d7"
+        fill-rule="nonzero"
+        stroke="none"
+        stroke-width="1"
+        stroke-linecap="butt"
+        stroke-linejoin="miter"
+        stroke-miterlimit="10"
+        stroke-dasharray=""
+        stroke-dashoffset="0"
+        font-family="none"
+        font-weight="none"
+        font-size="none"
+        text-anchor="none"
+        style={{ mixBlendMode: 'normal', height: '24px' }}
+      >
+        <g transform="scale(10.66667,10.66667)">
+          <path d="M10.9,2.1c-4.6,0.5 -8.3,4.2 -8.8,8.7c-0.5,4.7 2.2,8.9 6.3,10.5c0.3,0.1 0.6,-0.1 0.6,-0.5v-1.6c0,0 -0.4,0.1 -0.9,0.1c-1.4,0 -2,-1.2 -2.1,-1.9c-0.1,-0.4 -0.3,-0.7 -0.6,-1c-0.3,-0.1 -0.4,-0.1 -0.4,-0.2c0,-0.2 0.3,-0.2 0.4,-0.2c0.6,0 1.1,0.7 1.3,1c0.5,0.8 1.1,1 1.4,1c0.4,0 0.7,-0.1 0.9,-0.2c0.1,-0.7 0.4,-1.4 1,-1.8c-2.3,-0.5 -4,-1.8 -4,-4c0,-1.1 0.5,-2.2 1.2,-3c-0.1,-0.2 -0.2,-0.7 -0.2,-1.4c0,-0.4 0,-1 0.3,-1.6c0,0 1.4,0 2.8,1.3c0.5,-0.2 1.2,-0.3 1.9,-0.3c0.7,0 1.4,0.1 2,0.3c1.3,-1.3 2.8,-1.3 2.8,-1.3c0.2,0.6 0.2,1.2 0.2,1.6c0,0.8 -0.1,1.2 -0.2,1.4c0.7,0.8 1.2,1.8 1.2,3c0,2.2 -1.7,3.5 -4,4c0.6,0.5 1,1.4 1,2.3v2.6c0,0.3 0.3,0.6 0.7,0.5c3.7,-1.5 6.3,-5.1 6.3,-9.3c0,-6 -5.1,-10.7 -11.1,-10z"></path>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default GithubIcon;
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
new file mode 100644
index 000000000000..a32c884dd459
--- /dev/null
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import {
+  ChangelogButton,
+  ChangelogButtonProps,
+  ChangelogItem,
+} from './changelog.component';
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+
+const changelogItems: ChangelogItem[] = [
+  {
+    id: 1,
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'roadmap',
+  },
+  {
+    id: 2,
+    href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'changelog',
+  },
+  {
+    id: 3,
+    href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=',
+    target: OdsHTMLAnchorElementTarget._blank,
+    labelKey: 'feature-request',
+  },
+];
+
+export const changelogButton: ChangelogButtonProps = {
+  items: changelogItems,
+};
+
+const meta: Meta<ChangelogButtonProps> = {
+  title: 'Navigation/Menus',
+  decorators: [(story) => <div>{story()}</div>],
+  component: ChangelogButton,
+  argTypes: {},
+  args: changelogButton,
+};
+
+export default meta;
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
index e07119301346..12cdd59c5b17 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
@@ -1 +1,8 @@
-{ "common_actions": "Actions", "user_account_guides_header": "Guides" }
+{
+  "common_actions": "Actions",
+  "user_account_guides_header": "Guides",
+  "user_account_changelog_header": "Roadmap & changelog",
+  "user_account_changelog_roadmap": "Roadmap",
+  "user_account_changelog_changelog": "Changelog",
+  "user_account_changelog_feature-request": "Feature request"
+}

From 4a40bc30b35b273865ae1368b2a773de6cee0e2e Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Tue, 14 Jan 2025 11:17:55 +0100
Subject: [PATCH 02/14] feat(mrc): export new component changelog

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../src/components/navigation/menus/index.ts                     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/manager-react-components/src/components/navigation/menus/index.ts b/packages/manager-react-components/src/components/navigation/menus/index.ts
index 1ac0598194c3..b40aeec9069d 100644
--- a/packages/manager-react-components/src/components/navigation/menus/index.ts
+++ b/packages/manager-react-components/src/components/navigation/menus/index.ts
@@ -1,2 +1,3 @@
 export * from './action/action.component';
 export * from './guide/guide.component';
+export * from './changelog/changelog.component';

From cedb4ef76ec36fc75a9e0514b9c726cefc281d59 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Thu, 16 Jan 2025 11:03:41 +0100
Subject: [PATCH 03/14] feat(mrc): unify translations

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../navigation/menus/translations/Messages_fr_FR.json     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
index 12cdd59c5b17..104767973287 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
@@ -1,8 +1,8 @@
 {
   "common_actions": "Actions",
   "user_account_guides_header": "Guides",
-  "user_account_changelog_header": "Roadmap & changelog",
-  "user_account_changelog_roadmap": "Roadmap",
-  "user_account_changelog_changelog": "Changelog",
-  "user_account_changelog_feature-request": "Feature request"
+  "mrc_changelog_header": "Roadmap & changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }

From 3fd4a53edc1291f4c5083c39cc3b613bc5bfe338 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Thu, 16 Jan 2025 11:15:31 +0100
Subject: [PATCH 04/14] feat(mrc): clean translations

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../navigation/menus/changelog/changelog.component.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
index 68fcf2968a24..a9d66567130a 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -45,7 +45,7 @@ export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
           <span slot="start">
             <GithubIcon />
           </span>
-          {t('user_account_changelog_header')}
+          {t('mrc_changelog_header')}
         </OsdsButton>
 
         {items.map((item) => (
@@ -57,7 +57,7 @@ export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
                 download={item.download}
                 rel={item.rel}
                 type={LinkType.external}
-                label={t(`user_account_changelog_${item.labelKey}`)}
+                label={t(`mrc_changelog_${item.labelKey}`)}
                 onClickReturn={item.onClick}
               />
             </OsdsMenuItem>

From 34f017776407ca36e19861bac937a4f4f2f201b3 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Thu, 16 Jan 2025 18:00:41 +0100
Subject: [PATCH 05/14] feat(mrc): refacto changelog menu component

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../content/headers/headers.stories.tsx       | 26 ++++-----
 .../menus/changelog/changelog.component.tsx   | 54 +++++++++++--------
 .../menus/changelog/changelog.stories.tsx     | 27 ++++------
 3 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index c2542a9b620a..bece2eb41aca 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -47,26 +47,20 @@ const guideItems = [
   },
 ];
 
-const changelogItems: ChangelogItem[] = [
-  {
-    id: 1,
+const changelogItems: Record<string, ChangelogItem> = {
+  roadmap: {
     href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'roadmap',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-  {
-    id: 2,
-    href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'changelog',
+  changelog: {
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-  {
-    id: 3,
-    href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'feature-request',
+  'feature-request': {
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-];
+};
 
 const HeadingWithActionButton: HeadersProps = {
   title: 'Example for header with actions ',
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
index a9d66567130a..61af65351a66 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -15,23 +15,23 @@ import { useTranslation } from 'react-i18next';
 import { Links, LinkType } from '../../../typography';
 import '../translations/translation';
 import GithubIcon from './changelog.icon';
+import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
 
 export interface ChangelogItem {
-  id: number;
   href: string;
-  download?: string;
-  target?: OdsHTMLAnchorElementTarget;
-  rel?: OdsHTMLAnchorElementRel;
-  labelKey: string;
-  onClick?: () => void;
+  chapters?: string[];
 }
 
 export interface ChangelogButtonProps {
-  items: ChangelogItem[];
+  items: Record<string, ChangelogItem>;
 }
 
+export const CHANGELOG_PREFIXES = ['tile-changelog-roadmap', 'external-link'];
+const GO_TO = (link: string) => `go-to-${link}`;
+
 export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
   const { t } = useTranslation('buttons');
+  const { trackClick } = useOvhTracking();
   return (
     <>
       <OsdsMenu>
@@ -48,21 +48,31 @@ export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
           {t('mrc_changelog_header')}
         </OsdsButton>
 
-        {items.map((item) => (
-          <OsdsMenuGroup key={item.id}>
-            <OsdsMenuItem>
-              <Links
-                href={item.href}
-                target={item.target}
-                download={item.download}
-                rel={item.rel}
-                type={LinkType.external}
-                label={t(`mrc_changelog_${item.labelKey}`)}
-                onClickReturn={item.onClick}
-              />
-            </OsdsMenuItem>
-          </OsdsMenuGroup>
-        ))}
+        {Object.entries(items).map(([key, item]) => {
+          return (
+            <OsdsMenuGroup key={key}>
+              <OsdsMenuItem>
+                <Links
+                  href={item.href}
+                  target={OdsHTMLAnchorElementTarget._blank}
+                  rel={OdsHTMLAnchorElementRel.external}
+                  type={LinkType.external}
+                  label={t(`mrc_changelog_${key}`)}
+                  onClickReturn={() =>
+                    trackClick({
+                      actionType: 'navigation',
+                      actions: [
+                        ...item.chapters,
+                        ...CHANGELOG_PREFIXES,
+                        GO_TO(key),
+                      ],
+                    })
+                  }
+                />
+              </OsdsMenuItem>
+            </OsdsMenuGroup>
+          );
+        })}
       </OsdsMenu>
     </>
   );
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
index a32c884dd459..9110bd65e4d6 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
@@ -5,28 +5,21 @@ import {
   ChangelogButtonProps,
   ChangelogItem,
 } from './changelog.component';
-import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 
-const changelogItems: ChangelogItem[] = [
-  {
-    id: 1,
+const changelogItems: Record<string, ChangelogItem> = {
+  roadmap: {
     href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'roadmap',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-  {
-    id: 2,
-    href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'changelog',
+  changelog: {
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-  {
-    id: 3,
-    href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=',
-    target: OdsHTMLAnchorElementTarget._blank,
-    labelKey: 'feature-request',
+  'feature-request': {
+    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+    chapters: ['baremetal', 'server', 'dedicated'],
   },
-];
+};
 
 export const changelogButton: ChangelogButtonProps = {
   items: changelogItems,

From 2c08559b3b825996f1708a46ee73728eb4e7ffa6 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Mon, 20 Jan 2025 11:25:42 +0100
Subject: [PATCH 06/14] feat(mrc): refacto component changelog

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../content/headers/headers.stories.tsx       | 25 +++++++-----------
 .../menus/changelog/changelog.component.tsx   | 25 +++++++++---------
 .../menus/changelog/changelog.stories.tsx     | 26 ++++++++-----------
 3 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index bece2eb41aca..fac1dff82fdd 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -5,7 +5,7 @@ import Headers, { HeadersProps } from './headers.component';
 import ActionMenu from '../../navigation/menus/action/action.component';
 import GuideButton from '../../navigation/menus/guide/guide.component';
 import ChangelogButton, {
-  ChangelogItem,
+  ChangelogLinks,
 } from '../../navigation/menus/changelog/changelog.component';
 
 const Heading: HeadersProps = {
@@ -47,19 +47,14 @@ const guideItems = [
   },
 ];
 
-const changelogItems: Record<string, ChangelogItem> = {
-  roadmap: {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
-  changelog: {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
-  'feature-request': {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
+const changelogChapters: string[] = ['baremetal', 'server', 'dedicated'];
+const changelogLinks: ChangelogLinks = {
+  roadmap:
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+  changelog:
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+  'feature-request':
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
 };
 
 const HeadingWithActionButton: HeadersProps = {
@@ -72,7 +67,7 @@ const HeadingWithHeaderButtons: HeadersProps = {
   description: 'description for subheader',
   headerButton: (
     <>
-      <ChangelogButton items={changelogItems} />
+      <ChangelogButton links={changelogLinks} chapters={changelogChapters} />
       <GuideButton items={guideItems} />
     </>
   ),
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
index 61af65351a66..85ce9132da3c 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -17,19 +17,24 @@ import '../translations/translation';
 import GithubIcon from './changelog.icon';
 import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
 
-export interface ChangelogItem {
-  href: string;
-  chapters?: string[];
+export interface ChangelogLinks {
+  changelog: string;
+  roadmap: string;
+  'feature-request': string;
 }
 
 export interface ChangelogButtonProps {
-  items: Record<string, ChangelogItem>;
+  links: ChangelogLinks;
+  chapters: string[];
 }
 
 export const CHANGELOG_PREFIXES = ['tile-changelog-roadmap', 'external-link'];
 const GO_TO = (link: string) => `go-to-${link}`;
 
-export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
+export const ChangelogButton: React.FC<ChangelogButtonProps> = ({
+  links,
+  chapters,
+}) => {
   const { t } = useTranslation('buttons');
   const { trackClick } = useOvhTracking();
   return (
@@ -48,12 +53,12 @@ export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
           {t('mrc_changelog_header')}
         </OsdsButton>
 
-        {Object.entries(items).map(([key, item]) => {
+        {Object.entries(links).map(([key, link]) => {
           return (
             <OsdsMenuGroup key={key}>
               <OsdsMenuItem>
                 <Links
-                  href={item.href}
+                  href={link}
                   target={OdsHTMLAnchorElementTarget._blank}
                   rel={OdsHTMLAnchorElementRel.external}
                   type={LinkType.external}
@@ -61,11 +66,7 @@ export const ChangelogButton: React.FC<ChangelogButtonProps> = ({ items }) => {
                   onClickReturn={() =>
                     trackClick({
                       actionType: 'navigation',
-                      actions: [
-                        ...item.chapters,
-                        ...CHANGELOG_PREFIXES,
-                        GO_TO(key),
-                      ],
+                      actions: [...chapters, ...CHANGELOG_PREFIXES, GO_TO(key)],
                     })
                   }
                 />
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
index 9110bd65e4d6..7d76dea93348 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx
@@ -3,26 +3,22 @@ import { Meta } from '@storybook/react';
 import {
   ChangelogButton,
   ChangelogButtonProps,
-  ChangelogItem,
+  ChangelogLinks,
 } from './changelog.component';
 
-const changelogItems: Record<string, ChangelogItem> = {
-  roadmap: {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
-  changelog: {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
-  'feature-request': {
-    href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
-    chapters: ['baremetal', 'server', 'dedicated'],
-  },
+const changelogChapters: string[] = ['baremetal', 'server', 'dedicated'];
+const changelogLinks: ChangelogLinks = {
+  roadmap:
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+  changelog:
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
+  'feature-request':
+    'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal',
 };
 
 export const changelogButton: ChangelogButtonProps = {
-  items: changelogItems,
+  links: changelogLinks,
+  chapters: changelogChapters,
 };
 
 const meta: Meta<ChangelogButtonProps> = {

From afddd76e012aaf771ae24a83095c9e95cd901799 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Mon, 20 Jan 2025 18:34:46 +0100
Subject: [PATCH 07/14] feat(mrc): make chapters optionnal

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../navigation/menus/changelog/changelog.component.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
index 85ce9132da3c..82b3d3377832 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -25,7 +25,7 @@ export interface ChangelogLinks {
 
 export interface ChangelogButtonProps {
   links: ChangelogLinks;
-  chapters: string[];
+  chapters?: string[];
 }
 
 export const CHANGELOG_PREFIXES = ['tile-changelog-roadmap', 'external-link'];
@@ -33,7 +33,7 @@ const GO_TO = (link: string) => `go-to-${link}`;
 
 export const ChangelogButton: React.FC<ChangelogButtonProps> = ({
   links,
-  chapters,
+  chapters = [],
 }) => {
   const { t } = useTranslation('buttons');
   const { trackClick } = useOvhTracking();

From 689fb34b7b5eb89802774777f6c5d8b80deb9a49 Mon Sep 17 00:00:00 2001
From: CDS Translator Agent <maxime.bajeux.ext@corp.ovh.com>
Date: Thu, 30 Jan 2025 14:15:19 +0000
Subject: [PATCH 08/14] fix(i18n): add missing translations [CDS 3676]

Signed-off-by: CDS Translator Agent <opensource@ovh.net>
---
 .../navigation/menus/translations/Messages_de_DE.json    | 6 +++++-
 .../navigation/menus/translations/Messages_en_GB.json    | 6 +++++-
 .../navigation/menus/translations/Messages_fr_CA.json    | 9 ++++++++-
 .../navigation/menus/translations/Messages_it_IT.json    | 6 +++++-
 .../navigation/menus/translations/Messages_pl_PL.json    | 6 +++++-
 .../navigation/menus/translations/Messages_pt_PT.json    | 6 +++++-
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
index 8b19a6e35904..d2adc743b520 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Aktionen",
-  "user_account_guides_header": "Anleitungen"
+  "user_account_guides_header": "Anleitungen",
+  "mrc_changelog_header": "Roadmap und Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature Request"
 }
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
index 4c12f3a1d69d..55b7306ec6ce 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Actions",
-  "user_account_guides_header": "Guides"
+  "user_account_guides_header": "Guides",
+  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
index e07119301346..104767973287 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
@@ -1 +1,8 @@
-{ "common_actions": "Actions", "user_account_guides_header": "Guides" }
+{
+  "common_actions": "Actions",
+  "user_account_guides_header": "Guides",
+  "mrc_changelog_header": "Roadmap & changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
+}
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
index b992a1adfda6..ddf610d48868 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Azioni",
-  "user_account_guides_header": "Guide"
+  "user_account_guides_header": "Guide",
+  "mrc_changelog_header": "Roadmap e Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature Request"
 }
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
index 8c7ccfc5844b..d628162f1696 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Operacje",
-  "user_account_guides_header": "Przewodniki"
+  "user_account_guides_header": "Przewodniki",
+  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_roadmap": "Roadmapa",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Propozycja wdrożenia nowej funkcji"
 }
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
index 2b77ba63a78a..666910f2be79 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Ações",
-  "user_account_guides_header": "Manuais"
+  "user_account_guides_header": "Manuais",
+  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }

From 3171c8779049f76da93a7778a5dcb2ceb22c579f Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Thu, 30 Jan 2025 18:50:50 +0100
Subject: [PATCH 09/14] fix(mrc): fix lint import error

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../navigation/menus/changelog/changelog.component.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
index 82b3d3377832..eb8378d17c0a 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx
@@ -11,11 +11,11 @@ import {
   OdsHTMLAnchorElementRel,
   OdsHTMLAnchorElementTarget,
 } from '@ovhcloud/ods-common-core';
+import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
 import { useTranslation } from 'react-i18next';
 import { Links, LinkType } from '../../../typography';
 import '../translations/translation';
 import GithubIcon from './changelog.icon';
-import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
 
 export interface ChangelogLinks {
   changelog: string;

From 772af4bc4dffb5e72e7abca3e583bc99db0dc263 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Fri, 31 Jan 2025 10:53:26 +0100
Subject: [PATCH 10/14] feat(mrc): fix header test

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../src/components/content/headers/headers.spec.tsx   | 11 ++++++++---
 .../components/content/headers/headers.stories.tsx    |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
index 081721906af4..3ce9864ee194 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
@@ -1,4 +1,4 @@
-import { vitest } from 'vitest';
+import { vitest, vi } from 'vitest';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import {
@@ -11,6 +11,11 @@ import { IamAuthorizationResponse } from '../../../hooks/iam/iam.interface';
 import { useAuthorizationIam } from '../../../hooks/iam';
 
 vitest.mock('../../../hooks/iam');
+vitest.mock('@ovh-ux/manager-react-shell-client', () => ({
+  useOvhTracking: () => ({
+    trackClick: vi.fn(),
+  }),
+}));
 
 const mockedHook =
   useAuthorizationIam as unknown as jest.Mock<IamAuthorizationResponse>;
@@ -40,11 +45,11 @@ describe('Headers component', () => {
     });
   });
 
-  it('renders header with guides correctly', async () => {
+  it('renders header with header buttons correctly', async () => {
     render(headerWithHeaderButtons());
     await waitFor(() => {
       expect(
-        screen.getByText('Example for header with guides'),
+        screen.getByText('Example for header with header buttons'),
       ).toBeInTheDocument();
       expect(screen.getByText('description for subheader')).toBeInTheDocument();
     });
diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index fac1dff82fdd..62b173fc6b26 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -63,7 +63,7 @@ const HeadingWithActionButton: HeadersProps = {
   headerButton: <ActionMenu items={actionItems} />,
 };
 const HeadingWithHeaderButtons: HeadersProps = {
-  title: 'Example for header with guides and changelogs',
+  title: 'Example for header with header buttons',
   description: 'description for subheader',
   headerButton: (
     <>

From 1c8315c0312aa56d27fadc40554f391cac84fc17 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Fri, 7 Feb 2025 18:55:31 +0100
Subject: [PATCH 11/14] feat(mrc): fix capital letter issue

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../navigation/menus/translations/Messages_fr_FR.json           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
index 104767973287..9863a6f4cb51 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Actions",
   "user_account_guides_header": "Guides",
-  "mrc_changelog_header": "Roadmap & changelog",
+  "mrc_changelog_header": "Roadmap & Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature request"

From 3561cc2a2a32fbcd8278771d2759b0143f990abb Mon Sep 17 00:00:00 2001
From: CDS Translator Agent <maxime.bajeux.ext@corp.ovh.com>
Date: Fri, 7 Feb 2025 17:58:58 +0000
Subject: [PATCH 12/14] fix(i18n): add missing translations [CDS 220]

Signed-off-by: CDS Translator Agent <opensource@ovh.net>
---
 .../navigation/menus/translations/Messages_de_DE.json       | 2 +-
 .../navigation/menus/translations/Messages_en_GB.json       | 2 +-
 .../navigation/menus/translations/Messages_es_ES.json       | 6 +++++-
 .../navigation/menus/translations/Messages_fr_CA.json       | 2 +-
 .../navigation/menus/translations/Messages_it_IT.json       | 2 +-
 .../navigation/menus/translations/Messages_pl_PL.json       | 2 +-
 .../navigation/menus/translations/Messages_pt_PT.json       | 2 +-
 7 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
index d2adc743b520..956259d8deed 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_de_DE.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Aktionen",
   "user_account_guides_header": "Anleitungen",
-  "mrc_changelog_header": "Roadmap und Changelog",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature Request"
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
index 55b7306ec6ce..26322640c499 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Actions",
   "user_account_guides_header": "Guides",
-  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature request"
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_es_ES.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_es_ES.json
index e1a6ef911848..48930ed33a2d 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_es_ES.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_es_ES.json
@@ -1,4 +1,8 @@
 {
   "common_actions": "Acciones",
-  "user_account_guides_header": "Guías"
+  "user_account_guides_header": "Guías",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
index 104767973287..9863a6f4cb51 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_CA.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Actions",
   "user_account_guides_header": "Guides",
-  "mrc_changelog_header": "Roadmap & changelog",
+  "mrc_changelog_header": "Roadmap & Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature request"
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
index ddf610d48868..7b898109f036 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_it_IT.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Azioni",
   "user_account_guides_header": "Guide",
-  "mrc_changelog_header": "Roadmap e Changelog",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature Request"
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
index d628162f1696..8f497d94a2de 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pl_PL.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Operacje",
   "user_account_guides_header": "Przewodniki",
-  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
   "mrc_changelog_roadmap": "Roadmapa",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Propozycja wdrożenia nowej funkcji"
diff --git a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
index 666910f2be79..7c76bf441fe8 100644
--- a/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
+++ b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_pt_PT.json
@@ -1,7 +1,7 @@
 {
   "common_actions": "Ações",
   "user_account_guides_header": "Manuais",
-  "mrc_changelog_header": "Roadmap &amp; changelog",
+  "mrc_changelog_header": "Roadmap &amp; Changelog",
   "mrc_changelog_roadmap": "Roadmap",
   "mrc_changelog_changelog": "Changelog",
   "mrc_changelog_feature-request": "Feature request"

From d033e9fae8ea84575c0434db8b505c83e3e6397c Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Mon, 10 Feb 2025 15:06:17 +0100
Subject: [PATCH 13/14] feat(mrc): update component to pass changelog on
 separate prop

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../content/headers/headers.component.tsx     |  7 +++++-
 .../content/headers/headers.spec.tsx          |  4 +++-
 .../content/headers/headers.stories.tsx       | 10 ++++-----
 .../menus/changelog/changelog.icon.tsx        | 22 +++++++++----------
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/packages/manager-react-components/src/components/content/headers/headers.component.tsx b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
index 41c5c50c7d9f..70aaf8f2d9b7 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.component.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
@@ -6,6 +6,7 @@ export interface HeadersProps {
   subtitle?: string;
   description?: string;
   headerButton?: React.ReactElement;
+  changelogButton?: React.ReactElement;
 }
 
 export const Headers: React.FC<HeadersProps> = ({
@@ -13,6 +14,7 @@ export const Headers: React.FC<HeadersProps> = ({
   subtitle,
   description,
   headerButton,
+  changelogButton,
 }) => {
   return (
     <div className="flex items-center justify-between">
@@ -24,7 +26,10 @@ export const Headers: React.FC<HeadersProps> = ({
         )}
       </div>
       {headerButton && (
-        <div className="flex flex-wrap justify-end">{headerButton}</div>
+        <div className="flex flex-wrap justify-end">
+          {changelogButton}
+          {headerButton}
+        </div>
       )}
     </div>
   );
diff --git a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
index 3ce9864ee194..92cf11162f6a 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.spec.tsx
@@ -49,7 +49,9 @@ describe('Headers component', () => {
     render(headerWithHeaderButtons());
     await waitFor(() => {
       expect(
-        screen.getByText('Example for header with header buttons'),
+        screen.getByText(
+          'Example for header with header button and changelog button',
+        ),
       ).toBeInTheDocument();
       expect(screen.getByText('description for subheader')).toBeInTheDocument();
     });
diff --git a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
index 62b173fc6b26..5eca266415a8 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.stories.tsx
@@ -63,13 +63,11 @@ const HeadingWithActionButton: HeadersProps = {
   headerButton: <ActionMenu items={actionItems} />,
 };
 const HeadingWithHeaderButtons: HeadersProps = {
-  title: 'Example for header with header buttons',
+  title: 'Example for header with header button and changelog button',
   description: 'description for subheader',
-  headerButton: (
-    <>
-      <ChangelogButton links={changelogLinks} chapters={changelogChapters} />
-      <GuideButton items={guideItems} />
-    </>
+  headerButton: <GuideButton items={guideItems} />,
+  changelogButton: (
+    <ChangelogButton links={changelogLinks} chapters={changelogChapters} />
   ),
 };
 
diff --git a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
index bba5cb69df1a..0c5332495ab6 100644
--- a/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
+++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.icon.tsx
@@ -9,18 +9,18 @@ const GithubIcon = () => {
     >
       <g
         fill="#0050d7"
-        fill-rule="nonzero"
+        fillRule="nonzero"
         stroke="none"
-        stroke-width="1"
-        stroke-linecap="butt"
-        stroke-linejoin="miter"
-        stroke-miterlimit="10"
-        stroke-dasharray=""
-        stroke-dashoffset="0"
-        font-family="none"
-        font-weight="none"
-        font-size="none"
-        text-anchor="none"
+        strokeWidth="1"
+        strokeLinecap="butt"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeDasharray=""
+        strokeDashoffset="0"
+        fontFamily="none"
+        fontWeight="none"
+        fontSize="none"
+        textAnchor="none"
         style={{ mixBlendMode: 'normal', height: '24px' }}
       >
         <g transform="scale(10.66667,10.66667)">

From 886cfee2a804baa7b64ac7c0d4e357b7f5e41ba4 Mon Sep 17 00:00:00 2001
From: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
Date: Mon, 10 Feb 2025 15:27:23 +0100
Subject: [PATCH 14/14] fix(mrc): fix header component

ref: MANAGER-16546

Signed-off-by: Maxime Bajeux <maxime.bajeux.ext@corp.ovh.com>
---
 .../src/components/content/headers/headers.component.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager-react-components/src/components/content/headers/headers.component.tsx b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
index 70aaf8f2d9b7..e2f57a4d4ab5 100644
--- a/packages/manager-react-components/src/components/content/headers/headers.component.tsx
+++ b/packages/manager-react-components/src/components/content/headers/headers.component.tsx
@@ -25,7 +25,7 @@ export const Headers: React.FC<HeadersProps> = ({
           <Description className="mb-6">{description}</Description>
         )}
       </div>
-      {headerButton && (
+      {(headerButton || changelogButton) && (
         <div className="flex flex-wrap justify-end">
           {changelogButton}
           {headerButton}