created admin router to namespace routes w/ burnettk

cypress/e2e/process_groups.cy.js

@@ -1,6 +1,6 @@
 describe('process-groups', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/admin');
   });
 
   it('can perform crud operations', () => {

cypress/e2e/process_instances.cy.js

@@ -64,7 +64,7 @@ const updateBpmnPythonScriptWithMonaco = (
 
 describe('process-instances', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/admin');
     cy.contains('acceptance-tests-group-one').click();
     cy.contains('acceptance-tests-model-1').click();
   });

cypress/e2e/process_models.cy.js

@@ -1,6 +1,6 @@
 describe('process-models', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/admin');
   });
 
   it('can perform crud operations', () => {

package-lock.json

@@ -31,6 +31,7 @@
         "react-bootstrap": "^2.4.0",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
+        "react-jsonschema-form": "^1.8.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
         "serve": "^13.0.2",
@@ -1792,6 +1793,25 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime-corejs2": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.18.6.tgz",
+      "integrity": "sha512-bTfcOSG6AHGVCd37zqoBax2e6r4Gy+q3sW2BgLo3h63NdU30C2AKXW0swyQsX/Ik+Zd6eVKQ9TTBKJ9tZQgWig==",
+      "dependencies": {
+        "core-js": "^2.6.12",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs2/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/@babel/runtime-corejs3": {
       "version": "7.18.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
@@ -19563,6 +19583,40 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-jsonschema-form": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-1.8.1.tgz",
+      "integrity": "sha512-aaDloxNAcGXOOOcdKOxxqEEn5oDlPUZgWcs8unXXB9vjBRgCF8rCm/wVSv1u2G5ih0j/BX6Ewd/WjI2g00lPdg==",
+      "dependencies": {
+        "@babel/runtime-corejs2": "^7.4.5",
+        "ajv": "^6.7.0",
+        "core-js": "^2.5.7",
+        "lodash": "^4.17.15",
+        "prop-types": "^15.5.8",
+        "react-is": "^16.8.4",
+        "react-lifecycles-compat": "^3.0.4",
+        "shortid": "^2.2.14"
+      },
+      "engines": {
+        "node": ">=6",
+        "npm": ">=2.14.7"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-jsonschema-form/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/react-jsonschema-form/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -20763,6 +20817,19 @@
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
       "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
     },
+    "node_modules/shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "dependencies": {
+        "nanoid": "^2.1.0"
+      }
+    },
+    "node_modules/shortid/node_modules/nanoid": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -25055,6 +25122,22 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/runtime-corejs2": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.18.6.tgz",
+      "integrity": "sha512-bTfcOSG6AHGVCd37zqoBax2e6r4Gy+q3sW2BgLo3h63NdU30C2AKXW0swyQsX/Ik+Zd6eVKQ9TTBKJ9tZQgWig==",
+      "requires": {
+        "core-js": "^2.6.12",
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        }
+      }
+    },
     "@babel/runtime-corejs3": {
       "version": "7.18.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz",
@@ -38398,6 +38481,33 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-jsonschema-form": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/react-jsonschema-form/-/react-jsonschema-form-1.8.1.tgz",
+      "integrity": "sha512-aaDloxNAcGXOOOcdKOxxqEEn5oDlPUZgWcs8unXXB9vjBRgCF8rCm/wVSv1u2G5ih0j/BX6Ewd/WjI2g00lPdg==",
+      "requires": {
+        "@babel/runtime-corejs2": "^7.4.5",
+        "ajv": "^6.7.0",
+        "core-js": "^2.5.7",
+        "lodash": "^4.17.15",
+        "prop-types": "^15.5.8",
+        "react-is": "^16.8.4",
+        "react-lifecycles-compat": "^3.0.4",
+        "shortid": "^2.2.14"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -39318,6 +39428,21 @@
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
       "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
     },
+    "shortid": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
+      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
+      "requires": {
+        "nanoid": "^2.1.0"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "2.1.11",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
+        }
+      }
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",

package.json

