some more changes... navigation bar is broken due to header container w/ burnettk
This commit is contained in:
parent
c90992b03c
commit
15035c5a4a
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue