Tidy up routes

src/components/commands/List.jsx → src/components/commands/CommandsListPage.jsx

@@ -2,13 +2,13 @@ import NativeButtonGroup from "components/form/NativeButtonGroup";
 import PaginationV2 from "components/layout/PaginationV2";
 import CreateButton from "components/ui/buttons/Create";
 import ExportMenuItem from "components/ui/menuitems/ExportMenuItem";
+import Title from "components/ui/Title";
 import useQuery from "hooks/useQuery";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import secureApiFetch from "services/api";
-import useDelete from "../../hooks/useDelete";
-import Title from "../ui/Title";
-import CommandsTable from "./Table";
+import useDelete from "../../hooks/useDelete.js";
+import CommandsTable from "./Table.jsx";
 
 const CommandsListPage = () => {
     const navigate = useNavigate();

src/components/commands/Routes.jsx

@@ -1,9 +1,9 @@
 import LibraryLayout from "components/LibraryLayout";
 import { Route } from "react-router-dom";
 import AddCommandPage from "./Add";
+import CommandsListPage from "./CommandsListPage";
 import CommandDetails from "./Details";
 import EditCommandPage from "./Edit";
-import CommandsListPage from "./List";
 
 const CommandsRoutes = [
     <Route path="/commands" element={<LibraryLayout />}>

src/components/documents/List.jsx → src/components/documents/DocumentsListPage.jsx

@@ -3,9 +3,9 @@ import CreateButton from "components/ui/buttons/Create";
 import useDocumentTitle from "hooks/useDocumentTitle";
 import useFetchRequest from "hooks/useFetchRequest";
 import { useNavigate } from "react-router-dom";
-import Breadcrumb from "../ui/Breadcrumb";
-import Title from "../ui/Title";
-import DocumentsTable from "./Table";
+import Breadcrumb from "../ui/Breadcrumb.jsx";
+import Title from "../ui/Title.js";
+import DocumentsTable from "./Table.jsx";
 
 const DocumentsListPage = () => {
     const navigate = useNavigate();

src/components/documents/Routes.jsx

@@ -2,8 +2,8 @@ import LibraryLayout from "components/LibraryLayout.jsx";
 import { Route } from "react-router-dom";
 import AddDocumentPage from "./Add";
 import DocumentDetailsPage from "./Details";
+import DocumentsListPage from "./DocumentsListPage";
 import EditDocumentPage from "./Edit";
-import DocumentsListPage from "./List";
 
 const DocumentsRoutes = [
     <Route path={`/documents`} element={<LibraryLayout />}>

src/components/layout/dashboard/DashboardPanels.jsx → src/components/layout/dashboard/DashboardPage.jsx

@@ -2,6 +2,7 @@ import NativeCheckbox from "components/form/NativeCheckbox";
 import NativeTabs from "components/form/NativeTabs";
 import PrimaryButton from "components/ui/buttons/Primary";
 import Loading from "components/ui/Loading";
+import Title from "components/ui/Title";
 import { actionCompletedToast } from "components/ui/toast";
 import { useAuth } from "contexts/AuthContext";
 import useDocumentTitle from "hooks/useDocumentTitle";
@@ -11,8 +12,7 @@ import secureApiFetch from "services/api";
 import PermissionsService from "services/permissions";
 import { initialiseUserPreferences } from "services/userPreferences";
 import widgetIsVisible from "services/widgets";
-import Title from "../../ui/Title";
-import WelcomeWidget from "./widgets/WelcomeWidget";
+import WelcomeWidget from "./widgets/WelcomeWidget.jsx";
 
 const InitialiseWidgetConfig = () => {
     return Object.keys(Widgets).reduce((acc, key) => {
@@ -37,7 +37,7 @@ const filterWidgets = (user) => {
         .filter((widget) => widget !== null);
 };
 
-const DashboardPanels = () => {
+const DashboardPage = () => {
     const { user } = useAuth();
     user.preferences = initialiseUserPreferences(user);
     const [dashboardConfig, setDashboardConfig] = useState(
@@ -138,4 +138,4 @@ const DashboardPanels = () => {
     );
 };
 
-export default DashboardPanels;
+export default DashboardPage;

src/components/layout/dashboard/Routes.tsx

@@ -1,15 +1,14 @@
 import { Route } from "react-router-dom";
-import DashboardPanels from "./DashboardPanels.jsx";
+import DashboardPage from "./DashboardPage.jsx";
 
-
-const DashboardUrls = {
+const DashboardUrls: Record<string, string> = {
     DEFAULT: '/'
 }
 
 export { DashboardUrls };
 
 const DashboardRoutes = [
-    <Route path={DashboardUrls.DEFAULT} element={<DashboardPanels />} index />,
+    <Route path={DashboardUrls.DEFAULT} element={<DashboardPage />} index />,
 ]
 
 export default DashboardRoutes;

src/components/projects/List.jsx → src/components/projects/ProjectsListPage.jsx

@@ -1,18 +1,18 @@
 import NativeSelect from "components/form/NativeSelect";
 import PaginationV2 from "components/layout/PaginationV2";
 import RestrictedComponent from "components/logic/RestrictedComponent";
+import Title from "components/ui/Title";
 import useDocumentTitle from "hooks/useDocumentTitle";
 import useQuery from "hooks/useQuery";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import secureApiFetch from "services/api";
-import useDelete from "../../hooks/useDelete";
-import Breadcrumb from "../ui/Breadcrumb";
-import CreateButton from "../ui/buttons/Create";
-import Title from "../ui/Title";
-import ProjectsTable from "./Table";
+import useDelete from "../../hooks/useDelete.js";
+import Breadcrumb from "../ui/Breadcrumb.jsx";
+import CreateButton from "../ui/buttons/Create.jsx";
+import ProjectsTable from "./Table.jsx";
 
-const ProjectsList = () => {
+const ProjectsListPage = () => {
     const navigate = useNavigate();
     const query = useQuery();
     let pageNumber = query.get("page");
@@ -108,4 +108,4 @@ const ProjectsList = () => {
     );
 };
 
-export default ProjectsList;
+export default ProjectsListPage;

src/components/projects/Routes.jsx

@@ -5,14 +5,14 @@ import ProjectCreateForm from "./Create";
 import ProjectDetails from "./Details";
 import ProjectEdit from "./Edit";
 import ProjectsLayout from "./Layout.jsx";
-import ProjectsList from "./List";
 import ProjectMembership from "./Membership";
+import ProjectsListPage from "./ProjectsListPage";
 import ProjectReport from "./Report";
 import VaultItemEdit from "./vault/VaultItemEdit";
 
 const ProjectsRoutes = [
     <Route path="/projects" element={<ProjectsLayout />}>
-        <Route index element={<ProjectsList />} />,
+        <Route index element={<ProjectsListPage />} />,
         <Route path={`create`} element={<ProjectCreateForm />} />,
         <Route path={`:projectId/edit`} element={<ProjectEdit />} />,
         <Route path={`:projectId/report`} element={<ProjectReport />} />,

src/components/settings/CustomFields/Form.jsx

@@ -1,8 +1,9 @@
 import HorizontalLabelledField from "components/form/HorizontalLabelledField";
-import NativeButton from "components/form/NativeButton";
 import NativeInput from "components/form/NativeInput";
 import NativeSelect from "components/form/NativeSelect";
 import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
+import PrimaryButton from "components/ui/buttons/Primary";
+import Title from "components/ui/Title";
 import useDelete from "hooks/useDelete";
 import useFetch from "hooks/useFetch";
 import secureApiFetch from "services/api";
@@ -37,12 +38,12 @@ const CustomFieldsPage = () => {
 
     return (
         <>
-            <h2>Custom fields</h2>
+            <Title type="System" title="Custom fields" documentTitle="single" />
 
             <form onSubmit={onAddCustomFieldSubmit}>
                 <input type="hidden" name="config" value="{}" />
 
-                <HorizontalLabelledField label="Name" control={<NativeInput type="text" name="name" />} />
+                <HorizontalLabelledField label="Name" control={<NativeInput type="text" name="name" required />} />
 
                 <HorizontalLabelledField
                     label="Kind"
@@ -55,7 +56,7 @@ const CustomFieldsPage = () => {
                     }
                 />
 
-                <HorizontalLabelledField label="Label" control={<NativeInput type="text" name="label" />} />
+                <HorizontalLabelledField label="Label" control={<NativeInput type="text" name="label" required />} />
 
                 <HorizontalLabelledField
                     label="Parent type"
@@ -67,7 +68,7 @@ const CustomFieldsPage = () => {
                 />
 
                 <hr />
-                <HorizontalLabelledField control={<NativeButton type="submit">Add</NativeButton>} />
+                <HorizontalLabelledField control={<PrimaryButton type="submit">Add</PrimaryButton>} />
             </form>
 
             <table className="table">

src/components/system/ExportPage.jsx

@@ -1,19 +1,10 @@
-import useDocumentTitle from "hooks/useDocumentTitle";
-import Breadcrumb from "../ui/Breadcrumb";
 import Title from "../ui/Title";
 import ExportForm from "./ExportForm";
 
 const ExportPage = () => {
-    useDocumentTitle("Export data");
-
     return (
         <div>
-            <div className="heading">
-                <Breadcrumb>
-                    <div>System</div>
-                </Breadcrumb>
-            </div>
-            <Title title="Data Export" />
+            <Title type="System" title="Data Export" />
 
             <ExportForm />
         </div>

src/components/system/ImportPage.jsx

@@ -1,19 +1,10 @@
-import useDocumentTitle from "hooks/useDocumentTitle";
-import Breadcrumb from "../ui/Breadcrumb";
 import Title from "../ui/Title";
 import ImportForm from "./ImportForm";
 
 const ImportPage = () => {
-    useDocumentTitle("Import data");
-
     return (
         <div>
-            <div className="heading">
-                <Breadcrumb>
-                    <div>System</div>
-                </Breadcrumb>
-            </div>
-            <Title title="Data Import" />
+            <Title type="System" title="Data Import" />
 
             <ImportForm />
         </div>

src/components/tasks/Routes.jsx

@@ -3,11 +3,11 @@ import { Route } from "react-router-dom";
 import TaskCreationPage from "./Create";
 import TaskDetails from "./Details";
 import EditTaskPage from "./Edit";
-import TasksList from "./List";
+import TasksListPage from "./TasksListPage";
 
 const TasksRoutes = [
     <Route path="/tasks" element={<ProjectsLayout />}>
-        <Route index element={<TasksList />} />,
+        <Route index element={<TasksListPage />} />,
         <Route path={`create`} element={<TaskCreationPage />} />,
         <Route path={`:taskId`} element={<TaskDetails />} />,
         <Route path={`:taskId/edit`} element={<EditTaskPage />} />,

src/components/tasks/List.jsx → src/components/tasks/TasksListPage.jsx

@@ -6,16 +6,16 @@ import useDocumentTitle from "hooks/useDocumentTitle";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import secureApiFetch from "services/api";
-import useDelete from "../../hooks/useDelete";
-import TaskStatuses from "../../models/TaskStatuses";
-import Breadcrumb from "../ui/Breadcrumb";
-import CreateButton from "../ui/buttons/Create";
-import Title from "../ui/Title";
-import TaskFilters from "./Filters";
-import TasksTable from "./TasksTable";
-import TaskTableModel from "./TaskTableModel";
-
-const TasksList = () => {
+import useDelete from "../../hooks/useDelete.js";
+import TaskStatuses from "../../models/TaskStatuses.js";
+import Breadcrumb from "../ui/Breadcrumb.jsx";
+import CreateButton from "../ui/buttons/Create.jsx";
+import Title from "../ui/Title.js";
+import TaskFilters from "./Filters.jsx";
+import TasksTable from "./TasksTable.jsx";
+import TaskTableModel from "./TaskTableModel.js";
+
+const TasksListPage = () => {
     const navigate = useNavigate();
 
     const [tableModel, setTableModel] = useState(new TaskTableModel(true, true));
@@ -132,4 +132,4 @@ const TasksList = () => {
     );
 };
 
-export default TasksList;
+export default TasksListPage;

src/components/users/List.jsx

@@ -76,7 +76,7 @@ const UsersList = () => {
                     </ul>
                 </NativeButtonGroup>
             </div>
-            <Title title="Users and roles" />
+            <Title title="Users" />
             <table className="table is-fullwidth">
                 <thead>
                     <tr>

src/components/vulnerabilities/categories/AddModalDialog.jsx

@@ -31,7 +31,7 @@ const VulnerabilityCategoryAddModalDialog = ({ isOpen, onClose, onCancel }) => {
     };
 
     return (
-        <ModalDialog visible={isOpen} onClose={onCancel} title="New vulnerability category details">
+        <ModalDialog visible={isOpen} onClose={onCancel} title="New vulnerability category">
             <div>
                 <div>
                     <VulnerabilityCategoryForm