Skip to content

Commit 1229fda

Browse files
author
Bruno Quaresma
authored
refactor: Clean up routes (coder#5702)
* refactor: Clean up routes * Fix tests
1 parent 67952cf commit 1229fda

7 files changed

Lines changed: 96 additions & 198 deletions

File tree

‎site/src/AppRouter.tsx‎

Lines changed: 35 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -153,22 +153,14 @@ export const AppRouter: FC = () => {
153153
<Route index element={<TemplatesPage />} />
154154
<Route path="new" element={<CreateTemplatePage />} />
155155
<Route path=":template">
156-
<Route
157-
index
158-
element={
159-
<TemplateLayout>
160-
<TemplateSummaryPage />
161-
</TemplateLayout>
162-
}
163-
/>
164-
<Route
165-
path="permissions"
166-
element={
167-
<TemplateLayout>
168-
<TemplatePermissionsPage />
169-
</TemplateLayout>
170-
}
171-
/>
156+
<Route element={<TemplateLayout />}>
157+
<Route index element={<TemplateSummaryPage />} />
158+
<Route
159+
path="permissions"
160+
element={<TemplatePermissionsPage />}
161+
/>
162+
</Route>
163+
172164
<Route path="workspace" element={<CreateWorkspacePage />} />
173165
<Route path="settings" element={<TemplateSettingsPage />} />
174166
<Route path="versions">
@@ -178,26 +170,18 @@ export const AppRouter: FC = () => {
178170
</Route>
179171

180172
<Route path="users">
181-
<Route
182-
index
183-
element={
184-
<UsersLayout>
185-
<UsersPage />
186-
</UsersLayout>
187-
}
188-
/>
173+
<Route element={<UsersLayout />}>
174+
<Route index element={<UsersPage />} />
175+
</Route>
176+
189177
<Route path="create" element={<CreateUserPage />} />
190178
</Route>
191179

192180
<Route path="/groups">
193-
<Route
194-
index
195-
element={
196-
<UsersLayout>
197-
<GroupsPage />
198-
</UsersLayout>
199-
}
200-
/>
181+
<Route element={<UsersLayout />}>
182+
<Route index element={<GroupsPage />} />
183+
</Route>
184+
201185
<Route path="create" element={<CreateGroupPage />} />
202186
<Route path=":groupId" element={<GroupPage />} />
203187
<Route path=":groupId/settings" element={<SettingsGroupPage />} />
@@ -219,118 +203,22 @@ export const AppRouter: FC = () => {
219203
/>
220204
</Route>
221205

222-
<Route path="/settings/deployment">
223-
<Route
224-
path="general"
225-
element={
226-
<RequirePermission
227-
isFeatureVisible={Boolean(
228-
permissions?.viewDeploymentConfig,
229-
)}
230-
>
231-
<DeploySettingsLayout>
232-
<GeneralSettingsPage />
233-
</DeploySettingsLayout>
234-
</RequirePermission>
235-
}
236-
/>
237-
<Route
238-
path="security"
239-
element={
240-
<RequirePermission
241-
isFeatureVisible={Boolean(
242-
permissions?.viewDeploymentConfig,
243-
)}
244-
>
245-
<DeploySettingsLayout>
246-
<SecuritySettingsPage />
247-
</DeploySettingsLayout>
248-
</RequirePermission>
249-
}
250-
/>
251-
<Route
252-
path="appearance"
253-
element={
254-
<RequirePermission
255-
isFeatureVisible={Boolean(
256-
permissions?.viewDeploymentConfig,
257-
)}
258-
>
259-
<DeploySettingsLayout>
260-
<AppearanceSettingsPage />
261-
</DeploySettingsLayout>
262-
</RequirePermission>
263-
}
264-
/>
265-
<Route
266-
path="network"
267-
element={
268-
<RequirePermission
269-
isFeatureVisible={Boolean(
270-
permissions?.viewDeploymentConfig,
271-
)}
272-
>
273-
<DeploySettingsLayout>
274-
<NetworkSettingsPage />
275-
</DeploySettingsLayout>
276-
</RequirePermission>
277-
}
278-
/>
279-
<Route
280-
path="userauth"
281-
element={
282-
<RequirePermission
283-
isFeatureVisible={Boolean(
284-
permissions?.viewDeploymentConfig,
285-
)}
286-
>
287-
<DeploySettingsLayout>
288-
<UserAuthSettingsPage />
289-
</DeploySettingsLayout>
290-
</RequirePermission>
291-
}
292-
/>
293-
<Route
294-
path="gitauth"
295-
element={
296-
<RequirePermission
297-
isFeatureVisible={Boolean(
298-
permissions?.viewDeploymentConfig,
299-
)}
300-
>
301-
<DeploySettingsLayout>
302-
<GitAuthSettingsPage />
303-
</DeploySettingsLayout>
304-
</RequirePermission>
305-
}
306-
/>
206+
<Route
207+
path="/settings/deployment"
208+
element={<DeploySettingsLayout />}
209+
>
210+
<Route path="general" element={<GeneralSettingsPage />} />
211+
<Route path="security" element={<SecuritySettingsPage />} />
212+
<Route path="appearance" element={<AppearanceSettingsPage />} />
213+
<Route path="network" element={<NetworkSettingsPage />} />
214+
<Route path="userauth" element={<UserAuthSettingsPage />} />
215+
<Route path="gitauth" element={<GitAuthSettingsPage />} />
307216
</Route>
308217

309-
<Route path="settings">
310-
<Route
311-
path="account"
312-
element={
313-
<SettingsLayout>
314-
<AccountPage />
315-
</SettingsLayout>
316-
}
317-
/>
318-
<Route
319-
path="security"
320-
element={
321-
<SettingsLayout>
322-
<SecurityPage />
323-
</SettingsLayout>
324-
}
325-
/>
326-
<Route
327-
path="ssh-keys"
328-
element={
329-
<SettingsLayout>
330-
<SSHKeysPage />
331-
</SettingsLayout>
332-
}
333-
/>
218+
<Route path="settings" element={<SettingsLayout />}>
219+
<Route path="account" element={<AccountPage />} />
220+
<Route path="security" element={<SecurityPage />} />
221+
<Route path="ssh-keys" element={<SSHKeysPage />} />
334222
</Route>
335223

336224
<Route path="/@:username">
@@ -349,11 +237,11 @@ export const AppRouter: FC = () => {
349237
</Route>
350238
</Route>
351239

352-
<Route path="/@:username">
353-
<Route path=":workspace">
354-
<Route path="terminal" element={<TerminalPage />} />
355-
</Route>
356-
</Route>
240+
{/* Terminal page don't have the dashboard layout */}
241+
<Route
242+
path="/@:username/:workspace/terminal"
243+
element={<TerminalPage />}
244+
/>
357245
</Route>
358246

359247
{/* Using path="*"" means "match anything", so this route

‎site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import { makeStyles } from "@material-ui/core/styles"
22
import { Margins } from "components/Margins/Margins"
33
import { Stack } from "components/Stack/Stack"
44
import { Sidebar } from "./Sidebar"
5-
import {
6-
createContext,
7-
PropsWithChildren,
8-
Suspense,
9-
useContext,
10-
FC,
11-
} from "react"
5+
import { createContext, Suspense, useContext, FC } from "react"
126
import { useMachine } from "@xstate/react"
137
import { Loader } from "components/Loader/Loader"
148
import { DeploymentConfig } from "api/typesGenerated"
159
import { deploymentConfigMachine } from "xServices/deploymentConfig/deploymentConfigMachine"
10+
import { RequirePermission } from "components/RequirePermission/RequirePermission"
11+
import { usePermissions } from "hooks/usePermissions"
12+
import { Outlet } from "react-router-dom"
1613

1714
type DeploySettingsContextValue = { deploymentConfig: DeploymentConfig }
1815

@@ -30,28 +27,33 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
3027
return context
3128
}
3229

33-
export const DeploySettingsLayout: FC<PropsWithChildren> = ({ children }) => {
30+
export const DeploySettingsLayout: FC = () => {
3431
const [state] = useMachine(deploymentConfigMachine)
3532
const styles = useStyles()
3633
const { deploymentConfig } = state.context
34+
const permissions = usePermissions()
3735

3836
return (
39-
<Margins>
40-
<Stack className={styles.wrapper} direction="row" spacing={6}>
41-
<Sidebar />
42-
<main className={styles.content}>
43-
{deploymentConfig ? (
44-
<DeploySettingsContext.Provider
45-
value={{ deploymentConfig: deploymentConfig }}
46-
>
47-
<Suspense fallback={<Loader />}>{children}</Suspense>
48-
</DeploySettingsContext.Provider>
49-
) : (
50-
<Loader />
51-
)}
52-
</main>
53-
</Stack>
54-
</Margins>
37+
<RequirePermission isFeatureVisible={permissions.viewDeploymentConfig}>
38+
<Margins>
39+
<Stack className={styles.wrapper} direction="row" spacing={6}>
40+
<Sidebar />
41+
<main className={styles.content}>
42+
{deploymentConfig ? (
43+
<DeploySettingsContext.Provider
44+
value={{ deploymentConfig: deploymentConfig }}
45+
>
46+
<Suspense fallback={<Loader />}>
47+
<Outlet />
48+
</Suspense>
49+
</DeploySettingsContext.Provider>
50+
) : (
51+
<Loader />
52+
)}
53+
</main>
54+
</Stack>
55+
</Margins>
56+
</RequirePermission>
5557
)
5658
}
5759

‎site/src/components/DeploySettingsLayout/Sidebar.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,37 +43,34 @@ export const Sidebar: React.FC = () => {
4343
return (
4444
<nav className={styles.sidebar}>
4545
<SidebarNavItem
46-
href="../general"
46+
href="general"
4747
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
4848
>
4949
General
5050
</SidebarNavItem>
5151
<SidebarNavItem
52-
href="../appearance"
52+
href="appearance"
5353
icon={<SidebarNavItemIcon icon={Brush} />}
5454
>
5555
Appearance
5656
</SidebarNavItem>
5757
<SidebarNavItem
58-
href="../userauth"
58+
href="userauth"
5959
icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
6060
>
6161
User Authentication
6262
</SidebarNavItem>
6363
<SidebarNavItem
64-
href="../gitauth"
64+
href="gitauth"
6565
icon={<SidebarNavItemIcon icon={GitIcon} />}
6666
>
6767
Git Authentication
6868
</SidebarNavItem>
69-
<SidebarNavItem
70-
href="../network"
71-
icon={<SidebarNavItemIcon icon={Globe} />}
72-
>
69+
<SidebarNavItem href="network" icon={<SidebarNavItemIcon icon={Globe} />}>
7370
Network
7471
</SidebarNavItem>
7572
<SidebarNavItem
76-
href="../security"
73+
href="security"
7774
icon={<SidebarNavItemIcon icon={LockRounded} />}
7875
>
7976
Security

‎site/src/components/SettingsLayout/SettingsLayout.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { Sidebar } from "./Sidebar"
33
import { Stack } from "components/Stack/Stack"
4-
import { FC, PropsWithChildren, Suspense } from "react"
4+
import { FC, Suspense } from "react"
55
import { Helmet } from "react-helmet-async"
66
import { pageTitle } from "../../util/page"
77
import { Margins } from "../Margins/Margins"
88
import { useMe } from "hooks/useMe"
99
import { Loader } from "components/Loader/Loader"
10+
import { Outlet } from "react-router-dom"
1011

11-
export const SettingsLayout: FC<PropsWithChildren> = ({ children }) => {
12+
export const SettingsLayout: FC = () => {
1213
const styles = useStyles()
1314
const me = useMe()
1415

@@ -22,7 +23,9 @@ export const SettingsLayout: FC<PropsWithChildren> = ({ children }) => {
2223
<Stack className={styles.wrapper} direction="row" spacing={6}>
2324
<Sidebar user={me} />
2425
<Suspense fallback={<Loader />}>
25-
<main className={styles.content}>{children}</main>
26+
<main className={styles.content}>
27+
<Outlet />
28+
</main>
2629
</Suspense>
2730
</Stack>
2831
</Margins>

‎site/src/components/SettingsLayout/Sidebar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,19 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
5252
</Stack>
5353

5454
<SidebarNavItem
55-
href="../account"
55+
href="account"
5656
icon={<SidebarNavItemIcon icon={AccountIcon} />}
5757
>
5858
Account
5959
</SidebarNavItem>
6060
<SidebarNavItem
61-
href="../security"
61+
href="security"
6262
icon={<SidebarNavItemIcon icon={SecurityIcon} />}
6363
>
6464
Security
6565
</SidebarNavItem>
6666
<SidebarNavItem
67-
href="../ssh-keys"
67+
href="ssh-keys"
6868
icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
6969
>
7070
SSH Keys

0 commit comments

Comments
 (0)