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 4b5dcc438f50..0ef23eea88ed 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 @@ -26,7 +26,9 @@ export const Headers: React.FC = ({ )} - {headerButton &&
{headerButton}
} + {headerButton && ( +
{headerButton}
+ )} ); }; 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..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,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; @@ -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(); }); 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 f246832d6acb..5e9ed3cdc573 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 @@ -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: , }; -const HeadingWithGuideButton: HeadersProps = { - title: 'Example for header with guides', +const HeadingWithHeaderButtons: HeadersProps = { + title: 'Example for header with header buttons', description: 'description for subheader', - headerButton: , + headerButton: ( + <> + + + + ), }; export const header = () => ; export const subHeader = () => ; -export const headerWithGuides = () => ; +export const headerWithHeaderButtons = () => ( + +); export const headerWithActions = () => ; 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..62f943521a82 --- /dev/null +++ b/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 = ({ + links, + chapters = [], +}) => { + const { t } = useTranslation('buttons'); + const { trackClick } = useOvhTracking(); + return ( + <> + + + + {Object.entries(links).map(([key, value]) => ( +
+ + trackClick({ + actionType: 'navigation', + actions: [...chapters, ...CHANGELOG_PREFIXES, GO_TO(key)], + }) + } + /> +
+ ))} +
+ + ); +}; + +export default ChangelogButton; 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..97797a42dcd1 --- /dev/null +++ b/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 = { + title: 'Navigation/Menus', + decorators: [(story) =>
{story()}
], + component: ChangelogButton, + argTypes: {}, + args: changelogButton, +}; + +export default meta; 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'; 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..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,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" } 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..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,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" } 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..adf227387d20 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,5 @@ { "common_actions": "Acciones", - "user_account_guides_header": "Guías" + "user_account_guides_header": "Guías", + "mrc_changelog_header": "Roadmap & Changelog" } 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..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 +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_fr_FR.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_fr_FR.json index e07119301346..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 +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..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,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" } 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..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,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" } 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..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,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" }