updated the breadcrumb component and added a test for buttons in file dropdown
This commit is contained in:
jasquat
parent
9f3ff6bda4
commit
010e106db4
|
|
@ -1,12 +1,12 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import Breadcrumb from 'react-bootstrap/Breadcrumb';
|
||||
import { BreadcrumbItem } from '../interfaces';
|
||||
// @ts-ignore
|
||||
import { Breadcrumb, BreadcrumbItem } from '@carbon/react';
|
||||
import { HotCrumbItem } from '../interfaces';
|
||||
|
||||
type OwnProps = {
|
||||
processModelId?: string;
|
||||
processGroupId?: string;
|
||||
linkProcessModel?: boolean;
|
||||
hotCrumbs?: BreadcrumbItem[];
|
||||
hotCrumbs?: HotCrumbItem[];
|
||||
};
|
||||
|
||||
export default function ProcessBreadcrumb({
|
||||
|
|
@ -22,18 +22,20 @@ export default function ProcessBreadcrumb({
|
|||
if (lastItem === undefined) {
|
||||
return null;
|
||||
}
|
||||
const lastCrumb = <Breadcrumb.Item active>{lastItem[0]}</Breadcrumb.Item>;
|
||||
const leadingCrumbLinks = hotCrumbs.map((crumb) => {
|
||||
const lastCrumb = (
|
||||
<BreadcrumbItem isCurrentPage>{lastItem[0]}</BreadcrumbItem>
|
||||
);
|
||||
const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
|
||||
const valueLabel = crumb[0];
|
||||
const url = crumb[1];
|
||||
return (
|
||||
<Breadcrumb.Item key={valueLabel} linkAs={Link} linkProps={{ to: url }}>
|
||||
<BreadcrumbItem key={valueLabel} href={url}>
|
||||
{valueLabel}
|
||||
</Breadcrumb.Item>
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb noTrailingSlash>
|
||||
{leadingCrumbLinks}
|
||||
{lastCrumb}
|
||||
</Breadcrumb>
|
||||
|
|
@ -42,42 +44,38 @@ export default function ProcessBreadcrumb({
|
|||
if (processModelId) {
|
||||
if (linkProcessModel) {
|
||||
processModelBreadcrumb = (
|
||||
<Breadcrumb.Item
|
||||
linkAs={Link}
|
||||
linkProps={{
|
||||
to: `/admin/process-models/${processGroupId}/${processModelId}`,
|
||||
}}
|
||||
<BreadcrumbItem
|
||||
href={`/admin/process-models/${processGroupId}/${processModelId}`}
|
||||
>
|
||||
Process Model: {processModelId}
|
||||
</Breadcrumb.Item>
|
||||
{`Process Model: ${processModelId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
} else {
|
||||
processModelBreadcrumb = (
|
||||
<Breadcrumb.Item active>
|
||||
Process Model: {processModelId}
|
||||
</Breadcrumb.Item>
|
||||
<BreadcrumbItem isCurrentPage>
|
||||
{`Process Model: ${processModelId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
processGroupBreadcrumb = (
|
||||
<Breadcrumb.Item
|
||||
linkAs={Link}
|
||||
<BreadcrumbItem
|
||||
data-qa="process-group-breadcrumb-link"
|
||||
linkProps={{ to: `/admin/process-groups/${processGroupId}` }}
|
||||
href={`/admin/process-groups/${processGroupId}`}
|
||||
>
|
||||
Process Group: {processGroupId}
|
||||
</Breadcrumb.Item>
|
||||
{`Process Group: ${processGroupId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
} else if (processGroupId) {
|
||||
processGroupBreadcrumb = (
|
||||
<Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
|
||||
<BreadcrumbItem isCurrentPage>
|
||||
{`Process Group: ${processGroupId}`}
|
||||
</BreadcrumbItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item linkAs={Link} linkProps={{ to: '/admin' }}>
|
||||
Process Groups
|
||||
</Breadcrumb.Item>
|
||||
<Breadcrumb noTrailingSlash>
|
||||
<BreadcrumbItem href="/admin">Process Groups</BreadcrumbItem>
|
||||
{processGroupBreadcrumb}
|
||||
{processModelBreadcrumb}
|
||||
</Breadcrumb>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,22 @@
|
|||
// @use '@carbon/react/scss/themes';
|
||||
// @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
|
||||
|
||||
@use '@carbon/react/scss/theme' with
|
||||
(
|
||||
$theme: (
|
||||
cds-link-text-color: #525252
|
||||
)
|
||||
);
|
||||
|
||||
@use '@carbon/react';
|
||||
@use '@carbon/styles';
|
||||
// @include grid.flex-grid();
|
||||
|
||||
@use '@carbon/colors';
|
||||
// @use '@carbon/react/scss/colors';
|
||||
@use '@carbon/react/scss/themes';
|
||||
|
||||
// var(--cds-link-text-color, var(--cds-link-primary, #0f62fe))
|
||||
|
||||
// site is mainly using white theme.
|
||||
// header is mainly using g100
|
||||
|
|
@ -13,3 +25,17 @@
|
|||
// background-color: colors.$gray-100;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cds--breadcrumb-item a.cds--link:hover {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link:visited {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link:visited:hover {
|
||||
color: #525252;
|
||||
}
|
||||
.cds--breadcrumb-item a.cds--link {
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export interface ProcessModel {
|
|||
}
|
||||
|
||||
// tuple of display value and URL
|
||||
export type BreadcrumbItem = [displayValue: string, url?: string];
|
||||
export type HotCrumbItem = [displayValue: string, url?: string];
|
||||
|
||||
export interface ErrorForDisplay {
|
||||
message: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useContext, useEffect, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
// @ts-ignore
|
||||
import { Button, Stack } from '@carbon/react';
|
||||
import { Grid, Column, Dropdown, Button, Stack } from '@carbon/react';
|
||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||
import FileInput from '../components/FileInput';
|
||||
import HttpService from '../services/HttpService';
|
||||
|
|
@ -210,6 +210,54 @@ export default function ProcessModelShow() {
|
|||
};
|
||||
|
||||
const processModelButtons = () => {
|
||||
// <Button
|
||||
// href={`/admin/process-models/${
|
||||
// (processModel as any).process_group_id
|
||||
// }/${(processModel as any).id}/files?file_type=dmn`}
|
||||
// variant="success"
|
||||
// >
|
||||
// Add New DMN File
|
||||
// </Button>
|
||||
// <Button
|
||||
// href={`/admin/process-models/${
|
||||
// (processModel as any).process_group_id
|
||||
// }/${(processModel as any).id}/form?file_ext=json`}
|
||||
// variant="info"
|
||||
// >
|
||||
// Add New JSON File
|
||||
// </Button>
|
||||
// <Button
|
||||
// href={`/admin/process-models/${
|
||||
// (processModel as any).process_group_id
|
||||
// }/${(processModel as any).id}/form?file_ext=md`}
|
||||
// variant="info"
|
||||
// >
|
||||
// Add New Markdown File
|
||||
// </Button>
|
||||
const items = [
|
||||
{
|
||||
key1: (
|
||||
<Grid>
|
||||
<Column md={1}>
|
||||
<Button
|
||||
onClick={(e2: any) => console.log('e2', e2)}
|
||||
variant="primary"
|
||||
>
|
||||
b1
|
||||
</Button>
|
||||
</Column>
|
||||
<Column md={1}>
|
||||
<Button
|
||||
onClick={(e3: any) => console.log('e3', e3)}
|
||||
variant="primary"
|
||||
>
|
||||
b2
|
||||
</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Stack orientation="horizontal" gap={3}>
|
||||
<Button onClick={processInstanceCreateAndRun} variant="primary">
|
||||
|
|
@ -231,30 +279,15 @@ export default function ProcessModelShow() {
|
|||
>
|
||||
Add New BPMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/files?file_type=dmn`}
|
||||
variant="success"
|
||||
>
|
||||
Add New DMN File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=json`}
|
||||
variant="info"
|
||||
>
|
||||
Add New JSON File
|
||||
</Button>
|
||||
<Button
|
||||
href={`/admin/process-models/${
|
||||
(processModel as any).process_group_id
|
||||
}/${(processModel as any).id}/form?file_ext=md`}
|
||||
variant="info"
|
||||
>
|
||||
Add New Markdown File
|
||||
</Button>
|
||||
<Dropdown
|
||||
id="default"
|
||||
titleText="Dropdown label"
|
||||
helperText="This is some helper text"
|
||||
label="Dropdown menu options"
|
||||
items={items}
|
||||
itemToString={(item: any) => (item ? item.key1 : '')}
|
||||
onChange={(e: any) => console.log('e', e)}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue