147 lines
4.6 KiB
Plaintext
147 lines
4.6 KiB
Plaintext
// @ts-ignore
|
|
import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { modifyProcessIdentifierForPathParam } from '../helpers';
|
|
import {
|
|
HotCrumbItem,
|
|
HotCrumbItemArray,
|
|
HotCrumbItemObject,
|
|
ProcessGroup,
|
|
ProcessGroupLite,
|
|
ProcessModel,
|
|
} from '../interfaces';
|
|
import HttpService from '../services/HttpService';
|
|
|
|
type OwnProps = {
|
|
hotCrumbs?: HotCrumbItem[];
|
|
};
|
|
|
|
// export default function ProcessBreadcrumb({ hotCrumbs }: OwnProps) {
|
|
export const default ProcessBreadcrumb = React.memo(({ hotCrumbs }: OwnProps) => {
|
|
const [processEntity, setProcessEntity] = useState<
|
|
ProcessGroup | ProcessModel | null
|
|
>(null);
|
|
|
|
useEffect(() => {
|
|
const explodeCrumbItemObject = (crumb: HotCrumbItem) => {
|
|
if ('entityToExplode' in crumb) {
|
|
const { entityToExplode, entityType } = crumb;
|
|
if (entityType === 'process-model-id') {
|
|
HttpService.makeCallToBackend({
|
|
path: `/process-models/${modifyProcessIdentifierForPathParam(
|
|
entityToExplode as string
|
|
)}`,
|
|
successCallback: setProcessEntity,
|
|
onUnauthorized: () => {},
|
|
});
|
|
} else if (entityType === 'process-group-id') {
|
|
HttpService.makeCallToBackend({
|
|
path: `/process-groups/${modifyProcessIdentifierForPathParam(
|
|
entityToExplode as string
|
|
)}`,
|
|
successCallback: setProcessEntity,
|
|
onUnauthorized: () => {},
|
|
});
|
|
} else {
|
|
setProcessEntity(entityToExplode as any);
|
|
}
|
|
}
|
|
};
|
|
if (hotCrumbs) {
|
|
hotCrumbs.forEach(explodeCrumbItemObject);
|
|
}
|
|
}, [hotCrumbs]);
|
|
|
|
const checkPermissions = (crumb: HotCrumbItemObject) => {
|
|
if (!crumb.checkPermission) {
|
|
return true;
|
|
}
|
|
return (
|
|
processEntity &&
|
|
'actions' in processEntity &&
|
|
processEntity.actions &&
|
|
'read' in processEntity.actions
|
|
);
|
|
};
|
|
|
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
const hotCrumbElement = () => {
|
|
if (hotCrumbs) {
|
|
const leadingCrumbLinks = hotCrumbs.map(
|
|
(crumb: HotCrumbItemArray | HotCrumbItemObject) => {
|
|
if (
|
|
'entityToExplode' in crumb &&
|
|
processEntity &&
|
|
processEntity.parent_groups &&
|
|
checkPermissions(crumb)
|
|
) {
|
|
const breadcrumbs = processEntity.parent_groups.map(
|
|
(parentGroup: ProcessGroupLite) => {
|
|
const fullUrl = `/process-groups/${modifyProcessIdentifierForPathParam(
|
|
parentGroup.id
|
|
)}`;
|
|
return (
|
|
<BreadcrumbItem key={parentGroup.id} href={fullUrl}>
|
|
{parentGroup.display_name}
|
|
</BreadcrumbItem>
|
|
);
|
|
}
|
|
);
|
|
|
|
if (crumb.linkLastItem) {
|
|
let apiBase = '/process-groups';
|
|
let dataQaTag = '';
|
|
if (crumb.entityType.startsWith('process-model')) {
|
|
apiBase = '/process-models';
|
|
dataQaTag = 'process-model-breadcrumb-link';
|
|
}
|
|
const fullUrl = `${apiBase}/${modifyProcessIdentifierForPathParam(
|
|
processEntity.id
|
|
)}`;
|
|
breadcrumbs.push(
|
|
<BreadcrumbItem
|
|
key={processEntity.id}
|
|
href={fullUrl}
|
|
data-qa={dataQaTag}
|
|
>
|
|
{processEntity.display_name}
|
|
</BreadcrumbItem>
|
|
);
|
|
} else {
|
|
breadcrumbs.push(
|
|
<BreadcrumbItem key={processEntity.id} isCurrentPage>
|
|
{processEntity.display_name}
|
|
</BreadcrumbItem>
|
|
);
|
|
}
|
|
return breadcrumbs;
|
|
}
|
|
if (Array.isArray(crumb)) {
|
|
const valueLabel = crumb[0];
|
|
const url = crumb[1];
|
|
if (!url && valueLabel) {
|
|
return (
|
|
<BreadcrumbItem isCurrentPage key={valueLabel}>
|
|
{valueLabel}
|
|
</BreadcrumbItem>
|
|
);
|
|
}
|
|
if (url && valueLabel) {
|
|
return (
|
|
<BreadcrumbItem key={valueLabel} href={url}>
|
|
{valueLabel}
|
|
</BreadcrumbItem>
|
|
);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
);
|
|
return <Breadcrumb noTrailingSlash>{leadingCrumbLinks}</Breadcrumb>;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return <Breadcrumb noTrailingSlash>{hotCrumbElement()}</Breadcrumb>;
|
|
})
|