[camel-karavan] 01/07: Show user info

[marat]

This is an automated email from the ASF dual-hosted git repository.

marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git

commit 4f1c636bbee371b7735f100febf7dad583785249
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Mon Sep 19 13:32:16 2022 -0400

    Show user info
---
 karavan-app/src/main/webapp/src/Main.tsx           | 26 +++++++++++++++++-----
 karavan-app/src/main/webapp/src/api/KaravanApi.tsx |  1 +
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/karavan-app/src/main/webapp/src/Main.tsx 
b/karavan-app/src/main/webapp/src/Main.tsx
index bd4af70..7856b93 100644
--- a/karavan-app/src/main/webapp/src/Main.tsx
+++ b/karavan-app/src/main/webapp/src/Main.tsx
@@ -10,7 +10,7 @@ import {
     FlexItem,
     Avatar,
     Tooltip,
-    Divider, Spinner, Bullseye
+    Divider, Spinner, Bullseye, Popover, Badge
 } from '@patternfly/react-core';
 import {KaravanApi} from "./api/KaravanApi";
 import {SsoApi} from "./api/SsoApi";
@@ -26,7 +26,6 @@ import {EipPage} from "./eip/EipPage";
 import {ProjectsPage} from "./projects/ProjectsPage";
 import {Project} from "./projects/ProjectModels";
 import {ProjectPage} from "./projects/ProjectPage";
-import UsersIcon from "@patternfly/react-icons/dist/js/icons/users-icon";
 import UserIcon from "@patternfly/react-icons/dist/js/icons/user-icon";
 import ProjectsIcon from 
"@patternfly/react-icons/dist/js/icons/repository-icon";
 import KameletsIcon from "@patternfly/react-icons/dist/js/icons/registry-icon";
@@ -77,6 +76,7 @@ interface State {
     request: string,
     filename: string,
     key: string,
+    showUser?: boolean,
 }
 
 export class Main extends React.Component<Props, State> {
@@ -182,9 +182,25 @@ export class Main extends React.Component<Props, State> {
             <FlexItem flex={{default:"flex_2"}} 
alignSelf={{default:"alignSelfCenter"}}>
                 <Divider/>
             </FlexItem>
-            {KaravanApi.authType !== 'public' && <FlexItem 
alignSelf={{default:"alignSelfCenter"}}>
-                <UserIcon className="avatar"/>
-            </FlexItem>}
+            {KaravanApi.authType !== 'public' &&
+                <FlexItem alignSelf={{default:"alignSelfCenter"}}>
+                    <Popover
+                        aria-label="Current user"
+                        position={"right-end"}
+                        hideOnOutsideClick={false}
+                        isVisible={this.state.showUser === true}
+                        shouldClose={tip => this.setState({showUser: false})}
+                        shouldOpen={tip => this.setState({showUser: true})}
+                        headerContent={<div>{KaravanApi.me.userName}</div>}
+                        bodyContent={
+                            <Flex direction={{default:"row"}}>
+                                {KaravanApi.me.roles && 
Array.isArray(KaravanApi.me.roles) && KaravanApi.me.roles.map((role: string) => 
<Badge isRead>{role}</Badge>)}
+                            </Flex>
+                        }
+                    >
+                        <UserIcon className="avatar"/>
+                    </Popover>
+                </FlexItem>}
         </Flex>)
     }
 
diff --git a/karavan-app/src/main/webapp/src/api/KaravanApi.tsx 
b/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
index ffb22b1..ef4c0d8 100644
--- a/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
+++ b/karavan-app/src/main/webapp/src/api/KaravanApi.tsx
@@ -107,6 +107,7 @@ export class KaravanApi {
             .then(res => {
                 if (res.status === 200) {
                     KaravanApi.isAuthorized = true;
+                    KaravanApi.me = res.data;
                     after(res);
                 }
             }).catch(err => {