sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into deploy-app-dev

This commit is contained in:
Madhurya Liyanage 2023-07-04 09:30:37 +05:30
parent 6b9ae6df01 771f54b7b4
commit 7715c9acf2
5 changed files with 151 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx
View File

@ -1166,11 +1166,12 @@ export default function ProcessInstanceListTable({
reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`; reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`;
} }
tags.push( tags.push(
<Tag type={tagType} size="sm"> <Column md={2} lg={2} sm={2}>
<Tag type={tagType} size="sm" className="filter-tag">
<Button <Button
kind="ghost" kind="ghost"
size="sm" size="sm"
className={`button-tag-icon ${tagTypeClass}`} className={`button-tag ${tagTypeClass}`}
title={`Edit ${reportColumnForEditing.accessor} column`} title={`Edit ${reportColumnForEditing.accessor} column`}
onClick={() => { onClick={() => {
setReportColumnToOperateOn(reportColumnForEditing); setReportColumnToOperateOn(reportColumnForEditing);
@ -1191,11 +1192,13 @@ export default function ProcessInstanceListTable({
onClick={() => removeColumn(reportColumnForEditing)} onClick={() => removeColumn(reportColumnForEditing)}
/> />
</Tag> </Tag>
</Column>
); );
}); });
return ( return (
<Stack orientation="horizontal"> <Grid fullWidth>
{tags} {tags}
<Column md={1} lg={1} sm={1}>
<Button <Button
data-qa="add-column-button" data-qa="add-column-button"
renderIcon={AddAlt} renderIcon={AddAlt}
@ -1209,7 +1212,8 @@ export default function ProcessInstanceListTable({
setReportColumnFormMode('new'); setReportColumnFormMode('new');
}} }}
/> />
</Stack> </Column>
</Grid>
); );
} }
return null; return null;
@ -1655,7 +1659,7 @@ export default function ProcessInstanceListTable({
return ( return (
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
<Table {...tableProps}> <Table {...tableProps} className="process-instance-list">
<TableHead> <TableHead>
<TableRow> <TableRow>
{headers.map((header: any) => ( {headers.map((header: any) => (
@ -1781,7 +1785,7 @@ export default function ProcessInstanceListTable({
{processInstanceReportSaveTag()} {processInstanceReportSaveTag()}
<Grid fullWidth condensed> <Grid fullWidth condensed>
{tableTitleLine()} {tableTitleLine()}
<Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}> <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} style={{maxWidth:'fit-content'}}>
<Filters <Filters
filterOptions={filterOptions} filterOptions={filterOptions}
showFilterOptions={showFilterOptions} showFilterOptions={showFilterOptions}
@ -1790,7 +1794,7 @@ export default function ProcessInstanceListTable({
filtersEnabled={filtersEnabled} filtersEnabled={filtersEnabled}
/> />
</Column> </Column>
<Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }}> <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} style={{maxWidth:'fit-content', margin:'auto'}}>
{resultsTable} {resultsTable}
</Column> </Column>
</Grid> </Grid>

1
spiffworkflow-frontend/src/components/ProcessInstanceLogList.tsx
View File

@ -285,6 +285,7 @@ export default function ProcessInstanceLogList({
timestampComponent = ( timestampComponent = (
<td> <td>
<Link <Link
reloadDocument
data-qa="process-instance-show-link" data-qa="process-instance-show-link"
to={`${processInstanceShowPageBaseUrl}/${logEntry.process_instance_id}/${logEntry.spiff_task_guid}`} to={`${processInstanceShowPageBaseUrl}/${logEntry.process_instance_id}/${logEntry.spiff_task_guid}`}
title="View state when task was completed" title="View state when task was completed"

14
spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx
View File

@ -43,6 +43,11 @@ import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle
// @ts-expect-error TS(7016) FIXME // @ts-expect-error TS(7016) FIXME
import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move'; import KeyboardMoveModule from 'diagram-js/lib/navigation/keyboard-move';
// @ts-expect-error TS(7016) FIXME
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
// @ts-expect-error TS(7016) FIXME
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
// @ts-expect-error TS(7016) FIXME // @ts-expect-error TS(7016) FIXME
import TouchModule from 'diagram-js/lib/navigation/touch'; import TouchModule from 'diagram-js/lib/navigation/touch';
@ -212,7 +217,12 @@ export default function ReactDiagramEditor({
// taken from the non-modeling components at // taken from the non-modeling components at
// bpmn-js/lib/Modeler.js // bpmn-js/lib/Modeler.js
additionalModules: [KeyboardMoveModule, TouchModule], additionalModules: [
KeyboardMoveModule,
MoveCanvasModule,
TouchModule,
ZoomScrollModule,
],
}); });
} }
@ -485,6 +495,7 @@ export default function ReactDiagramEditor({
ref.element.set(ref.property, elem); ref.element.set(ref.property, elem);
}); });
diagramModelerToUse.importDefinitions(result.rootElement); diagramModelerToUse.importDefinitions(result.rootElement);
diagramModelerToUse.get('canvas').zoom('fit-viewport');
}); });
} else { } else {
diagramModelerToUse.importXML(diagramXMLToDisplay); diagramModelerToUse.importXML(diagramXMLToDisplay);
@ -514,7 +525,6 @@ export default function ReactDiagramEditor({
successCallback: setDiagramXMLStringFromResponseJson, successCallback: setDiagramXMLStringFromResponseJson,
}); });
} }
(diagramModelerState as any).on('import.done', onImportDone); (diagramModelerState as any).on('import.done', onImportDone);
const diagramXMLToUse = diagramXML || diagramXMLString; const diagramXMLToUse = diagramXML || diagramXMLString;

