Add routing for workspace settings subtabs (#9054)

* add routing for workspace settings subtabs

* breadcrumb update/style fix

frontend/src/App/App.jsx

@@ -32,6 +32,10 @@ import { getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
 import ErrorPage from '@/_components/ErrorComponents/ErrorPage';
 import WorkspaceConstants from '@/WorkspaceConstants';
 import { useAppDataStore } from '@/_stores/appDataStore';
+import { ManageOrgUsers } from '@/ManageOrgUsers';
+import { ManageGroupPermissions } from '@/ManageGroupPermissions';
+import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
+import { ManageOrgVars } from '@/ManageOrgVars';
 
 const AppWrapper = (props) => {
   return (
@@ -225,7 +229,36 @@ class AppComponent extends React.Component {
                     <OrganizationSettings switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
                   </PrivateRoute>
                 }
-              />
+              >
+                <Route
+                  path="users"
+                  element={
+                    <AdminRoute>
+                      <ManageOrgUsers switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    </AdminRoute>
+                  }
+                />
+                <Route
+                  path="workspace-login"
+                  element={
+                    <AdminRoute>
+                      <OrganizationLogin switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    </AdminRoute>
+                  }
+                />
+                <Route
+                  path="groups"
+                  element={
+                    <AdminRoute>
+                      <ManageGroupPermissions switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
+                    </AdminRoute>
+                  }
+                />
+                <Route
+                  path="workspace-variables"
+                  element={<ManageOrgVars switchDarkMode={this.switchDarkMode} darkMode={darkMode} />}
+                />
+              </Route>
               <Route
                 exact
                 path="/:workspaceId/settings"

frontend/src/OrganizationSettingsPage/index.jsx

@@ -1,35 +1,33 @@
 import React, { useEffect, useState, useContext } from 'react';
 import cx from 'classnames';
-import { useNavigate } from 'react-router-dom';
+import { useParams, Outlet, Link, useNavigate, useLocation } from 'react-router-dom';
+
 import Layout from '@/_ui/Layout';
-import { ManageOrgUsers } from '@/ManageOrgUsers';
-import { ManageGroupPermissions } from '@/ManageGroupPermissions';
-import { ManageOrgVars } from '@/ManageOrgVars';
 import { authenticationService } from '@/_services';
-import { CopilotSetting } from '@/CopilotSettings';
 import { BreadCrumbContext } from '../App/App';
 import FolderList from '@/_ui/FolderList/FolderList';
 import { OrganizationList } from '../_components/OrganizationManager/List';
 import { getWorkspaceId } from '@/_helpers/utils';
-import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
 
 export function OrganizationSettings(props) {
   const [admin, setAdmin] = useState(authenticationService.currentSessionValue?.admin);
   const [selectedTab, setSelectedTab] = useState(admin ? 'Users & permissions' : 'manageEnvVars');
   const navigate = useNavigate();
+  const location = useLocation();
   const { updateSidebarNAV } = useContext(BreadCrumbContext);
+  const { workspaceId } = useParams();
 
   const sideBarNavs = ['Users', 'Groups', 'Workspace login', 'Workspace variables'];
   const defaultOrgName = (groupName) => {
     switch (groupName) {
-      case 'Users':
-        return 'Users & permissions';
-      case 'Groups':
-        return 'manageGroups';
-      case 'Workspace login':
-        return 'manageWorkspaceLogin';
-      case 'Workspace variables':
-        return 'manageEnvVars';
+      case 'users':
+        return 'Users';
+      case 'groups':
+        return 'Groups';
+      case 'workspace-login':
+        return 'Workspace login';
+      case 'workspace-variables':
+        return 'Workspace variables';
       default:
         return groupName;
     }
@@ -43,15 +41,20 @@ export function OrganizationSettings(props) {
     const subscription = authenticationService.currentSession.subscribe((newOrd) => {
       setAdmin(newOrd?.admin);
     });
-    updateSidebarNAV('Users');
+    admin ? updateSidebarNAV('Users') : updateSidebarNAV('Workspace variables');
 
     () => subscription.unsubsciption();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authenticationService.currentSessionValue?.admin]);
-
-  const goTooOrgConstantsDashboard = () => {
-    navigate(`/${getWorkspaceId()}/workspace-constants`);
-  };
+    const selectedTabFromRoute = location.pathname.split('/').pop();
+    if (selectedTabFromRoute === 'workspace-settings') {
+      setSelectedTab(admin ? 'Users' : 'Workspace variables');
+      window.location.href = admin
+        ? `/${workspaceId}/workspace-settings/users`
+        : `/${workspaceId}/workspace-settings/workspace-variables`;
+    } else {
+      setSelectedTab(defaultOrgName(selectedTabFromRoute));
+    }
+    updateSidebarNAV(defaultOrgName(selectedTabFromRoute));
+  }, [navigate, workspaceId, authenticationService.currentSessionValue?.admin]);
 
   return (
     <Layout switchDarkMode={props.switchDarkMode} darkMode={props.darkMode}>
@@ -60,33 +63,46 @@ export function OrganizationSettings(props) {
           <div className="organization-page-sidebar col ">
             <div className="workspace-nav-list-wrap">
               {sideBarNavs.map((item, index) => {
+                const Wrapper = ({ children }) => <>{children}</>;
                 return (
-                  <>
-                    {admin && (
-                      <FolderList
-                        className="workspace-settings-nav-items"
-                        key={index}
-                        onClick={() => {
-                          setSelectedTab(defaultOrgName(item));
-                          if (item == 'Users') updateSidebarNAV('Users');
-                          else updateSidebarNAV(item);
-                        }}
-                        selectedItem={selectedTab == defaultOrgName(item)}
-                        renderBadgeForItems={['Workspace constants']}
-                        renderBadge={() => (
-                          <span
-                            style={{ width: '40px', textTransform: 'lowercase' }}
-                            className="badge bg-color-primary badge-pill"
-                          >
-                            new
-                          </span>
-                        )}
-                        dataCy={item.toLowerCase().replace(/\s+/g, '-')}
-                      >
-                        {item}
-                      </FolderList>
-                    )}
-                  </>
+                  <Wrapper key={index}>
+                    <Link
+                      to={`/${workspaceId}/workspace-settings/${item.toLowerCase().replace(/\s+/g, '-')}`} // Update the URL path here
+                      key={index}
+                      style={{
+                        textDecoration: 'none',
+                        border: 'none',
+                        color: 'inherit',
+                        outline: 'none',
+                        backgroundColor: 'inherit',
+                      }}
+                    >
+                      {admin && (
+                        <FolderList
+                          className="workspace-settings-nav-items"
+                          key={index}
+                          onClick={() => {
+                            setSelectedTab(defaultOrgName(item));
+                            if (item == 'Users') updateSidebarNAV('Users');
+                            else updateSidebarNAV(item);
+                          }}
+                          selectedItem={selectedTab == defaultOrgName(item)}
+                          renderBadgeForItems={['Workspace constants']}
+                          renderBadge={() => (
+                            <span
+                              style={{ width: '40px', textTransform: 'lowercase' }}
+                              className="badge bg-color-primary badge-pill"
+                            >
+                              new
+                            </span>
+                          )}
+                          dataCy={item.toLowerCase().replace(/\s+/g, '-')}
+                        >
+                          {item}
+                        </FolderList>
+                      )}
+                    </Link>
+                  </Wrapper>
                 );
               })}
             </div>
@@ -95,13 +111,7 @@ export function OrganizationSettings(props) {
 
           <div className={cx('col workspace-content-wrapper')} style={{ paddingTop: '40px' }}>
             <div className="w-100">
-              {selectedTab === 'Users & permissions' && <ManageOrgUsers darkMode={props.darkMode} />}
-              {selectedTab === 'manageGroups' && <ManageGroupPermissions darkMode={props.darkMode} />}
-              {selectedTab === 'manageWorkspaceLogin' && <OrganizationLogin />}
-              {selectedTab === 'manageEnvVars' && (
-                <ManageOrgVars darkMode={props.darkMode} goTooOrgConstantsDashboard={goTooOrgConstantsDashboard} />
-              )}
-              {selectedTab === 'manageCopilot' && <CopilotSetting />}
+              <Outlet />
             </div>
           </div>
         </div>

frontend/src/_ui/Breadcrumbs/index.jsx

@@ -18,12 +18,7 @@ export const Breadcrumbs = ({ darkMode, dataCy }) => {
             <div key={breadcrumb.key} className="tj-dashboard-header-title-wrap" data-cy={dataCy ?? ''}>
               <p className=" tj-text-xsm ">{breadcrumb}</p>
               {sidebarNav?.length > 0 && <SolidIcon name="cheveronright" fill={darkMode ? '#FDFDFE' : '#131620'} />}
-              <li className="breadcrumb-item font-weight-500">
-                <Link to={`${breadcrumb.key}${search}`} data-cy="breadcrumb-page-title">
-                  {' '}
-                  {sidebarNav}
-                </Link>
-              </li>
+              <li className="breadcrumb-item font-weight-500"> {sidebarNav}</li>
               {beta && <span className="badge bg-color-primary mx-3">beta</span>}
             </div>
           );

frontend/src/_ui/Header/index.jsx

@@ -16,6 +16,10 @@ function Header({ enableCollapsibleSidebar = false, collapseSidebar = false, tog
       case 'database':
         return 'Database';
       case 'workspace-settings':
+      case 'users':
+      case 'workspace-variables':
+      case 'groups':
+      case 'workspace-login':
         return 'Workspace settings';
       case 'data-sources':
         return 'Data sources';