@@ -26,6 +26,7 @@
     "react-bootstrap": "^2.4.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
     "serve": "^13.0.2",

src/App.js

@@ -5,20 +5,21 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import ErrorContext from './contexts/ErrorContext';
 import NavigationBar from './components/NavigationBar';
 
-import ProcessGroups from './routes/ProcessGroups';
+// import ProcessGroups from './routes/ProcessGroups';
-import ProcessGroupShow from './routes/ProcessGroupShow';
+// import ProcessGroupShow from './routes/ProcessGroupShow';
-import ProcessGroupNew from './routes/ProcessGroupNew';
+// import ProcessGroupNew from './routes/ProcessGroupNew';
-import ProcessGroupEdit from './routes/ProcessGroupEdit';
+// import ProcessGroupEdit from './routes/ProcessGroupEdit';
-import ProcessModelShow from './routes/ProcessModelShow';
+// import ProcessModelShow from './routes/ProcessModelShow';
-import ProcessModelEditDiagram from './routes/ProcessModelEditDiagram';
+// import ProcessModelEditDiagram from './routes/ProcessModelEditDiagram';
-import ProcessInstanceList from './routes/ProcessInstanceList';
+// import ProcessInstanceList from './routes/ProcessInstanceList';
-import ProcessInstanceReport from './routes/ProcessInstanceReport';
+// import ProcessInstanceReport from './routes/ProcessInstanceReport';
-import ProcessModelNew from './routes/ProcessModelNew';
+// import ProcessModelNew from './routes/ProcessModelNew';
-import ProcessModelEdit from './routes/ProcessModelEdit';
+// import ProcessModelEdit from './routes/ProcessModelEdit';
-import ProcessInstanceShow from './routes/ProcessInstanceShow';
+// import ProcessInstanceShow from './routes/ProcessInstanceShow';
-import TaskList from './routes/TaskList';
+// import TaskList from './routes/TaskList';
-import TaskShow from './routes/TaskShow';
+// import TaskShow from './routes/TaskShow';
 import ErrorBoundary from './components/ErrorBoundary';
+import AdminRoutes from './routes/AdminRoutes';
 
 export default function App() {
   const [errorMessage, setErrorMessage] = useState('');
@@ -36,6 +37,12 @@ export default function App() {
       </div>
     );
   }
