Refactor bpmn diagram component for call activity nav #1984
Conversation
WalkthroughWalkthroughThe recent updates to the Changes
Sequence Diagram(s)sequenceDiagram
participant Parent Component
participant ReactDiagramEditor
participant Call Activity Overlay
Parent Component->>ReactDiagramEditor: Render with onCallActivityOverlayClick
ReactDiagramEditor->>Call Activity Overlay: Create overlay on call activity
Call Activity Overlay-->>ReactDiagramEditor: Click event triggered
ReactDiagramEditor->>Parent Component: Invoke onCallActivityOverlayClick with task data
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (11 hunks)
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (6 hunks)
- spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx (11 hunks)
Additional context used
Learnings (1)
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (3)
Learnt from: jasquat PR: sartography/spiff-arena#919 File: spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx:108-228 Timestamp: 2024-01-26T16:31:45.083Z Learning: The user, jasquat, has indicated a consideration for future refactor regarding the suggestion to abstract the API call logic in `getProcessInstances` function into a separate service or hook for improved modularity and reusability.Learnt from: jasquat PR: sartography/spiff-arena#919 File: spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx:130-181 Timestamp: 2024-01-26T16:06:18.478Z Learning: The user, jasquat, has indicated a consideration for future refactor regarding the suggestion to abstract the API call logic in `getProcessInstances` function into a separate service or hook for improved modularity and reusability.Learnt from: jasquat PR: sartography/spiff-arena#1902 File: spiffworkflow-frontend/src/routes/ProcessInstanceMigratePage.tsx:353-353 Timestamp: 2024-07-11T14:30:49.271Z Learning: Verify code changes using shell scripts when the user indicates a modification has been made.
Additional comments not posted (21)
spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (2)
80-80: LGTM!The addition of the
onCallActivityOverlayClickprop to theOwnPropstype is straightforward and looks good.
113-113: LGTM!The
onCallActivityOverlayClickprop is correctly passed to theReactDiagramEditorcomponent.spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx (13)
298-300: LGTM!The
onElementsChangedfunction is correctly wrapped in auseCallbackhook, improving performance by memoizing the function.
417-422: LGTM!The
onServiceTasksRequestedfunction is correctly wrapped in auseCallbackhook, improving performance by memoizing the function.
424-434: LGTM!The
onDataStoresRequestedfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
436-451: LGTM!The
onJsonSchemaFilesRequestedfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
453-470: LGTM!The
onDmnFilesRequestedfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
533-542: LGTM!The
setScriptUnitTestElementWithIndexfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
544-564: LGTM!The
onLaunchScriptEditorfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1064-1071: LGTM!The
onLaunchMarkdownEditorfunction is correctly wrapped in auseCallbackhook with an empty dependency array, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1102-1109: LGTM!The
onLaunchMessageEditorfunction is correctly wrapped in auseCallbackhook with an empty dependency array, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1152-1159: LGTM!The
onSearchProcessModelsfunction is correctly wrapped in auseCallbackhook with an empty dependency array, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1191-1209: LGTM!The
findFileNameForReferenceIdfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1211-1256: LGTM!The
onLaunchBpmnEditorfunction is correctly wrapped in auseCallbackhook with dependencies, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.
1258-1265: LGTM!The
onLaunchJsonSchemaEditorfunction is correctly wrapped in auseCallbackhook with an empty dependency array, improving performance by memoizing the function while ensuring it is only redefined when its dependencies change.spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (6)
737-759: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
initializeTaskDataToDisplayare correctly updated to use the memoized version.Verification successful
All function calls to
initializeTaskDataToDisplayare correctly updated to use the memoized version.The code changes are approved, and the function usage is verified to be correct.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `initializeTaskDataToDisplay` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'initializeTaskDataToDisplay'Length of output: 76
Script:
#!/bin/bash # Description: Verify all function calls to `initializeTaskDataToDisplay` are correctly updated. # Test: Search for the function usage. Expect: Only occurrences of the updated function. rg --type ts -A 5 $'initializeTaskDataToDisplay'Length of output: 3238
864-880: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
findMatchingTaskFromShapeElementare correctly updated to use the memoized version.Verification successful
Verified: The function
findMatchingTaskFromShapeElementis correctly updated and used within the codebase.All occurrences of the function are within the
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsxfile, ensuring the memoized version is applied correctly.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `findMatchingTaskFromShapeElement` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'findMatchingTaskFromShapeElement'Length of output: 81
Script:
#!/bin/bash # Description: Verify all function calls to `findMatchingTaskFromShapeElement` are correctly updated. # Test: Search for the function usage. Expect: Only occurrences of the updated function. rg 'findMatchingTaskFromShapeElement'Length of output: 370
815-862: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
makeProcessDataCallFromShapeElementare correctly updated to use the memoized version.Verification successful
Function usage verified!
The function
makeProcessDataCallFromShapeElementis correctly updated and used within the same file,ProcessInstanceShow.tsx.
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx: Verified occurrences ofmakeProcessDataCallFromShapeElement.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `makeProcessDataCallFromShapeElement` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'makeProcessDataCallFromShapeElement'Length of output: 84
Script:
#!/bin/bash # Description: Verify all function calls to `makeProcessDataCallFromShapeElement` are correctly updated. # Test: Search for the function usage. Expect: Only occurrences of the updated function. rg --type ts -A 5 $'makeProcessDataCallFromShapeElement'Length of output: 1742
709-726: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
initializeTaskInstancesToDisplayare correctly updated to use the memoized version.Verification successful
LGTM! Function usage is correctly updated.
The function
initializeTaskInstancesToDisplayis correctly utilized in the codebase with the memoized version. No further action is required.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `initializeTaskInstancesToDisplay` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'initializeTaskInstancesToDisplay'Length of output: 81
Script:
#!/bin/bash # Description: Verify all function calls to `initializeTaskInstancesToDisplay` are correctly updated. # Test: Search for the function usage. Expect: Only occurrences of the updated function. rg -A 5 $'initializeTaskInstancesToDisplay'Length of output: 2501
882-896: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
handleCallActivityNavigateare correctly updated to use the memoized version.Verification successful
The function usage is correctly updated.
The function
handleCallActivityNavigateis correctly used with the memoized version inspiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx.
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx:onCallActivityOverlayClick={handleCallActivityNavigate}Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `handleCallActivityNavigate` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'handleCallActivityNavigate'Length of output: 75
Script:
#!/bin/bash # Description: Verify all function calls to `handleCallActivityNavigate` are correctly updated. # Test: Search for the function usage. Expect: Only occurrences of the updated function. rg --type ts -A 5 $'handleCallActivityNavigate'Length of output: 1086
898-921: LGTM! But verify the function usage in the codebase.The code changes are approved.
However, ensure that all function calls to
handleClickedDiagramTaskare correctly updated to use the memoized version.Verification successful
Function usage verified successfully.
The function
handleClickedDiagramTaskis correctly updated and used within the codebase.
- Definition:
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx- Usage:
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `handleClickedDiagramTask` are correctly updated. # Test: Search for the function usage. Expect: Only occurances of the updated function. rg --type tsx -A 5 $'handleClickedDiagramTask'Length of output: 73
Script:
#!/bin/bash # Description: Verify all function calls to `handleClickedDiagramTask` are correctly updated. # Find all .tsx files and search for the function usage within those files fd --extension tsx --exec rg 'handleClickedDiagramTask' {}Length of output: 160
Script:
#!/bin/bash # Description: Verify all function calls to `handleClickedDiagramTask` are correctly updated. # Search for all occurrences of handleClickedDiagramTask in the codebase rg 'handleClickedDiagramTask'Length of output: 245
| function addOverlayOnCallActivity( | ||
| task: Task, | ||
| bpmnProcessIdentifiers: string[], | ||
| ) { | ||
| if ( | ||
| !onCallActivityOverlayClick || | ||
| diagramType !== 'readonly' || | ||
| !diagramModelerState | ||
| ) { | ||
| return; | ||
| } | ||
| function domify(htmlString: string) { | ||
| const template = document.createElement('template'); | ||
| template.innerHTML = htmlString.trim(); | ||
| return template.content.firstChild; | ||
| } | ||
| const createCallActivityOverlay = () => { | ||
| const overlays = diagramModelerState.get('overlays'); | ||
| const ARROW_DOWN_SVG = | ||
| '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>'; | ||
| const button: any = domify( | ||
| `<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`, | ||
| ); | ||
| button.addEventListener('click', () => { | ||
| onCallActivityOverlayClick(task); | ||
| }); | ||
| overlays.add(task.bpmn_identifier, 'drilldown', { | ||
| position: { | ||
| bottom: -10, | ||
| right: -8, | ||
| }, | ||
| html: button, | ||
| }); | ||
| }; | ||
| try { | ||
| if ( | ||
| bpmnProcessIdentifiers.includes( | ||
| task.bpmn_process_definition_identifier, | ||
| ) | ||
| ) { | ||
| createCallActivityOverlay(); | ||
| } | ||
| } catch (bpmnIoError: any) { | ||
| // the task list also contains task for processes called from call activities which will | ||
| // not exist in this diagram so just ignore them for now. | ||
| if ( | ||
| bpmnIoError.message !== | ||
| "Cannot read properties of undefined (reading 'id')" | ||
| ) { | ||
| throw bpmnIoError; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Consider improving error handling and code readability.
The addOverlayOnCallActivity function is well-implemented, but there are a few areas for potential improvement:
- Improve error handling by providing more specific error messages.
- Enhance code readability by breaking down the function into smaller, more manageable functions.
- function addOverlayOnCallActivity(
- task: Task,
- bpmnProcessIdentifiers: string[],
- ) {
- if (
- !onCallActivityOverlayClick ||
- diagramType !== 'readonly' ||
- !diagramModelerState
- ) {
- return;
- }
- function domify(htmlString: string) {
- const template = document.createElement('template');
- template.innerHTML = htmlString.trim();
- return template.content.firstChild;
- }
- const createCallActivityOverlay = () => {
- const overlays = diagramModelerState.get('overlays');
- const ARROW_DOWN_SVG =
- '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>';
- const button: any = domify(
- `<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`,
- );
- button.addEventListener('click', () => {
- onCallActivityOverlayClick(task);
- });
- overlays.add(task.bpmn_identifier, 'drilldown', {
- position: {
- bottom: -10,
- right: -8,
- },
- html: button,
- });
- };
- try {
- if (
- bpmnProcessIdentifiers.includes(
- task.bpmn_process_definition_identifier,
- )
- ) {
- createCallActivityOverlay();
- }
- } catch (bpmnIoError: any) {
- // the task list also contains task for processes called from call activities which will
- // not exist in this diagram so just ignore them for now.
- if (
- bpmnIoError.message !==
- "Cannot read properties of undefined (reading 'id')"
- ) {
- throw bpmnIoError;
- }
- }
- }
+ function addOverlayOnCallActivity(task: Task, bpmnProcessIdentifiers: string[]) {
+ if (!onCallActivityOverlayClick || diagramType !== 'readonly' || !diagramModelerState) {
+ return;
+ }
+
+ const domify = (htmlString: string) => {
+ const template = document.createElement('template');
+ template.innerHTML = htmlString.trim();
+ return template.content.firstChild;
+ };
+
+ const createCallActivityOverlay = () => {
+ const overlays = diagramModelerState.get('overlays');
+ const ARROW_DOWN_SVG = '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>';
+ const button: any = domify(`<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`);
+ button.addEventListener('click', () => onCallActivityOverlayClick(task));
+ overlays.add(task.bpmn_identifier, 'drilldown', {
+ position: { bottom: -10, right: -8 },
+ html: button,
+ });
+ };
+
+ try {
+ if (bpmnProcessIdentifiers.includes(task.bpmn_process_definition_identifier)) {
+ createCallActivityOverlay();
+ }
+ } catch (bpmnIoError: any) {
+ if (bpmnIoError.message !== "Cannot read properties of undefined (reading 'id')") {
+ console.error('Error adding overlay on call activity:', bpmnIoError);
+ }
+ }
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function addOverlayOnCallActivity( | |
| task: Task, | |
| bpmnProcessIdentifiers: string[], | |
| ) { | |
| if ( | |
| !onCallActivityOverlayClick || | |
| diagramType !== 'readonly' || | |
| !diagramModelerState | |
| ) { | |
| return; | |
| } | |
| function domify(htmlString: string) { | |
| const template = document.createElement('template'); | |
| template.innerHTML = htmlString.trim(); | |
| return template.content.firstChild; | |
| } | |
| const createCallActivityOverlay = () => { | |
| const overlays = diagramModelerState.get('overlays'); | |
| const ARROW_DOWN_SVG = | |
| '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>'; | |
| const button: any = domify( | |
| `<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`, | |
| ); | |
| button.addEventListener('click', () => { | |
| onCallActivityOverlayClick(task); | |
| }); | |
| overlays.add(task.bpmn_identifier, 'drilldown', { | |
| position: { | |
| bottom: -10, | |
| right: -8, | |
| }, | |
| html: button, | |
| }); | |
| }; | |
| try { | |
| if ( | |
| bpmnProcessIdentifiers.includes( | |
| task.bpmn_process_definition_identifier, | |
| ) | |
| ) { | |
| createCallActivityOverlay(); | |
| } | |
| } catch (bpmnIoError: any) { | |
| // the task list also contains task for processes called from call activities which will | |
| // not exist in this diagram so just ignore them for now. | |
| if ( | |
| bpmnIoError.message !== | |
| "Cannot read properties of undefined (reading 'id')" | |
| ) { | |
| throw bpmnIoError; | |
| } | |
| } | |
| } | |
| function addOverlayOnCallActivity(task: Task, bpmnProcessIdentifiers: string[]) { | |
| if (!onCallActivityOverlayClick || diagramType !== 'readonly' || !diagramModelerState) { | |
| return; | |
| } | |
| const domify = (htmlString: string) => { | |
| const template = document.createElement('template'); | |
| template.innerHTML = htmlString.trim(); | |
| return template.content.firstChild; | |
| }; | |
| const createCallActivityOverlay = () => { | |
| const overlays = diagramModelerState.get('overlays'); | |
| const ARROW_DOWN_SVG = '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>'; | |
| const button: any = domify(`<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`); | |
| button.addEventListener('click', () => onCallActivityOverlayClick(task)); | |
| overlays.add(task.bpmn_identifier, 'drilldown', { | |
| position: { bottom: -10, right: -8 }, | |
| html: button, | |
| }); | |
| }; | |
| try { | |
| if (bpmnProcessIdentifiers.includes(task.bpmn_process_definition_identifier)) { | |
| createCallActivityOverlay(); | |
| } | |
| } catch (bpmnIoError: any) { | |
| if (bpmnIoError.message !== "Cannot read properties of undefined (reading 'id')") { | |
| console.error('Error adding overlay on call activity:', bpmnIoError); | |
| } | |
| } | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (1)
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (13 hunks)
Files skipped from review as they are similar to previous changes (1)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (13 hunks)
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (2)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- spiffworkflow-frontend/cypress/e2e/process_instances.cy.js (1 hunks)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (14 hunks)
Files skipped from review due to trivial changes (1)
- spiffworkflow-frontend/cypress/e2e/process_instances.cy.js
Additional comments not posted (4)
spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (4)
80-80: New optional prop added:onCallActivityOverlayClick.This new prop allows the parent component to provide a callback function for call activity overlay clicks. Ensure that this prop is correctly passed and utilized in the component.
519-571: Consider improving error handling and code readability.The
addOverlayOnCallActivityfunction is well-implemented, but there are a few areas for potential improvement:
- Improve error handling by providing more specific error messages.
- Enhance code readability by breaking down the function into smaller, more manageable functions.
- function addOverlayOnCallActivity( - task: Task, - bpmnProcessIdentifiers: string[], - ) { - if ( - !onCallActivityOverlayClick || - diagramType !== 'readonly' || - !diagramModelerState - ) { - return; - } - function domify(htmlString: string) { - const template = document.createElement('template'); - template.innerHTML = htmlString.trim(); - return template.content.firstChild; - } - const createCallActivityOverlay = () => { - const overlays = diagramModelerState.get('overlays'); - const ARROW_DOWN_SVG = - '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>'; - const button: any = domify( - `<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`, - ); - button.addEventListener('click', () => { - onCallActivityOverlayClick(task); - }); - overlays.add(task.bpmn_identifier, 'drilldown', { - position: { - bottom: -10, - right: -8, - }, - html: button, - }); - }; - try { - if ( - bpmnProcessIdentifiers.includes( - task.bpmn_process_definition_identifier, - ) - ) { - createCallActivityOverlay(); - } - } catch (bpmnIoError: any) { - // the task list also contains task for processes called from call activities which will - // not exist in this diagram so just ignore them for now. - if ( - bpmnIoError.message !== - "Cannot read properties of undefined (reading 'id')" - ) { - throw bpmnIoError; - } - } - } + function addOverlayOnCallActivity(task: Task, bpmnProcessIdentifiers: string[]) { + if (!onCallActivityOverlayClick || diagramType !== 'readonly' || !diagramModelerState) { + return; + } + + const domify = (htmlString: string) => { + const template = document.createElement('template'); + template.innerHTML = htmlString.trim(); + return template.content.firstChild; + }; + + const createCallActivityOverlay = () => { + const overlays = diagramModelerState.get('overlays'); + const ARROW_DOWN_SVG = '<svg width="20" height="20" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"> <g id="SVGRepo_bgCarrier" stroke-width="0"> <rect x="0" y="0" width="24.00" height="24.00" rx="0" fill="#2196f3" strokewidth="0"/> </g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.048"/> <g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/> </g> </svg>'; + const button: any = domify(`<button class="bjs-drilldown">${ARROW_DOWN_SVG}</button>`); + button.addEventListener('click', () => onCallActivityOverlayClick(task)); + overlays.add(task.bpmn_identifier, 'drilldown', { + position: { bottom: -10, right: -8 }, + html: button, + }); + }; + + try { + if (bpmnProcessIdentifiers.includes(task.bpmn_process_definition_identifier)) { + createCallActivityOverlay(); + } + } catch (bpmnIoError: any) { + if (bpmnIoError.message !== "Cannot read properties of undefined (reading 'id')") { + console.error('Error adding overlay on call activity:', bpmnIoError); + } + } + }
453-464: Ensure correct integration ofonCallActivityOverlayClick.The
useEffecthook correctly integrates the newonCallActivityOverlayClickprop. Ensure that this prop is passed and utilized as expected.
614-619: Ensure correct integration ofaddOverlayOnCallActivity.The
onImportDonefunction correctly calls theaddOverlayOnCallActivityfunction for call activities. Ensure that theaddOverlayOnCallActivityfunction is correctly integrated and utilized.
…e opened in a new tab if desired w/ burnettk
…it can be opened in a new tab if desired w/ burnettk" This reverts commit 1c12725.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (17 hunks)
Files skipped from review as they are similar to previous changes (1)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx (14 hunks)
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (2)
- spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
- spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
burnettk
changed the title
Supports sartography/bpmn-js-spiffworkflow#111
This adds an overlay to call activities on the process instance show page that will navigate to that call activity. This navigation will happen in the same tab instead of creating a new one.
Changes:
Summary by CodeRabbit
New Features
Performance Improvements
Bug Fixes
Documentation