From 427c37ef2c64428eb35b9872717883918ab80720 Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 09:00:55 +0100 Subject: [PATCH 01/17] feat(mrc): add component changelog ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../changelog-header-item.component.tsx | 35 ++++++++++++ .../changelog-header.component.spec.tsx | 33 +++++++++++ .../changelog/changelog-header.component.tsx | 34 +++++++++++ .../src/components/changelog/index.ts | 1 + .../src/components/changelog/interface.ts | 6 ++ .../menus/changelog/changelog.component.tsx | 57 +++++++++++++++++++ .../menus/changelog/changelog.stories.tsx | 38 +++++++++++++ .../menus/translations/Messages_en_GB.json | 3 +- .../menus/translations/Messages_fr_FR.json | 6 +- 9 files changed, 211 insertions(+), 2 deletions(-) create mode 100644 packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx create mode 100644 packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx create mode 100644 packages/manager-react-components/src/components/changelog/changelog-header.component.tsx create mode 100644 packages/manager-react-components/src/components/changelog/index.ts create mode 100644 packages/manager-react-components/src/components/changelog/interface.ts 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.stories.tsx diff --git a/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx b/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx new file mode 100644 index 000000000000..b06e58246573 --- /dev/null +++ b/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx @@ -0,0 +1,35 @@ +import { useTracking } from '@ovh-ux/manager-react-shell-client'; +import { OdsLink } from '@ovhcloud/ods-components/react'; +import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; + +interface ChangelogHeaderItemProps { + href: string; + label: string; + tracking?: string; +} + +export function ChangelogHeaderItem({ + href, + label, + tracking, +}: ChangelogHeaderItemProps) { + const { trackClick } = useTracking(); + + return ( +
+ { + if (tracking) + trackClick({ + name: tracking, + type: 'action', + }); + }} + /> +
+ ); +} diff --git a/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx b/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx new file mode 100644 index 000000000000..44b64ad201c7 --- /dev/null +++ b/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx @@ -0,0 +1,33 @@ +import { + ChangelogHeader, + ChangelogHeaderProps, +} from './changelog-header.component'; +import { render } from '../../utils/test.provider'; + +const renderComponent = (props: ChangelogHeaderProps) => { + return render(); +}; + +const changelogs = [ + { + key: 'foo-changelog', + url: 'foo-url', + label: 'foo-label', + }, + { + key: 'bar-changelog', + url: 'bar-url', + label: 'bar-label', + }, +]; + +describe('ChangelogHeader tests', () => { + it('should display changelogs list', () => { + const { container } = renderComponent({ + label: 'Roadmap & changelog', + changelogs, + }); + expect(container.querySelector('[label="foo-changelog"]')).not.toBeNull(); + expect(container.querySelector('[label="bar-changelog"]')).not.toBeNull(); + }); +}); diff --git a/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx b/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx new file mode 100644 index 000000000000..635a24450662 --- /dev/null +++ b/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx @@ -0,0 +1,34 @@ +import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react'; +import { ODS_BUTTON_VARIANT, ODS_ICON_NAME } from '@ovhcloud/ods-components'; + +import { ChangelogHeaderItem } from './changelog-header-item.component'; +import { Changelog } from './interface'; + +export interface ChangelogHeaderProps { + label: string; + changelogs: Changelog[]; +} + +export function ChangelogHeader({ label, changelogs }: ChangelogHeaderProps) { + return ( + <> +
+ +
+ + {changelogs.map((changelog) => ( + + ))} + + + ); +} diff --git a/packages/manager-react-components/src/components/changelog/index.ts b/packages/manager-react-components/src/components/changelog/index.ts new file mode 100644 index 000000000000..4283dc9e1246 --- /dev/null +++ b/packages/manager-react-components/src/components/changelog/index.ts @@ -0,0 +1 @@ +export { ChangelogHeader } from './changelog-header.component'; diff --git a/packages/manager-react-components/src/components/changelog/interface.ts b/packages/manager-react-components/src/components/changelog/interface.ts new file mode 100644 index 000000000000..31c3962ec3fa --- /dev/null +++ b/packages/manager-react-components/src/components/changelog/interface.ts @@ -0,0 +1,6 @@ +export interface Changelog { + key: string; + label: string; + url: string; + tracking?: string; +} 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..6f8524c90796 --- /dev/null +++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.component.tsx @@ -0,0 +1,57 @@ +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 { Links, LinkType } from '../../../typography'; +import '../translations/translation'; + +export interface ChangelogItem { + id: number; + href: string; + download?: string; + target?: string; + rel?: string; + label: string; + onClick?: () => void; +} + +export interface ChangelogButtonProps { + items: ChangelogItem[]; +} + +export const ChangelogButton: React.FC = ({ items }) => { + const { t } = useTranslation('buttons'); + return ( + <> + + + + {items.map((item) => ( +
+ +
+ ))} + + + ); +}; + +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..3244ec08e035 --- /dev/null +++ b/packages/manager-react-components/src/components/navigation/menus/changelog/changelog.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Meta } from '@storybook/react'; +import { ChangelogButton, ChangelogButtonProps } from './changelog.component'; + +const changelogItems = [ + { + id: 1, + href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', + target: '_blank', + label: 'Roadmap', + }, + { + id: 2, + href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', + target: '_blank', + label: 'Changelog', + }, + { + id: 3, + href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', + target: '_blank', + label: 'Feature Request', + }, +]; + +export const changelogButton: ChangelogButtonProps = { + items: changelogItems, +}; + +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/translations/Messages_en_GB.json b/packages/manager-react-components/src/components/navigation/menus/translations/Messages_en_GB.json index 4c12f3a1d69d..ff2123a74ca7 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,5 @@ { "common_actions": "Actions", - "user_account_guides_header": "Guides" + "user_account_guides_header": "Guides", + "user_account_changelog_header": "Roadmap & changelog" } 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..ff2123a74ca7 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,5 @@ -{ "common_actions": "Actions", "user_account_guides_header": "Guides" } +{ + "common_actions": "Actions", + "user_account_guides_header": "Guides", + "user_account_changelog_header": "Roadmap & changelog" +} From 280ef2f298e38406a2cb93dc875834dfec6d5dee Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 10:10:04 +0100 Subject: [PATCH 02/17] feat(mrc): add example of changelog in headers ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../content/headers/headers.component.tsx | 2 +- .../content/headers/headers.stories.tsx | 37 +++++++++++++++++-- .../menus/changelog/changelog.component.tsx | 1 + 3 files changed, 35 insertions(+), 5 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 4b5dcc438f50..7fc55f109126 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,7 @@ export const Headers: React.FC = ({ )} - {headerButton &&
{headerButton}
} + {headerButton &&
{headerButton}
} ); }; 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..219521b235a4 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,7 @@ 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 from '../../navigation/menus/changelog/changelog.component'; const Heading: HeadersProps = { title: 'Example for header', @@ -43,20 +44,48 @@ const guideItems = [ }, ]; +const changelogItems = [ + { + id: 1, + href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', + target: '_blank', + label: 'Roadmap', + }, + { + id: 2, + href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', + target: '_blank', + label: 'Changelog', + }, + { + id: 3, + href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', + target: '_blank', + label: 'Feature Request', + }, +]; + 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 guides and changelogs', description: 'description for subheader', - headerButton: , + headerButton: ( + <> + + + + ), }; export const header = () => ; export const subHeader = () => ; -export const headerWithGuides = () => ; +export const headerWithGuidesAndChangelog = () => ( + +); 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 index 6f8524c90796..80688262d5e2 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 @@ -29,6 +29,7 @@ export const ChangelogButton: React.FC = ({ items }) => { variant={ODS_BUTTON_VARIANT.ghost} size={ODS_BUTTON_SIZE.sm} label={t('user_account_changelog_header')} + className="whitespace-nowrap" > From 3ac20188b0ac4dc4a252be7c5d9abe8fbfaae079 Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 10:14:41 +0100 Subject: [PATCH 03/17] feat(mrc): add header test ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../src/components/content/headers/headers.spec.tsx | 4 ++-- .../src/components/content/headers/headers.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 3 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 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 219521b235a4..31a23c305a41 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 @@ -83,7 +83,7 @@ const HeadingWithHeaderButtons: HeadersProps = { export const header = () => ; export const subHeader = () => ; -export const headerWithGuidesAndChangelog = () => ( +export const headerWithHeaderButtons = () => ( ); export const headerWithActions = () => ; From 335bff431269beec91a5d4a7e0a9179a63e4670d Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 10:35:08 +0100 Subject: [PATCH 04/17] feat(mrc): allow buttons to wrap ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../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 7fc55f109126..d024b9ce7901 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,7 @@ export const Headers: React.FC = ({ )} - {headerButton &&
{headerButton}
} + {headerButton &&
{headerButton}
} ); }; From 76397dae73808764f4c4a43877cd1a0b5b9f7fde Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 10:41:30 +0100 Subject: [PATCH 05/17] feat(mrc): justify-end header buttons ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../src/components/content/headers/headers.component.tsx | 4 +++- 1 file changed, 3 insertions(+), 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 d024b9ce7901..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}
+ )} ); }; From 7f43fda59602b88ea48388048f8bd8cdb1fe13f0 Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 11:20:14 +0100 Subject: [PATCH 06/17] feat(mrc): add translations at the component level ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../navigation/menus/changelog/changelog.component.tsx | 4 ++-- .../navigation/menus/translations/Messages_fr_FR.json | 5 ++++- 2 files changed, 6 insertions(+), 3 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 80688262d5e2..337c21fe1878 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,7 +11,7 @@ export interface ChangelogItem { download?: string; target?: string; rel?: string; - label: string; + labelKey: string; onClick?: () => void; } @@ -45,7 +45,7 @@ export const ChangelogButton: React.FC = ({ items }) => { download={item.download} rel={item.rel} type={LinkType.external} - label={item.label} + label={t(`user_account_changelog_${item.labelKey}`)} onClickReturn={item.onClick} /> 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 ff2123a74ca7..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,5 +1,8 @@ { "common_actions": "Actions", "user_account_guides_header": "Guides", - "user_account_changelog_header": "Roadmap & changelog" + "user_account_changelog_header": "Roadmap & changelog", + "user_account_changelog_roadmap": "Roadmap", + "user_account_changelog_changelog": "Changelog", + "user_account_changelog_feature-request": "Feature request" } From 18f544af41da5f30f190ea18e7f38aaa4debb86a Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 11:29:09 +0100 Subject: [PATCH 07/17] feat(mrc): fix header test ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../src/components/content/headers/headers.stories.tsx | 6 +++--- .../navigation/menus/changelog/changelog.stories.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 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 31a23c305a41..edd100ea3e96 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 @@ -49,19 +49,19 @@ const changelogItems = [ id: 1, href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', target: '_blank', - label: 'Roadmap', + labelKey: 'roadmap', }, { id: 2, href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', target: '_blank', - label: 'Changelog', + labelKey: 'changelog', }, { id: 3, href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', target: '_blank', - label: 'Feature Request', + labelKey: 'feature-request', }, ]; 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 3244ec08e035..751508a964c4 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 @@ -7,19 +7,19 @@ const changelogItems = [ id: 1, href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', target: '_blank', - label: 'Roadmap', + labelKey: 'Roadmap', }, { id: 2, href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', target: '_blank', - label: 'Changelog', + labelKey: 'Changelog', }, { id: 3, href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', target: '_blank', - label: 'Feature Request', + labelKey: 'Feature Request', }, ]; From e3409170b13808aee22c280117a4294bf438ecc8 Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 13 Jan 2025 16:17:41 +0100 Subject: [PATCH 08/17] feat(mrc): export new component ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../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 aa7556ad94ef9583eb540027ebc8eadb71c2df6f Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Thu, 16 Jan 2025 10:57:29 +0100 Subject: [PATCH 09/17] feat(mrc): clean changelog menu component ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../changelog-header-item.component.tsx | 35 ------------------- .../changelog-header.component.spec.tsx | 33 ----------------- .../changelog/changelog-header.component.tsx | 34 ------------------ .../src/components/changelog/index.ts | 1 - .../src/components/changelog/interface.ts | 6 ---- .../menus/changelog/changelog.stories.tsx | 12 +++---- .../menus/translations/Messages_fr_FR.json | 8 ++--- 7 files changed, 10 insertions(+), 119 deletions(-) delete mode 100644 packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx delete mode 100644 packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx delete mode 100644 packages/manager-react-components/src/components/changelog/changelog-header.component.tsx delete mode 100644 packages/manager-react-components/src/components/changelog/index.ts delete mode 100644 packages/manager-react-components/src/components/changelog/interface.ts diff --git a/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx b/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx deleted file mode 100644 index b06e58246573..000000000000 --- a/packages/manager-react-components/src/components/changelog/changelog-header-item.component.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useTracking } from '@ovh-ux/manager-react-shell-client'; -import { OdsLink } from '@ovhcloud/ods-components/react'; -import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; - -interface ChangelogHeaderItemProps { - href: string; - label: string; - tracking?: string; -} - -export function ChangelogHeaderItem({ - href, - label, - tracking, -}: ChangelogHeaderItemProps) { - const { trackClick } = useTracking(); - - return ( -
- { - if (tracking) - trackClick({ - name: tracking, - type: 'action', - }); - }} - /> -
- ); -} diff --git a/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx b/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx deleted file mode 100644 index 44b64ad201c7..000000000000 --- a/packages/manager-react-components/src/components/changelog/changelog-header.component.spec.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { - ChangelogHeader, - ChangelogHeaderProps, -} from './changelog-header.component'; -import { render } from '../../utils/test.provider'; - -const renderComponent = (props: ChangelogHeaderProps) => { - return render(); -}; - -const changelogs = [ - { - key: 'foo-changelog', - url: 'foo-url', - label: 'foo-label', - }, - { - key: 'bar-changelog', - url: 'bar-url', - label: 'bar-label', - }, -]; - -describe('ChangelogHeader tests', () => { - it('should display changelogs list', () => { - const { container } = renderComponent({ - label: 'Roadmap & changelog', - changelogs, - }); - expect(container.querySelector('[label="foo-changelog"]')).not.toBeNull(); - expect(container.querySelector('[label="bar-changelog"]')).not.toBeNull(); - }); -}); diff --git a/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx b/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx deleted file mode 100644 index 635a24450662..000000000000 --- a/packages/manager-react-components/src/components/changelog/changelog-header.component.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { OdsButton, OdsPopover } from '@ovhcloud/ods-components/react'; -import { ODS_BUTTON_VARIANT, ODS_ICON_NAME } from '@ovhcloud/ods-components'; - -import { ChangelogHeaderItem } from './changelog-header-item.component'; -import { Changelog } from './interface'; - -export interface ChangelogHeaderProps { - label: string; - changelogs: Changelog[]; -} - -export function ChangelogHeader({ label, changelogs }: ChangelogHeaderProps) { - return ( - <> -
- -
- - {changelogs.map((changelog) => ( - - ))} - - - ); -} diff --git a/packages/manager-react-components/src/components/changelog/index.ts b/packages/manager-react-components/src/components/changelog/index.ts deleted file mode 100644 index 4283dc9e1246..000000000000 --- a/packages/manager-react-components/src/components/changelog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ChangelogHeader } from './changelog-header.component'; diff --git a/packages/manager-react-components/src/components/changelog/interface.ts b/packages/manager-react-components/src/components/changelog/interface.ts deleted file mode 100644 index 31c3962ec3fa..000000000000 --- a/packages/manager-react-components/src/components/changelog/interface.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Changelog { - key: string; - label: string; - url: string; - tracking?: string; -} 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 751508a964c4..63729f3415a6 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,21 +5,21 @@ import { ChangelogButton, ChangelogButtonProps } from './changelog.component'; const changelogItems = [ { id: 1, - href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', + href: 'https://ovh.com', target: '_blank', - labelKey: 'Roadmap', + labelKey: 'roadmap', }, { id: 2, - href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', + href: 'https://ovh.com', target: '_blank', - labelKey: 'Changelog', + labelKey: 'changelog', }, { id: 3, - href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', + href: 'https://ovh.com', target: '_blank', - labelKey: 'Feature Request', + labelKey: '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 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 2852aa461239ce498d3ec4f6c15f929cce009bd5 Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Thu, 16 Jan 2025 11:14:20 +0100 Subject: [PATCH 10/17] feat(mrc): clean translations issues ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../navigation/menus/changelog/changelog.component.tsx | 4 ++-- .../navigation/menus/translations/Messages_en_GB.json | 3 +-- 2 files changed, 3 insertions(+), 4 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 337c21fe1878..38a215862a09 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 @@ -28,7 +28,7 @@ export const ChangelogButton: React.FC = ({ items }) => { slot="menu-title" variant={ODS_BUTTON_VARIANT.ghost} size={ODS_BUTTON_SIZE.sm} - label={t('user_account_changelog_header')} + label={t('mrc_changelog_header')} className="whitespace-nowrap" > @@ -45,7 +45,7 @@ export const ChangelogButton: React.FC = ({ 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} /> 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 ff2123a74ca7..4c12f3a1d69d 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,5 +1,4 @@ { "common_actions": "Actions", - "user_account_guides_header": "Guides", - "user_account_changelog_header": "Roadmap & changelog" + "user_account_guides_header": "Guides" } From a6d5519245786efa2ae44f370e00e28ad875a51e Mon Sep 17 00:00:00 2001 From: Maxime Bajeux Date: Mon, 20 Jan 2025 10:58:55 +0100 Subject: [PATCH 11/17] feat(mrc): refacto props ref: MANAGER-16546 Signed-off-by: Maxime Bajeux --- .../content/headers/headers.stories.tsx | 35 ++++++-------- .../menus/changelog/changelog.component.tsx | 46 +++++++++++-------- 2 files changed, 41 insertions(+), 40 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 edd100ea3e96..86f191b46c61 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,7 +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 from '../../navigation/menus/changelog/changelog.component'; +import ChangelogButton, { + ChangelogLinks, +} from '../../navigation/menus/changelog/changelog.component'; const Heading: HeadersProps = { title: 'Example for header', @@ -44,26 +46,15 @@ const guideItems = [ }, ]; -const changelogItems = [ - { - id: 1, - href: 'https://github.com/orgs/ovh/projects/16/views/1?pane=info&sliceBy%5Bvalue%5D=Baremetal', - target: '_blank', - labelKey: 'roadmap', - }, - { - id: 2, - href: 'https://github.com/orgs/ovh/projects/16/views/6?pane=info&sliceBy%5Bvalue%5D=Baremetal', - target: '_blank', - labelKey: 'changelog', - }, - { - id: 3, - href: 'https://github.com/ovh/infrastructure-roadmap/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=', - target: '_blank', - labelKey: 'feature-request', - }, -]; +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 ', @@ -75,7 +66,7 @@ const HeadingWithHeaderButtons: HeadersProps = { description: 'description for subheader', headerButton: ( <> - + ), 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 38a215862a09..12af5369ec46 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 @@ -5,22 +5,28 @@ import { useTranslation } from 'react-i18next'; import { Links, LinkType } from '../../../typography'; import '../translations/translation'; -export interface ChangelogItem { - id: number; - href: string; - download?: string; - target?: string; - rel?: string; - labelKey: string; - onClick?: () => void; +export interface ChangelogLinks { + changelog: string; + roadmap: string; + 'feature-request': string; } export interface ChangelogButtonProps { - items: ChangelogItem[]; + links: ChangelogLinks; + chapters: string[]; } -export const ChangelogButton: React.FC = ({ items }) => { +import { useOvhTracking } from '@ovh-ux/manager-react-shell-client'; + +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 ( <>