40
spiffworkflow-frontend/src/index.css
View File

@ -179,18 +179,20 @@ h1.with-icons {
margin-top: 5px; margin-top: 5px;
} }
.grid-list-title { dl {
display: grid;
line-height: 1.2em;
grid-template-columns: 25% 75%;
}
dt {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: #161616; color: #161616;
} }
.grid-date {
font-size: 14px;
line-height: 18px;
letter-spacing: 0.16px;
color: #525252;
}
.smaller-text { .smaller-text {
font-size: 14px; font-size: 14px;
} }
@ -199,7 +201,7 @@ h1.with-icons {
border:1px solid #000000; border:1px solid #000000;
height:70vh; height:70vh;
width:90vw; width:90vw;
margin:auto; margin: 0 auto;
} }
.with-bottom-margin { .with-bottom-margin {
@ -444,6 +446,27 @@ svg.notification-icon {
color: red; color: red;
} }
.filter-tag {
justify-content: left;
width: 100%;
}
.filter-tag > span {
display: flex;
flex-direction: row;
width: 100%;
}
.filter-tag > span > span {
margin-right: 0.5px;
}
.cds--btn--ghost.cds--btn--sm.button-tag {
padding-left: 0;
padding-right: 0;
padding-top: 0;
flex-grow: 1;
}
.cds--btn--ghost.cds--btn--sm.button-tag-icon { .cds--btn--ghost.cds--btn--sm.button-tag-icon {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -615,3 +638,4 @@ hr {
#hidden-form-for-autosave { #hidden-form-for-autosave {
display: none; display: none;
} }

98
spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx
View File

@ -312,14 +312,10 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
lastUpdatedTime = processInstance.end_in_seconds; lastUpdatedTime = processInstance.end_in_seconds;
} }
const lastUpdatedTimeTag = ( const lastUpdatedTimeTag = (
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>{lastUpdatedTimeLabel}:</dt>
{lastUpdatedTimeLabel}:{' '} <dd>{convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}</dd>
</Column> </dl>
<Column sm={3} md={6} lg={8} className="grid-date">
{convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}
</Column>
</Grid>
); );
let statusIcon = <InProgress />; let statusIcon = <InProgress />;
@ -337,31 +333,24 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
} }
return ( return (
<>
<Grid condensed fullWidth> <Grid condensed fullWidth>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <Column sm={4} md={4} lg={8}>
Status:{' '} <dl>
</Column> <dt>Status:</dt>
<Column sm={3} md={6} lg={8}> <dd>
<Tag type={statusColor} size="sm" className="span-tag"> <Tag type={statusColor} size="sm" className="span-tag">
{processInstance.status} {statusIcon} {processInstance.status} {statusIcon}
</Tag> </Tag>
</Column> </dd>
</Grid> </dl>
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>Started By:</dt>
Started By:{' '} <dd> {processInstance.process_initiator_username}</dd>
</Column> </dl>
<Column sm={3} md={6} lg={8} className="grid-date">
{processInstance.process_initiator_username}
</Column>
</Grid>
{processInstance.process_model_with_diagram_identifier ? ( {processInstance.process_model_with_diagram_identifier ? (
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>Current Diagram: </dt>
Current Diagram:{' '} <dd>
</Column>
<Column sm={4} md={6} lg={8} className="grid-date">
<Link <Link
data-qa="go-to-current-diagram-process-model" data-qa="go-to-current-diagram-process-model"
to={`/admin/process-models/${modifyProcessIdentifierForPathParam( to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
@ -370,50 +359,35 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
> >
{processInstance.process_model_with_diagram_identifier} {processInstance.process_model_with_diagram_identifier}
</Link> </Link>
</Column> </dd>
</Grid> </dl>
) : null} ) : null}
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>Started:</dt>
Started:{' '} <dd>
</Column>
<Column
sm={3}
md={3}
lg={3}
className="grid-date"
title={`Created At: ${convertSecondsToFormattedDateTime(
processInstance.created_at_in_seconds
)}`}
>
{convertSecondsToFormattedDateTime( {convertSecondsToFormattedDateTime(
processInstance.start_in_seconds || 0 processInstance.start_in_seconds || 0
)} )}
</Column> </dd>
</Grid> </dl>
{lastUpdatedTimeTag} {lastUpdatedTimeTag}
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>Revision:</dt>
Process model revision:{' '} <dd>{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})</dd>
</dl>
</Column> </Column>
<Column sm={3} md={6} lg={8} className="grid-date"> <Column sm={4} md={4} lg={8}>
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
{(processInstance.process_metadata || []).map( {(processInstance.process_metadata || []).map(
(processInstanceMetadata) => ( (processInstanceMetadata) => (
<Grid condensed fullWidth> <dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dt>{processInstanceMetadata.key} :</dt>
{processInstanceMetadata.key}: <dd>{processInstanceMetadata.value}</dd>
</Column> </dl>
<Column sm={3} md={6} lg={8} className="grid-date">
{processInstanceMetadata.value}
</Column>
</Grid>
) )
)} )}
</> </Column>
</Grid>
); );
}; };