Add logout button UI (#1854)

* 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>

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

@@ -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;
+  `
+);

kafka-ui-react-app/src/components/App.tsx

@@ -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>
 

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

@@ -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();