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

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

@ -1,72 +1,158 @@
// @ts-ignore import {
import { Button } from '@carbon/react'; Header,
import { Navbar, Nav, Container } from 'react-bootstrap'; 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 // @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 logo from '../logo.svg';
import UserService from '../services/UserService'; import UserService from '../services/UserService';
// for ref: https://react-bootstrap.github.io/components/navbar/ // for ref: https://react-bootstrap.github.io/components/navbar/
export default function NavigationBar() { 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 = () => { const location = useLocation();
UserService.doLogout(); const [activeKey, setActiveKey] = useState<string>('');
};
const handleLogin = () => { useEffect(() => {
UserService.doLogin(); let newActiveKey = '/admin/process-groups';
}; if (location.pathname.match(/^\/admin\/messages\b/)) {
newActiveKey = '/admin/messages';
const loginLink = () => { } else if (location.pathname.match(/^\/admin\/process-instances\b/)) {
if (!UserService.isLoggedIn()) { newActiveKey = '/admin/process-instances';
return ( } else if (location.pathname.match(/^\/admin\/secrets\b/)) {
<Navbar.Collapse className="justify-content-end"> newActiveKey = '/admin/secrets';
<Navbar.Text> } else if (location.pathname.match(/^\/admin\/authentications\b/)) {
<Button variant="link" onClick={handleLogin}> newActiveKey = '/admin/authentications';
Login } else if (location.pathname === '/') {
</Button> newActiveKey = '/';
</Navbar.Text> } else if (location.pathname.match(/^\/tasks\b/)) {
</Navbar.Collapse> newActiveKey = '/';
);
} }
return null; setActiveKey(newActiveKey);
}, [location]);
const isActivePage = (menuItemPath: string) => {
return activeKey === menuItemPath;
}; };
const logoutLink = () => { // return (
if (UserService.isLoggedIn()) { // <Theme theme="g100">
return ( // <Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Collapse className="justify-content-end"> // <Content>
<Navbar.Text> // <Navbar.Brand data-qa="spiffworkflow-logo" href="/admin">
Signed in as: <strong>{UserService.getUsername()}</strong> // <img src={logo} className="app-logo" alt="logo" />
</Navbar.Text> // </Navbar.Brand>
<Navbar.Text> // <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Button // <Navbar.Collapse id="basic-navbar-nav">
variant="link" // <Nav className="me-auto">{navElements}</Nav>
onClick={handleLogout} // </Navbar.Collapse>
data-qa="logout-button" // {loginLink()}
> // {logoutLink()}
Logout // </Content>
</Button> // </Navbar>
</Navbar.Text> // </Theme>
</Navbar.Collapse> // );
);
}
return null;
};
return ( // <Theme theme="g100">
<Navbar bg="dark" expand="lg" variant="dark"> // <Header aria-label="IBM Platform Name">
<Container> // <HeaderName href="#" prefix="IBM">
<Navbar.Brand data-qa="spiffworkflow-logo" href="/admin"> // [Platform]
<img src={logo} className="app-logo" alt="logo" /> // </HeaderName>
</Navbar.Brand> // <HeaderNavigation aria-label="IBM [Platform]">
<Navbar.Toggle aria-controls="basic-navbar-nav" /> // <HeaderMenuItem href="#">Link 1</HeaderMenuItem>
<Navbar.Collapse id="basic-navbar-nav"> // <HeaderMenuItem href="#">Link 2</HeaderMenuItem>
<Nav className="me-auto">{navElements}</Nav> // <HeaderMenuItem href="#">Link 3</HeaderMenuItem>
</Navbar.Collapse> // <HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
{loginLink()} // <HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
{logoutLink()} // <HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
</Container> // <HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
</Navbar> // </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 { .app-logo {
height: 35%; height: 90%;
width: 35%; width: 90%;
margin-top: 1em; margin-top: 1em;
margin-bottom: 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 { useContext, useEffect, useRef, useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// @ts-ignore // @ts-ignore
import { Button, Modal, Stack } from '@carbon/react'; import { Button, Modal, Stack, Content } from '@carbon/react';
import Container from 'react-bootstrap/Container'; // import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col'; import Col from 'react-bootstrap/Col';
@ -463,7 +463,7 @@ export default function ProcessModelEditDiagram() {
} }
return ( return (
<main> <main>
<Container> <Content>
<Row> <Row>
<Col xs={8}> <Col xs={8}>
<Button variant="link" disabled style={{ fontSize: '1.5em' }}> <Button variant="link" disabled style={{ fontSize: '1.5em' }}>
@ -504,7 +504,7 @@ export default function ProcessModelEditDiagram() {
</Col> </Col>
<Col xs={1}>{scriptUnitTestResultBoolElement}</Col> <Col xs={1}>{scriptUnitTestResultBoolElement}</Col>
</Row> </Row>
</Container> </Content>
<Stack direction="horizontal" gap={3}> <Stack direction="horizontal" gap={3}>
{unitTestFailureElement()} {unitTestFailureElement()}
</Stack> </Stack>