Skip to content

Commit 1d799e1

Browse files
sknepsknep
committed
fix: page titles, routes, and sidenav consistency
1 parent 39f353c commit 1d799e1

File tree

4 files changed

+115
-91
lines changed

4 files changed

+115
-91
lines changed

‎frontend/pages/sites/$siteId/SideNav.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ const SideNav = ({ config, siteId }) => (
2323
// eslint-disable-next-line import/namespace
2424
const IconComponent = icons[conf.icon];
2525
return (
26-
<li className="margin-y-2" key={conf.route}>
26+
<li className="margin-y-2" key={conf.path}>
2727
<Link
2828
className="display-flex flex-align-center"
29-
to={`/sites/${siteId}/${conf.route}`}
29+
to={`/sites/${siteId}/${conf.path}`}
3030
>
3131
<IconComponent />{' '}
3232
<span className="flex-fill margin-left-1 text-no-underline">
33-
{conf.display}
33+
{conf.title}
3434
</span>
3535
</Link>
3636
</li>
@@ -43,8 +43,8 @@ const SideNav = ({ config, siteId }) => (
4343
SideNav.propTypes = {
4444
config: PropTypes.arrayOf(
4545
PropTypes.shape({
46-
display: PropTypes.string.isRequired,
47-
route: PropTypes.string.isRequired,
46+
title: PropTypes.string.isRequired,
47+
path: PropTypes.string.isRequired,
4848
icon: PropTypes.string.isRequired,
4949
}),
5050
).isRequired,

‎frontend/pages/sites/$siteId/index.jsx

Lines changed: 17 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,33 @@
11
import React from 'react';
22
import { useSelector } from 'react-redux';
3-
import { useParams, useLocation, useSearchParams, Outlet } from 'react-router-dom';
3+
import {
4+
matchPath,
5+
useParams,
6+
useLocation,
7+
useSearchParams,
8+
Outlet,
9+
} from 'react-router-dom';
410

511
import { currentSite } from '@selectors/site';
612
import { getOrgById } from '@selectors/organization';
713
import AlertBanner from '@shared/alertBanner';
814
import LoadingIndicator from '@shared/LoadingIndicator';
15+
import siteRoutes from './siteRoutes';
916

1017
import SideNav from './SideNav';
1118
import PagesHeader from './PagesHeader';
1219

13-
export const SITE_NAVIGATION_CONFIG = [
14-
{
15-
display: 'Custom Domains',
16-
route: 'custom-domains',
17-
icon: 'IconLink',
18-
},
19-
{
20-
display: 'Build history',
21-
route: 'builds',
22-
icon: 'IconBook',
23-
},
24-
{
25-
display: 'Report history',
26-
route: 'reports',
27-
icon: 'IconReport',
28-
},
29-
{
30-
display: 'Site settings',
31-
route: 'settings',
32-
icon: 'IconGear',
33-
},
34-
{
35-
display: 'Published builds',
36-
route: 'published',
37-
icon: 'IconCloudUpload',
38-
},
39-
];
20+
export const SITE_NAVIGATION_CONFIG = siteRoutes.filter((route) => route.showInSidebar);
4021

41-
{
42-
process.env.FEATURE_FILE_STORAGE_SERVICE === 'true' &&
43-
SITE_NAVIGATION_CONFIG.push({
44-
display: 'Public storage',
45-
route: 'storage',
46-
icon: 'IconAttachment',
47-
});
48-
}
49-
50-
export const SITE_TITLE_CONFIG = [
51-
...SITE_NAVIGATION_CONFIG,
52-
{
53-
display: 'Reports for build #',
54-
route: 'reports',
55-
},
56-
{
57-
display: 'Logs for build #',
58-
route: 'logs',
59-
},
60-
];
61-
62-
function getPageTitle(pathname, buildId = null) {
63-
const route = pathname.split('/').pop();
64-
const routeConf = SITE_TITLE_CONFIG.find((conf) => conf.route === route);
65-
if (routeConf) {
22+
function getPageTitle(location, buildId = null) {
23+
const matchingRoute = SITE_NAVIGATION_CONFIG.find((route) =>
24+
matchPath('sites/:id/' + route.path, location.pathname),
25+
);
26+
if (matchingRoute) {
6627
if (buildId) {
67-
return routeConf.display + buildId;
28+
return matchingRoute.title + buildId;
6829
}
69-
return routeConf.display;
30+
return matchingRoute.title;
7031
}
7132
return '';
7233
}
@@ -120,7 +81,7 @@ export function SiteContainer() {
12081
return <AlertBanner status="error" header="" message={errorMessage} />;
12182
}
12283

123-
const pageTitle = getPageTitle(location.pathname, buildId);
84+
const pageTitle = getPageTitle(location, buildId);
12485
const navConig = SITE_NAVIGATION_CONFIG.filter(
12586
(navItem) => !(navItem.route === 'reports' && site.SiteBuildTasks.length === 0),
12687
);

‎frontend/pages/sites/$siteId/siteRoutes.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import SiteSettings from '@pages/sites/$siteId/settings';
2+
import SiteBuildList from '@pages/sites/$siteId/builds';
3+
import BuildLogs from '@pages/sites/$siteId/builds/$buildId/logs';
4+
import PublishedBranchesTable from '@pages/sites/$siteId/published';
5+
import PublishedFilesTable from '@pages/sites/$siteId/published/$name';
6+
import DomainList from '@pages/sites/$siteId/custom-domains';
7+
import NewCustomDomain from '@pages/sites/$siteId/custom-domains/new';
8+
import EditCustomDomain from '@pages/sites/$siteId/custom-domains/$domainId/edit';
9+
import Reports from '@pages/sites/$siteId/reports';
10+
import FileStorage from '@pages/sites/$siteId/storage';
11+
import FileStorageLog from '@pages/sites/$siteId/storage/logs';
12+
export default [
13+
{
14+
Component: DomainList,
15+
title: 'Custom Domains',
16+
path: 'custom-domains',
17+
icon: 'IconLink',
18+
showInSidebar: true,
19+
},
20+
{
21+
Component: NewCustomDomain,
22+
title: 'New Custom Domain',
23+
path: 'custom-domains/new',
24+
},
25+
{
26+
Component: EditCustomDomain,
27+
title: 'Edit custom domain',
28+
path: 'custom-domains/:domainId/edit',
29+
},
30+
{
31+
Component: SiteBuildList,
32+
title: 'Build history',
33+
path: 'builds',
34+
icon: 'IconBook',
35+
showInSidebar: true,
36+
},
37+
{
38+
Component: BuildLogs,
39+
title: 'Logs for build #',
40+
path: 'builds/:buildId/logs',
41+
},
42+
...(process.env.FEATURE_BUILD_TASKS
43+
? [
44+
{
45+
Component: Reports,
46+
title: 'Report history',
47+
path: 'reports',
48+
icon: 'IconReport',
49+
showInSidebar: true,
50+
},
51+
]
52+
: []),
53+
{
54+
Component: SiteSettings,
55+
title: 'Site settings',
56+
path: 'settings',
57+
icon: 'IconGear',
58+
showInSidebar: true,
59+
},
60+
61+
...(process.env.FEATURE_FILE_STORAGE_SERVICE
62+
? [
63+
{
64+
Component: FileStorage,
65+
title: 'Public storage',
66+
path: 'storage',
67+
icon: 'IconAttachment',
68+
showInSidebar: true,
69+
},
70+
{
71+
Component: FileStorageLog,
72+
title: 'Public storage',
73+
path: 'storage/logs',
74+
},
75+
]
76+
: []),
77+
{
78+
Component: PublishedBranchesTable,
79+
title: 'Published builds',
80+
path: 'published',
81+
icon: 'IconCloudUpload',
82+
showInSidebar: true,
83+
},
84+
{
85+
Component: PublishedFilesTable,
86+
title: 'Published build',
87+
path: 'published/:name',
88+
},
89+
];

‎frontend/routes.js

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,11 @@ import OrganizationEdit from '@pages/organizations/edit';
88
import Sites from '@pages/sites';
99
import AddSite from '@pages/sites/new';
1010
import SiteContainer from '@pages/sites/$siteId';
11-
import SiteSettings from '@pages/sites/$siteId/settings';
12-
import SiteBuildList from '@pages/sites/$siteId/builds';
13-
import BuildLogs from '@pages/sites/$siteId/builds/$buildId/logs';
14-
import PublishedBranchesTable from '@pages/sites/$siteId/published';
15-
import PublishedFilesTable from '@pages/sites/$siteId/published/$name';
16-
import DomainList from '@pages/sites/$siteId/custom-domains';
17-
import NewCustomDomain from '@pages/sites/$siteId/custom-domains/new';
18-
import EditCustomDomain from '@pages/sites/$siteId/custom-domains/$domainId/edit';
19-
import Reports from '@pages/sites/$siteId/reports';
20-
import FileStorage from '@pages/sites/$siteId/storage';
21-
import FileStorageLog from '@pages/sites/$siteId/storage/logs';
2211
import Settings from '@pages/settings';
2312
import NotFound from '@pages/NotFound';
2413
import ErrorMessage from '@pages/ErrorMessage';
2514

15+
import siteRoutes from '@pages/sites/$siteId/siteRoutes';
2616
import siteActions from './actions/siteActions';
2717
import userActions from './actions/userActions';
2818
import organizationActions from './actions/organizationActions';
@@ -38,7 +28,6 @@ const fetchInitialData = () => {
3828
siteActions.fetchSites();
3929
organizationActions.fetchOrganizations();
4030
};
41-
4231
export default (
4332
<Route
4433
path="/"
@@ -51,24 +40,9 @@ export default (
5140
<Route path="sites/new" element={<AddSite />} />
5241
<Route path="sites/:id" element={<SiteContainer />}>
5342
<Route path="" loader={() => redirect('builds')} />
54-
<Route path="settings" element={<SiteSettings />} />
55-
<Route path="published" element={<PublishedBranchesTable />} />
56-
<Route path="published/:name" element={<PublishedFilesTable />} />
57-
<Route path="builds" element={<SiteBuildList />} />
58-
<Route path="custom-domains" element={<DomainList />} />
59-
<Route path="custom-domains/new" element={<NewCustomDomain />} />
60-
<Route path="custom-domains/:domainId/edit" element={<EditCustomDomain />} />
61-
{process.env.FEATURE_FILE_STORAGE_SERVICE === 'true' && (
62-
<>
63-
<Route path="storage" element={<FileStorage />} />
64-
<Route path="storage/logs" element={<FileStorageLog />} />
65-
</>
66-
)}
67-
<Route path="builds/:buildId/logs" element={<BuildLogs />} />
68-
<Route path="scans" loader={() => redirect('../reports')} />
69-
{process.env.FEATURE_BUILD_TASKS === 'active' && (
70-
<Route path="reports" element={<Reports />} />
71-
)}
43+
{siteRoutes.map((route) => (
44+
<Route key={route.title} path={route.path} Component={route.Component} />
45+
))}
7246
</Route>
7347
<Route path="settings" element={<Settings />} />
7448
<Route path="*" element={<NotFound />} />

0 commit comments

Comments
 (0)