Repository: provectus/kafka-ui
Issue: Custom URN for logout button for 0.5.0
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

When connecting oauth2 via the keycloak provider I did not find the possibility of determining the URN of the exit button in the interface.

Very often, a user path is used to access the user interface, and it is very different from `/`, so exit is not possible. So I would like to have an environment setting/variable responsible for that path in order to be able to log out properly.

The launch is carried out in kubernetes. Additionally, the `SERVER_SERVLET_CONTEXT_PATH : /kafka-ui` parameter is passed

Issue comments:
Hello there AlexeyGA! 👋

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. 👀
Hey, thanks for raising the issue.
Yeah, I believe the frontend doesn't take `SERVER_SERVLET_CONTEXT_PATH` into consideration.
We'll fix that, thanks again.
Hello, this is my first experience with open source contributions. Would really appreciate it if you explained exactly what is needed to be done. 

I would love to work on this issue.

Thanks in advance! :)
@anushkabishnoi hey, sorry for the delay! We've been already working on it.
If you wish to contribute please refer to [contributing guide](https://github.com/provectus/kafka-ui/blob/master/CONTRIBUTING.md) as a start, thanks!

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 bae205ad03c..a70276afabd 100644
--- a/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx
+++ b/kafka-ui-react-app/src/components/NavBar/UserInfo/UserInfo.tsx
@@ -26,7 +26,7 @@ const UserInfo = () => {
       }
     >
       <DropdownItem>
-        <S.LogoutLink href="/logout">Log out</S.LogoutLink>
+        <S.LogoutLink href={`${window.basePath}/logout`}>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 f474783c471..b51f00da024 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
@@ -22,6 +22,10 @@ describe('UserInfo', () => {
 
   it('should render the userInfo during click opens the dropdown', async () => {
     const username = 'someName';
+    Object.defineProperty(window, 'basePath', {
+      value: '',
+      writable: true,
+    });
     (useUserInfo as jest.Mock).mockImplementation(() => ({ username }));
 
     renderComponent();
@@ -33,6 +37,22 @@ describe('UserInfo', () => {
     expect(logout).toHaveAttribute('href', '/logout');
   });
 
+  it('should render correct url during basePath initialization', async () => {
+    const username = 'someName';
+    const baseUrl = '/path';
+    Object.defineProperty(window, 'basePath', {
+      value: baseUrl,
+      writable: true,
+    });
+    (useUserInfo as jest.Mock).mockImplementation(() => ({ username }));
+
+    renderComponent();
+
+    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', () => {
     (useUserInfo as jest.Mock).mockImplementation(() => ({
       username: undefined,


Test patch: