feat: Display logged-in user (#1879)

* Display a welcome message for the logged-in user.
* If the cookie `kuberpult.oauth` is not set, nothing is displayed.

Ref: SRX-Y5QM5R

services/frontend-service/src/ui/components/TopAppBar/TopAppBar.test.tsx

@@ -0,0 +1,59 @@
+/*This file is part of kuberpult.
+
+Kuberpult is free software: you can redistribute it and/or modify
+it under the terms of the Expat(MIT) License as published by
+the Free Software Foundation.
+
+Kuberpult is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+MIT License for more details.
+
+You should have received a copy of the MIT License
+along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
+
+Copyright freiheit.com*/
+import React from 'react';
+import { render } from '@testing-library/react';
+import { TopAppBar } from './TopAppBar';
+import { MemoryRouter } from 'react-router-dom';
+
+describe('TopAppBar', () => {
+    beforeEach(() => {
+        document.cookie = '';
+    });
+    interface dataEnvT {
+        name: string;
+        cookie: string;
+        welcomeMessage: string;
+    }
+    const sampleEnvData: dataEnvT[] = [
+        {
+            name: 'no cookie',
+            cookie: '',
+            welcomeMessage: '',
+        },
+        {
+            name: 'cookie defined with no user email',
+            cookie: 'kuberpult.oauth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjE3MjA2MjE5OTc3Nzd9.p3ApN5elnhhRhrh7DCOF-9suPIXYC36Nycf0nHfxuf8',
+            welcomeMessage: 'Welcome, Guest!',
+        },
+        {
+            name: 'cookie defined with a user email',
+            cookie: 'kuberpult.oauth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJlbWFpbCI6InRlc3QudGVzdEB0ZXN0LmNvbSJ9.wgoizCsQb6AuFsbINF5OHfmfipdj5MuEUwJjZaqsBOg',
+            welcomeMessage: 'Welcome, [email protected]!',
+        },
+    ];
+    describe.each(sampleEnvData)(`welcomeMessage`, (tc) => {
+        it(tc.name, () => {
+            document.cookie = tc.cookie;
+            const { container } = render(
+                <MemoryRouter>
+                    <TopAppBar showAppFilter={false} showTeamFilter={false} showWarningFilter={false} />
+                </MemoryRouter>
+            );
+            const message = container.getElementsByClassName('welcome-message');
+            tc.cookie === '' ? expect(message).toHaveLength(0) : expect(message[0].textContent).toBe(tc.welcomeMessage);
+        });
+    });
+});

services/frontend-service/src/ui/components/TopAppBar/TopAppBar.tsx

@@ -13,6 +13,7 @@ You should have received a copy of the MIT License
 along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
 
 Copyright freiheit.com*/
+import { jwtDecode } from 'jwt-decode';
 import { Textfield } from '../textfield';
 import React, { useCallback } from 'react';
 import { SideBar } from '../SideBar/SideBar';
@@ -47,6 +48,12 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
     const teamsParam = (params.get('teams') || '').split(',').filter((val) => val !== '');
 
     const version = useKuberpultVersion() || '2.6.0';
+    const cookieValue = document.cookie
+        .split('; ')
+        .find((row) => row.startsWith('kuberpult.oauth='))
+        ?.split('=')[1];
+    const decodedToken: any = cookieValue ? jwtDecode(cookieValue) : undefined;
+    const loggedInUser = decodedToken?.email || 'Guest';
 
     const hideWithoutWarningsValue = hideWithoutWarnings(params);
     const allWarnings: Warning[] = useAllWarnings();
@@ -114,7 +121,15 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
         ) : (
             <div className="mdc-top-app-bar__section top-app-bar--narrow-filter"></div>
         );
-
+    const renderedUser = cookieValue ? (
+        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
+            <span className="welcome-message">
+                Welcome, <strong>{loggedInUser}!</strong>
+            </span>
+        </div>
+    ) : (
+        <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"></div>
+    );
     return (
         <div className="mdc-top-app-bar">
             <div className="mdc-top-app-bar__row">
@@ -127,6 +142,7 @@ export const TopAppBar: React.FC<TopAppBarProps> = (props) => {
                 {renderedTeamsFilter}
                 {renderedWarningsFilter}
                 {renderedWarnings}
+                {renderedUser}
                 <div className="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                     <strong className="sub-headline1">Planned Actions</strong>
                     <Button