feat(mrc): add changelog component

packages/manager-react-components/src/components/content/headers/headers.component.tsx

@@ -26,7 +26,9 @@ export const Headers: React.FC<HeadersProps> = ({
           </OdsText>
         )}
       </div>
-      {headerButton && <div>{headerButton}</div>}
+      {headerButton && (
+        <div className="flex flex-wrap justify-end">{headerButton}</div>
+      )}
     </div>
   );
 };

packages/manager-react-components/src/components/content/headers/headers.spec.tsx

@@ -1,16 +1,21 @@
-import { vitest } from 'vitest';
+import { vitest, vi } from 'vitest';
 import { waitFor, screen } from '@testing-library/react';
 import { render } from '../../../utils/test.provider';
 import {
   header,
   subHeader,
-  headerWithGuides,
+  headerWithHeaderButtons,
   headerWithActions,
 } from './headers.stories';
 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 () => {
-    render(headerWithGuides());
+  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();
     });

packages/manager-react-components/src/components/content/headers/headers.stories.tsx

@@ -3,6 +3,9 @@ import { Meta } from '@storybook/react';
 import Headers, { HeadersProps } from './headers.component';
 import ActionMenu from '../../navigation/menus/action/action.component';
 import GuideButton from '../../navigation/menus/guide/guide.component';
+import ChangelogButton, {
+  ChangelogLinks,
+} from '../../navigation/menus/changelog/changelog.component';
 
 const Heading: HeadersProps = {
   title: 'Example for header',
@@ -43,20 +46,37 @@ const guideItems = [
   },
 ];
 
+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 = {
   title: 'Example for header with actions ',
   description: 'description for header',
   headerButton: <ActionMenu id="1" items={actionItems} />,
 };
-const HeadingWithGuideButton: HeadersProps = {
-  title: 'Example for header with guides',
+const HeadingWithHeaderButtons: HeadersProps = {
+  title: 'Example for header with header buttons',
   description: 'description for subheader',
-  headerButton: <GuideButton items={guideItems} />,
+  headerButton: (
+    <>
+      <ChangelogButton links={changelogLinks} chapters={changelogChapters} />
+      <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 = {

packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { OdsPopover, OdsButton } from '@ovhcloud/ods-components/react';
+import { useTranslation } from 'react-i18next';
+import { useOvhTracking } from '@ovh-ux/manager-react-shell-client';
+import { Links, LinkType } from '../../../typography';
+import '../translations/translation';
+
+export interface ChangelogLinks {
+  changelog: string;
+  roadmap: string;
+  'feature-request': string;
+}
+
+export interface ChangelogButtonProps {
+  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> = ({
+  links,
+  chapters = [],
+}) => {
+  const { t } = useTranslation('buttons');
+  const { trackClick } = useOvhTracking();
+  return (
+    <>
+      <div id="navigation-menu-changelog-trigger">
+        <OdsButton
+          slot="menu-title"
+          variant={ODS_BUTTON_VARIANT.ghost}
+          size={ODS_BUTTON_SIZE.sm}
+          label={t('mrc_changelog_header')}
+          className="whitespace-nowrap"
+        ></OdsButton>
+      </div>
+
+      <OdsPopover
+        triggerId="navigation-menu-changelog-trigger"
+        with-arrow="true"
+      >
+        {Object.entries(links).map(([key, value]) => (
+          <div key={key}>
+            <Links
+              href={value}
+              target="_blank"
+              type={LinkType.external}
+              rel={LinkType.external}
+              label={t(`mrc_changelog_${key}`)}
+              onClickReturn={() =>
+                trackClick({
+                  actionType: 'navigation',
+                  actions: [...chapters, ...CHANGELOG_PREFIXES, GO_TO(key)],
+                })
+              }
+            />
+          </div>
+        ))}
+      </OdsPopover>
+    </>
+  );
+};
+
+export default ChangelogButton;

packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import {
+  ChangelogButton,
+  ChangelogLinks,
+  ChangelogButtonProps,
+} from './changelog.component';
+
+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 = {
+  links: changelogLinks,
+  chapters: changelogChapters,
+};
+
+const meta: Meta<ChangelogButtonProps> = {
+  title: 'Navigation/Menus',
+  decorators: [(story) => <div>{story()}</div>],
+  component: ChangelogButton,
+  argTypes: {},
+  args: changelogButton,
+};
+
+export default meta;

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';

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 & Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature Request"
 }

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 & Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }

packages/manager-react-components/src/components/navigation/menus/translations/Messages_es_ES.json

@@ -1,4 +1,5 @@
 {
   "common_actions": "Acciones",
-  "user_account_guides_header": "Guías"
+  "user_account_guides_header": "Guías",
+  "mrc_changelog_header": "Roadmap & Changelog"
 }

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"
+}

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",
+  "mrc_changelog_header": "Roadmap & Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
+}

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 & Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature Request"
 }

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 & Changelog",
+  "mrc_changelog_roadmap": "Roadmapa",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Propozycja wdrożenia nowej funkcji"
 }

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 & Changelog",
+  "mrc_changelog_roadmap": "Roadmap",
+  "mrc_changelog_changelog": "Changelog",
+  "mrc_changelog_feature-request": "Feature request"
 }