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 styled, { css } from 'styled-components';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Button } from './common/Button/Button';
export const Layout = styled.div` export const Layout = styled.div`
min-width: 1200px; min-width: 1200px;
@ -108,6 +110,8 @@ export const Navbar = styled.nav(
export const NavbarBrand = styled.div` export const NavbarBrand = styled.div`
display: flex; display: flex;
justify-content: space-between;
align-items: center !important;
flex-shrink: 0; flex-shrink: 0;
align-items: stretch; align-items: stretch;
min-height: 3.25rem; min-height: 3.25rem;
@ -205,3 +209,17 @@ export const AlertsContainer = styled.div`
max-width: initial; 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.Layout>
<S.Navbar role="navigation" aria-label="Page Header"> <S.Navbar role="navigation" aria-label="Page Header">
<S.NavbarBrand> <S.NavbarBrand>
<S.NavbarBurger <S.NavbarBrand>
onClick={onBurgerClick} <S.NavbarBurger
onKeyDown={onBurgerClick} onClick={onBurgerClick}
role="button" onKeyDown={onBurgerClick}
tabIndex={0} role="button"
> tabIndex={0}
<S.Span role="separator" /> aria-label="burger"
<S.Span role="separator" /> >
<S.Span role="separator" /> <S.Span role="separator" />
</S.NavbarBurger> <S.Span role="separator" />
<S.Span role="separator" />
</S.NavbarBurger>
<S.Hyperlink to="/"> <S.Hyperlink to="/">
<Logo /> <Logo />
UI for Apache Kafka UI for Apache Kafka
</S.Hyperlink> </S.Hyperlink>
<S.NavbarItem> <S.NavbarItem>
{GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />} {GIT_TAG && <Version tag={GIT_TAG} commit={GIT_COMMIT} />}
</S.NavbarItem> </S.NavbarItem>
</S.NavbarBrand>
<S.LogoutLink to="/logout">
<S.LogoutButton buttonType="primary" buttonSize="M">
Log out
</S.LogoutButton>
</S.LogoutLink>
</S.NavbarBrand> </S.NavbarBrand>
</S.Navbar> </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 userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock'; import fetchMock from 'fetch-mock';
const burgerButtonOptions = { name: 'burger' };
const logoutButtonOptions = { name: 'Log out' };
describe('App', () => { describe('App', () => {
describe('initial state', () => { describe('initial state', () => {
beforeEach(() => { beforeEach(() => {
@ -24,11 +27,16 @@ describe('App', () => {
within(header).getByText('UI for Apache Kafka') within(header).getByText('UI for Apache Kafka')
).toBeInTheDocument(); ).toBeInTheDocument();
expect(within(header).getAllByRole('separator').length).toEqual(3); 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', () => { it('handle burger click correctly', () => {
const header = screen.getByLabelText('Page Header'); 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 sidebar = screen.getByLabelText('Sidebar');
const overlay = screen.getByLabelText('Overlay'); const overlay = screen.getByLabelText('Overlay');
expect(sidebar).toBeInTheDocument(); expect(sidebar).toBeInTheDocument();