Updated nav links for workspace settings (#10556)

* updated nav links for workspace settings

* review changes

* changes

* fix

---------

Co-authored-by: gsmithun4 <gsmithun4@gmail.com>

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'] },
+];

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 { workspaceSettingsLinks } from './constant';
-import { getSubpath } from '@/_helpers/routes';
 
 export function OrganizationSettings(props) {
-  const [admin, setAdmin] = useState(authenticationService.currentSessionValue?.admin);
+  const admin = authenticationService.currentSessionValue?.admin;
-  const [selectedTab, setSelectedTab] = useState(admin ? 'Users & permissions' : 'manageEnvVars');
+  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 checkConditions = (conditions, conditionsObj) => {
-  const defaultOrgName = (groupName) => {
+    if (!conditions || conditions.length === 0) {
-    switch (groupName) {
+      return true;
-      case 'users':
-        return 'Users';
-      case 'groups':
-        return 'Groups';
-      case 'workspace-login':
-        return 'Workspace login';
-      case 'workspace-variables':
-        return 'Workspace variables';
-      default:
-        return groupName;
     }
+    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');
+      // No Sub routes added loading first one
-      const subPath = getSubpath();
+      setSelectedTab(admin ? workspaceSettingsLinks[0].id : 'workspacevariables');
-      const path = subPath ? `${subPath}/${workspaceId}/workspace-settings` : `/${workspaceId}/workspace-settings`;
-      window.location.href = admin ? `${path}/users` : `${path}/workspace-variables`;
     } 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 (
     <Layout switchDarkMode={props.switchDarkMode} darkMode={props.darkMode}>
@@ -59,12 +61,11 @@ export function OrganizationSettings(props) {
         <div className="row gx-0">
           <div className="organization-page-sidebar col ">
             <div className="workspace-nav-list-wrap">
-              {sideBarNavs.map((item, index) => {
+              {filteredLinks().map((item, index) => {
                 const Wrapper = ({ children }) => <>{children}</>;
                 return (
                   <Wrapper key={index}>
                     <Link
-                      to={`/${workspaceId}/workspace-settings/${item.toLowerCase().replace(/\s+/g, '-')}`} // Update the URL path here
                       key={index}
                       style={{
                         textDecoration: 'none',
@@ -74,30 +75,26 @@ export function OrganizationSettings(props) {
                         backgroundColor: 'inherit',
                       }}
                     >
-                      {admin && (
+                      <FolderList
-                        <FolderList
+                        className="workspace-settings-nav-items"
-                          className="workspace-settings-nav-items"
+                        key={index}
-                          key={index}
+                        onClick={() => {
-                          onClick={() => {
+                          setSelectedTab(item.id);
-                            setSelectedTab(defaultOrgName(item));
+                        }}
-                            if (item == 'Users') updateSidebarNAV('Users');
+                        selectedItem={selectedTab == item.id}
-                            else updateSidebarNAV(item);
+                        renderBadgeForItems={[]}
-                          }}
+                        renderBadge={() => (
-                          selectedItem={selectedTab == defaultOrgName(item)}
+                          <span
-                          renderBadgeForItems={['Workspace constants']}
+                            style={{ width: '40px', textTransform: 'lowercase' }}
-                          renderBadge={() => (
+                            className="badge bg-color-primary badge-pill"
-                            <span
+                          >
-                              style={{ width: '40px', textTransform: 'lowercase' }}
+                            new
-                              className="badge bg-color-primary badge-pill"
+                          </span>
-                            >
+                        )}
-                              new
+                        dataCy={item.name.toLowerCase().replace(/\s+/g, '-')}
-                            </span>
+                      >
-                          )}
+                        {item.name}
-                          dataCy={item.toLowerCase().replace(/\s+/g, '-')}
+                      </FolderList>
-                        >
-                          {item}
-                        </FolderList>
-                      )}
                     </Link>
                   </Wrapper>
                 );