updated breadcrumbs to work with new process models ids w/ burnettk cullerton

This commit is contained in:
jasquat 2022-11-08 16:00:44 -05:00
parent 21ef155295
commit 943ffacbea
11 changed files with 67 additions and 33 deletions

View File

@ -75,7 +75,7 @@ describe('process-instances', () => {
cy.logout();
});
it('can create a new instance and can modify', () => {
it.only('can create a new instance and can modify', () => {
const originalDmnOutputForKevin = 'Very wonderful';
const newDmnOutputForKevin = 'The new wonderful';
const dmnOutputForDan = 'pretty wonderful';

View File

@ -28,7 +28,9 @@ export default class FileInput extends React.Component<Props> {
handleSubmit(event: any) {
event.preventDefault();
const modifiedProcessModelId = modifyProcessModelPath(`${this.processGroupId}/${this.processModelId}`);
const modifiedProcessModelId = modifyProcessModelPath(
`${this.processGroupId}/${this.processModelId}`
);
const url = `/process-models/${modifiedProcessModelId}/files`;
const formData = new FormData();
formData.append('file', this.fileInput.current.files[0]);

View File

@ -1,5 +1,6 @@
// @ts-ignore
import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
import { splitProcessModelId } from '../helpers';
import { HotCrumbItem } from '../interfaces';
type OwnProps = {
@ -9,6 +10,39 @@ type OwnProps = {
hotCrumbs?: HotCrumbItem[];
};
const explodeCrumb = (crumb: HotCrumbItem) => {
const url: string = crumb[1] || '';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_unused, processModelId, link] = url.split(':');
const processModelIdSegments = splitProcessModelId(processModelId);
const paths: string[] = [];
const lastPathItem = processModelIdSegments.pop();
const breadcrumbItems = processModelIdSegments.map(
(processModelIdSegment: string) => {
paths.push(processModelIdSegment);
const fullUrl = `/admin/process-groups/${paths.join(':')}`;
return (
<BreadcrumbItem key={processModelIdSegment} href={fullUrl}>
{processModelIdSegment}
</BreadcrumbItem>
);
}
);
if (link === 'link') {
const lastUrl = `/admin/process-models/${paths.join(':')}:${lastPathItem}`;
breadcrumbItems.push(
<BreadcrumbItem key={lastPathItem} href={lastUrl}>
{lastPathItem}
</BreadcrumbItem>
);
} else {
breadcrumbItems.push(
<BreadcrumbItem isCurrentPage>{lastPathItem}</BreadcrumbItem>
);
}
return breadcrumbItems;
};
export default function ProcessBreadcrumb({
processModelId,
processGroupId,
@ -18,28 +52,19 @@ export default function ProcessBreadcrumb({
let processGroupBreadcrumb = null;
let processModelBreadcrumb = null;
if (hotCrumbs) {
const lastItem = hotCrumbs.pop();
if (lastItem === undefined) {
return null;
}
const lastCrumb = (
<BreadcrumbItem isCurrentPage>{lastItem[0]}</BreadcrumbItem>
);
const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
const valueLabel = crumb[0];
const url = crumb[1];
if (url.startsWith('process_model:')) {
return explodeCrumb(crumb);
}
return (
<BreadcrumbItem key={valueLabel} href={url}>
{valueLabel}
</BreadcrumbItem>
);
});
return (
<Breadcrumb noTrailingSlash>
{leadingCrumbLinks}
{lastCrumb}
</Breadcrumb>
);
return <Breadcrumb noTrailingSlash>{leadingCrumbLinks}</Breadcrumb>;
}
if (processModelId) {
if (linkProcessModel) {

View File

@ -126,7 +126,9 @@ export const unModifyProcessModelPath = (path: String) => {
export const getGroupFromModifiedModelId = (modifiedId: String) => {
const finalSplitIndex = modifiedId.lastIndexOf(':');
const groupId = modifiedId.slice(0, finalSplitIndex);
console.log(`groupId: ${groupId}`);
return groupId;
return modifiedId.slice(0, finalSplitIndex);
};
export const splitProcessModelId = (processModelId: String) => {
return processModelId.split('/');
};

View File

@ -3,7 +3,10 @@ import { useEffect, useState } from 'react';
import { Button, Table } from '@carbon/react';
import { Link, useSearchParams } from 'react-router-dom';
import PaginationForTable from '../components/PaginationForTable';
import {getPageInfoFromSearchParams, modifyProcessModelPath} from '../helpers';
import {
getPageInfoFromSearchParams,
modifyProcessModelPath,
} from '../helpers';
import HttpService from '../services/HttpService';
import { PaginationObject, RecentProcessModel } from '../interfaces';

View File

@ -28,7 +28,6 @@ import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
import {
convertDateStringToSeconds,
convertSecondsToFormattedDate,
getGroupFromModifiedModelId,
getPageInfoFromSearchParams,
getProcessModelFullIdentifierFromSearchParams,
modifyProcessModelPath,

View File

@ -8,7 +8,6 @@ import HttpService from '../services/HttpService';
import ReactDiagramEditor from '../components/ReactDiagramEditor';
import {
convertSecondsToFormattedDate,
modifyProcessModelPath,
unModifyProcessModelPath,
} from '../helpers';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
@ -29,10 +28,7 @@ export default function ProcessInstanceShow() {
const unModifiedProcessModelId = unModifyProcessModelPath(
`${params.process_model_id}`
);
const modifiedProcessModelId = params.process_model_id
console.log(`params.process_model_id: ${params.process_model_id}`);
console.log(`modifiedProcessModelId: ${modifiedProcessModelId}`);
const modifiedProcessModelId = params.process_model_id;
const navigateToProcessInstances = (_result: any) => {
navigate(
@ -55,7 +51,7 @@ export default function ProcessInstanceShow() {
path: `/process-instance/${params.process_instance_id}/tasks?all_tasks=true&spiff_step=${params.spiff_step}`,
successCallback: setTasks,
});
}, [params]);
}, [params, modifiedProcessModelId]);
const deleteProcessInstance = () => {
HttpService.makeCallToBackend({

View File

@ -6,7 +6,10 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
import ErrorContext from '../contexts/ErrorContext';
import {getGroupFromModifiedModelId, modifyProcessModelPath} from "../helpers";
import {
getGroupFromModifiedModelId,
modifyProcessModelPath,
} from '../helpers';
export default function ProcessModelEdit() {
const [displayName, setDisplayName] = useState('');

View File

@ -17,8 +17,7 @@ import ReactDiagramEditor from '../components/ReactDiagramEditor';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import HttpService from '../services/HttpService';
import ErrorContext from '../contexts/ErrorContext';
import { makeid } from '../helpers';
import { modifyProcessModelPath } from '../helpers';
import { makeid, modifyProcessModelPath } from '../helpers';
import { ProcessFile, ProcessModel } from '../interfaces';
export default function ProcessModelEditDiagram() {

View File

@ -120,7 +120,7 @@ export default function ProcessModelShow() {
path: `/process-models/${modifiedProcessModelId}`,
successCallback: processResult,
});
}, [params, reloadModel]);
}, [params, reloadModel, modifiedProcessModelId]);
const processModelRun = (processInstance: any) => {
setErrorMessage(null);
@ -516,8 +516,13 @@ export default function ProcessModelShow() {
<>
{fileUploadModal()}
<ProcessBreadcrumb
processGroupId={processModel.process_group_id}
processModelId={processModel.id}
hotCrumbs={[
['Process Groups', '/admin'],
[
`Process Model: ${processModel.id}`,
`process_model:${processModel.id}`,
],
]}
/>
<h1>{processModel.display_name}</h1>
<p>{processModel.description}</p>

View File

@ -51,7 +51,7 @@ export default function ReactFormEditor() {
successCallback: processResult,
});
}
}, [params]);
}, [params, modifiedProcessModelId]);
const navigateToProcessModelFile = (_result: any) => {
if (!params.file_name) {