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

Bug/UI fixes (#369) 

* re-enable the move canvas and zoom modules, and try like hell to get the !@#$! display to zoom to fit consistently. As the from_xml does not trigger the "import.done" where the resize is happening.

* Clicking on timestamp should reload the page so we are observing the diagram at the correct point in time.

* Use a grid rather than a stack for the filter buttons, make them a consistent width, and force the close "x" button to the far right.

* Better handling the lots and lots of metadata fields in both the process instance list table, and in the metadata information on the process instance view page.

* Using DL rather than Carbon's grid, because my mind was starting to break.
* Process instance List Tables are set to optimize their max width for readability.

* assure the diagram editor is top aligned - otherwise when the proprties pannel get's super duper long (as with recent additions to multi-instance) we don't end up with weird spaces showing up above a center aligned canvas.
This commit is contained in:
Dan Funk 2023-07-03 23:59:46 -04:00 committed by GitHub
parent c8bdf3a109
commit 771f54b7b4
5 changed files with 151 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1166,50 +1166,54 @@ 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}>
<Button <Tag type={tagType} size="sm" className="filter-tag">
kind="ghost" <Button
size="sm" kind="ghost"
className={`button-tag-icon ${tagTypeClass}`} size="sm"
title={`Edit ${reportColumnForEditing.accessor} column`} className={`button-tag ${tagTypeClass}`}
onClick={() => { title={`Edit ${reportColumnForEditing.accessor} column`}
setReportColumnToOperateOn(reportColumnForEditing); onClick={() => {
setShowReportColumnForm(true); setReportColumnToOperateOn(reportColumnForEditing);
setReportColumnFormMode('edit'); setShowReportColumnForm(true);
}} setReportColumnFormMode('edit');
> }}
{reportColumnLabel} >
</Button> {reportColumnLabel}
<Button </Button>
data-qa="remove-report-column" <Button
renderIcon={Close} data-qa="remove-report-column"
iconDescription="Remove Column" renderIcon={Close}
className={`button-tag-icon ${tagTypeClass}`} iconDescription="Remove Column"
hasIconOnly className={`button-tag-icon ${tagTypeClass}`}
size="sm" hasIconOnly
kind="ghost" size="sm"
onClick={() => removeColumn(reportColumnForEditing)} kind="ghost"
/> onClick={() => removeColumn(reportColumnForEditing)}
</Tag> />
</Tag>
</Column>
); );
}); });
return ( return (
<Stack orientation="horizontal"> <Grid fullWidth>
{tags} {tags}
<Button <Column md={1} lg={1} sm={1}>
data-qa="add-column-button" <Button
renderIcon={AddAlt} data-qa="add-column-button"
iconDescription="Column options" renderIcon={AddAlt}
className="with-tiny-top-margin" iconDescription="Column options"
kind="ghost" className="with-tiny-top-margin"
hasIconOnly kind="ghost"
size="sm" hasIconOnly
onClick={() => { size="sm"
setShowReportColumnForm(true); onClick={() => {
setReportColumnFormMode('new'); setShowReportColumnForm(true);
}} 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;
} }

144
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,83 +333,61 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
} }
return ( return (
<> <Grid condensed fullWidth>
<Grid condensed fullWidth> <Column sm={4} md={4} lg={8}>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dl>
Status:{' '} <dt>Status:</dt>
</Column> <dd>
<Column sm={3} md={6} lg={8}> <Tag type={statusColor} size="sm" className="span-tag">
<Tag type={statusColor} size="sm" className="span-tag"> {processInstance.status} {statusIcon}
{processInstance.status} {statusIcon} </Tag>
</Tag> </dd>
</Column> </dl>
</Grid> <dl>
<Grid condensed fullWidth> <dt>Started By:</dt>
<Column sm={2} md={2} lg={3} className="grid-list-title"> <dd> {processInstance.process_initiator_username}</dd>
Started By:{' '} </dl>
</Column> {processInstance.process_model_with_diagram_identifier ? (
<Column sm={3} md={6} lg={8} className="grid-date"> <dl>
{processInstance.process_initiator_username} <dt>Current Diagram: </dt>
</Column> <dd>
</Grid> <Link
{processInstance.process_model_with_diagram_identifier ? ( data-qa="go-to-current-diagram-process-model"
<Grid condensed fullWidth> to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
<Column sm={2} md={2} lg={3} className="grid-list-title"> processInstance.process_model_with_diagram_identifier || ''
Current Diagram:{' '} )}`}
</Column> >
<Column sm={4} md={6} lg={8} className="grid-date"> {processInstance.process_model_with_diagram_identifier}
<Link </Link>
data-qa="go-to-current-diagram-process-model" </dd>
to={`/admin/process-models/${modifyProcessIdentifierForPathParam( </dl>
processInstance.process_model_with_diagram_identifier || '' ) : null}
)}`} <dl>
> <dt>Started:</dt>
{processInstance.process_model_with_diagram_identifier} <dd>
</Link> {convertSecondsToFormattedDateTime(
</Column> processInstance.start_in_seconds || 0
</Grid> )}
) : null} </dd>
<Grid condensed fullWidth> </dl>
<Column sm={2} md={2} lg={3} className="grid-list-title"> {lastUpdatedTimeTag}
Started:{' '} <dl>
</Column> <dt>Revision:</dt>
<Column <dd>{processInstance.bpmn_version_control_identifier} (
sm={3} {processInstance.bpmn_version_control_type})</dd>
md={3} </dl>
lg={3} </Column>
className="grid-date" <Column sm={4} md={4} lg={8}>
title={`Created At: ${convertSecondsToFormattedDateTime( {(processInstance.process_metadata || []).map(
processInstance.created_at_in_seconds (processInstanceMetadata) => (
)}`} <dl>
> <dt>{processInstanceMetadata.key} :</dt>
{convertSecondsToFormattedDateTime( <dd>{processInstanceMetadata.value}</dd>
processInstance.start_in_seconds || 0 </dl>
)} )
</Column> )}
</Grid> </Column>
{lastUpdatedTimeTag} </Grid>
<Grid condensed fullWidth>
<Column sm={2} md={2} lg={3} className="grid-list-title">
Process model revision:{' '}
</Column>
<Column sm={3} md={6} lg={8} className="grid-date">
{processInstance.bpmn_version_control_identifier} (
{processInstance.bpmn_version_control_type})
</Column>
</Grid>
{(processInstance.process_metadata || []).map(
(processInstanceMetadata) => (
<Grid condensed fullWidth>
<Column sm={2} md={2} lg={3} className="grid-list-title">
{processInstanceMetadata.key}:
</Column>
<Column sm={3} md={6} lg={8} className="grid-date">
{processInstanceMetadata.value}
</Column>
</Grid>
)
)}
</>
); );
}; };