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

some more changes... navigation bar is broken due to header container w/ burnettk

This commit is contained in:
jasquat 2022-10-31 16:03:14 -04:00
parent c90992b03c
commit 15035c5a4a
4 changed files with 161 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
spiffworkflow-frontend/src/App.tsx
View File

@ -1,6 +1,6 @@
import { useMemo, useState } from 'react';
// @ts-ignore
// import { Container } from '@carbon/react';
import { Content } from '@carbon/react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ErrorContext from './contexts/ErrorContext';
@ -46,14 +46,14 @@ export default function App() {
);
}
// <SubNavigation />
return (
<ErrorContext.Provider value={errorContextValueArray}>
<NavigationBar />
<div>
{errorTag}
<ErrorBoundary>
<BrowserRouter>
<SubNavigation />
<BrowserRouter>
<NavigationBar />
<Content>
{errorTag}
<ErrorBoundary>
<main style={{ padding: '1rem 0' }}>
<Routes>
<Route path="/" element={<HomePage />} />
@ -69,9 +69,9 @@ export default function App() {
/>
</Routes>
</main>
</BrowserRouter>
</ErrorBoundary>
</div>
</ErrorBoundary>
</Content>
</BrowserRouter>
</ErrorContext.Provider>
);
}

204
spiffworkflow-frontend/src/components/NavigationBar.tsx
View File

@ -1,72 +1,158 @@
// @ts-ignore
import { Button } from '@carbon/react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import {
Header,
Theme,
HeaderName,
HeaderContainer,
HeaderNavigation,
HeaderMenuItem,
HeaderMenu,
// @ts-ignore
} from '@carbon/react';
import { useEffect, useState } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { useLocation } from 'react-router-dom';
// @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
import logo from '../logo.svg';
import UserService from '../services/UserService';
// for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() {
const navElements = null;
// const navElements = null;
//
// const handleLogout = () => {
// UserService.doLogout();
// };
//
// const handleLogin = () => {
// UserService.doLogin();
// };
//
// const loginLink = () => {
// if (!UserService.isLoggedIn()) {
// return (
// <Navbar.Collapse className="justify-content-end">
// <Navbar.Text>
// <Button variant="link" onClick={handleLogin}>
// Login
// </Button>
// </Navbar.Text>
// </Navbar.Collapse>
// );
// }
// return null;
// };
//
// const logoutLink = () => {
// if (UserService.isLoggedIn()) {
// return (
// <Navbar.Collapse className="justify-content-end">
// <Navbar.Text>
// Signed in as: <strong>{UserService.getUsername()}</strong>
// </Navbar.Text>
// <Navbar.Text>
// <Button
// variant="link"
// onClick={handleLogout}
// data-qa="logout-button"
// >
// Logout
// </Button>
// </Navbar.Text>
// </Navbar.Collapse>
// );
// }
// return null;
// };
const handleLogout = () => {
UserService.doLogout();
};
const location = useLocation();
const [activeKey, setActiveKey] = useState<string>('');
const handleLogin = () => {
UserService.doLogin();
};
const loginLink = () => {
if (!UserService.isLoggedIn()) {
return (
<Navbar.Collapse className="justify-content-end">
<Navbar.Text>
<Button variant="link" onClick={handleLogin}>
Login
</Button>
</Navbar.Text>
</Navbar.Collapse>
);
useEffect(() => {
let newActiveKey = '/admin/process-groups';
if (location.pathname.match(/^\/admin\/messages\b/)) {
newActiveKey = '/admin/messages';
} else if (location.pathname.match(/^\/admin\/process-instances\b/)) {
newActiveKey = '/admin/process-instances';
} else if (location.pathname.match(/^\/admin\/secrets\b/)) {
newActiveKey = '/admin/secrets';
} else if (location.pathname.match(/^\/admin\/authentications\b/)) {
newActiveKey = '/admin/authentications';
} else if (location.pathname === '/') {
newActiveKey = '/';
} else if (location.pathname.match(/^\/tasks\b/)) {
newActiveKey = '/';
}
return null;
setActiveKey(newActiveKey);
}, [location]);
const isActivePage = (menuItemPath: string) => {
return activeKey === menuItemPath;
};
const logoutLink = () => {
if (UserService.isLoggedIn()) {
return (
<Navbar.Collapse className="justify-content-end">
<Navbar.Text>
Signed in as: <strong>{UserService.getUsername()}</strong>
</Navbar.Text>
<Navbar.Text>
<Button
variant="link"
onClick={handleLogout}
data-qa="logout-button"
>
Logout
</Button>
</Navbar.Text>
</Navbar.Collapse>
);
}
return null;
};
// return (
// <Theme theme="g100">
// <Navbar bg="dark" expand="lg" variant="dark">
// <Content>
// <Navbar.Brand data-qa="spiffworkflow-logo" href="/admin">
// <img src={logo} className="app-logo" alt="logo" />
// </Navbar.Brand>
// <Navbar.Toggle aria-controls="basic-navbar-nav" />
// <Navbar.Collapse id="basic-navbar-nav">
// <Nav className="me-auto">{navElements}</Nav>
// </Navbar.Collapse>
// {loginLink()}
// {logoutLink()}
// </Content>
// </Navbar>
// </Theme>
// );
return (
<Navbar bg="dark" expand="lg" variant="dark">
<Container>
<Navbar.Brand data-qa="spiffworkflow-logo" href="/admin">
<img src={logo} className="app-logo" alt="logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">{navElements}</Nav>
</Navbar.Collapse>
{loginLink()}
{logoutLink()}
</Container>
</Navbar>
);
// <Theme theme="g100">
// <Header aria-label="IBM Platform Name">
// <HeaderName href="#" prefix="IBM">
// [Platform]
// </HeaderName>
// <HeaderNavigation aria-label="IBM [Platform]">
// <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
// <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
// <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
// <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
// <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
// <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
// <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
// </HeaderMenu>
// </HeaderNavigation>
// </Header>
// </Theme>
if (activeKey) {
return (
<HeaderContainer>
<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('/')}>
Home
</HeaderMenuItem>
<HeaderMenuItem
href="/admin/process-groups"
isCurrentPage={isActivePage('/admin/process-groups')}
>
Processes
</HeaderMenuItem>
<HeaderMenuItem
href="/admin/process-instances"
isCurrentPage={isActivePage('/admin/process-instances')}
>
Process Instances
</HeaderMenuItem>
</HeaderNavigation>
</Header>
</Theme>
</HeaderContainer>
);
}
return null;
}

4
spiffworkflow-frontend/src/index.css
View File

@ -20,8 +20,8 @@ span.bjs-crumb {
}
.app-logo {
height: 35%;
width: 35%;
height: 90%;
width: 90%;
margin-top: 1em;
margin-bottom: 1em;
}

8
spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
View File

@ -1,8 +1,8 @@
import { useContext, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// @ts-ignore
import { Button, Modal, Stack } from '@carbon/react';
import Container from 'react-bootstrap/Container';
import { Button, Modal, Stack, Content } from '@carbon/react';
// import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
@ -463,7 +463,7 @@ export default function ProcessModelEditDiagram() {
}
return (
<main>
<Container>
<Content>
<Row>
<Col xs={8}>
<Button variant="link" disabled style={{ fontSize: '1.5em' }}>
@ -504,7 +504,7 @@ export default function ProcessModelEditDiagram() {
</Col>
<Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
</Row>
</Container>
</Content>
<Stack direction="horizontal" gap={3}>
{unitTestFailureElement()}
</Stack>