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

updated the breadcrumb component and added a test for buttons in file dropdown

This commit is contained in:
jasquat 2022-11-07 14:23:19 -05:00
parent 34c0b5d2a3
commit 5f22c0b910
4 changed files with 112 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
spiffworkflow-frontend/src/components/ProcessBreadcrumb.tsx
View File

@ -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>

26
spiffworkflow-frontend/src/index.scss
View File

@ -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;
}

2
spiffworkflow-frontend/src/interfaces.ts
View File

@ -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;

83
spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
View File

@ -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>
);
};