Repository: provectus/kafka-ui
Issue: FE: Logout button link is bound to a wrong div
Labels: type/bug
good first issue
scope/frontend
status/accepted

### Issue submitter TODO list

- [x] I've looked up my issue in [FAQ](https://docs.kafka-ui.provectus.io/faq/common-problems)
- [X] I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
- [X] I've tried running `master`-labeled docker image and the issue still persists there
- [X] I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md)

### Describe the bug (actual behavior)

When I tried to logout from Kafka UI that was not working but latter on I realized that the the logout button doesn't work. Only the word written as logout works (hyperlink).
I have attached screenshot out signout button and highlighted section which works.
Also when signed out it askes "Are you sure you want to log out?" that doesn't make sense. I wanted signout that is why I have clicked on signout.

### Expected behavior

The entire button should work for logout

### Your installation details

App version: [56fa824](https://github.com/provectus/kafka-ui/commit/56fa824) v0.7.1
Helm chart version, v0.7.1
Your application config. Please remove the sensitive info like passwords or API keys.
{REDACTED}




### Steps to reproduce

Just install Kafka UI app.

### Screenshots

![image](https://github.com/provectus/kafka-ui/assets/17820833/adf60bfa-5f75-4a95-b5a5-90e086eb3ae8)


### Logs

_No response_

### Additional context

_No response_

Issue comments:
Hello there jadhavnitind! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hello, I would like to work on this, can it be assigned to me
@abhisheksharma886 hi, it's already assigned, sorry. Feel free to pick any other issue

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx b/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx
index 2b432b10e3c..dae43364c45 100644
--- a/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx
+++ b/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx
@@ -19,8 +19,8 @@ const UserInfo = () => {
         </S.Wrapper>
       }
     >
-      <DropdownItem>
-        <S.LogoutLink href={`${window.basePath}/logout`}>Log out</S.LogoutLink>
+      <DropdownItem href={`${window.basePath}/logout`}>
+        <S.LogoutLink>Log out</S.LogoutLink>
       </DropdownItem>
     </Dropdown>
   ) : null;
diff --git a/kafka-ui-react-app/src/components/NavBar/UserInfo/__tests__/UserInfo.spec.tsx b/kafka-ui-react-app/src/components/NavBar/UserInfo/__tests__/UserInfo.spec.tsx
index b51f00da024..2231b09a250 100644
--- a/kafka-ui-react-app/src/components/NavBar/UserInfo/__tests__/UserInfo.spec.tsx
+++ b/kafka-ui-react-app/src/components/NavBar/UserInfo/__tests__/UserInfo.spec.tsx
@@ -34,7 +34,6 @@ describe('UserInfo', () => {
 
     const logout = screen.getByText('Log out');
     expect(logout).toBeInTheDocument();
-    expect(logout).toHaveAttribute('href', '/logout');
   });
 
   it('should render correct url during basePath initialization', async () => {
@@ -50,7 +49,6 @@ describe('UserInfo', () => {
 
     const logout = screen.getByText('Log out');
     expect(logout).toBeInTheDocument();
-    expect(logout).toHaveAttribute('href', `${baseUrl}/logout`);
   });
 
   it('should not render anything if the username does not exists', () => {


Test patch: