instances tests are mostly passing, issues with table resizing on the list w/ burnettk

This commit is contained in:
jasquat 2022-11-04 15:07:40 -04:00
parent 5b2264b7f8
commit b165608430
8 changed files with 229 additions and 98 deletions

View File

@ -32,7 +32,7 @@ describe('process-groups', () => {
cy.contains('Delete Process Group').click(); cy.contains('Delete Process Group').click();
cy.contains('Are you sure'); cy.contains('Are you sure');
cy.getBySel('modal-confirmation-dialog').get('.cds--btn--danger').click(); cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
cy.url().should('include', `process-groups`); cy.url().should('include', `process-groups`);
cy.contains(groupId).should('not.exist'); cy.contains(groupId).should('not.exist');
}); });

View File

@ -48,7 +48,7 @@ const updateBpmnPythonScriptWithMonaco = (
.focused() // change subject to currently focused element .focused() // change subject to currently focused element
// .type('{ctrl}a') // had been doing it this way, but it turns out to be flaky relative to clear() // .type('{ctrl}a') // had been doing it this way, but it turns out to be flaky relative to clear()
.clear() .clear()
.type(pythonScript); .type(pythonScript, { delay: 30 });
cy.contains('Close').click(); cy.contains('Close').click();
// wait for a little bit for the xml to get set before saving // wait for a little bit for the xml to get set before saving
@ -111,8 +111,10 @@ describe('process-instances', () => {
}); });
it('can create a new instance and can modify with monaco text editor', () => { it('can create a new instance and can modify with monaco text editor', () => {
const originalPythonScript = 'person = "Kevin"'; // leave off the ending double quote since manco adds it
const newPythonScript = 'person = "Mike"'; const originalPythonScript = 'person = "Kevin';
const newPythonScript = 'person = "Mike';
const bpmnFile = 'process_model_one.bpmn'; const bpmnFile = 'process_model_one.bpmn';
// Change bpmn // Change bpmn
@ -152,7 +154,7 @@ describe('process-instances', () => {
cy.basicPaginationTest(); cy.basicPaginationTest();
}); });
it('can filter', () => { it.only('can filter', () => {
cy.getBySel('process-instance-list-link').click(); cy.getBySel('process-instance-list-link').click();
cy.assertAtLeastOneItemInPaginatedResults(); cy.assertAtLeastOneItemInPaginatedResults();

View File

@ -35,7 +35,7 @@ Cypress.Commands.add('navigateToHome', () => {
}); });
Cypress.Commands.add('navigateToAdmin', () => { Cypress.Commands.add('navigateToAdmin', () => {
cy.getBySel('spiffworkflow-logo').click(); cy.visit('/admin');
}); });
Cypress.Commands.add('login', (selector, ...args) => { Cypress.Commands.add('login', (selector, ...args) => {

View File

@ -1,6 +1,14 @@
import { import {
Header, Header,
HeaderContainer,
HeaderMenuButton,
SkipToContent,
Theme, Theme,
HeaderMenu,
SideNav,
SideNavItem,
SideNavItems,
HeaderSideNavItems,
HeaderName, HeaderName,
HeaderNavigation, HeaderNavigation,
HeaderMenuItem, HeaderMenuItem,
@ -77,21 +85,16 @@ export default function NavigationBar() {
); );
}; };
if (activeKey) { const headerMenuItems = () => {
return ( return (
<div className="spiffworkflow-header-container"> <>
<Theme theme="g100">
<Header aria-label="Spiffworkflow">
<HeaderName href="/" prefix="">
<img src={logo} className="app-logo" alt="logo" />
</HeaderName>
<HeaderNavigation aria-label="Spifffff">
<HeaderMenuItem href="/" isCurrentPage={isActivePage('/')}> <HeaderMenuItem href="/" isCurrentPage={isActivePage('/')}>
Home Home
</HeaderMenuItem> </HeaderMenuItem>
<HeaderMenuItem <HeaderMenuItem
href="/admin/process-groups" href="/admin/process-groups"
isCurrentPage={isActivePage('/admin/process-groups')} isCurrentPage={isActivePage('/admin/process-groups')}
data-qa="header-nav-processes"
> >
Processes Processes
</HeaderMenuItem> </HeaderMenuItem>
@ -101,11 +104,41 @@ export default function NavigationBar() {
> >
Process Instances Process Instances
</HeaderMenuItem> </HeaderMenuItem>
</>
);
};
if (activeKey) {
// TODO: apply theme g100 to the header
return (
<HeaderContainer
render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (
<Header aria-label="IBM Platform Name">
<SkipToContent />
<HeaderMenuButton
aria-label="Open menu"
onClick={onClickSideNavExpand}
isActive={isSideNavExpanded}
/>
<HeaderName href="/" prefix="" data-qa="spiffworkflow-logo">
<img src={logo} className="app-logo" alt="logo" />
</HeaderName>
<HeaderNavigation aria-label="Spiffworkflow">
{headerMenuItems()}
</HeaderNavigation> </HeaderNavigation>
<SideNav
aria-label="Side navigation"
expanded={isSideNavExpanded}
isPersistent={false}
>
<SideNavItems>
<HeaderSideNavItems>{headerMenuItems()}</HeaderSideNavItems>
</SideNavItems>
</SideNav>
<HeaderGlobalBar>{loginAndLogoutAction()}</HeaderGlobalBar> <HeaderGlobalBar>{loginAndLogoutAction()}</HeaderGlobalBar>
</Header> </Header>
</Theme> )}
</div> />
); );
} }
return null; return null;

View File

@ -30,6 +30,10 @@ span.bjs-crumb {
margin-bottom: 2em; margin-bottom: 2em;
} }
// forces the navigation items to be displayed at all viewport sizes
.cds--header__nav {
display: block;
}
.active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) { .active-task-highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: yellow !important; fill: yellow !important;

View File

@ -1,3 +1,5 @@
// @use '@carbon/react/scss/themes';
// @use '@carbon/react/scss/theme' with ($theme: themes.$g100);
@use '@carbon/react'; @use '@carbon/react';
@use '@carbon/styles'; @use '@carbon/styles';
// @include grid.flex-grid(); // @include grid.flex-grid();

View File

@ -17,6 +17,11 @@ import {
Grid, Grid,
Column, Column,
MultiSelect, MultiSelect,
TableHeader,
TableHead,
TableRow,
TableBody,
TableCell,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config'; import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
@ -373,55 +378,144 @@ export default function ProcessInstanceList() {
}; };
const buildTable = () => { const buildTable = () => {
const rows = processInstances.map((row: any) => { // const rows = processInstances.map((row: any) => {
const formattedStartDate = // const formattedStartDate =
convertSecondsToFormattedDate(row.start_in_seconds) || '-'; // convertSecondsToFormattedDate(row.start_in_seconds) || '-';
const formattedEndDate = // const formattedEndDate =
convertSecondsToFormattedDate(row.end_in_seconds) || '-'; // convertSecondsToFormattedDate(row.end_in_seconds) || '-';
//
// return (
// <tr key={row.id}>
// <td>
// <Link
// data-qa="process-instance-show-link"
// to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`}
// >
// {row.id}
// </Link>
// </td>
// <td>
// <Link to={`/admin/process-groups/${row.process_group_identifier}`}>
// {row.process_group_identifier}
// </Link>
// </td>
// <td>
// <Link
// to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`}
// >
// {row.process_model_identifier}
// </Link>
// </td>
// <td>{formattedStartDate}</td>
// <td>{formattedEndDate}</td>
// <td data-qa={`process-instance-status-${row.status}`}>
// {row.status}
// </td>
// </tr>
// );
// });
// return (
// <Table size="lg">
// <thead>
// <tr>
// <th>Process Instance Id</th>
// <th>Process Group</th>
// <th>Process Model</th>
// <th>Start Time</th>
// <th>End Time</th>
// <th>Status</th>
// </tr>
// </thead>
// <tbody>{rows}</tbody>
// </Table>
// );
const rows = [
{
id: 'load-balancer-1',
name: 'Load Balancer 1',
rule: 'Round robin',
Status: 'Starting',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-2',
name: 'Load Balancer 2',
rule: 'DNS delegation',
status: 'Active',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-3',
name: 'Load Balancer 3',
rule: 'Round robin',
status: 'Disabled',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-4',
name: 'Load Balancer 4',
rule: 'Round robin',
status: 'Disabled',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-5',
name: 'Load Balancer 5',
rule: 'Round robin',
status: 'Disabled',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-6',
name: 'Load Balancer 6',
rule: 'Round robin',
status: 'Disabled',
other: 'Test',
example: '22',
},
{
id: 'load-balancer-7',
name: 'Load Balancer 7',
rule: 'Round robin',
status: 'Disabled',
other: 'Test',
example: '22',
},
];
const headers = ['Name', 'Rule', 'Status', 'Other', 'Example'];
return ( return (
<tr key={row.id}> <Table size="lg" useZebraStyles={false} isSortable>
<td> <TableHead>
<Link <TableRow>
data-qa="process-instance-show-link" {headers.map((header) => (
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}/process-instances/${row.id}`} <TableHeader
id={header}
key={header}
isSortable
sortDirection="ASC"
> >
{row.id} {header}
</Link> </TableHeader>
</td> ))}
<td> </TableRow>
<Link to={`/admin/process-groups/${row.process_group_identifier}`}> </TableHead>
{row.process_group_identifier} <TableBody>
</Link> {rows.map((row) => (
</td> <TableRow key={row.id}>
<td> {Object.keys(row)
<Link .filter((key) => key !== 'id')
to={`/admin/process-models/${row.process_group_identifier}/${row.process_model_identifier}`} .map((key) => {
> return <TableCell key={key}>{(row as any)[key]}</TableCell>;
{row.process_model_identifier} })}
</Link> </TableRow>
</td> ))}
<td>{formattedStartDate}</td> </TableBody>
<td>{formattedEndDate}</td>
<td data-qa={`process-instance-status-${row.status}`}>
{row.status}
</td>
</tr>
);
});
return (
<Table striped bordered>
<thead>
<tr>
<th>Process Instance Id</th>
<th>Process Group</th>
<th>Process Model</th>
<th>Start Time</th>
<th>End Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table> </Table>
); );
}; };

View File

@ -283,7 +283,6 @@ export default function ProcessModelEditDiagram() {
// we should update this to act like updating scripts // we should update this to act like updating scripts
// where we pass an event to bpmn-js // where we pass an event to bpmn-js
setScriptModeling(modeling); setScriptModeling(modeling);
setScriptText(script || ''); setScriptText(script || '');
setScriptType(scriptTypeString); setScriptType(scriptTypeString);
setScriptEventBus(eventBus); setScriptEventBus(eventBus);
@ -559,28 +558,25 @@ export default function ProcessModelEditDiagram() {
if (scriptElement) { if (scriptElement) {
scriptName = (scriptElement as any).di.bpmnElement.name; scriptName = (scriptElement as any).di.bpmnElement.name;
} }
return ( return (
<Modal size="xl" show={showScriptEditor} onHide={handleScriptEditorClose}> <Modal
<Modal.Header closeButton> open={showScriptEditor}
<Modal.Title>Editing Script: {scriptName}</Modal.Title> modalHeading={`Editing Script: ${scriptName}`}
</Modal.Header> primaryButtonText="Close"
<Modal.Body> onRequestSubmit={handleScriptEditorClose}
size="lg"
>
<Editor <Editor
height={500} height={500}
width="auto" width="auto"
options={generalEditorOptions()} options={generalEditorOptions()}
defaultLanguage="python" defaultLanguage="python"
defaultValue={scriptText} value={scriptText}
onChange={handleEditorScriptChange} onChange={handleEditorScriptChange}
onMount={handleEditorDidMount} onMount={handleEditorDidMount}
/> />
{scriptUnitTestEditorElement()} {scriptUnitTestEditorElement()}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleScriptEditorClose}>
Close
</Button>
</Modal.Footer>
</Modal> </Modal>
); );
}; };