sync: master to develop

sync: master to develop

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

@@ -7,13 +7,15 @@ export interface HeadersProps {
   subtitle?: string;
   description?: string;
   headerButton?: React.ReactElement;
+  changelogButton?: React.ReactElement;
 }
 
 export const Headers: React.FC<HeadersProps> = ({
   title,
   subtitle,
   description,
   headerButton,
+  changelogButton,
 }) => {
   return (
     <div className="flex items-center justify-between">
@@ -26,7 +28,12 @@ export const Headers: React.FC<HeadersProps> = ({
           </OdsText>
         )}
       </div>
-      {headerButton && <div>{headerButton}</div>}
+      {(headerButton || changelogButton) && (
+        <div className="flex flex-wrap justify-end">
+          {changelogButton}
+          {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,35 @@ 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} />,
+  changelogButton: (
+    <ChangelogButton links={changelogLinks} chapters={changelogChapters} />
+  ),
 };
 
 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,8 @@
 {
   "common_actions": "Acciones",
-  "user_account_guides_header": "Guías"
+  "user_account_guides_header": "Guías",
+  "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_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"
 }

packages/manager/apps/dedicated/client/app/app.module.js

@@ -79,7 +79,7 @@ import ngTranslateAsyncLoader from '@ovh-ux/ng-translate-async-loader';
 import ovhContacts from '@ovh-ux/ng-ovh-contacts';
 import ovhManagerAtInternetConfiguration from '@ovh-ux/manager-at-internet-configuration';
 import { registerCoreModule } from '@ovh-ux/manager-core';
-import { serverBandwidth } from '@ovh-ux/manager-components';
+import { serverBandwidth, changelogButton } from '@ovh-ux/manager-components';
 import ovhManagerBanner from '@ovh-ux/manager-banner';
 import ovhManagerBilling from '@ovh-ux/manager-billing';
 import ovhManagerDbaasLogs from '@ovh-ux/manager-dbaas-logs';
@@ -242,6 +242,7 @@ export default async (containerEl, shellClient) => {
         'xeditable',
         ovhManagerCda,
         networkSecurity,
+        changelogButton,
       ].filter(isString),
     )
     .service('Polling', pollingService)
@@ -265,6 +266,7 @@ export default async (containerEl, shellClient) => {
       FALLBACK_LANGUAGE: configConstants.FALLBACK_LANGUAGE,
       SUPPORT: configConstants.SUPPORT,
       SECTIONS_UNIVERSE_MAP: configConstants.SECTIONS_UNIVERSE_MAP,
+      CHANGELOG: configConstants.CHANGELOG,
     })
     .constant('website_url', configConstants.website_url)
     .config(

packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js

@@ -12,6 +12,7 @@ export default /* @ngInject */ ($stateProvider) => {
       dataModel: () => 'cdnanycast.Anycast',
       defaultFilterColumn: () => 'service',
       header: /* @ngInject */ ($translate) => $translate.instant('cdn_title'),
+      changelog: () => 'cdn',
       customizableColumns: () => true,
       getServiceNameLink: /* @ngInject */ ($state) => ({
         service: productId,

packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/cdn-dedicated-manage.controller.js

@@ -9,6 +9,7 @@ export default class CdnManageCtrl {
     Cdn,
     currentActiveLink,
     domainsLink,
+    constants,
   ) {
     // injections
     this.$scope = $scope;
@@ -19,6 +20,7 @@ export default class CdnManageCtrl {
     this.Cdn = Cdn;
     this.currentActiveLink = currentActiveLink;
     this.domainsLink = domainsLink;
+    this.constants = constants;
 
     // attributes used in view
     this.cdn = null;

packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/cdn-dedicated-manage.html

@@ -7,6 +7,22 @@
 <!-- Section Content -->
 <div data-ng-if="!$ctrl.loading">
     <oui-header heading="{{:: $ctrl.cdn.serviceName }}">
+        <oui-header-heading>
+            <div class="d-flex justify-content-between">
+                <h1
+                    class="oui-header__title"
+                    data-translate="{{:: $ctrl.cdn.serviceName }}"
+                ></h1>
+                <div
+                    class="d-flex justify-content-end align-items-center flex-wrap gap-1"
+                >
+                    <changelog-button
+                        links="$ctrl.constants.CHANGELOG.cdn.links"
+                        chapters="$ctrl.constants.CHANGELOG.cdn.chapters"
+                    ></changelog-button>
+                </div>
+            </div>
+        </oui-header-heading>
         <oui-header-tabs>
             <oui-header-tabs-item
                 state="app.networks.cdn.dedicated.manage.statistics"

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/dedicatedCloud.controller.js

@@ -1,8 +1,9 @@
 export default class {
   /* @ngInject */
-  constructor($scope, $translate) {
+  constructor($scope, $translate, constants) {
     this.$scope = $scope;
     this.$translate = $translate;
+    this.constants = constants;
   }
 
   $onInit() {