EPMRPP-93200 || Wrong sidebar level (#3951)

* EPMRPP-93200 || Wrong Sidebar level is displayed when opening Profile page * EPMRPP-93200 || Fix routes overlapping * EPMRPP-93200 || fix the links in the organization sidebar --------- Co-authored-by: Ilya Hancharyk <[email protected]>
reportportal · Aug 5, 2024 · bd2f147 · bd2f147
1 parent 05c27a1
commit bd2f147
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 71 deletions.
diff --git a/app/src/controllers/pages/constants.js b/app/src/controllers/pages/constants.js
@@ -52,7 +52,11 @@ export const PROJECT_USERDEBUG_TEST_ITEM_PAGE = 'PROJECT_USERDEBUG_TEST_ITEM_PAG
 export const PROJECT_LOG_PAGE = 'PROJECT_LOG_PAGE';
 export const PROJECT_USERDEBUG_LOG_PAGE = 'PROJECT_USERDEBUG_LOG_PAGE';
 export const USER_PROFILE_PAGE = 'USER_PROFILE_PAGE';
+export const USER_PROFILE_PAGE_ORGANIZATION_LEVEL = 'USER_PROFILE_PAGE_ORGANIZATION_LEVEL';
+export const USER_PROFILE_PAGE_PROJECT_LEVEL = 'USER_PROFILE_PAGE_PROJECT_LEVEL';
 export const USER_PROFILE_SUB_PAGE = 'USER_PROFILE_SUB_PAGE';
+export const USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL = 'USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL';
+export const USER_PROFILE_SUB_PAGE_PROJECT_LEVEL = 'USER_PROFILE_SUB_PAGE_PROJECT_LEVEL';
 export const HISTORY_PAGE = 'HISTORY_PAGE';
 export const UNIQUE_ERRORS_PAGE = 'UNIQUE_ERRORS_PAGE';
 export const TEST_ITEM_PAGE = 'TEST_ITEM_PAGE';
@@ -92,7 +96,11 @@ export const pageNames = {
   PROJECT_USERDEBUG_PAGE,
   PROJECT_USERDEBUG_TEST_ITEM_PAGE,
   USER_PROFILE_PAGE,
+  USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_PAGE_PROJECT_LEVEL,
   USER_PROFILE_SUB_PAGE,
+  USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_SUB_PAGE_PROJECT_LEVEL,
   LOGIN_PAGE,
   ACCOUNT_REMOVED_PAGE,
   REGISTRATION_PAGE,

diff --git a/app/src/controllers/pages/index.js b/app/src/controllers/pages/index.js
@@ -74,7 +74,11 @@ export {
   PROJECT_USERDEBUG_PAGE,
   PROJECT_USERDEBUG_TEST_ITEM_PAGE,
   USER_PROFILE_PAGE,
+  USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_PAGE_PROJECT_LEVEL,
   USER_PROFILE_SUB_PAGE,
+  USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_SUB_PAGE_PROJECT_LEVEL,
   LOGIN_PAGE,
   ACCOUNT_REMOVED_PAGE,
   REGISTRATION_PAGE,
@@ -90,6 +94,9 @@ export {
   CLEAR_PAGE_STATE,
   PLUGIN_UI_EXTENSION_ADMIN_PAGE,
   PROJECT_PLUGIN_PAGE,
+  ORGANIZATION_PROJECTS_PAGE,
+  ORGANIZATION_MEMBERS_PAGE,
+  ORGANIZATION_SETTINGS_PAGE,
 } from './constants';
 export { NOT_FOUND } from 'redux-first-router';
 export { pageSagas } from './sagas';
diff --git a/app/src/layouts/common/appSidebar/appSidebar.jsx b/app/src/layouts/common/appSidebar/appSidebar.jsx
@@ -34,7 +34,12 @@ import styles from './appSidebar.scss';
 
 const cx = classNames.bind(styles);
 
-export const AppSidebar = ({ createMainBlock, items, isOpenOrganizationPopover }) => {
+export const AppSidebar = ({
+  createMainBlock,
+  items,
+  isOpenOrganizationPopover,
+  linkToUserProfilePage,
+}) => {
   const userId = useSelector(userIdSelector);
   const [isFaqTouched, setIsFaqTouched] = useState(!!getFAQOpenStatus(userId));
 
@@ -77,6 +82,7 @@ export const AppSidebar = ({ createMainBlock, items, isOpenOrganizationPopover }
         closeSidebar={closeSidebar}
         isOpenPopover={isOpenAvatarPopover}
         togglePopover={setIsOpenAvatarPopover}
+        linkToUserProfilePage={linkToUserProfilePage}
         onClick={() => {
           openSidebar();
           setIsOpenAvatarPopover(!isOpenAvatarPopover);
@@ -99,6 +105,7 @@ export const AppSidebar = ({ createMainBlock, items, isOpenOrganizationPopover }
 };
 
 AppSidebar.propTypes = {
+  linkToUserProfilePage: PropTypes.object.isRequired,
   items: PropTypes.array,
   isOpenOrganizationPopover: PropTypes.bool,
   createMainBlock: PropTypes.func,

diff --git a/app/src/layouts/common/appSidebar/userControl/profileMenu/profileMenu.jsx b/app/src/layouts/common/appSidebar/userControl/profileMenu/profileMenu.jsx
@@ -19,7 +19,6 @@ import { useDispatch } from 'react-redux';
 import Parser from 'html-react-parser';
 import classNames from 'classnames/bind';
 import { FormattedMessage } from 'react-intl';
-import { USER_PROFILE_PAGE } from 'controllers/pages';
 import { logoutAction } from 'controllers/auth';
 import { NavLink } from 'components/main/navLink';
 import LogoutIcon from './img/log-out-inline.svg';
@@ -28,7 +27,7 @@ import styles from './profileMenu.scss';
 
 const cx = classNames.bind(styles);
 
-export const ProfileMenu = ({ closePopover, closeSidebar }) => {
+export const ProfileMenu = ({ closePopover, closeSidebar, linkToUserProfilePage }) => {
   const dispatch = useDispatch();
 
   const onClickLogout = () => {
@@ -38,9 +37,7 @@ export const ProfileMenu = ({ closePopover, closeSidebar }) => {
   return (
     <>
       <NavLink
-        to={{
-          type: USER_PROFILE_PAGE,
-        }}
+        to={linkToUserProfilePage}
         className={cx('menu-item')}
         activeClassName={cx('active')}
         onClick={() => {
@@ -62,4 +59,5 @@ export const ProfileMenu = ({ closePopover, closeSidebar }) => {
 ProfileMenu.propTypes = {
   closePopover: PropTypes.func.isRequired,
   closeSidebar: PropTypes.func.isRequired,
+  linkToUserProfilePage: PropTypes.object.isRequired,
 };
diff --git a/app/src/layouts/instanceLayout/instanceSidebar/instanceSidebar.jsx b/app/src/layouts/instanceLayout/instanceSidebar/instanceSidebar.jsx
@@ -28,6 +28,7 @@ import {
   PROJECTS_PAGE,
   PLUGIN_UI_EXTENSION_ADMIN_PAGE,
   ORGANIZATIONS_PAGE,
+  USER_PROFILE_PAGE,
 } from 'controllers/pages/constants';
 import { ADMIN_SIDEBAR_EVENTS } from 'components/main/analytics/events';
 import {
@@ -116,6 +117,7 @@ export const InstanceSidebar = ({ onClickNavBtn }) => {
   };
 
   const link = { type: ORGANIZATIONS_PAGE };
+  const linkToUserProfilePage = { type: USER_PROFILE_PAGE };
   const titles = {
     shortTitle: formatMessage(messages.all),
     topTitle: formatMessage(messages.allOrganizations),
@@ -141,6 +143,7 @@ export const InstanceSidebar = ({ onClickNavBtn }) => {
       createMainBlock={createMainBlock}
       items={getSidebarItems()}
       isOpenOrganizationPopover={isOpenOrganizationPopover}
+      linkToUserProfilePage={linkToUserProfilePage}
     />
   );
 };

diff --git a/app/src/layouts/organizationLayout/organizationSidebar/organizationSidebar.jsx b/app/src/layouts/organizationLayout/organizationSidebar/organizationSidebar.jsx
@@ -18,22 +18,26 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useTracking } from 'react-tracking';
-import { userRolesSelector, urlOrganizationAndProjectSelector } from 'controllers/pages';
+import { userRolesSelector } from 'controllers/pages';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { canSeeMembers } from 'common/utils/permissions';
 import {
   ORGANIZATION_PROJECTS_PAGE,
   ORGANIZATION_MEMBERS_PAGE,
   ORGANIZATION_SETTINGS_PAGE,
   ORGANIZATIONS_PAGE,
+  USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
 } from 'controllers/pages/constants';
 import { uiExtensionSidebarComponentsSelector } from 'controllers/plugins/uiExtensions';
 import { AppSidebar } from 'layouts/common/appSidebar';
 import { ExtensionLoader } from 'components/extensionLoader';
 import MembersIcon from 'common/img/sidebar/members-icon-inline.svg';
 import SettingsIcon from 'common/img/sidebar/settings-icon-inline.svg';
 import ProjectsIcon from 'common/img/sidebar/projects-icon-inline.svg';
-import { activeOrganizationNameSelector } from 'controllers/organizations/organization';
+import {
+  activeOrganizationNameSelector,
+  activeOrganizationSelector,
+} from 'controllers/organizations/organization';
 import { OrganizationsControlWithPopover } from '../../organizationsControl';
 import { messages } from '../../messages';
 
@@ -42,7 +46,7 @@ export const OrganizationSidebar = ({ onClickNavBtn }) => {
   const { formatMessage } = useIntl();
   const userRoles = useSelector(userRolesSelector);
   const sidebarExtensions = useSelector(uiExtensionSidebarComponentsSelector);
-  const { organizationSlug } = useSelector(urlOrganizationAndProjectSelector);
+  const { slug: organizationSlug } = useSelector(activeOrganizationSelector);
   const organizationName = useSelector(activeOrganizationNameSelector);
   const [isOpenOrganizationPopover, setIsOpenOrganizationPopover] = useState(false);
 
@@ -107,6 +111,10 @@ export const OrganizationSidebar = ({ onClickNavBtn }) => {
   };
 
   const link = { type: ORGANIZATIONS_PAGE };
+  const linkToUserProfilePage = {
+    type: USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
+    payload: { organizationSlug },
+  };
   const titles = {
     shortTitle: `${organizationName[0]}${organizationName[organizationName.length - 1]}`,
     topTitle: formatMessage(messages.allOrganizations),
@@ -133,6 +141,7 @@ export const OrganizationSidebar = ({ onClickNavBtn }) => {
       createMainBlock={createMainBlock}
       items={getSidebarItems()}
       isOpenOrganizationPopover={isOpenOrganizationPopover}
+      linkToUserProfilePage={linkToUserProfilePage}
     />
   );
 };

diff --git a/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx b/app/src/layouts/projectLayout/projectSidebar/projectSidebar.jsx
@@ -32,6 +32,7 @@ import {
   PROJECT_SETTINGS_PAGE,
   PROJECT_PLUGIN_PAGE,
   ORGANIZATION_PROJECTS_PAGE,
+  USER_PROFILE_PAGE_PROJECT_LEVEL,
 } from 'controllers/pages/constants';
 import {
   uiExtensionSidebarComponentsSelector,
@@ -148,6 +149,10 @@ export const ProjectSidebar = ({ onClickNavBtn }) => {
   };
 
   const link = { type: ORGANIZATION_PROJECTS_PAGE, payload: { organizationSlug } };
+  const linkToUserProfilePage = {
+    type: USER_PROFILE_PAGE_PROJECT_LEVEL,
+    payload: { organizationSlug, projectSlug },
+  };
   const titles = {
     shortTitle: `${projectName[0]}${projectName[projectName.length - 1]}`,
     topTitle: `${formatMessage(messages.organization)}: ${organizationName}`,
@@ -174,6 +179,7 @@ export const ProjectSidebar = ({ onClickNavBtn }) => {
       createMainBlock={createMainBlock}
       items={getSidebarItems()}
       isOpenOrganizationPopover={isOpenOrganizationPopover}
+      linkToUserProfilePage={linkToUserProfilePage}
     />
   );
 };

diff --git a/app/src/pages/inside/profilePage/profilePage.jsx b/app/src/pages/inside/profilePage/profilePage.jsx
@@ -22,7 +22,14 @@ import classNames from 'classnames/bind';
 import { connect } from 'react-redux';
 import { PageLayout, PageHeader } from 'layouts/pageLayout';
 import { PROFILE_PAGE } from 'components/main/analytics/events';
-import { userProfileRouteSelector, USER_PROFILE_SUB_PAGE } from 'controllers/pages';
+import {
+  userProfileRouteSelector,
+  urlOrganizationSlugSelector,
+  urlProjectSlugSelector,
+  USER_PROFILE_SUB_PAGE,
+  USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_SUB_PAGE_PROJECT_LEVEL,
+} from 'controllers/pages';
 import { allowDeleteAccountSelector } from 'controllers/appInfo/selectors';
 import { NavigationTabs } from 'components/main/navigationTabs';
 import {
@@ -60,35 +67,11 @@ const messages = defineMessages({
   },
 });
 
-const getProfilePageLink = (profileRoute) => ({
-  type: USER_PROFILE_SUB_PAGE,
-  payload: {
-    profileRoute,
-  },
-});
-
-const getNavigationTabsConfig = (formatMessage) => ({
-  [PROJECT_ASSIGNMENT_ROUTE]: {
-    name: formatMessage(messages.profilePageProjectAssignmentTab),
-    link: getProfilePageLink(PROJECT_ASSIGNMENT_ROUTE),
-    component: <AssignedProjectsBlock />,
-  },
-  [API_KEYS_ROUTE]: {
-    name: formatMessage(messages.profilePageProjectApiKeysTab),
-    link: getProfilePageLink(API_KEYS_ROUTE),
-    component: <ApiKeys />,
-    eventInfo: PROFILE_EVENTS.CLICK_API_KEYS_TAB_EVENT,
-  },
-  [CONFIG_EXAMPLES_ROUTE]: {
-    name: formatMessage(messages.profilePageConfigurationExamplesTab),
-    link: getProfilePageLink(CONFIG_EXAMPLES_ROUTE),
-    component: <ConfigExamplesBlock />,
-  },
-});
-
 @connect((state) => ({
   activeTab: userProfileRouteSelector(state),
   allowDeleteAccount: allowDeleteAccountSelector(state),
+  organizationSlug: urlOrganizationSlugSelector(state),
+  projectSlug: urlProjectSlugSelector(state),
 }))
 @injectIntl
 @track({ page: PROFILE_PAGE })
@@ -98,6 +81,8 @@ export class ProfilePage extends Component {
     activeTab: PropTypes.string,
     dispatch: PropTypes.func,
     allowDeleteAccount: PropTypes.bool,
+    organizationSlug: PropTypes.string.isRequired,
+    projectSlug: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -108,6 +93,61 @@ export class ProfilePage extends Component {
 
   getBreadcrumbs = () => [{ title: this.props.intl.formatMessage(messages.profilePageTitle) }];
 
+  getRouteLink = (profileRoute) => {
+    const { organizationSlug, projectSlug } = this.props;
+
+    if (projectSlug && organizationSlug) {
+      return {
+        type: USER_PROFILE_SUB_PAGE_PROJECT_LEVEL,
+        payload: {
+          organizationSlug,
+          projectSlug,
+          profileRoute,
+        },
+      };
+    } else if (organizationSlug) {
+      return {
+        type: USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL,
+        payload: {
+          organizationSlug,
+          profileRoute,
+        },
+      };
+    }
+
+    return {
+      type: USER_PROFILE_SUB_PAGE,
+      payload: {
+        profileRoute,
+      },
+    };
+  };
+
+  getNavigationTabsConfig = () => {
+    const {
+      intl: { formatMessage },
+    } = this.props;
+
+    return {
+      [PROJECT_ASSIGNMENT_ROUTE]: {
+        name: formatMessage(messages.profilePageProjectAssignmentTab),
+        link: this.getRouteLink(PROJECT_ASSIGNMENT_ROUTE),
+        component: <AssignedProjectsBlock />,
+      },
+      [API_KEYS_ROUTE]: {
+        name: formatMessage(messages.profilePageProjectApiKeysTab),
+        link: this.getRouteLink(API_KEYS_ROUTE),
+        component: <ApiKeys />,
+        eventInfo: PROFILE_EVENTS.CLICK_API_KEYS_TAB_EVENT,
+      },
+      [CONFIG_EXAMPLES_ROUTE]: {
+        name: formatMessage(messages.profilePageConfigurationExamplesTab),
+        link: this.getRouteLink(CONFIG_EXAMPLES_ROUTE),
+        component: <ConfigExamplesBlock />,
+      },
+    };
+  };
+
   render = () => (
     <PageLayout>
       <PageHeader breadcrumbs={this.getBreadcrumbs()} />
@@ -116,7 +156,7 @@ export class ProfilePage extends Component {
           <div className={cx('section-wrapper')}>
             <PersonalInfoBlock />
             <NavigationTabs
-              config={getNavigationTabsConfig(this.props.intl.formatMessage)}
+              config={this.getNavigationTabsConfig()}
               activeTab={this.props.activeTab}
               onChangeTab={this.props.dispatch}
             />

diff --git a/app/src/routes/constants.js b/app/src/routes/constants.js
@@ -49,8 +49,13 @@ import {
   PLUGIN_UI_EXTENSION_ADMIN_PAGE,
   PROJECT_PLUGIN_PAGE,
   UNIQUE_ERRORS_PAGE,
-  USER_PROFILE_SUB_PAGE,
   ACCOUNT_REMOVED_PAGE,
+  USER_PROFILE_PAGE,
+  USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_PAGE_PROJECT_LEVEL,
+  USER_PROFILE_SUB_PAGE,
+  USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL,
+  USER_PROFILE_SUB_PAGE_PROJECT_LEVEL,
 } from 'controllers/pages';
 import { AdminUiExtensionPage } from 'pages/instance/adminUiExtensionPage';
 import { AccountRemovedPage } from 'pages/outside/accountRemovedPage';
@@ -75,8 +80,15 @@ export const pageRendering = {
   },
   REGISTRATION_PAGE: { component: RegistrationPage, layout: EmptyLayout, access: ANONYMOUS_ACCESS },
   [OAUTH_SUCCESS]: { component: EmptyLayout, layout: EmptyLayout, access: ANONYMOUS_ACCESS },
-  USER_PROFILE_PAGE: { component: ProfilePage, layout: ProjectLayout },
-  [USER_PROFILE_SUB_PAGE]: { component: ProfilePage, layout: ProjectLayout },
+  [USER_PROFILE_PAGE]: { component: ProfilePage, layout: InstanceLayout },
+  [USER_PROFILE_SUB_PAGE]: { component: ProfilePage, layout: InstanceLayout },
+  [USER_PROFILE_PAGE_ORGANIZATION_LEVEL]: { component: ProfilePage, layout: OrganizationLayout },
+  [USER_PROFILE_SUB_PAGE_ORGANIZATION_LEVEL]: {
+    component: ProfilePage,
+    layout: OrganizationLayout,
+  },
+  [USER_PROFILE_PAGE_PROJECT_LEVEL]: { component: ProfilePage, layout: ProjectLayout },
+  [USER_PROFILE_SUB_PAGE_PROJECT_LEVEL]: { component: ProfilePage, layout: ProjectLayout },
   API_PAGE: { component: ApiPage, layout: ProjectLayout },
   ORGANIZATIONS_PAGE: {
     component: ProjectsPage,