Script task icon (#1990)

* some initial refactoring to react diagram editor for pi show page w/ burnettk

* pi show and pm file show are now working w/ burnettk

* some minor tweaks w/ burnettk

* pi show is mostly working - need to handle future states w/ burnettk

* pass the task into the call activity overly so we can check the state w/ burnettk

* added an svg icon for pre and post script icons

* convert the svg react component into an html string and give that to bpmn-js

* removed hardcoded check for script icon

* typo

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/bpmn_js_script_icon.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="25" viewBox="0 0 2000 2000" fill="#000000" style="color:#000000" xmlns="http://www.w3.org/2000/svg" class="h-full w-full">
+  <g fill="black">
+    <g fill="currentColor" stroke="currentColor" stroke-linecap="round">
+      <path stroke-width="35" d="M775.382 435.919h688.37c-95.662 59.648-162.469 114.48-206.577 166.003c-49.32 57.612-70.521 111.644-71.137 162.45c-1.232 101.61 77.337 185.164 155.475 265.19c78.139 80.025 156.036 157.301 164.666 239.46c4.314 41.078-7.507 84.285-46.402 133.344c-38.553 48.628-104.083 102.354-205.449 161.715H566.383c84.656-52.562 142.286-101.176 178.994-147.476c41.632-52.511 56.198-102.74 51.236-149.978c-9.924-94.479-93.222-173.357-171.062-253.077c-77.84-79.72-150.037-159.505-148.954-248.9c.542-44.698 18.77-93.086 65.628-147.822c46.482-54.295 121.262-114.35 233.157-180.91zM769.016 413l-2.699 1.603c-114.757 68.004-192.18 129.707-241.5 187.32c-49.322 57.611-70.522 111.643-71.138 162.449c-1.232 101.61 77.332 185.164 155.47 265.19c78.14 80.025 156.041 157.301 164.67 239.46c4.315 41.078-7.506 84.285-46.4 133.344c-38.896 49.059-105.134 103.29-208.041 163.278L482.739 1587h777.865l2.677-1.558c104.39-60.852 172.823-116.326 214.455-168.837c41.632-52.511 56.198-102.74 51.236-149.978c-9.924-94.479-93.222-173.357-171.062-253.077c-77.84-79.72-150.037-159.505-148.954-248.9c.542-44.698 18.77-93.086 65.628-147.822c46.858-54.735 122.367-115.302 235.775-182.507L1546.335 413z"/>
+      <path stroke-width="10" d="M916.72 1332.912v22.918h437.988v-22.918zm-63.196-231.175v22.92h421.987v-22.92zm-206.795-231.17v22.92h436.384v-22.92zm16.402-231.173v22.918h421.399v-22.918z"/>
+    </g>
+  </g>
+</svg>

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -56,10 +56,12 @@ import { useNavigate } from 'react-router-dom';
 
 import { Can } from '@casl/react';
 import { ZoomIn, ZoomOut, ZoomFit } from '@carbon/icons-react';
+import BpmnJsScriptIcon from '../bpmn_js_script_icon.svg';
 import HttpService from '../services/HttpService';
 
 import ButtonWithConfirmation from './ButtonWithConfirmation';
 import {
+  convertSvgComponentToHtmlString,
   getBpmnProcessIdentifiers,
   makeid,
   modifyProcessIdentifierForPathParam,
@@ -336,8 +338,51 @@ export default function ReactDiagramEditor({
       }
     }
 
+    function createPrePostScriptOverlay(event: any) {
+      // avoid setting on script tasks because it's unnecessary but shouldn't actually cause issues
+      if (event.element && event.element.type !== 'bpmn:ScriptTask') {
+        const preScript =
+          event.element.businessObject.extensionElements?.values?.find(
+            (extension: any) => extension.$type === 'spiffworkflow:PreScript',
+          );
+        const postScript =
+          event.element.businessObject.extensionElements?.values?.find(
+            (extension: any) => extension.$type === 'spiffworkflow:PostScript',
+          );
+        const overlays = diagramModeler.get('overlays');
+        const scriptIcon = convertSvgComponentToHtmlString(
+          <BpmnJsScriptIcon />,
+        );
+
+        if (preScript) {
+          overlays.add(event.element.id, {
+            position: {
+              bottom: 25,
+              left: 0,
+            },
+            html: scriptIcon,
+          });
+        }
+        if (postScript) {
+          overlays.add(event.element.id, {
+            position: {
+              bottom: 25,
+              right: 25,
+            },
+            html: scriptIcon,
+          });
+        }
+      }
+    }
+
     setDiagramModelerState(diagramModeler);
 
+    if (diagramType !== 'readonly') {
+      diagramModeler.on('shape.added', (event: any) => {
+        createPrePostScriptOverlay(event);
+      });
+    }
+
     diagramModeler.on('spiff.script.edit', (event: any) => {
       const { error, element, scriptType, script, eventBus } = event;
       if (error) {

spiffworkflow-frontend/src/helpers.tsx

@@ -1,5 +1,8 @@
 import { Buffer } from 'buffer';
 
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { ReactElement } from 'react';
 import { ElementForArray, ProcessInstance } from './interfaces';
 
 export const DEFAULT_PER_PAGE = 50;
@@ -314,3 +317,14 @@ export const renderElementsForArray = (elements: ElementForArray[]) => {
     <div key={element.key}>{element.component}</div>
   ));
 };
+
+export const convertSvgComponentToHtmlString = (svgComponent: ReactElement) => {
+  // vite with svgr imports svg files as react components but we need the html string value at times
+  // so this converts the component to html string
+  const div = document.createElement('div');
+  const root = createRoot(div);
+  flushSync(() => {
+    root.render(svgComponent);
+  });
+  return div.innerHTML;
+};