0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add logout button UI (#1854)

Browse source 
* add logout button ui

* adding redirect to /logout

Co-authored-by: rAzizbekyan <razizbekyan@provectus.com>
Co-authored-by: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
This commit is contained in:
Arsen Simonyan 2022-06-07 16:05:58 +04:00 • committed by GitHub
parent 3c984fc451
commit 45dc7f616c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
kafka-ui-react-app/src/components/App.styled.ts
View file

@ -1,6 +1,8 @@
import styled, { css } from 'styled-components';
import { Link } from 'react-router-dom';
import { Button } from './common/Button/Button';
export const Layout = styled.div`
min-width: 1200px;
@ -108,6 +110,8 @@ export const Navbar = styled.nav(
export const NavbarBrand = styled.div`
display: flex;
justify-content: space-between;
align-items: center !important;
flex-shrink: 0;
align-items: stretch;
min-height: 3.25rem;
@ -205,3 +209,17 @@ export const AlertsContainer = styled.div`
max-width: initial;
}
`;
export const LogoutButton = styled(Button)(
({ theme }) => css`
color: ${theme.button.primary.invertedColors.normal};
background: none !important;
padding: 0 8px;
`
);
export const LogoutLink = styled(Link)(
() => css`
margin-right: 16px;
`
);

42
kafka-ui-react-app/src/components/App.tsx
View file

@ -44,25 +44,33 @@ const App: React.FC = () => {
<S.Layout>
<S.Navbar role="navigation" aria-label="Page Header">
<S.NavbarBrand>
<S.NavbarBurger
onClick={onBurgerClick}
onKeyDown={onBurgerClick}
role="button"
tabIndex={0}
>
<S.Span role="separator" />
<S.Span role="separator" />
<S.Span role="separator" />
</S.NavbarBurger>
<S.NavbarBrand>
<S.NavbarBurger
onClick={onBurgerClick}
onKeyDown={onBurgerClick}
role="button"
tabIndex={0}
aria-label="burger"
>
<S.Span role="separator" />
<S.Span role="separator" />
<S.Span role="separator" />
</S.NavbarBurger>
<S.Hyperlink to="/">
<Logo />
UI for Apache Kafka
</S.Hyperlink>
<S.Hyperlink to="/">
<Logo />
UI for Apache Kafka
</S.Hyperlink>
<S.NavbarItem>
{GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}
</S.NavbarItem>
<S.NavbarItem>
{GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}
</S.NavbarItem>
</S.NavbarBrand>
<S.LogoutLink to="/logout">
<S.LogoutButton buttonType="primary" buttonSize="M">
Log out
</S.LogoutButton>
</S.LogoutLink>
</S.NavbarBrand>
</S.Navbar>

12
kafka-ui-react-app/src/components/__tests__/App.spec.tsx
View file

@ -6,6 +6,9 @@ import { clustersPayload } from 'redux/reducers/clusters/__test__/fixtures';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';
const burgerButtonOptions = { name: 'burger' };
const logoutButtonOptions = { name: 'Log out' };
describe('App', () => {
describe('initial state', () => {
beforeEach(() => {
@ -24,11 +27,16 @@ describe('App', () => {
within(header).getByText('UI for Apache Kafka')
).toBeInTheDocument();
expect(within(header).getAllByRole('separator').length).toEqual(3);
expect(within(header).getByRole('button')).toBeInTheDocument();
expect(
within(header).getByRole('button', burgerButtonOptions)
).toBeInTheDocument();
expect(
within(header).getByRole('button', logoutButtonOptions)
).toBeInTheDocument();
});
it('handle burger click correctly', () => {
const header = screen.getByLabelText('Page Header');
const burger = within(header).getByRole('button');
const burger = within(header).getByRole('button', burgerButtonOptions);
const sidebar = screen.getByLabelText('Sidebar');
const overlay = screen.getByLabelText('Overlay');
expect(sidebar).toBeInTheDocument();