mirror of
https://github.com/status-im/spiff-arena.git
synced 2025-02-06 07:04:18 +00:00
Merge pull request #24 from sartography/feature/carbon_process_model_show
Feature/carbon process model show
This commit is contained in:
Kevin Burnett
GitHub
commit
fdfb455b02
@ -7,6 +7,7 @@ from typing import Optional
|
||||
from flask import current_app
|
||||
from flask_bpmn.api.api_error import ApiError
|
||||
from flask_bpmn.models.db import db
|
||||
from SpiffWorkflow.util.deep_merge import DeepMerge # type: ignore
|
||||
from SpiffWorkflow.task import Task as SpiffTask # type: ignore
|
||||
|
||||
from spiffworkflow_backend.models.process_instance import ProcessInstanceApi
|
||||
@ -105,6 +106,20 @@ class ProcessInstanceService:
|
||||
title=title_value,
|
||||
)
|
||||
|
||||
next_task_trying_again = next_task
|
||||
if (
|
||||
not next_task
|
||||
): # The Next Task can be requested to be a certain task, useful for parallel tasks.
|
||||
# This may or may not work, sometimes there is no next task to complete.
|
||||
next_task_trying_again = processor.next_task()
|
||||
|
||||
if next_task_trying_again is not None:
|
||||
process_instance_api.next_task = (
|
||||
ProcessInstanceService.spiff_task_to_api_task(
|
||||
next_task_trying_again, add_docs_and_forms=True
|
||||
)
|
||||
)
|
||||
|
||||
return process_instance_api
|
||||
|
||||
def get_process_instance(self, process_instance_id: int) -> Any:
|
||||
|
||||
@ -1123,7 +1123,7 @@ class TestProcessApi(BaseTest):
|
||||
)
|
||||
|
||||
assert response.json is not None
|
||||
# assert response.json['next_task'] is not None
|
||||
assert response.json['next_task'] is not None
|
||||
|
||||
active_tasks = (
|
||||
db.session.query(ActiveTaskModel)
|
||||
|
||||
@ -4,10 +4,14 @@ import { Button, Modal } from '@carbon/react';
|
||||
|
||||
type OwnProps = {
|
||||
description?: string;
|
||||
buttonLabel: string;
|
||||
buttonLabel?: string;
|
||||
onConfirmation: (..._args: any[]) => any;
|
||||
title?: string;
|
||||
confirmButtonLabel?: string;
|
||||
kind?: string;
|
||||
renderIcon?: boolean;
|
||||
iconDescription?: string | null;
|
||||
hasIconOnly?: boolean;
|
||||
};
|
||||
|
||||
export default function ButtonWithConfirmation({
|
||||
@ -16,6 +20,10 @@ export default function ButtonWithConfirmation({
|
||||
onConfirmation,
|
||||
title = 'Are you sure?',
|
||||
confirmButtonLabel = 'OK',
|
||||
kind = 'danger',
|
||||
renderIcon = false,
|
||||
iconDescription = null,
|
||||
hasIconOnly = false,
|
||||
}: OwnProps) {
|
||||
const [showConfirmationPrompt, setShowConfirmationPrompt] = useState(false);
|
||||
|
||||
@ -49,7 +57,13 @@ export default function ButtonWithConfirmation({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleShowConfirmationPrompt} kind="danger">
|
||||
<Button
|
||||
onClick={handleShowConfirmationPrompt}
|
||||
kind={kind}
|
||||
renderIcon={renderIcon}
|
||||
iconDescription={iconDescription}
|
||||
hasIconOnly={hasIconOnly}
|
||||
>
|
||||
{buttonLabel}
|
||||
</Button>
|
||||
{confirmationDialog()}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import Breadcrumb from 'react-bootstrap/Breadcrumb';
|
||||
import { BreadcrumbItem } from '../interfaces';
|
||||
// @ts-ignore
|
||||
import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
|
||||
import { HotCrumbItem } from '../interfaces';
|
||||
|
||||
type OwnProps = {
|
||||
processModelId?: string;
|
||||
processGroupId?: string;
|
||||
linkProcessModel?: boolean;
|
||||
hotCrumbs?: BreadcrumbItem[];
|
||||
hotCrumbs?: HotCrumbItem[];
|
||||
};
|
||||
|
||||
export default function ProcessBreadcrumb({
|
||||
@ -22,18 +22,20 @@ export default function ProcessBreadcrumb({
|
||||
if (lastItem === undefined) {
|
||||
return null;
|
||||
}
|
||||
const lastCrumb = <Breadcrumb.Item active>{lastItem[0]}</Breadcrumb.Item>;
|
||||
const leadingCrumbLinks = hotCrumbs.map((crumb) => {
|
||||
const lastCrumb = (
|
||||
<BreadcrumbItem isCurrentPage>{lastItem[0]}</BreadcrumbItem>
|
||||
);
|
||||
const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
|
||||
const valueLabel = crumb[0];
|
||||
const url = crumb[1];
|
||||
return (
|
||||
<Breadcrumb.Item key={valueLabel} linkAs={Link} linkProps={{ to: url }}>
|
||||
<BreadcrumbItem key={valueLabel} href={url}>
|
||||
{valueLabel}
|
||||
</Breadcrumb.Item>
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb noTrailingSlash>
|
||||
{leadingCrumbLinks}
|
||||
{lastCrumb}
|
||||
</Breadcrumb>
|
||||
@ -42,42 +44,38 @@ export default function ProcessBreadcrumb({
|
||||
if (processModelId) {
|
||||
if (linkProcessModel) {
|
||||
processModelBreadcrumb = (
|
||||
<Breadcrumb.Item
|
||||
linkAs={Link}
|
||||
linkProps={{
|
||||
to: `/admin/process-models/${processGroupId}/${processModelId}`,
|
||||
}}
|
||||
<BreadcrumbItem
|
||||
href={`/admin/process-models/${processGroupId}/${processModelId}`}
|
||||
>
|
||||
Process Model: {processModelId}
|
||||
</Breadcrumb.Item>
|
||||
{`Process Model: ${processModelId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
} else {
|
||||
processModelBreadcrumb = (
|
||||
<Breadcrumb.Item active>
|
||||
Process Model: {processModelId}
|
||||
</Breadcrumb.Item>
|
||||
<BreadcrumbItem isCurrentPage>
|
||||
{`Process Model: ${processModelId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
processGroupBreadcrumb = (
|
||||
<Breadcrumb.Item
|
||||
linkAs={Link}
|
||||
<BreadcrumbItem
|
||||
data-qa="process-group-breadcrumb-link"
|
||||
linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
|
||||
href={`/admin/process-groups/${processGroupId}`}
|
||||
>
|
||||
Process Group: {processGroupId}
|
||||
</Breadcrumb.Item>
|
||||
{`Process Group: ${processGroupId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
} else if (processGroupId) {
|
||||
processGroupBreadcrumb = (
|
||||
<Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
|
||||
<BreadcrumbItem isCurrentPage>
|
||||
{`Process Group: ${processGroupId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
|
||||
Process Groups
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb noTrailingSlash>
|
||||
<BreadcrumbItem href="/admin">Process Groups</BreadcrumbItem>
|
||||
{processGroupBreadcrumb}
|
||||
{processModelBreadcrumb}
|
||||
</Breadcrumb>
|
||||
|
||||
@ -40,6 +40,10 @@ span.bjs-crumb {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.accordion-item-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.diagram-editor-canvas {
|
||||
border:1px solid #000000;
|
||||
height:70vh;
|
||||
|
||||
@ -1,10 +1,22 @@
|
||||
// @use '@carbon/react/scss/themes';
|
||||
// @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
|
||||
|
||||
// @use '@carbon/react/scss/theme' with
|
||||
// (
|
||||
// $theme: (
|
||||
// cds-link-primary: #525252
|
||||
// )
|
||||
// );
|
||||
|
||||
@use '@carbon/react';
|
||||
@use '@carbon/styles';
|
||||
// @include grid.flex-grid();
|
||||
|
||||
@use '@carbon/colors';
|
||||
// @use '@carbon/react/scss/colors';
|
||||
@use '@carbon/react/scss/themes';
|
||||
|
||||
// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe))
|
||||
|
||||
// site is mainly using white theme.
|
||||
// header is mainly using g100
|
||||
@ -13,3 +25,60 @@
|
||||
// background-color: colors.$gray-100;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cds--breadcrumb-item a.cds--link:hover {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link:visited {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link:visited:hover {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link {
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.cds--btn--ghost {
|
||||
color: black;
|
||||
}
|
||||
.cds--btn--ghost:visited {
|
||||
color: black;
|
||||
}
|
||||
.cds--btn--ghost:hover {
|
||||
color: black;
|
||||
}
|
||||
.cds--btn--ghost:visited:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
$slightly-lighter-gray: #474747;
|
||||
$spiff-header-background-color: #161616;
|
||||
|
||||
.cds--header__global .cds--btn--primary {
|
||||
background-color: $spiff-header-background-color;
|
||||
}
|
||||
.cds--btn--primary {
|
||||
background-color: #393939;
|
||||
}
|
||||
.cds--btn--primary:hover {
|
||||
background-color: $slightly-lighter-gray;
|
||||
}
|
||||
// .cds--btn--ghost:visited {
|
||||
// color: black;
|
||||
// }
|
||||
// .cds--btn--ghost:hover {
|
||||
// color: black;
|
||||
// }
|
||||
// .cds--btn--ghost:visited:hover {
|
||||
// color: black;
|
||||
// }
|
||||
|
||||
|
||||
// :root {
|
||||
// --cds-link-primary: #525252;
|
||||
// }
|
||||
// .card {
|
||||
// background: var(--orange);
|
||||
// --orange: hsl(255, 72%, var(--lightness));
|
||||
// }
|
||||
|
||||
@ -32,10 +32,12 @@ export interface ProcessFile {
|
||||
references: ProcessFileReference[];
|
||||
size: number;
|
||||
type: string;
|
||||
file_contents?: string;
|
||||
}
|
||||
|
||||
export interface ProcessModel {
|
||||
id: string;
|
||||
description: string;
|
||||
process_group_id: string;
|
||||
display_name: string;
|
||||
primary_file_name: string;
|
||||
@ -43,7 +45,7 @@ export interface ProcessModel {
|
||||
}
|
||||
|
||||
// tuple of display value and URL
|
||||
export type BreadcrumbItem = [displayValue: string, url?: string];
|
||||
export type HotCrumbItem = [displayValue: string, url?: string];
|
||||
|
||||
export interface ErrorForDisplay {
|
||||
message: string;
|
||||
|
||||
@ -49,6 +49,7 @@ export default function ProcessModelEdit() {
|
||||
});
|
||||
};
|
||||
|
||||
// share with or delete from ProcessModelEditDiagram
|
||||
const deleteProcessModel = () => {
|
||||
setErrorMessage(null);
|
||||
const processModelToUse = processModel as any;
|
||||
|
||||
@ -1,12 +1,44 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
// @ts-ignore
|
||||
import { Button, Stack } from '@carbon/react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Add,
|
||||
Upload,
|
||||
Download,
|
||||
TrashCan,
|
||||
Favorite,
|
||||
Edit,
|
||||
// @ts-ignore
|
||||
} from '@carbon/icons-react';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
Dropdown,
|
||||
Button,
|
||||
Stack,
|
||||
ButtonSet,
|
||||
Modal,
|
||||
FileUploader,
|
||||
Table,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableBody,
|
||||
// @ts-ignore
|
||||
} from '@carbon/react';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import FileInput from '../components/FileInput';
|
||||
import HttpService from '../services/HttpService';
|
||||
import ErrorContext from '../contexts/ErrorContext';
|
||||
import { RecentProcessModel } from '../interfaces';
|
||||
import { ProcessFile, ProcessModel, RecentProcessModel } from '../interfaces';
|
||||
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
|
||||
|
||||
interface ProcessModelFileCarbonDropdownItem {
|
||||
label: string;
|
||||
action: string;
|
||||
processModelFile: ProcessFile;
|
||||
needsConfirmation: boolean;
|
||||
icon: any;
|
||||
}
|
||||
|
||||
const storeRecentProcessModelInLocalStorage = (
|
||||
processModelForStorage: any,
|
||||
@ -66,12 +98,16 @@ export default function ProcessModelShow() {
|
||||
const params = useParams();
|
||||
const setErrorMessage = (useContext as any)(ErrorContext)[1];
|
||||
|
||||
const [processModel, setProcessModel] = useState({});
|
||||
const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
|
||||
const [processInstanceResult, setProcessInstanceResult] = useState(null);
|
||||
const [reloadModel, setReloadModel] = useState(false);
|
||||
const [reloadModel, setReloadModel] = useState<boolean>(false);
|
||||
const [filesToUpload, setFilesToUpload] = useState<any>(null);
|
||||
const [showFileUploadModal, setShowFileUploadModal] =
|
||||
useState<boolean>(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const processResult = (result: object) => {
|
||||
const processResult = (result: ProcessModel) => {
|
||||
setProcessModel(result);
|
||||
setReloadModel(false);
|
||||
storeRecentProcessModelInLocalStorage(result, params);
|
||||
@ -100,8 +136,8 @@ export default function ProcessModelShow() {
|
||||
});
|
||||
};
|
||||
|
||||
let processInstanceResultTag = null;
|
||||
if (processInstanceResult) {
|
||||
const processInstanceResultTag = () => {
|
||||
if (processModel && processInstanceResult) {
|
||||
let takeMeToMyTaskBlurb = null;
|
||||
// FIXME: ensure that the task is actually for the current user as well
|
||||
const processInstanceId = (processInstanceResult as any).id;
|
||||
@ -110,21 +146,19 @@ export default function ProcessModelShow() {
|
||||
takeMeToMyTaskBlurb = (
|
||||
<span>
|
||||
You have a task to complete. Go to{' '}
|
||||
<Link to={`/tasks/${processInstanceId}/${nextTask.id}`}>my task</Link>
|
||||
<Link to={`/tasks/${processInstanceId}/${nextTask.id}`}>
|
||||
my task
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
processInstanceResultTag = (
|
||||
return (
|
||||
<div className="alert alert-success" role="alert">
|
||||
<p>
|
||||
Process Instance {processInstanceId} kicked off (
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${
|
||||
(processModel as any).id
|
||||
}/process-instances/${processInstanceId}`}
|
||||
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/${processInstanceId}`}
|
||||
data-qa="process-instance-show-link"
|
||||
>
|
||||
view
|
||||
@ -134,62 +168,211 @@ export default function ProcessModelShow() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const onUploadedCallback = () => {
|
||||
setReloadModel(true);
|
||||
};
|
||||
const reloadModelOhYeah = (_httpResult: any) => {
|
||||
setReloadModel(!reloadModel);
|
||||
};
|
||||
|
||||
// Remove this code from
|
||||
const onDeleteFile = (fileName: string) => {
|
||||
const url = `/process-models/${params.process_group_id}/${params.process_model_id}/files/${fileName}`;
|
||||
const httpMethod = 'DELETE';
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: reloadModelOhYeah,
|
||||
httpMethod,
|
||||
});
|
||||
};
|
||||
|
||||
const onProcessModelFileAction = (selection: any) => {
|
||||
const { selectedItem } = selection;
|
||||
if (selectedItem.action === 'delete') {
|
||||
onDeleteFile(selectedItem.processModelFile.name);
|
||||
}
|
||||
};
|
||||
|
||||
const onSetPrimaryFile = (fileName: string) => {
|
||||
const url = `/process-models/${params.process_group_id}/${params.process_model_id}`;
|
||||
const httpMethod = 'PUT';
|
||||
|
||||
const processModelToPass = {
|
||||
primary_file_name: fileName,
|
||||
};
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: onUploadedCallback,
|
||||
httpMethod,
|
||||
postBody: processModelToPass,
|
||||
});
|
||||
};
|
||||
const handleProcessModelFileResult = (processModelFile: ProcessFile) => {
|
||||
if (
|
||||
!('file_contents' in processModelFile) ||
|
||||
processModelFile.file_contents === undefined
|
||||
) {
|
||||
setErrorMessage({
|
||||
message: `Could not file file contents for file: ${processModelFile.name}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
let contentType = 'application/xml';
|
||||
if (processModelFile.type === 'json') {
|
||||
contentType = 'application/json';
|
||||
}
|
||||
const element = document.createElement('a');
|
||||
const file = new Blob([processModelFile.file_contents], {
|
||||
type: contentType,
|
||||
});
|
||||
const downloadFileName = processModelFile.name;
|
||||
element.href = URL.createObjectURL(file);
|
||||
element.download = downloadFileName;
|
||||
document.body.appendChild(element);
|
||||
element.click();
|
||||
};
|
||||
|
||||
const downloadFile = (fileName: string) => {
|
||||
setErrorMessage(null);
|
||||
const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
|
||||
HttpService.makeCallToBackend({
|
||||
path: `/${processModelPath}/files/${fileName}`,
|
||||
successCallback: handleProcessModelFileResult,
|
||||
});
|
||||
};
|
||||
|
||||
const navigateToFileEdit = (processModelFile: ProcessFile) => {
|
||||
if (processModel) {
|
||||
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
|
||||
navigate(
|
||||
`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files/${processModelFile.name}`
|
||||
);
|
||||
} else if (processModelFile.name.match(/\.(json|md)$/)) {
|
||||
navigate(
|
||||
`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form/${processModelFile.name}`
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const renderButtonElements = (
|
||||
processModelFile: ProcessFile,
|
||||
isPrimaryBpmnFile: boolean
|
||||
) => {
|
||||
const elements = [];
|
||||
elements.push(
|
||||
<Button
|
||||
kind="ghost"
|
||||
renderIcon={Edit}
|
||||
iconDescription="Edit File"
|
||||
hasIconOnly
|
||||
size="lg"
|
||||
onClick={() => navigateToFileEdit(processModelFile)}
|
||||
/>
|
||||
);
|
||||
elements.push(
|
||||
<Button
|
||||
kind="ghost"
|
||||
renderIcon={Download}
|
||||
iconDescription="Download File"
|
||||
hasIconOnly
|
||||
size="lg"
|
||||
onClick={() => downloadFile(processModelFile.name)}
|
||||
/>
|
||||
);
|
||||
|
||||
elements.push(
|
||||
<ButtonWithConfirmation
|
||||
kind="ghost"
|
||||
renderIcon={TrashCan}
|
||||
iconDescription="Delete File"
|
||||
hasIconOnly
|
||||
description={`Delete file: ${processModelFile.name}`}
|
||||
onConfirmation={() => {
|
||||
onDeleteFile(processModelFile.name);
|
||||
}}
|
||||
confirmButtonLabel="Delete"
|
||||
/>
|
||||
);
|
||||
if (processModelFile.name.match(/\.bpmn$/) && !isPrimaryBpmnFile) {
|
||||
elements.push(
|
||||
<Button
|
||||
kind="ghost"
|
||||
renderIcon={Favorite}
|
||||
iconDescription="Set As Primary File"
|
||||
hasIconOnly
|
||||
size="lg"
|
||||
onClick={() => onSetPrimaryFile(processModelFile.name)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return elements;
|
||||
};
|
||||
|
||||
const processModelFileList = () => {
|
||||
if (!processModel) {
|
||||
return null;
|
||||
}
|
||||
let constructedTag;
|
||||
const tags = (processModel as any).files.map((processModelFile: any) => {
|
||||
if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
|
||||
const tags = processModel.files.map((processModelFile: ProcessFile) => {
|
||||
const isPrimaryBpmnFile =
|
||||
processModelFile.name === processModel.primary_file_name;
|
||||
|
||||
let actionsTableCell = null;
|
||||
if (processModelFile.name.match(/\.(dmn|bpmn|json|md)$/)) {
|
||||
actionsTableCell = (
|
||||
<TableCell key={`${processModelFile.name}-cell`}>
|
||||
{renderButtonElements(processModelFile, isPrimaryBpmnFile)}
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
|
||||
let primarySuffix = '';
|
||||
if (processModelFile.name === (processModel as any).primary_file_name) {
|
||||
if (isPrimaryBpmnFile) {
|
||||
primarySuffix = '- Primary File';
|
||||
}
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files/${processModelFile.name}`}
|
||||
>
|
||||
<TableRow key={processModelFile.name}>
|
||||
<TableCell key={`${processModelFile.name}-cell`}>
|
||||
{processModelFile.name}
|
||||
</Link>
|
||||
{primarySuffix}
|
||||
</li>
|
||||
</TableCell>
|
||||
{actionsTableCell}
|
||||
</TableRow>
|
||||
);
|
||||
} else if (processModelFile.name.match(/\.(json|md)$/)) {
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form/${processModelFile.name}`}
|
||||
>
|
||||
{processModelFile.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
constructedTag = (
|
||||
<li key={processModelFile.name}>{processModelFile.name}</li>
|
||||
);
|
||||
}
|
||||
return constructedTag;
|
||||
});
|
||||
|
||||
return <ul>{tags}</ul>;
|
||||
// return <ul>{tags}</ul>;
|
||||
const headers = ['Name', 'Actions'];
|
||||
return (
|
||||
<Table size="lg" useZebraStyles={false}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headers.map((header) => (
|
||||
<TableHeader id={header} key={header}>
|
||||
{header}
|
||||
</TableHeader>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>{tags}</TableBody>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
const processInstancesUl = () => {
|
||||
if (!processModel) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
to={`/admin/process-instances?process_group_identifier=${
|
||||
(processModel as any).process_group_id
|
||||
}&process_model_identifier=${(processModel as any).id}`}
|
||||
to={`/admin/process-instances?process_group_identifier=${processModel.process_group_id}&process_model_identifier=${processModel.id}`}
|
||||
data-qa="process-instance-list-link"
|
||||
>
|
||||
List
|
||||
@ -197,9 +380,7 @@ export default function ProcessModelShow() {
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/process-instances/reports`}
|
||||
to={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/process-instances/reports`}
|
||||
data-qa="process-instance-reports-link"
|
||||
>
|
||||
Reports
|
||||
@ -209,79 +390,149 @@ export default function ProcessModelShow() {
|
||||
);
|
||||
};
|
||||
|
||||
const processModelButtons = () => {
|
||||
const handleFileUploadCancel = () => {
|
||||
setShowFileUploadModal(false);
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: any) => {
|
||||
if (processModel) {
|
||||
event.preventDefault();
|
||||
const url = `/process-models/${processModel.process_group_id}/${processModel.id}/files`;
|
||||
const formData = new FormData();
|
||||
formData.append('file', filesToUpload[0]);
|
||||
formData.append('fileName', filesToUpload[0].name);
|
||||
HttpService.makeCallToBackend({
|
||||
path: url,
|
||||
successCallback: onUploadedCallback,
|
||||
httpMethod: 'POST',
|
||||
postBody: formData,
|
||||
});
|
||||
setShowFileUploadModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fileUploadModal = () => {
|
||||
return (
|
||||
<Modal
|
||||
open={showFileUploadModal}
|
||||
modalHeading="Upload File"
|
||||
primaryButtonText="Upload"
|
||||
secondaryButtonText="Cancel"
|
||||
onSecondarySubmit={handleFileUploadCancel}
|
||||
onRequestClose={handleFileUploadCancel}
|
||||
onRequestSubmit={handleFileUpload}
|
||||
>
|
||||
<FileUploader
|
||||
labelTitle="Upload files"
|
||||
labelDescription="Max file size is 500mb. Only .bpmn, .dmn, and .json files are supported."
|
||||
buttonLabel="Add file"
|
||||
buttonKind="primary"
|
||||
size="md"
|
||||
filenameStatus="edit"
|
||||
role="button"
|
||||
accept={['.bpmn', '.dmn', '.json']}
|
||||
disabled={false}
|
||||
iconDescription="Delete file"
|
||||
name=""
|
||||
multiple={false}
|
||||
onChange={(event: any) => setFilesToUpload(event.target.files)}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const processModelButtons = () => {
|
||||
if (!processModel) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Accordion>
|
||||
<AccordionItem
|
||||
title={
|
||||
<Stack orientation="horizontal">
|
||||
<span>
|
||||
<Button size="sm" kind="ghost">
|
||||
Files
|
||||
</Button>
|
||||
</span>
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
<ButtonSet>
|
||||
<Button
|
||||
renderIcon={Upload}
|
||||
onClick={() => setShowFileUploadModal(true)}
|
||||
size="sm"
|
||||
kind=""
|
||||
className="button-white-background"
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files?file_type=bpmn`}
|
||||
size="sm"
|
||||
>
|
||||
New BPMN File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/files?file_type=dmn`}
|
||||
size="sm"
|
||||
>
|
||||
New DMN File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form?file_ext=json`}
|
||||
size="sm"
|
||||
>
|
||||
New JSON File
|
||||
</Button>
|
||||
<Button
|
||||
renderIcon={Add}
|
||||
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/form?file_ext=md`}
|
||||
size="sm"
|
||||
>
|
||||
New Markdown File
|
||||
</Button>
|
||||
</ButtonSet>
|
||||
<br />
|
||||
{processModelFileList()}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
if (processModel) {
|
||||
return (
|
||||
<>
|
||||
{fileUploadModal()}
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={processModel.process_group_id}
|
||||
processModelId={processModel.id}
|
||||
/>
|
||||
<h1>{processModel.display_name}</h1>
|
||||
<p>{processModel.description}</p>
|
||||
<Stack orientation="horizontal" gap={3}>
|
||||
<Button onClick={processInstanceCreateAndRun} variant="primary">
|
||||
Run
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/edit`}
|
||||
href={`/admin/process-models/${processModel.process_group_id}/${processModel.id}/edit`}
|
||||
variant="secondary"
|
||||
>
|
||||
Edit process model
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files?file_type=bpmn`}
|
||||
variant="warning"
|
||||
>
|
||||
Add New BPMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files?file_type=dmn`}
|
||||
variant="success"
|
||||
>
|
||||
Add New DMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=json`}
|
||||
variant="info"
|
||||
>
|
||||
Add New JSON File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=md`}
|
||||
variant="info"
|
||||
>
|
||||
Add New Markdown File
|
||||
</Button>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
if (Object.keys(processModel).length > 1) {
|
||||
return (
|
||||
<>
|
||||
<ProcessBreadcrumb
|
||||
processGroupId={(processModel as any).process_group_id}
|
||||
processModelId={(processModel as any).id}
|
||||
/>
|
||||
{processInstanceResultTag}
|
||||
<FileInput
|
||||
processModelId={(processModel as any).id}
|
||||
processGroupId={(processModel as any).process_group_id}
|
||||
onUploadedCallback={onUploadedCallback}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
{processInstanceResultTag()}
|
||||
{processModelButtons()}
|
||||
<br />
|
||||
<br />
|
||||
<h3>Process Instances</h3>
|
||||
{processInstancesUl()}
|
||||
<br />
|
||||
<br />
|
||||
<h3>Files</h3>
|
||||
{processModelFileList()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user