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),
+);