Skip to content

Commit f624e98

Browse files
AnantshreeChandolaAnantshreeChandola
authored
Add routing for workspace settings subtabs (ToolJet#9054)
* add routing for workspace settings subtabs * breadcrumb update/style fix
1 parent 89a7bf9 commit f624e98

4 files changed

Lines changed: 103 additions & 61 deletions

File tree

‎frontend/src/App/App.jsx‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ import { getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
3232
import ErrorPage from '@/_components/ErrorComponents/ErrorPage';
3333
import WorkspaceConstants from '@/WorkspaceConstants';
3434
import { useAppDataStore } from '@/_stores/appDataStore';
35+
import { ManageOrgUsers } from '@/ManageOrgUsers';
36+
import { ManageGroupPermissions } from '@/ManageGroupPermissions';
37+
import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
38+
import { ManageOrgVars } from '@/ManageOrgVars';
3539

3640
const AppWrapper = (props) => {
3741
return (
@@ -225,7 +229,36 @@ class AppComponent extends React.Component {
225229
<OrganizationSettings switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
226230
</PrivateRoute>
227231
}
228-
/>
232+
>
233+
<Route
234+
path="users"
235+
element={
236+
<AdminRoute>
237+
<ManageOrgUsers switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
238+
</AdminRoute>
239+
}
240+
/>
241+
<Route
242+
path="workspace-login"
243+
element={
244+
<AdminRoute>
245+
<OrganizationLogin switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
246+
</AdminRoute>
247+
}
248+
/>
249+
<Route
250+
path="groups"
251+
element={
252+
<AdminRoute>
253+
<ManageGroupPermissions switchDarkMode={this.switchDarkMode} darkMode={darkMode} />
254+
</AdminRoute>
255+
}
256+
/>
257+
<Route
258+
path="workspace-variables"
259+
element={<ManageOrgVars switchDarkMode={this.switchDarkMode} darkMode={darkMode} />}
260+
/>
261+
</Route>
229262
<Route
230263
exact
231264
path="/:workspaceId/settings"

‎frontend/src/OrganizationSettingsPage/index.jsx‎

Lines changed: 64 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,33 @@
11
import React, { useEffect, useState, useContext } from 'react';
22
import cx from 'classnames';
3-
import { useNavigate } from 'react-router-dom';
3+
import { useParams, Outlet, Link, useNavigate, useLocation } from 'react-router-dom';
4+
45
import Layout from '@/_ui/Layout';
5-
import { ManageOrgUsers } from '@/ManageOrgUsers';
6-
import { ManageGroupPermissions } from '@/ManageGroupPermissions';
7-
import { ManageOrgVars } from '@/ManageOrgVars';
86
import { authenticationService } from '@/_services';
9-
import { CopilotSetting } from '@/CopilotSettings';
107
import { BreadCrumbContext } from '../App/App';
118
import FolderList from '@/_ui/FolderList/FolderList';
129
import { OrganizationList } from '../_components/OrganizationManager/List';
1310
import { getWorkspaceId } from '@/_helpers/utils';
14-
import OrganizationLogin from '@/_components/OrganizationLogin/OrganizationLogin';
1511

1612
export function OrganizationSettings(props) {
1713
const [admin, setAdmin] = useState(authenticationService.currentSessionValue?.admin);
1814
const [selectedTab, setSelectedTab] = useState(admin ? 'Users & permissions' : 'manageEnvVars');
1915
const navigate = useNavigate();
16+
const location = useLocation();
2017
const { updateSidebarNAV } = useContext(BreadCrumbContext);
18+
const { workspaceId } = useParams();
2119

2220
const sideBarNavs = ['Users', 'Groups', 'Workspace login', 'Workspace variables'];
2321
const defaultOrgName = (groupName) => {
2422
switch (groupName) {
25-
case 'Users':
26-
return 'Users & permissions';
27-
case 'Groups':
28-
return 'manageGroups';
29-
case 'Workspace login':
30-
return 'manageWorkspaceLogin';
31-
case 'Workspace variables':
32-
return 'manageEnvVars';
23+
case 'users':
24+
return 'Users';
25+
case 'groups':
26+
return 'Groups';
27+
case 'workspace-login':
28+
return 'Workspace login';
29+
case 'workspace-variables':
30+
return 'Workspace variables';
3331
default:
3432
return groupName;
3533
}
@@ -43,15 +41,20 @@ export function OrganizationSettings(props) {
4341
const subscription = authenticationService.currentSession.subscribe((newOrd) => {
4442
setAdmin(newOrd?.admin);
4543
});
46-
updateSidebarNAV('Users');
44+
admin ? updateSidebarNAV('Users') : updateSidebarNAV('Workspace variables');
4745

4846
() => subscription.unsubsciption();
49-
// eslint-disable-next-line react-hooks/exhaustive-deps
50-
}, [authenticationService.currentSessionValue?.admin]);
51-
52-
const goTooOrgConstantsDashboard = () => {
53-
navigate(`/${getWorkspaceId()}/workspace-constants`);
54-
};
47+
const selectedTabFromRoute = location.pathname.split('/').pop();
48+
if (selectedTabFromRoute === 'workspace-settings') {
49+
setSelectedTab(admin ? 'Users' : 'Workspace variables');
50+
window.location.href = admin
51+
? `/${workspaceId}/workspace-settings/users`
52+
: `/${workspaceId}/workspace-settings/workspace-variables`;
53+
} else {
54+
setSelectedTab(defaultOrgName(selectedTabFromRoute));
55+
}
56+
updateSidebarNAV(defaultOrgName(selectedTabFromRoute));
57+
}, [navigate, workspaceId, authenticationService.currentSessionValue?.admin]);
5558

5659
return (
5760
<Layout switchDarkMode={props.switchDarkMode} darkMode={props.darkMode}>
@@ -60,33 +63,46 @@ export function OrganizationSettings(props) {
6063
<div className="organization-page-sidebar col ">
6164
<div className="workspace-nav-list-wrap">
6265
{sideBarNavs.map((item, index) => {
66+
const Wrapper = ({ children }) => <>{children}</>;
6367
return (
64-
<>
65-
{admin && (
66-
<FolderList
67-
className="workspace-settings-nav-items"
68-
key={index}
69-
onClick={() => {
70-
setSelectedTab(defaultOrgName(item));
71-
if (item == 'Users') updateSidebarNAV('Users');
72-
else updateSidebarNAV(item);
73-
}}
74-
selectedItem={selectedTab == defaultOrgName(item)}
75-
renderBadgeForItems={['Workspace constants']}
76-
renderBadge={() => (
77-
<span
78-
style={{ width: '40px', textTransform: 'lowercase' }}
79-
className="badge bg-color-primary badge-pill"
80-
>
81-
new
82-
</span>
83-
)}
84-
dataCy={item.toLowerCase().replace(/\s+/g, '-')}
85-
>
86-
{item}
87-
</FolderList>
88-
)}
89-
</>
68+
<Wrapper key={index}>
69+
<Link
70+
to={`/${workspaceId}/workspace-settings/${item.toLowerCase().replace(/\s+/g, '-')}`} // Update the URL path here
71+
key={index}
72+
style={{
73+
textDecoration: 'none',
74+
border: 'none',
75+
color: 'inherit',
76+
outline: 'none',
77+
backgroundColor: 'inherit',
78+
}}
79+
>
80+
{admin && (
81+
<FolderList
82+
className="workspace-settings-nav-items"
83+
key={index}
84+
onClick={() => {
85+
setSelectedTab(defaultOrgName(item));
86+
if (item == 'Users') updateSidebarNAV('Users');
87+
else updateSidebarNAV(item);
88+
}}
89+
selectedItem={selectedTab == defaultOrgName(item)}
90+
renderBadgeForItems={['Workspace constants']}
91+
renderBadge={() => (
92+
<span
93+
style={{ width: '40px', textTransform: 'lowercase' }}
94+
className="badge bg-color-primary badge-pill"
95+
>
96+
new
97+
</span>
98+
)}
99+
dataCy={item.toLowerCase().replace(/\s+/g, '-')}
100+
>
101+
{item}
102+
</FolderList>
103+
)}
104+
</Link>
105+
</Wrapper>
90106
);
91107
})}
92108
</div>
@@ -95,13 +111,7 @@ export function OrganizationSettings(props) {
95111

96112
<div className={cx('col workspace-content-wrapper')} style={{ paddingTop: '40px' }}>
97113
<div className="w-100">
98-
{selectedTab === 'Users & permissions' && <ManageOrgUsers darkMode={props.darkMode} />}
99-
{selectedTab === 'manageGroups' && <ManageGroupPermissions darkMode={props.darkMode} />}
100-
{selectedTab === 'manageWorkspaceLogin' && <OrganizationLogin />}
101-
{selectedTab === 'manageEnvVars' && (
102-
<ManageOrgVars darkMode={props.darkMode} goTooOrgConstantsDashboard={goTooOrgConstantsDashboard} />
103-
)}
104-
{selectedTab === 'manageCopilot' && <CopilotSetting />}
114+
<Outlet />
105115
</div>
106116
</div>
107117
</div>

‎frontend/src/_ui/Breadcrumbs/index.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,7 @@ export const Breadcrumbs = ({ darkMode, dataCy }) => {
1818
<div key={breadcrumb.key} className="tj-dashboard-header-title-wrap" data-cy={dataCy ?? ''}>
1919
<p className=" tj-text-xsm ">{breadcrumb}</p>
2020
{sidebarNav?.length > 0 && <SolidIcon name="cheveronright" fill={darkMode ? '#FDFDFE' : '#131620'} />}
21-
<li className="breadcrumb-item font-weight-500">
22-
<Link to={`${breadcrumb.key}${search}`} data-cy="breadcrumb-page-title">
23-
{' '}
24-
{sidebarNav}
25-
</Link>
26-
</li>
21+
<li className="breadcrumb-item font-weight-500"> {sidebarNav}</li>
2722
{beta && <span className="badge bg-color-primary mx-3">beta</span>}
2823
</div>
2924
);

‎frontend/src/_ui/Header/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ function Header({ enableCollapsibleSidebar = false, collapseSidebar = false, tog
1616
case 'database':
1717
return 'Database';
1818
case 'workspace-settings':
19+
case 'users':
20+
case 'workspace-variables':
21+
case 'groups':
22+
case 'workspace-login':
1923
return 'Workspace settings';
2024
case 'data-sources':
2125
return 'Data sources';

0 commit comments

Comments
 (0)