diff --git a/app/src/layouts/adminLayout/adminSidebar/adminSidebar.jsx b/app/src/layouts/adminLayout/adminSidebar/adminSidebar.jsx index 945fd5499d..32151514b8 100644 --- a/app/src/layouts/adminLayout/adminSidebar/adminSidebar.jsx +++ b/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,51 +84,36 @@ 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: , }, { - 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: , }, { - 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: ( @@ -132,12 +121,26 @@ export class AdminSidebar extends Component { ), }, { - onClick: this.handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PLUGINS_BTN), + onClick: handleClickButton(ADMIN_SIDEBAR_EVENTS.CLICK_PLUGINS_BTN), link: { type: PLUGINS_PAGE }, icon: PluginsIcon, message: , }, ]; + + // 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,12 +152,12 @@ 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: ( @@ -162,7 +165,7 @@ export class AdminSidebar extends Component { ), }, { - 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 = ( - - } - preventParsing - /> - ); + const topSidebarItems = createTopSidebarItems(); + const bottomSidebarItems = createBottomSidebarItems(); + const mainBlock = ( + + } + preventParsing + /> + ); - return ( - - ); - } + return ( + + ); } +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), +);