diff --git a/frontend/src/OrganizationSettingsPage/constant.js b/frontend/src/OrganizationSettingsPage/constant.js new file mode 100644 index 0000000000..4a5153a41a --- /dev/null +++ b/frontend/src/OrganizationSettingsPage/constant.js @@ -0,0 +1,6 @@ +export const workspaceSettingsLinks = [ + { id: 'users', name: 'Users', route: 'users', conditions: ['admin'] }, + { id: 'groups', name: 'Groups', route: 'groups', conditions: ['admin'] }, + { id: 'workspacelogin', name: 'Workspace login', route: 'workspace-login', conditions: ['admin'] }, + { id: 'workspacevariables', name: 'Workspace variables', route: 'workspace-variables', conditions: ['admin'] }, +]; diff --git a/frontend/src/OrganizationSettingsPage/index.jsx b/frontend/src/OrganizationSettingsPage/index.jsx index 32094dbee4..b79cdad83d 100644 --- a/frontend/src/OrganizationSettingsPage/index.jsx +++ b/frontend/src/OrganizationSettingsPage/index.jsx @@ -1,57 +1,59 @@ import React, { useEffect, useState, useContext } from 'react'; import cx from 'classnames'; -import { useParams, Outlet, Link, useNavigate, useLocation } from 'react-router-dom'; +import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom'; import Layout from '@/_ui/Layout'; import { authenticationService } from '@/_services'; import { BreadCrumbContext } from '../App/App'; import FolderList from '@/_ui/FolderList/FolderList'; import { OrganizationList } from '../_components/OrganizationManager/List'; -import { getWorkspaceId } from '@/_helpers/utils'; -import { getSubpath } from '@/_helpers/routes'; +import { workspaceSettingsLinks } from './constant'; export function OrganizationSettings(props) { - const [admin, setAdmin] = useState(authenticationService.currentSessionValue?.admin); - const [selectedTab, setSelectedTab] = useState(admin ? 'Users & permissions' : 'manageEnvVars'); + const admin = authenticationService.currentSessionValue?.admin; + const [selectedTab, setSelectedTab] = useState(admin ? workspaceSettingsLinks[0].id : 'workspacevariables'); const navigate = useNavigate(); const location = useLocation(); const { updateSidebarNAV } = useContext(BreadCrumbContext); - const { workspaceId } = useParams(); + const [conditionObj, setConditionObj] = useState({ admin: authenticationService.currentSessionValue?.admin }); - const sideBarNavs = ['Users', 'Groups', 'Workspace login', 'Workspace variables']; - const defaultOrgName = (groupName) => { - switch (groupName) { - case 'users': - return 'Users'; - case 'groups': - return 'Groups'; - case 'workspace-login': - return 'Workspace login'; - case 'workspace-variables': - return 'Workspace variables'; - default: - return groupName; + const checkConditions = (conditions, conditionsObj) => { + if (!conditions || conditions.length === 0) { + return true; } + return conditions.every((condition) => conditionsObj?.[condition] === true); + }; + + //Filtered Links from the workspace settings links array + const filteredLinks = () => + workspaceSettingsLinks.filter((item) => { + return checkConditions(item.conditions, conditionObj); + }); + + const getMenuFromRoute = (route) => { + return workspaceSettingsLinks?.find((e) => e.route === route) || {}; }; useEffect(() => { const subscription = authenticationService.currentSession.subscribe((newOrd) => { - setAdmin(newOrd?.admin); + setConditionObj({ admin: newOrd?.admin }); }); - admin ? updateSidebarNAV('Users') : updateSidebarNAV('Workspace variables'); - - () => subscription.unsubsciption(); const selectedTabFromRoute = location.pathname.split('/').pop(); if (selectedTabFromRoute === 'workspace-settings') { - setSelectedTab(admin ? 'Users' : 'Workspace variables'); - const subPath = getSubpath(); - const path = subPath ? `${subPath}/${workspaceId}/workspace-settings` : `/${workspaceId}/workspace-settings`; - window.location.href = admin ? `${path}/users` : `${path}/workspace-variables`; + // No Sub routes added loading first one + setSelectedTab(admin ? workspaceSettingsLinks[0].id : 'workspacevariables'); } else { - setSelectedTab(defaultOrgName(selectedTabFromRoute)); + setSelectedTab(getMenuFromRoute(selectedTabFromRoute)?.id); } - updateSidebarNAV(defaultOrgName(selectedTabFromRoute)); - }, [navigate, workspaceId, authenticationService.currentSessionValue?.admin]); + + return () => subscription.unsubscribe(); + }, [authenticationService.currentSessionValue?.admin]); + + useEffect(() => { + const menu = workspaceSettingsLinks?.find((m) => m.id === selectedTab); + updateSidebarNAV(menu?.name || ''); + navigate(menu?.route || ''); + }, [selectedTab]); return ( @@ -59,12 +61,11 @@ export function OrganizationSettings(props) {
- {sideBarNavs.map((item, index) => { + {filteredLinks().map((item, index) => { const Wrapper = ({ children }) => <>{children}; return ( - {admin && ( - { - setSelectedTab(defaultOrgName(item)); - if (item == 'Users') updateSidebarNAV('Users'); - else updateSidebarNAV(item); - }} - selectedItem={selectedTab == defaultOrgName(item)} - renderBadgeForItems={['Workspace constants']} - renderBadge={() => ( - - new - - )} - dataCy={item.toLowerCase().replace(/\s+/g, '-')} - > - {item} - - )} + { + setSelectedTab(item.id); + }} + selectedItem={selectedTab == item.id} + renderBadgeForItems={[]} + renderBadge={() => ( + + new + + )} + dataCy={item.name.toLowerCase().replace(/\s+/g, '-')} + > + {item.name} + );