adds basic support to use certain components in extensions w/ burnettk (#597)

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

spiffworkflow-backend/src/spiffworkflow_backend/services/element_units_service.py

@@ -58,7 +58,7 @@ class ElementUnitsService:
                 # make mypy happy
                 return None
 
-            current_app.logger.info(f"Checking element unit cache @ {cache_key} :: '{process_id}' - '{element_id}'")
+            current_app.logger.debug(f"Checking element unit cache @ {cache_key} :: '{process_id}' - '{element_id}'")
 
             bpmn_spec_json = spiff_element_units.workflow_from_cached_element_unit(
                 cache_dir, cache_key, process_id, element_id

spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 // @ts-ignore
-import MDEditor from '@uiw/react-md-editor';
 import { Toggle } from '@carbon/react';
 import FormattingService from '../services/FormattingService';
+import MarkdownRenderer from './MarkdownRenderer';
 
 type OwnProps = {
   task: any;
@@ -87,9 +87,8 @@ export default function InstructionsForEndUser({
           https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
           This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.
         */}
-        <div data-color-mode="light">
+
-          <MDEditor.Markdown linkTarget="_blank" source={instructions} />
+        <MarkdownRenderer linkTarget="_blank" source={instructions} />
-        </div>
       </div>
       {showCollapseToggle()}
     </div>

spiffworkflow-frontend/src/components/MarkdownDisplayForFile.tsx

@@ -1,6 +1,6 @@
-import MDEditor from '@uiw/react-md-editor';
 import { useEffect, useState } from 'react';
 import HttpService from '../services/HttpService';
+import MarkdownRenderer from './MarkdownRenderer';
 
 type OwnProps = {
   apiPath: string;
@@ -24,9 +24,11 @@ export default function MarkdownDisplayForFile({ apiPath }: OwnProps) {
 
   if (markdownContents) {
     return (
-      <div data-color-mode="light" className="with-bottom-margin">
+      <MarkdownRenderer
-        <MDEditor.Markdown linkTarget="_blank" source={markdownContents} />
+        linkTarget="_blank"
-      </div>
+        source={markdownContents}
+        wrapperClassName="with-bottom-margin"
+      />
     );
   }
 

spiffworkflow-frontend/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,16 @@
+import MDEditor from '@uiw/react-md-editor';
+
+export default function MarkdownRenderer(props: any) {
+  let wrapperClassName = '';
+  const propsToUse = props;
+  if ('wrapperClassName' in propsToUse) {
+    wrapperClassName = propsToUse.wrapperClassName;
+    delete propsToUse.wrapperClassName;
+  }
+  return (
+    <div data-color-mode="light" className={wrapperClassName}>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <MDEditor.Markdown {...propsToUse} />
+    </div>
+  );
+}

spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx

@@ -66,20 +66,21 @@ const storeRecentProcessModelInLocalStorage = (
 
 type OwnProps = {
   processModel: ProcessModel;
-  onSuccessCallback: Function;
   className?: string;
   checkPermissions?: boolean;
+  buttonText?: string;
 };
 
 export default function ProcessInstanceRun({
   processModel,
-  onSuccessCallback,
   className,
   checkPermissions = true,
+  buttonText = 'Start',
 }: OwnProps) {
   const navigate = useNavigate();
   const { addError, removeError } = useAPIError();
   const [disableStartButton, setDisableStartButton] = useState<boolean>(false);
+
   const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
     processModel.id
   );
@@ -98,16 +99,15 @@ export default function ProcessInstanceRun({
   const onProcessInstanceRun = (processInstance: any) => {
     const processInstanceId = (processInstance as any).id;
     navigate(
-      `/process-instances/for-me/${modifyProcessIdentifierForPathParam(
+      `/process-instances/for-me/${modifiedProcessModelId}/${processInstanceId}/interstitial`
-        processModel.id
-      )}/${processInstanceId}/interstitial`
     );
-    onSuccessCallback(processInstance);
   };
 
   const processModelRun = (processInstance: any) => {
     removeError();
-    storeRecentProcessModelInLocalStorage(processModel);
+    if (processModel) {
+      storeRecentProcessModelInLocalStorage(processModel);
+    }
     HttpService.makeCallToBackend({
       path: `/process-instances/${modifiedProcessModelId}/${processInstance.id}/run`,
       successCallback: onProcessInstanceRun,
@@ -141,7 +141,7 @@ export default function ProcessInstanceRun({
       disabled={disableStartButton}
       size="md"
     >
-      Start
+      {buttonText}
     </Button>
   );
 

spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx

@@ -1,17 +1,16 @@
 import { ReactElement, useEffect, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import {
   Tile,
   // @ts-ignore
 } from '@carbon/react';
 import HttpService from '../services/HttpService';
-import { ProcessModel, ProcessInstance, ProcessGroup } from '../interfaces';
+import { ProcessModel, ProcessGroup } from '../interfaces';
 import {
   modifyProcessIdentifierForPathParam,
   truncateString,
 } from '../helpers';
 import ProcessInstanceRun from './ProcessInstanceRun';
-import { Notification } from './Notification';
 
 type OwnProps = {
   headerElement?: ReactElement;
@@ -28,8 +27,6 @@ export default function ProcessModelListTiles({
   const [processModels, setProcessModels] = useState<ProcessModel[] | null>(
     null
   );
-  const [processInstance, setProcessInstance] =
-    useState<ProcessInstance | null>(null);
 
   useEffect(() => {
     const setProcessModelsFromResult = (result: any) => {
@@ -48,27 +45,6 @@ export default function ProcessModelListTiles({
     });
   }, [searchParams, processGroup]);
 
-  const processInstanceRunResultTag = () => {
-    if (processInstance) {
-      return (
-        <Notification
-          title={`Process Instance ${processInstance.id} kicked off`}
-          onClose={() => setProcessInstance(null)}
-        >
-          <Link
-            to={`/process-instances/${modifyProcessIdentifierForPathParam(
-              processInstance.process_model_identifier
-            )}/${processInstance.id}`}
-            data-qa="process-instance-show-link"
-          >
-            view
-          </Link>
-        </Notification>
-      );
-    }
-    return null;
-  };
-
   const processModelsDisplayArea = () => {
     let displayText = null;
     if (processModels && processModels.length > 0) {
@@ -95,7 +71,6 @@ export default function ProcessModelListTiles({
               </p>
               <ProcessInstanceRun
                 processModel={row}
-                onSuccessCallback={setProcessInstance}
                 className="tile-pin-bottom"
                 checkPermissions={checkPermissions}
               />
@@ -114,7 +89,6 @@ export default function ProcessModelListTiles({
       return (
         <>
           {headerElement}
-          {processInstanceRunResultTag()}
           {processModelsDisplayArea()}
         </>
       );

spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts

@@ -37,10 +37,16 @@ export interface UiSchemaAction {
   full_api_path?: boolean;
 }
 
+export interface UiSchemaPageComponent {
+  name: string;
+  arguments: object;
+}
+
 export interface UiSchemaPageDefinition {
   header: string;
   api: string;
 
+  components?: UiSchemaPageComponent[];
   form?: UiSchemaForm;
   markdown_instruction_filename?: string;
   navigate_instead_of_post_to_api?: boolean;

spiffworkflow-frontend/src/interfaces.ts

@@ -146,6 +146,9 @@ export interface ProcessReference {
 }
 
 export type ObjectWithStringKeysAndValues = { [key: string]: string };
+export type ObjectWithStringKeysAndFunctionValues = {
+  [key: string]: Function;
+};
 
 export interface FilterOperator {
   id: string;

spiffworkflow-frontend/src/routes/Extension.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Button } from '@carbon/react';
-import MDEditor from '@uiw/react-md-editor';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { Editor } from '@monaco-editor/react';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
-import { ProcessFile, ProcessModel } from '../interfaces';
+import {
+  ObjectWithStringKeysAndFunctionValues,
+  ProcessFile,
+  ProcessModel,
+} from '../interfaces';
 import HttpService from '../services/HttpService';
 import useAPIError from '../hooks/UseApiError';
 import { recursivelyChangeNullAndUndefined } from '../helpers';
@@ -13,10 +16,13 @@ import { BACKEND_BASE_URL } from '../config';
 import {
   ExtensionPostBody,
   ExtensionUiSchema,
+  UiSchemaPageComponent,
   UiSchemaPageDefinition,
 } from '../extension_ui_schema_interfaces';
 import ErrorDisplay from '../components/ErrorDisplay';
 import FormattingService from '../services/FormattingService';
+import ProcessInstanceRun from '../components/ProcessInstanceRun';
+import MarkdownRenderer from '../components/MarkdownRenderer';
 
 type OwnProps = {
   displayErrors?: boolean;
@@ -43,9 +49,16 @@ export default function Extension({ displayErrors = true }: OwnProps) {
   }>({});
   const [uiSchemaPageDefinition, setUiSchemaPageDefinition] =
     useState<UiSchemaPageDefinition | null>(null);
+  const [readyForComponentsToDisplay, setReadyForComponentsToDisplay] =
+    useState<boolean>(false);
 
   const { addError, removeError } = useAPIError();
 
+  const supportedComponents: ObjectWithStringKeysAndFunctionValues = {
+    ProcessInstanceRun,
+    MarkdownRenderer,
+  };
+
   const setConfigsIfDesiredSchemaFile = useCallback(
     // eslint-disable-next-line sonarjs/cognitive-complexity
     (extensionUiSchemaFile: ProcessFile | null, pm: ProcessModel) => {
@@ -57,6 +70,7 @@ export default function Extension({ displayErrors = true }: OwnProps) {
           );
           setMarkdownToRenderOnLoad(newMarkdown);
         }
+        setReadyForComponentsToDisplay(true);
       };
 
       if (
@@ -98,6 +112,8 @@ export default function Extension({ displayErrors = true }: OwnProps) {
               httpMethod: 'POST',
               postBody,
             });
+          } else {
+            setReadyForComponentsToDisplay(true);
           }
         }
       }
@@ -238,7 +254,7 @@ export default function Extension({ displayErrors = true }: OwnProps) {
     }
   };
 
-  if (uiSchemaPageDefinition) {
+  if (readyForComponentsToDisplay && uiSchemaPageDefinition) {
     const componentsToDisplay = [<h1>{uiSchemaPageDefinition.header}</h1>];
     const markdownContentsToRender = [];
 
@@ -261,12 +277,28 @@ export default function Extension({ displayErrors = true }: OwnProps) {
 
     if (markdownContentsToRender.length > 0) {
       componentsToDisplay.push(
-        <div data-color-mode="light" className="with-bottom-margin">
+        <MarkdownRenderer
-          <MDEditor.Markdown
+          linkTarget={mdEditorLinkTarget}
-            linkTarget={mdEditorLinkTarget}
+          source={markdownContentsToRender.join('\n')}
-            source={markdownContentsToRender.join('\n')}
+          wrapperClassName="with-bottom-margin"
-          />
+        />
-        </div>
+      );
+    }
+
+    if (uiSchemaPageDefinition.components) {
+      uiSchemaPageDefinition.components.forEach(
+        (component: UiSchemaPageComponent) => {
+          if (supportedComponents[component.name]) {
+            const argumentsForComponent: any = component.arguments;
+            componentsToDisplay.push(
+              supportedComponents[component.name](argumentsForComponent)
+            );
+          } else {
+            console.error(
+              `Extension tried to use component with name '${component.name}' but that is not allowed.`
+            );
+          }
+        }
       );
     }
 
@@ -304,13 +336,12 @@ export default function Extension({ displayErrors = true }: OwnProps) {
     if (processedTaskData) {
       if (markdownToRenderOnSubmit) {
         componentsToDisplay.push(
-          <div data-color-mode="light" className="with-top-margin">
+          <MarkdownRenderer
-            <MDEditor.Markdown
+            className="onboarding"
-              className="onboarding"
+            linkTarget="_blank"
-              linkTarget="_blank"
+            source={markdownToRenderOnSubmit}
-              source={markdownToRenderOnSubmit}
+            wrapperClassName="with-top-margin"
-            />
+          />
-          </div>
         );
       } else {
         componentsToDisplay.push(

spiffworkflow-frontend/src/routes/MyTasks.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 // @ts-ignore
 import { Button, Table } from '@carbon/react';
 import { Link, useSearchParams } from 'react-router-dom';
-import { Notification } from '../components/Notification';
 import PaginationForTable from '../components/PaginationForTable';
 import {
   getPageInfoFromSearchParams,
@@ -12,7 +11,6 @@ import {
 import HttpService from '../services/HttpService';
 import {
   PaginationObject,
-  ProcessInstance,
   ProcessModel,
   RecentProcessModel,
 } from '../interfaces';
@@ -25,8 +23,6 @@ export default function MyTasks() {
   const [searchParams] = useSearchParams();
   const [tasks, setTasks] = useState([]);
   const [pagination, setPagination] = useState<PaginationObject | null>(null);
-  const [processInstance, setProcessInstance] =
-    useState<ProcessInstance | null>(null);
 
   useEffect(() => {
     const getTasks = () => {
@@ -52,27 +48,6 @@ export default function MyTasks() {
     );
   }, [searchParams]);
 
-  const processInstanceRunResultTag = () => {
-    if (processInstance) {
-      return (
-        <Notification
-          title={`Process Instance ${processInstance.id} kicked off`}
-          onClose={() => setProcessInstance(null)}
-        >
-          <Link
-            to={`/process-instances/${modifyProcessIdentifierForPathParam(
-              processInstance.process_model_identifier
-            )}/${processInstance.id}`}
-            data-qa="process-instance-show-link"
-          >
-            view
-          </Link>
-        </Notification>
-      );
-    }
-    return null;
-  };
-
   let recentProcessModels: RecentProcessModel[] = [];
   const recentProcessModelsString = localStorage.getItem('recentProcessModels');
   if (recentProcessModelsString !== null) {
@@ -163,10 +138,7 @@ export default function MyTasks() {
             </Link>
           </td>
           <td className="actions-cell">
-            <ProcessInstanceRun
+            <ProcessInstanceRun processModel={processModel} />
-              processModel={processModel}
-              onSuccessCallback={setProcessInstance}
-            />
           </td>
         </tr>
       );
@@ -220,7 +192,6 @@ export default function MyTasks() {
     }
     return (
       <>
-        {processInstanceRunResultTag()}
         {tasksWaitingForMe}
         <br />
         {relevantProcessModelSection}

spiffworkflow-frontend/src/routes/OnboardingView.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import MDEditor from '@uiw/react-md-editor';
 import { useLocation, useNavigate } from 'react-router-dom';
 import HttpService from '../services/HttpService';
 import { Onboarding } from '../interfaces';
 import { objectIsEmpty } from '../helpers';
+import MarkdownRenderer from '../components/MarkdownRenderer';
 
 export default function OnboardingView() {
   const [onboarding, setOnboarding] = useState<Onboarding | null>(null);
@@ -40,13 +40,11 @@ export default function OnboardingView() {
       onboarding.instructions.length > 0
     ) {
       return (
-        <div data-color-mode="light">
+        <MarkdownRenderer
-          <MDEditor.Markdown
+          className="onboarding"
-            className="onboarding"
+          linkTarget="_blank"
-            linkTarget="_blank"
+          source={onboarding.instructions}
-            source={onboarding.instructions}
+        />
-          />
-        </div>
       );
     }
     return null;

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -38,12 +38,7 @@ import {
   modifyProcessIdentifierForPathParam,
   setPageTitle,
 } from '../helpers';
-import {
+import { PermissionsToCheck, ProcessFile, ProcessModel } from '../interfaces';
-  PermissionsToCheck,
-  ProcessFile,
-  ProcessInstance,
-  ProcessModel,
-} from '../interfaces';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
 import { usePermissionFetcher } from '../hooks/PermissionService';
@@ -59,8 +54,6 @@ export default function ProcessModelShow() {
   const navigate = useNavigate();
 
   const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
-  const [processInstance, setProcessInstance] =
-    useState<ProcessInstance | null>(null);
   const [reloadModel, setReloadModel] = useState<boolean>(false);
   const [filesToUpload, setFilesToUpload] = useState<any>(null);
   const [showFileUploadModal, setShowFileUploadModal] =
@@ -120,25 +113,6 @@ export default function ProcessModelShow() {
     });
   }, [reloadModel, modifiedProcessModelId]);
 
-  const processInstanceRunResultTag = () => {
-    if (processInstance) {
-      return (
-        <Notification
-          title="Process Instance Kicked Off:"
-          onClose={() => setProcessInstance(null)}
-        >
-          <Link
-            to={`/process-instances/for-me/${modifiedProcessModelId}/${processInstance.id}`}
-            data-qa="process-instance-show-link"
-          >
-            view
-          </Link>
-        </Notification>
-      );
-    }
-    return null;
-  };
-
   const onUploadedCallback = () => {
     setReloadModel(true);
   };
@@ -729,10 +703,7 @@ export default function ProcessModelShow() {
           ability={ability}
         >
           <>
-            <ProcessInstanceRun
+            <ProcessInstanceRun processModel={processModel} />
-              processModel={processModel}
-              onSuccessCallback={setProcessInstance}
-            />
             <br />
             <br />
           </>
@@ -753,7 +724,6 @@ export default function ProcessModelShow() {
           ]}
         />
         {processModelPublishMessage()}
-        {processInstanceRunResultTag()}
         <Stack orientation="horizontal" gap={1}>
           <h1 className="with-icons">
             Process Model: {processModel.display_name}

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -4,7 +4,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Grid, Column, Button, ButtonSet, Loading } from '@carbon/react';
 
 import { useDebouncedCallback } from 'use-debounce';
-import MDEditor from '@uiw/react-md-editor';
 import HttpService from '../services/HttpService';
 import useAPIError from '../hooks/UseApiError';
 import {
@@ -23,6 +22,7 @@ import CustomForm from '../components/CustomForm';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import InstructionsForEndUser from '../components/InstructionsForEndUser';
 import UserService from '../services/UserService';
+import MarkdownRenderer from '../components/MarkdownRenderer';
 
 export default function TaskShow() {
   // get a basic task which doesn't get the form data so we can load
@@ -397,9 +397,7 @@ export default function TaskShow() {
 
   if (guestConfirmationText) {
     pageElements.push(
-      <div data-color-mode="light">
+      <MarkdownRenderer linkTarget="_blank" source={guestConfirmationText} />
-        <MDEditor.Markdown linkTarget="_blank" source={guestConfirmationText} />
-      </div>
     );
   } else if (basicTask && taskData) {
     pageElements.push(<InstructionsForEndUser task={taskWithTaskData} />);