diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx index d7785e584..c4d2f8c43 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx @@ -147,9 +147,7 @@ export default function ProcessModelShow() {

Process Instance {processInstanceId} kicked off ( view @@ -188,82 +186,98 @@ export default function ProcessModelShow() { }; const processModelFileList = () => { + if (!processModel) { + return null; + } let constructedTag; - const tags = (processModel as any).files.map((processModelFile: any) => { - const items: ProcessModelFileCarbonDropdownItem[] = [ - { - label: 'Delete', - action: 'delete', - processModelFile, - }, - { - label: 'Mark as Primary', - action: 'mark_as_primary', - processModelFile, - }, - ]; - const actionsTableCell = ( - - { - onProcessModelFileAction(e); - }} - items={items} - itemToString={(item: ProcessModelFileCarbonDropdownItem) => - item ? item.label : '' - } - /> - - ); - if (processModelFile.name.match(/\.(dmn|bpmn)$/)) { - let primarySuffix = ''; - if (processModelFile.name === (processModel as any).primary_file_name) { - primarySuffix = '- Primary File'; + const tags = processModel.files.map( + (processModelFile: any, index: number) => { + const isPrimaryBpmnFile = + processModelFile.name === processModel.primary_file_name; + const items: ProcessModelFileCarbonDropdownItem[] = [ + { + label: 'Delete', + action: 'delete', + processModelFile, + }, + ]; + if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) { + items.push({ + label: 'Mark as Primary', + action: 'mark_as_primary', + processModelFile, + }); } - constructedTag = ( - - - + + let actionDropDirection = 'bottom'; + if (index + 1 === processModel.files.length) { + actionDropDirection = 'top'; + } + + // The dropdown will get covered up if it extends passed the table container. + // Using bottom direction at least gives a scrollbar so use that and hopefully + // carbon will give access to z-index at some point. + // https://github.com/carbon-design-system/carbon-addons-iot-react/issues/1487 + const actionsTableCell = ( + + { + onProcessModelFileAction(e); + }} + items={items} + itemToString={(item: ProcessModelFileCarbonDropdownItem) => + item ? item.label : '' + } + /> + + ); + + if (processModelFile.name.match(/\.(dmn|bpmn)$/)) { + let primarySuffix = ''; + if (isPrimaryBpmnFile) { + primarySuffix = '- Primary File'; + } + constructedTag = ( + + + + {processModelFile.name} + + {primarySuffix} + + {actionsTableCell} + + ); + } else if (processModelFile.name.match(/\.(json|md)$/)) { + constructedTag = ( + + + + {processModelFile.name} + + + {actionsTableCell} + + ); + } else { + constructedTag = ( + + {processModelFile.name} - - {primarySuffix} - - {actionsTableCell} - - ); - } else if (processModelFile.name.match(/\.(json|md)$/)) { - constructedTag = ( - - - - {processModelFile.name} - - - {actionsTableCell} - - ); - } else { - constructedTag = ( - - - {processModelFile.name} - - - ); + + + ); + } + return constructedTag; } - return constructedTag; - }); + ); // return

; const headers = ['Name', 'Actions']; @@ -284,13 +298,14 @@ export default function ProcessModelShow() { }; const processInstancesUl = () => { + if (!processModel) { + return null; + } return (