EPMRPP-87065 || Add backward compatibility for admin sidebar plugin extensions

app/src/layouts/adminLayout/adminSidebar/adminSidebar.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 EPAM Systems
+ * Copyright 2023 EPAM Systems
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { activeProjectSelector } from 'controllers/user';
 import { FormattedMessage } from 'react-intl';
@@ -28,11 +28,15 @@ import {
   ALL_USERS_PAGE,
   PROJECTS_PAGE,
   USER_PROFILE_PAGE,
+  PLUGIN_UI_EXTENSION_ADMIN_PAGE,
 } from 'controllers/pages/constants';
 import { ALL } from 'common/constants/reservedFilterIds';
 import PropTypes from 'prop-types';
 import track, { useTracking } from 'react-tracking';
-import { uiExtensionAdminSidebarComponentsSelector } from 'controllers/plugins/uiExtensions';
+import {
+  uiExtensionAdminPagesSelector,
+  uiExtensionAdminSidebarComponentsSelector,
+} from 'controllers/plugins/uiExtensions';
 import { ADMIN_SIDEBAR_EVENTS } from 'components/main/analytics/events';
 import { withTooltip } from 'components/main/tooltips/tooltip';
 import { TextTooltip } from 'components/main/tooltips/textTooltip';
@@ -80,64 +84,63 @@ const BackToProjectWithTooltip = withTooltip({
   },
 })(BackToProject);
 
-@connect((state) => ({
-  activeProject: activeProjectSelector(state),
-  extensions: uiExtensionAdminSidebarComponentsSelector(state),
-}))
-@track()
-export class AdminSidebar extends Component {
-  static propTypes = {
-    onClickNavBtn: PropTypes.func,
-    activeProject: PropTypes.string.isRequired,
-    tracking: PropTypes.shape({
-      trackEvent: PropTypes.func,
-      getTrackingData: PropTypes.func,
-    }).isRequired,
-    extensions: PropTypes.arrayOf(extensionType),
-  };
-  static defaultProps = {
-    onClickNavBtn: () => {},
-    extensions: [],
-  };
-
-  handleClickButton = (eventInfo) => () => {
-    this.props.onClickNavBtn();
+function AdminSidebarComponent({
+  activeProject,
+  onClickNavBtn,
+  tracking,
+  extensions,
+  adminPageExtensions,
+}) {
+  const handleClickButton = (eventInfo) => () => {
+    onClickNavBtn();
     if (eventInfo) {
-      this.props.tracking.trackEvent(eventInfo);
+      tracking.trackEvent(eventInfo);
     }
   };
 
-  createTopSidebarItems = () => {
-    const { onClickNavBtn, extensions } = this.props;
-
+  const createTopSidebarItems = () => {
     const items = [
       {
-        onClick: this.handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PROJECTS_BTN),
+        onClick: handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PROJECTS_BTN),
         link: { type: PROJECTS_PAGE },
         icon: ProjectsIcon,
         message: <FormattedMessage id={'AdminSidebar.allProjects'} defaultMessage={'Projects'} />,
       },
       {
-        onClick: this.handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_ALL_USERS_BTN),
+        onClick: handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_ALL_USERS_BTN),
         link: { type: ALL_USERS_PAGE },
         icon: UsersIcon,
         message: <FormattedMessage id={'AdminSidebar.allUsers'} defaultMessage={'All Users'} />,
       },
       {
-        onClick: this.handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_SERVER_SETTINGS_BTN),
+        onClick: handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_SERVER_SETTINGS_BTN),
         link: { type: SERVER_SETTINGS_PAGE },
         icon: SettingsIcon,
         message: (
           <FormattedMessage id={'AdminSidebar.settings'} defaultMessage={'Server settings'} />
         ),
       },
       {
-        onClick: this.handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PLUGINS_BTN),
+        onClick: handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PLUGINS_BTN),
         link: { type: PLUGINS_PAGE },
         icon: PluginsIcon,
         message: <FormattedMessage id={'AdminSidebar.plugins'} defaultMessage={'Plugins'} />,
       },
     ];
