rename react_diagram_editor and added no groups to display text w/ burnettk

src/components/ReactDiagramEditor.js

@@ -16,12 +16,12 @@ import spiffworkflowPanel from 'bpmn-js-spiffworkflow/app/spiffworkflow/Properti
 
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';
-import { HOT_AUTH_TOKEN, BACKEND_BASE_URL } from './config';
+import { HOT_AUTH_TOKEN, BACKEND_BASE_URL } from '../config';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
-import './bpmn-js-properties-panel.css';
+import '../bpmn-js-properties-panel.css';
 import 'bpmn-js/dist/assets/bpmn-js.css';
 
 import 'dmn-js/dist/assets/diagram-js.css';
@@ -41,7 +41,6 @@ export default function ReactDiagramEditor({
   processGroupId,
   saveDiagram,
   diagramType,
-
   diagramXML,
   fileName,
   onLaunchScriptEditor,

src/routes/ProcessGroups.js

@@ -66,19 +66,15 @@ export default function ProcessGroups() {
     );
   };
 
-  if (processGroups?.length > 0) {
+  const processGroupsDisplayArea = () => {
     const perPage = parseInt(
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
-    return (
+    let displayText = '';
-      <main style={{ padding: '1rem 0' }}>
+    if (processGroups?.length > 0) {
-        <ProcessBreadcrumb />
+      displayText = (
-        <h2>Process Groups</h2>
-        <Button href="/process-groups/new">Add a process group</Button>
-        <br />
-        <br />
         <PaginationForTable
           page={page}
           perPage={perPage}
@@ -86,6 +82,22 @@ export default function ProcessGroups() {
           tableToDisplay={buildTable()}
           path="/process-groups"
         />
+      );
+    } else {
+      displayText = <p>No Groups To Display</p>;
+    }
+    return displayText;
+  };
+
+  if (pagination) {
+    return (
+      <main style={{ padding: '1rem 0' }}>
+        <ProcessBreadcrumb />
+        <h2>Process Groups</h2>
+        <Button href="/process-groups/new">Add a process group</Button>
+        <br />
+        <br />
+        {processGroupsDisplayArea()}
       </main>
     );
   }

src/routes/ProcessModelEditDiagram.js

@@ -4,7 +4,7 @@ import { Button, Modal } from 'react-bootstrap';
 import Editor from '@monaco-editor/react';
 import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
 
-import ReactDiagramEditor from '../react_diagram_editor';
+import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 
 export default function ProcessModelEditDiagram() {