From 152f7573849a82d25f0b16397a17dbddac0f837f Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Tue, 5 Jul 2022 21:47:00 +0530
Subject: [PATCH] Fix: issue 5645: UI feedback 0.11 (#5853)

---
 .../ui/src/components/app-bar/Appbar.tsx      | 47 +++++++++----------
 .../common/entityPageInfo/EntityPageInfo.tsx  |  4 +-
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
index 1f45db8c9ea..037ff222695 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx
@@ -40,6 +40,7 @@ import { useAuth } from '../../hooks/authHooks';
 import jsonData from '../../jsons/en';
 import {
   addToRecentSearched,
+  getEntityName,
   getNonDeletedTeams,
 } from '../../utils/CommonUtils';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
@@ -145,6 +146,20 @@ const Appbar: React.FC = (): JSX.Element => {
     },
   ];
 
+  const getUsersRoles = (userRoleArr: string[], name: string) => {
+    return (
+      <div>
+        <div className="tw-text-grey-muted tw-text-xs">{name}</div>
+        {userRoleArr.map((userRole, i) => (
+          <p className="tw-font-medium" key={i}>
+            {userRole}
+          </p>
+        ))}
+        <hr className="tw-my-1.5" />
+      </div>
+    );
+  };
+
   const getUserName = () => {
     const currentUser = isAuthDisabled
       ? appState.nonSecureUserDetails
@@ -175,9 +190,9 @@ const Appbar: React.FC = (): JSX.Element => {
 
     const name = currentUser?.displayName || currentUser?.name || TERM_USER;
 
-    const roles = currentUser?.roles?.map((r) => r.displayName) || [];
+    const roles = currentUser?.roles?.map((r) => getEntityName(r)) || [];
     const inheritedRoles =
-      currentUser?.inheritedRoles?.map((r) => r.displayName) || [];
+      currentUser?.inheritedRoles?.map((r) => getEntityName(r)) || [];
 
     currentUser?.isAdmin && roles.unshift(TERM_ADMIN);
 
@@ -190,31 +205,13 @@ const Appbar: React.FC = (): JSX.Element => {
           <span className="tw-font-medium tw-cursor-pointer">{name}</span>
         </Link>
         <hr className="tw-my-1.5" />
-        {roles.length > 0 ? (
-          <div>
-            <div className="tw-font-medium tw-text-xs">Roles</div>
-            {roles.map((r, i) => (
-              <p className="tw-text-grey-muted" key={i}>
-                {r}
-              </p>
-            ))}
-            <hr className="tw-my-1.5" />
-          </div>
-        ) : null}
-        {inheritedRoles.length > 0 ? (
-          <div>
-            <div className="tw-font-medium tw-text-xs">Inherited Roles</div>
-            {inheritedRoles.map((inheritedRole, i) => (
-              <p className="tw-text-grey-muted" key={i}>
-                {inheritedRole}
-              </p>
-            ))}
-            <hr className="tw-my-1.5" />
-          </div>
-        ) : null}
+        {roles.length > 0 ? getUsersRoles(roles, 'Roles') : null}
+        {inheritedRoles.length > 0
+          ? getUsersRoles(inheritedRoles, 'Inherited Roles')
+          : null}
         {teams.length > 0 ? (
           <div>
-            <span className="tw-font-medium tw-text-xs">Teams</span>
+            <span className="tw-text-grey-muted tw-text-xs">Teams</span>
             {teams.map((t, i) => (
               <p key={i}>
                 <Link to={getTeamAndUserDetailsPath(t.name as string)}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
index 60b14cff306..00a3e2f5855 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@@ -200,7 +200,7 @@ const EntityPageInfo = ({
           )}>
           <button
             className={classNames(
-              'tw-text-xs tw-border-r tw-font-medium tw-py-1 tw-px-2 tw-rounded-l focus:tw-outline-none tw-self-center',
+              'tw-text-xs tw-border-r tw-font-medium tw-py-1 tw-px-2 tw-rounded-l focus:tw-outline-none tw-self-center tw-h-full tw-flex tw-items-center',
               !isUndefined(isVersionSelected)
                 ? 'tw-border-white'
                 : 'tw-border-primary'
@@ -214,7 +214,7 @@ const EntityPageInfo = ({
           </button>
 
           <span
-            className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer hover:tw-underline"
+            className="tw-text-xs tw-border-l-0 tw-font-medium tw-p-2 tw-rounded-r tw-cursor-pointer hover:tw-underline tw-flex tw-self-center"
             data-testid="version-value">
             {parseFloat(version).toFixed(1)}
           </span>