+  // <BrowserRouter basename="tasks">
+  //   <Routes>
+  //     <Route path="/" element={<TaskList />} />
+  //     <Route path="/:task_id" element={<TaskShow />} />
+  //   </Routes>
+  // </BrowserRouter>
 
   return (
     <ErrorContext.Provider value={errorContextValueArray}>
@@ -45,53 +52,7 @@ export default function App() {
         <ErrorBoundary>
           <BrowserRouter>
             <Routes>
-              <Route path="/" element={<ProcessGroups />} />
+              <Route path="/admin/*" element={<AdminRoutes />} />
-
-              <Route path="process-groups" element={<ProcessGroups />} />
-              <Route
-                path="process-groups/:process_group_id"
-                element={<ProcessGroupShow />}
-              />
-              <Route path="process-groups/new" element={<ProcessGroupNew />} />
-              <Route
-                path="process-groups/:process_group_id/edit"
-                element={<ProcessGroupEdit />}
-              />
-
-              <Route
-                path="process-models/:process_group_id/new"
-                element={<ProcessModelNew />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id"
-                element={<ProcessModelShow />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/file"
-                element={<ProcessModelEditDiagram />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/file/:file_name"
-                element={<ProcessModelEditDiagram />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/process-instances"
-                element={<ProcessInstanceList />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/process-instances/report"
-                element={<ProcessInstanceReport />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/edit"
-                element={<ProcessModelEdit />}
-              />
-              <Route
-                path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
-                element={<ProcessInstanceShow />}
-              />
-              <Route path="tasks" element={<TaskList />} />
-              <Route path="tasks/:task_id" element={<TaskShow />} />
             </Routes>
           </BrowserRouter>
         </ErrorBoundary>

src/components/NavigationBar.js

@@ -1,20 +1,33 @@
 import { Navbar, Nav, Container } from 'react-bootstrap';
+import { capitalizeFirstLetter } from '../helpers';
 import logo from '../logo.svg';
 
 // for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
+  const navItems = ['/admin', '/tasks'];
+
+  const navElements = navItems.map((navItem) => {
+    let className = '';
+    if (window.location.pathname.startsWith(navItem)) {
+      className = 'active';
+    }
+    const title = capitalizeFirstLetter(navItem.replace(/\/*/, ''));
+    return (
+      <Nav.Link href={navItem} className={className}>
+        {title}
+      </Nav.Link>
+    );
+  });
+
   return (
     <Navbar bg="dark" expand="lg" variant="dark">
       <Container>
-        <Navbar.Brand href="/">
+        <Navbar.Brand href="/admin">
           <img src={logo} className="app-logo" alt="logo" />
         </Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
+          <Nav className="me-auto">{navElements}</Nav>
-            <Nav.Link href="/">Admin</Nav.Link>
-            <Nav.Link href="/tasks">Tasks</Nav.Link>
-          </Nav>
         </Navbar.Collapse>
       </Container>
     </Navbar>

src/components/ProcessBreadcrumb.js

@@ -16,7 +16,7 @@ export default function ProcessBreadcrumb({
         <Breadcrumb.Item
           linkAs={Link}
           linkProps={{
-            to: `/process-models/${processGroupId}/${processModelId}`,
+            to: `/admin/process-models/${processGroupId}/${processModelId}`,
           }}
         >
           Process Model: {processModelId}
@@ -32,7 +32,7 @@ export default function ProcessBreadcrumb({
     processGroupBreadcrumb = (
       <Breadcrumb.Item
         linkAs={Link}
-        linkProps={{ to: `/process-groups/${processGroupId}` }}
+        linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
       >
         Process Group: {processGroupId}
       </Breadcrumb.Item>
@@ -46,7 +46,7 @@ export default function ProcessBreadcrumb({
   return (
     <main style={{ padding: '1rem 0' }}>
       <Breadcrumb>
-        <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/' }}>
+        <Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
           Home
         </Breadcrumb.Item>
         {processGroupBreadcrumb}

src/helpers.js

@@ -9,6 +9,10 @@ export const slugifyString = (str) => {
     .replace(/-+$/g, '');
 };
 
+export const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
 export const convertDateToSeconds = (date, onChangeFunction) => {
   let dateInSeconds = date;
   if (date !== null) {

src/routes/AdminRoutes.js

@@ -0,0 +1,65 @@
+import { Routes, Route } from 'react-router-dom';
+
+import ProcessGroups from './ProcessGroups';
+import ProcessGroupShow from './ProcessGroupShow';
+import ProcessGroupNew from './ProcessGroupNew';
+import ProcessGroupEdit from './ProcessGroupEdit';
+import ProcessModelShow from './ProcessModelShow';
+import ProcessModelEditDiagram from './ProcessModelEditDiagram';
+import ProcessInstanceList from './ProcessInstanceList';
+import ProcessInstanceReport from './ProcessInstanceReport';
+import ProcessModelNew from './ProcessModelNew';
+import ProcessModelEdit from './ProcessModelEdit';
+import ProcessInstanceShow from './ProcessInstanceShow';
+
+export default function Admin() {
+  return (
+    <Routes>
+      <Route path="/" element={<ProcessGroups />} />
+
+      <Route path="process-groups" element={<ProcessGroups />} />
+      <Route
+        path="process-groups/:process_group_id"
+        element={<ProcessGroupShow />}
+      />
+      <Route path="process-groups/new" element={<ProcessGroupNew />} />
+      <Route
+        path="process-groups/:process_group_id/edit"
+        element={<ProcessGroupEdit />}
+      />
+
+      <Route
+        path="process-models/:process_group_id/new"
+        element={<ProcessModelNew />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id"
+        element={<ProcessModelShow />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/file"
+        element={<ProcessModelEditDiagram />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/file/:file_name"
+        element={<ProcessModelEditDiagram />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances"
+        element={<ProcessInstanceList />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances/report"
+        element={<ProcessInstanceReport />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/edit"
+        element={<ProcessModelEdit />}
+      />
+      <Route
+        path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
+        element={<ProcessInstanceShow />}
+      />
+    </Routes>
+  );
+}

src/routes/ProcessGroupEdit.js

@@ -42,7 +42,7 @@ export default function ProcessGroupEdit() {
       }),
     }).then(
       () => {
-        navigate(`/process-groups/${processGroup.id}`);
+        navigate(`/admin/process-groups/${processGroup.id}`);
       },
       // Note: it's important to handle errors here
       // instead of a catch() block so that we don't swallow
@@ -92,7 +92,7 @@ export default function ProcessGroupEdit() {
             <Button type="submit">Submit</Button>
             <Button
               variant="secondary"
-              href={`/process-groups/${processGroup.id}`}
+              href={`/admin/process-groups/${processGroup.id}`}
             >
               Cancel
             </Button>

src/routes/ProcessGroupNew.js

@@ -25,7 +25,7 @@ export default function ProcessGroupNew() {
       }),
     }).then(
       () => {
-        navigate(`/process-groups/${identifier}`);
+        navigate(`/admin/process-groups/${identifier}`);
       },
       // Note: it's important to handle errors here
       // instead of a catch() block so that we don't swallow

src/routes/ProcessGroupShow.js

@@ -61,7 +61,7 @@ export default function ProcessGroupShow() {
       return (
         <tr key={row.id}>
           <td>
-            <Link to={`/process-models/${processGroup.id}/${row.id}`}>
+            <Link to={`/admin/process-models/${processGroup.id}/${row.id}`}>
               {row.id}
             </Link>
           </td>
@@ -97,11 +97,11 @@ export default function ProcessGroupShow() {
         <h2>Process Group: {processGroup.id}</h2>
         <ul>
           <Stack direction="horizontal" gap={3}>
-            <Button href={`/process-models/${processGroup.id}/new`}>
+            <Button href={`/admin/process-models/${processGroup.id}/new`}>
               Add a process model
             </Button>
             <Button
-              href={`/process-groups/${processGroup.id}/edit`}
+              href={`/admin/process-groups/${processGroup.id}/edit`}
               variant="secondary"
             >
               Edit process group
@@ -114,7 +114,7 @@ export default function ProcessGroupShow() {
             perPage={perPage}
             pagination={pagination}
             tableToDisplay={buildTable()}
-            path={`/process-groups/${processGroup.id}`}
+            path={`/admin/process-groups/${processGroup.id}`}
           />
         </ul>
       </main>

src/routes/ProcessGroups.js

@@ -47,7 +47,7 @@ export default function ProcessGroups() {
       return (
         <tr key={row.id}>
           <td>
-            <Link to={`/process-groups/${row.id}`}>{row.id}</Link>
+            <Link to={`/admin/process-groups/${row.id}`}>{row.id}</Link>
           </td>
           <td>{row.display_name}</td>
         </tr>
@@ -80,7 +80,7 @@ export default function ProcessGroups() {
           perPage={perPage}
           pagination={pagination}
           tableToDisplay={buildTable()}
-          path="/process-groups"
+          path="/admin/process-groups"
         />
       );
     } else {
@@ -94,7 +94,7 @@ export default function ProcessGroups() {
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb />
         <h2>Process Groups</h2>
-        <Button href="/process-groups/new">Add a process group</Button>
+        <Button href="/admin/process-groups/new">Add a process group</Button>
         <br />
         <br />
         {processGroupsDisplayArea()}

src/routes/ProcessInstanceList.js

@@ -153,7 +153,7 @@ export default function ProcessInstanceList() {
 
     setErrorMessage('');
     navigate(
-      `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`
+      `/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`
     );
   };
 
@@ -269,7 +269,7 @@ export default function ProcessInstanceList() {
           <td>
             <Link
               data-qa="process-instance-show-link"
-              to={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${row.id}`}
+              to={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${row.id}`}
             >
               {row.id}
             </Link>
@@ -322,7 +322,7 @@ export default function ProcessInstanceList() {
           pagination={pagination}
           tableToDisplay={buildTable()}
           queryParamString={getSearchParamsAsQueryString()}
-          path={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
+          path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
         />
       </main>
     );

src/routes/ProcessInstanceReport.js

@@ -101,7 +101,7 @@ export default function ProcessInstanceReport() {
           perPage={perPage}
           pagination={pagination}
           tableToDisplay={buildTable()}
-          path={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
+          path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
         />
       </main>
     );

src/routes/ProcessInstanceShow.js

@@ -20,7 +20,7 @@ export default function ProcessInstanceShow() {
     ).then(
       () => {
         navigate(
-          `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`
+          `/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`
         );
       },
       (error) => {

src/routes/ProcessModelEdit.js

@@ -46,7 +46,7 @@ export default function ProcessModelEdit() {
       }),
     }).then(
       () => {
-        navigate(`/${processModelPath}`);
+        navigate(`/admin/${processModelPath}`);
       },
       // Note: it's important to handle errors here
       // instead of a catch() block so that we don't swallow
@@ -68,7 +68,7 @@ export default function ProcessModelEdit() {
       }
     ).then(
       () => {
-        navigate(`/process-groups/${params.process_group_id}`);
+        navigate(`/admin/process-groups/${params.process_group_id}`);
       },
       (error) => {
         console.log(error);

src/routes/ProcessModelEditDiagram.js

@@ -86,7 +86,7 @@ export default function ProcessModelEditDiagram() {
       () => {
         if (!params.file_name) {
           navigate(
-            `/process-models/${params.process_group_id}/${params.process_model_id}/file/${fileNameWithExtension}`
+            `/admin/process-models/${params.process_group_id}/${params.process_model_id}/file/${fileNameWithExtension}`
           );
         }
       },

src/routes/ProcessModelNew.js

@@ -32,7 +32,9 @@ export default function ProcessModelNew() {
       }),
     }).then(
       () => {
-        navigate(`/process-models/${params.process_group_id}/${identifier}`);
+        navigate(
+          `/admin/process-models/${params.process_group_id}/${identifier}`
+        );
       },
       // Note: it's important to handle errors here
       // instead of a catch() block so that we don't swallow

src/routes/ProcessModelShow.js

@@ -94,7 +94,7 @@ export default function ProcessModelShow() {
         return (
           <li key={fileBpmn.name}>
             <Link
-              to={`/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
+              to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file/${fileBpmn.name}`}
             >
               {fileBpmn.name}
             </Link>
@@ -123,19 +123,19 @@ export default function ProcessModelShow() {
             Run
           </Button>
           <Button
-            href={`/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
+            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
             variant="secondary"
           >
             Edit process model
           </Button>
           <Button
-            href={`/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=bpmn`}
+            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=bpmn`}
             variant="warning"
           >
             Add New BPMN File
           </Button>
           <Button
-            href={`/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=dmn`}
+            href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/file?file_type=dmn`}
             variant="success"
           >
             Add New DMN File
@@ -144,7 +144,7 @@ export default function ProcessModelShow() {
         <br />
         <br />
         <Link
-          to={`/process-models/${processModel.process_group_id}/${processModel.id}/process-instances`}
+          to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances`}
         >
           Process Instances
         </Link>

src/routes/TaskList.js

@@ -45,6 +45,7 @@ export default function TaskList() {
           <td>
             <Link to={`/tasks/${row.id}`}>{row.id}</Link>
           </td>
+          <td>{row.status}</td>
         </tr>
       );
     });
@@ -53,6 +54,7 @@ export default function TaskList() {
         <thead>
           <tr>
             <th>Id</th>
+            <th>Status</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>

src/routes/TaskShow.js

@@ -29,6 +29,7 @@ export default function TaskShow() {
       <main>
         <h1>Task ID: {task.id}</h1>
         <h3>process_instance_id: {task.process_instance_id}</h3>
+        <h3>status: {task.status}</h3>
       </main>
     );
   }