+
+    // for backward compatibility only
+    // iterate over admin page extensions as well to add sidebar components for old plugins
+    adminPageExtensions
+      .filter((ext) => !!ext.buttonIcon)
+      .forEach((extension) =>
+        items.push({
+          onClick: handleClickButton(),
+          link: { type: PLUGIN_UI_EXTENSION_ADMIN_PAGE, payload: { pluginPage: extension.name } },
+          icon: extension.buttonIcon,
+          message: extension.buttonLabel || extension.name,
+        }),
+      );
+
     extensions.forEach((extension) =>
       items.push({
         name: extension.name,
@@ -149,20 +152,20 @@ export class AdminSidebar extends Component {
     return items;
   };
 
-  createBottomSidebarItems = () => [
+  const createBottomSidebarItems = () => [
     {
-      onClick: this.props.onClickNavBtn,
+      onClick: onClickNavBtn,
       link: {
         type: PROJECT_LAUNCHES_PAGE,
-        payload: { projectId: this.props.activeProject, filterId: ALL },
+        payload: { projectId: activeProject, filterId: ALL },
       },
       icon: BackIcon,
       message: (
         <FormattedMessage id={'AdminSidebar.btnToProject'} defaultMessage={'Back to project'} />
       ),
     },
     {
-      onClick: this.props.onClickNavBtn,
+      onClick: onClickNavBtn,
       link: {
         type: USER_PROFILE_PAGE,
       },
@@ -171,27 +174,47 @@ export class AdminSidebar extends Component {
     },
   ];
 
-  render() {
-    const { activeProject } = this.props;
-    const topSidebarItems = this.createTopSidebarItems();
-    const bottomSidebarItems = this.createBottomSidebarItems();
-    const mainBlock = (
-      <BackToProjectWithTooltip
-        activeProject={activeProject}
-        className={cx('back-to-project-tooltip')}
-        tooltipContent={
-          <FormattedMessage id={'AdminSidebar.btnToProject'} defaultMessage={'Back to project'} />
-        }
-        preventParsing
-      />
-    );
+  const topSidebarItems = createTopSidebarItems();
+  const bottomSidebarItems = createBottomSidebarItems();
+  const mainBlock = (
+    <BackToProjectWithTooltip
+      activeProject={activeProject}
+      className={cx('back-to-project-tooltip')}
+      tooltipContent={
+        <FormattedMessage id={'AdminSidebar.btnToProject'} defaultMessage={'Back to project'} />
+      }
+      preventParsing
+    />
+  );
 
-    return (
-      <Sidebar
-        mainBlock={mainBlock}
-        topSidebarItems={topSidebarItems}
-        bottomSidebarItems={bottomSidebarItems}
-      />
-    );
-  }
+  return (
+    <Sidebar
+      mainBlock={mainBlock}
+      topSidebarItems={topSidebarItems}
+      bottomSidebarItems={bottomSidebarItems}
+    />
+  );
 }
+AdminSidebarComponent.propTypes = {
+  onClickNavBtn: PropTypes.func,
+  activeProject: PropTypes.string.isRequired,
+  tracking: PropTypes.shape({
+    trackEvent: PropTypes.func,
+    getTrackingData: PropTypes.func,
+  }).isRequired,
+  extensions: PropTypes.arrayOf(extensionType),
+  adminPageExtensions: PropTypes.arrayOf(extensionType),
+};
+AdminSidebarComponent.defaultProps = {
+  onClickNavBtn: () => {},
+  extensions: [],
+  adminPageExtensions: [],
+};
+
+export const AdminSidebar = track()(
+  connect((state) => ({
+    activeProject: activeProjectSelector(state),
+    extensions: uiExtensionAdminSidebarComponentsSelector(state),
+    adminPageExtensions: uiExtensionAdminPagesSelector(state),
+  }))(AdminSidebarComponent),
+);