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:
parent
c8bdf3a109
commit
771f54b7b4
|
@ -1166,50 +1166,54 @@ export default function ProcessInstanceListTable({
|
|||
reportColumnLabel = `${reportColumnLabel}=${reportColumnForEditing.filter_field_value}`;
|
||||
}
|
||||
tags.push(
|
||||
<Tag type={tagType} size="sm">
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="sm"
|
||||
className={`button-tag-icon ${tagTypeClass}`}
|
||||
title={`Edit ${reportColumnForEditing.accessor} column`}
|
||||
onClick={() => {
|
||||
setReportColumnToOperateOn(reportColumnForEditing);
|
||||
setShowReportColumnForm(true);
|
||||
setReportColumnFormMode('edit');
|
||||
}}
|
||||
>
|
||||
{reportColumnLabel}
|
||||
</Button>
|
||||
<Button
|
||||
data-qa="remove-report-column"
|
||||
renderIcon={Close}
|
||||
iconDescription="Remove Column"
|
||||
className={`button-tag-icon ${tagTypeClass}`}
|
||||
hasIconOnly
|
||||
size="sm"
|
||||
kind="ghost"
|
||||
onClick={() => removeColumn(reportColumnForEditing)}
|
||||
/>
|
||||
</Tag>
|
||||
<Column md={2} lg={2} sm={2}>
|
||||
<Tag type={tagType} size="sm" className="filter-tag">
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="sm"
|
||||
className={`button-tag ${tagTypeClass}`}
|
||||
title={`Edit ${reportColumnForEditing.accessor} column`}
|
||||
onClick={() => {
|
||||
setReportColumnToOperateOn(reportColumnForEditing);
|
||||
setShowReportColumnForm(true);
|
||||
setReportColumnFormMode('edit');
|
||||
}}
|
||||
>
|
||||
{reportColumnLabel}
|
||||
</Button>
|
||||
<Button
|
||||
data-qa="remove-report-column"
|
||||
renderIcon={Close}
|
||||
iconDescription="Remove Column"
|
||||
className={`button-tag-icon ${tagTypeClass}`}
|
||||
hasIconOnly
|
||||
size="sm"
|
||||
kind="ghost"
|
||||
onClick={() => removeColumn(reportColumnForEditing)}
|
||||
/>
|
||||
</Tag>
|
||||
</Column>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Stack orientation="horizontal">
|
||||
<Grid fullWidth>
|
||||
{tags}
|
||||
<Button
|
||||
data-qa="add-column-button"
|
||||
renderIcon={AddAlt}
|
||||
iconDescription="Column options"
|
||||
className="with-tiny-top-margin"
|
||||
kind="ghost"
|
||||
hasIconOnly
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowReportColumnForm(true);
|
||||
setReportColumnFormMode('new');
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Column md={1} lg={1} sm={1}>
|
||||
<Button
|
||||
data-qa="add-column-button"
|
||||
renderIcon={AddAlt}
|
||||
iconDescription="Column options"
|
||||
className="with-tiny-top-margin"
|
||||
kind="ghost"
|
||||
hasIconOnly
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setShowReportColumnForm(true);
|
||||
setReportColumnFormMode('new');
|
||||
}}
|
||||
/>
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
@ -1655,7 +1659,7 @@ export default function ProcessInstanceListTable({
|
|||
|
||||
return (
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<Table {...tableProps}>
|
||||
<Table {...tableProps} className="process-instance-list">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headers.map((header: any) => (
|
||||
|
@ -1781,7 +1785,7 @@ export default function ProcessInstanceListTable({
|
|||
{processInstanceReportSaveTag()}
|
||||
<Grid fullWidth condensed>
|
||||
{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
|
||||
filterOptions={filterOptions}
|
||||
showFilterOptions={showFilterOptions}
|
||||
|
@ -1790,7 +1794,7 @@ export default function ProcessInstanceListTable({
|
|||
filtersEnabled={filtersEnabled}
|
||||
/>
|
||||
</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}
|
||||
</Column>
|
||||
</Grid>
|
||||
|
|
|
@ -285,6 +285,7 @@ export default function ProcessInstanceLogList({
|
|||
timestampComponent = (
|
||||
<td>
|
||||
<Link
|
||||
reloadDocument
|
||||
data-qa="process-instance-show-link"
|
||||
to={`${processInstanceShowPageBaseUrl}/${logEntry.process_instance_id}/${logEntry.spiff_task_guid}`}
|
||||
title="View state when task was completed"
|
||||
|
|
|
@ -43,6 +43,11 @@ import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle
|
|||
|
||||
// @ts-expect-error TS(7016) FIXME
|
||||
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
|
||||
import TouchModule from 'diagram-js/lib/navigation/touch';
|
||||
|
||||
|
@ -212,7 +217,12 @@ export default function ReactDiagramEditor({
|
|||
|
||||
// taken from the non-modeling components at
|
||||
// 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);
|
||||
});
|
||||
diagramModelerToUse.importDefinitions(result.rootElement);
|
||||
diagramModelerToUse.get('canvas').zoom('fit-viewport');
|
||||
});
|
||||
} else {
|
||||
diagramModelerToUse.importXML(diagramXMLToDisplay);
|
||||
|
@ -514,7 +525,6 @@ export default function ReactDiagramEditor({
|
|||
successCallback: setDiagramXMLStringFromResponseJson,
|
||||
});
|
||||
}
|
||||
|
||||
(diagramModelerState as any).on('import.done', onImportDone);
|
||||
|
||||
const diagramXMLToUse = diagramXML || diagramXMLString;
|
||||
|
|
|
@ -179,18 +179,20 @@ h1.with-icons {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.grid-list-title {
|
||||
dl {
|
||||
display: grid;
|
||||
line-height: 1.2em;
|
||||
grid-template-columns: 25% 75%;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #161616;
|
||||
|
||||
}
|
||||
.grid-date {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.16px;
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.smaller-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
@ -199,7 +201,7 @@ h1.with-icons {
|
|||
border:1px solid #000000;
|
||||
height:70vh;
|
||||
width:90vw;
|
||||
margin:auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.with-bottom-margin {
|
||||
|
@ -444,6 +446,27 @@ svg.notification-icon {
|
|||
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 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
@ -615,3 +638,4 @@ hr {
|
|||
#hidden-form-for-autosave {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -312,14 +312,10 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
lastUpdatedTime = processInstance.end_in_seconds;
|
||||
}
|
||||
const lastUpdatedTimeTag = (
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={3} className="grid-list-title">
|
||||
{lastUpdatedTimeLabel}:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={6} lg={8} className="grid-date">
|
||||
{convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}
|
||||
</Column>
|
||||
</Grid>
|
||||
<dl>
|
||||
<dt>{lastUpdatedTimeLabel}:</dt>
|
||||
<dd>{convertSecondsToFormattedDateTime(lastUpdatedTime || 0) || 'N/A'}</dd>
|
||||
</dl>
|
||||
);
|
||||
|
||||
let statusIcon = <InProgress />;
|
||||
|
@ -337,83 +333,61 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={3} className="grid-list-title">
|
||||
Status:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={6} lg={8}>
|
||||
<Tag type={statusColor} size="sm" className="span-tag">
|
||||
{processInstance.status} {statusIcon}
|
||||
</Tag>
|
||||
</Column>
|
||||
</Grid>
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={3} className="grid-list-title">
|
||||
Started By:{' '}
|
||||
</Column>
|
||||
<Column sm={3} md={6} lg={8} className="grid-date">
|
||||
{processInstance.process_initiator_username}
|
||||
</Column>
|
||||
</Grid>
|
||||
{processInstance.process_model_with_diagram_identifier ? (
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={3} className="grid-list-title">
|
||||
Current Diagram:{' '}
|
||||
</Column>
|
||||
<Column sm={4} md={6} lg={8} className="grid-date">
|
||||
<Link
|
||||
data-qa="go-to-current-diagram-process-model"
|
||||
to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
|
||||
processInstance.process_model_with_diagram_identifier || ''
|
||||
)}`}
|
||||
>
|
||||
{processInstance.process_model_with_diagram_identifier}
|
||||
</Link>
|
||||
</Column>
|
||||
</Grid>
|
||||
) : null}
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={2} md={2} lg={3} className="grid-list-title">
|
||||
Started:{' '}
|
||||
</Column>
|
||||
<Column
|
||||
sm={3}
|
||||
md={3}
|
||||
lg={3}
|
||||
className="grid-date"
|
||||
title={`Created At: ${convertSecondsToFormattedDateTime(
|
||||
processInstance.created_at_in_seconds
|
||||
)}`}
|
||||
>
|
||||
{convertSecondsToFormattedDateTime(
|
||||
processInstance.start_in_seconds || 0
|
||||
)}
|
||||
</Column>
|
||||
</Grid>
|
||||
{lastUpdatedTimeTag}
|
||||
<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>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
<Grid condensed fullWidth>
|
||||
<Column sm={4} md={4} lg={8}>
|
||||
<dl>
|
||||
<dt>Status:</dt>
|
||||
<dd>
|
||||
<Tag type={statusColor} size="sm" className="span-tag">
|
||||
{processInstance.status} {statusIcon}
|
||||
</Tag>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Started By:</dt>
|
||||
<dd> {processInstance.process_initiator_username}</dd>
|
||||
</dl>
|
||||
{processInstance.process_model_with_diagram_identifier ? (
|
||||
<dl>
|
||||
<dt>Current Diagram: </dt>
|
||||
<dd>
|
||||
<Link
|
||||
data-qa="go-to-current-diagram-process-model"
|
||||
to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
|
||||
processInstance.process_model_with_diagram_identifier || ''
|
||||
)}`}
|
||||
>
|
||||
{processInstance.process_model_with_diagram_identifier}
|
||||
</Link>
|
||||
</dd>
|
||||
</dl>
|
||||
) : null}
|
||||
<dl>
|
||||
<dt>Started:</dt>
|
||||
<dd>
|
||||
{convertSecondsToFormattedDateTime(
|
||||
processInstance.start_in_seconds || 0
|
||||
)}
|
||||
</dd>
|
||||
</dl>
|
||||
{lastUpdatedTimeTag}
|
||||
<dl>
|
||||
<dt>Revision:</dt>
|
||||
<dd>{processInstance.bpmn_version_control_identifier} (
|
||||
{processInstance.bpmn_version_control_type})</dd>
|
||||
</dl>
|
||||
</Column>
|
||||
<Column sm={4} md={4} lg={8}>
|
||||
{(processInstance.process_metadata || []).map(
|
||||
(processInstanceMetadata) => (
|
||||
<dl>
|
||||
<dt>{processInstanceMetadata.key} :</dt>
|
||||
<dd>{processInstanceMetadata.value}</dd>
|
||||
</dl>
|
||||
)
|
||||
)}
|
||||
</Column>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue