updated code

forms-flow-web/src/components/Modeler/Editors/BpmnEditor/BpmEditor.js

@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from "react";
+import PropTypes from "prop-types"; // Import PropTypes for validation
 import "../Editor.scss";
 import BpmnModeler from "bpmn-js/lib/Modeler";
 import "bpmn-js/dist/assets/diagram-js.css";
@@ -21,6 +22,7 @@ import lintModule from "bpmn-js-bpmnlint";
 import "bpmn-js-bpmnlint/dist/assets/css/bpmn-js-bpmnlint.css";
 import linterConfig from "../../lint-rules/packed-config";
 
+// External modeler configuration for reusability and readability
 const modelerConfig = {
   container: "#canvas",
   propertiesPanel: { parent: "#js-properties-panel" },
@@ -74,9 +76,9 @@ const BpmnEditor = forwardRef(({ bpmnXml, setLintErrors }, ref) => {
     document.getElementById("inputWorkflow").value = null;
   };
 
-  const zoom = () => bpmnModeler && bpmnModeler.get("zoomScroll").stepZoom(1);
-  const zoomOut = () => bpmnModeler && bpmnModeler.get("zoomScroll").stepZoom(-1);
-  const zoomReset = () => bpmnModeler && bpmnModeler.get("zoomScroll").reset();
+  const zoom = () => bpmnModeler?.get("zoomScroll")?.stepZoom(1);
+  const zoomOut = () => bpmnModeler?.get("zoomScroll")?.stepZoom(-1);
+  const zoomReset = () => bpmnModeler?.get("zoomScroll")?.reset();
 
   return (
     <div className="bpmn-main-container">
@@ -121,4 +123,10 @@ const BpmnEditor = forwardRef(({ bpmnXml, setLintErrors }, ref) => {
   );
 });
 
+// Adding PropTypes validation for the props
+BpmnEditor.propTypes = {
+  bpmnXml: PropTypes.string.isRequired,
+  setLintErrors: PropTypes.func.isRequired,
+};
+
 export default React.memo(BpmnEditor);

forms-flow-web/src/components/Modeler/Editors/DmnEditor/DmnEditor.js

@@ -5,11 +5,11 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from "react";
+import PropTypes from "prop-types"; // Import PropTypes for validation
 import "../Editor.scss";
 import DmnJS from "dmn-js/lib/Modeler";
 import "dmn-js/dist/assets/diagram-js.css";
 import "dmn-js/dist/assets/dmn-font/css/dmn-embedded.css";
-import "../Editor.scss";
 import {
   DmnPropertiesPanelModule,
   DmnPropertiesProviderModule,
@@ -21,13 +21,9 @@ import { useTranslation } from "react-i18next";
 const DmnEditor = forwardRef(({ dmnXml }, ref) => {
   const [dmnModeler, setDmnModeler] = useState(null);
   const { t } = useTranslation();
-  const containerRef = useCallback((node) => {
-    if (node !== null) {
-      initializeModeler();
-    }
-  }, []);
 
-  const initializeModeler = () => {
+  // Initialize modeler when container node mounts
+  const initializeModeler = useCallback(() => {
     setDmnModeler(
       new DmnJS({
         container: "#canvas",
@@ -46,22 +42,26 @@ const DmnEditor = forwardRef(({ dmnXml }, ref) => {
         },
       })
     );
-  };
+  }, []);
+
+  const containerRef = useCallback((node) => {
+    if (node !== null) initializeModeler();
+  }, [initializeModeler]);
 
   useEffect(() => {
-    handleImport(dmnXml);
+    if (dmnModeler) {
+      handleImport(dmnXml);
+    }
   }, [dmnXml, dmnModeler]);
 
-
   const handleImport = (dmnXml) => {
     if (dmnXml && dmnModeler) {
       dmnModeler
         .importXML(dmnXml)
         .then(({ warnings }) => {
           if (warnings.length) {
-            console.log("Warnings", warnings);
+            console.warn("Import Warnings:", warnings);
           }
-          //setImportErrors(warnings || []);
         })
         .catch((err) => {
           handleError(err, "DMN Import Error: ");
@@ -78,69 +78,61 @@ const DmnEditor = forwardRef(({ dmnXml }, ref) => {
     console.error(message, error);
     const inputElement = document.getElementById("inputWorkflow");
     if (inputElement) {
-        inputElement.value = null;
+      inputElement.value = null;
     } else {
-        console.warn("Element with ID 'inputWorkflow' not found.");
+      console.warn("Element with ID 'inputWorkflow' not found.");
     }
-};
-
-
-  const zoom = () => {
-    dmnModeler.getActiveViewer().get("zoomScroll").stepZoom(1);
   };
 
-  const zoomOut = () => {
-    dmnModeler.getActiveViewer().get("zoomScroll").stepZoom(-1);
-  };
-  const zoomReset = () => {
-    dmnModeler.getActiveViewer().get("zoomScroll").reset();
-  };
+  const zoom = () => dmnModeler?.getActiveViewer()?.get("zoomScroll")?.stepZoom(1);
+  const zoomOut = () => dmnModeler?.getActiveViewer()?.get("zoomScroll")?.stepZoom(-1);
+  const zoomReset = () => dmnModeler?.getActiveViewer()?.get("zoomScroll")?.reset();
 
   return (
     <div className="bpmn-main-container">
-    <div className="bpmn-viewer-container">
-      <div
-        id="canvas"
-        ref={containerRef}
-        className="bpm-modeler-container border border-dark border-1"
-      >
-      </div>
-      <div
-        className="d-flex justify-content-end zoom-container"
-        id="zoom-id"
-      >
-        <div className="d-flex flex-column">
-          <button
-            className="mb-3 btn-zoom"
-            title={t("Reset Zoom")}
-            onClick={() => zoomReset()}
-            data-testid="prcosses-dmneditor-zoomreset-button"
-          >
-            <i className="fa fa-retweet" aria-hidden="true" />
-          </button>
-          <button
-            className="btn-zoom"
-            title={t("Zoom In")}
-            onClick={() => zoom()}
-            data-testid="prcosses-dmneditor-zoom-button"
-          >
-            <i className="fa fa-search-plus" aria-hidden="true" />
-          </button>
-          <button
-            className="btn-zoom"
-            title={t("Zoom Out")}
-            onClick={() => zoomOut()}
-            data-testid="prcosses-dmneditor-zoomout-button"
-          >
-            <i className="fa fa-search-minus" aria-hidden="true" />
-          </button>
+      <div className="bpmn-viewer-container">
+        <div
+          id="canvas"
+          ref={containerRef}
+          className="bpm-modeler-container border border-dark border-1"
+        ></div>
+        <div className="d-flex justify-content-end zoom-container" id="zoom-id">
+          <div className="d-flex flex-column">
+            <button
+              className="mb-3 btn-zoom"
+              title={t("Reset Zoom")}
+              onClick={zoomReset}
+              data-testid="process-dmneditor-zoomreset-button"
+            >
+              <i className="fa fa-retweet" aria-hidden="true" />
+            </button>
+            <button
+              className="btn-zoom"
+              title={t("Zoom In")}
+              onClick={zoom}
+              data-testid="process-dmneditor-zoom-button"
+            >
+              <i className="fa fa-search-plus" aria-hidden="true" />
+            </button>
+            <button
+              className="btn-zoom"
+              title={t("Zoom Out")}
+              onClick={zoomOut}
+              data-testid="process-dmneditor-zoomout-button"
+            >
+              <i className="fa fa-search-minus" aria-hidden="true" />
+            </button>
+          </div>
         </div>
       </div>
+      <div className="properties-panel-parent" id="js-properties-panel"></div>
     </div>
-    <div className="properties-panel-parent" id="js-properties-panel"></div>
-  </div>
   );
 });
 
-export default React.memo(DmnEditor);
+// Adding PropTypes validation for the props
+DmnEditor.propTypes = {
+  dmnXml: PropTypes.string.isRequired,
+};
 
+export default React.memo(DmnEditor);

forms-flow-web/src/components/Modeler/index.js

@@ -3,16 +3,13 @@ import { Route, Switch, Redirect } from "react-router-dom";
 import { useSelector } from "react-redux";
 import ProcessCreateEdit from "./ProcessCreateEdit";
 import SubFlowList from './SubFlowTable';
-import descisiontable from './DecisionTable';
-import {
-  BASE_ROUTE,
-} from "../../constants/constants";
+import DecisionTable from './DecisionTable';
+import { BASE_ROUTE } from "../../constants/constants";
 import Loading from "../../containers/Loading";
 import AccessDenied from "../AccessDenied";
 
 let user = "";
 
-
 const DesignerProcessRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
@@ -26,6 +23,10 @@ const DesignerProcessRoute = ({ component: Component, ...rest }) => (
   />
 );
 
+// Wrapper components to pass type prop to ProcessCreateEdit
+const ProcessCreateEditBPMN = (props) => <ProcessCreateEdit {...props} type="BPMN" />;
+const ProcessCreateEditDMN = (props) => <ProcessCreateEdit {...props} type="DMN" />;
+
 const Processes = () => {
   user = useSelector((state) => state.user?.roles || []);
   const isAuthenticated = useSelector((state) => state.user?.isAuthenticated);
@@ -38,16 +39,16 @@ const Processes = () => {
     <div data-testid="Process-index">
       <Switch>
         <Route exact path={`${BASE_ROUTE}subflow`} component={SubFlowList} />
-        <Route exact path={`${BASE_ROUTE}decision-table`} component={descisiontable} />
+        <Route exact path={`${BASE_ROUTE}decision-table`} component={DecisionTable} />
         <DesignerProcessRoute
           exact
           path={`${BASE_ROUTE}subflow/:step/:processKey?`}
-          component={() => <ProcessCreateEdit type="BPMN" />} 
+          component={ProcessCreateEditBPMN} 
         />
         <DesignerProcessRoute
           exact
           path={`${BASE_ROUTE}decision-table/:step/:processKey?`}
-          component={() => <ProcessCreateEdit type="DMN" />} 
+          component={ProcessCreateEditDMN} 
         />
         <Redirect exact to="/404" />
       </Switch>