From 5f9f7ae06e071802e9ff1f3300dae9e60e08e713 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Thu, 9 Nov 2023 17:46:27 +0530
Subject: [PATCH] fix(ui): supported to see all personas in the user profile
 dropdown (#13915)

* supported to see all persona in user profile dropdown

* fix dropdown closing on more click for persona

* minor changes
---
 .../src/components/AppBar/app-bar.style.less  |  2 +-
 .../UserProfileIcon.component.tsx             | 44 ++++++++++++++-----
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/app-bar.style.less b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/app-bar.style.less
index 5ea36821f6da..bf3f50b34dc5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AppBar/app-bar.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AppBar/app-bar.style.less
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 .profile-dropdown {
-  a.more-teams-pill {
+  .more-teams-pill {
     background: #dde3ea;
     border: 1px solid #dde3ea;
     border-radius: 4px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.component.tsx
index 05bcefe973f6..8cc32c1a9ab7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.component.tsx
@@ -54,7 +54,7 @@ const renderLimitedListMenuItem = ({
   sizeLimit = 2,
   readMoreKey,
 }: ListMenuItemProps) => {
-  const remaningCount =
+  const remainingCount =
     listItems.length ?? 0 > sizeLimit
       ? (listItems.length ?? sizeLimit) - sizeLimit
       : 0;
@@ -69,9 +69,9 @@ const renderLimitedListMenuItem = ({
           key: item.id,
         })) ?? []),
         ...[
-          remaningCount > 0
+          remainingCount > 0
             ? {
-                label: readMoreLabelRenderer(remaningCount),
+                label: readMoreLabelRenderer(remainingCount),
                 key: readMoreKey ?? 'more-item',
               }
             : null,
@@ -89,6 +89,7 @@ export const UserProfileIcon = () => {
     () => currentUser?.profile?.images?.image512,
     [currentUser]
   );
+  const [showAllPersona, setShowAllPersona] = useState<boolean>(false);
 
   const handleOnImageError = useCallback(() => {
     setIsImgUrlValid(false);
@@ -151,13 +152,23 @@ export const UserProfileIcon = () => {
   );
 
   const readMoreTeamRenderer = useCallback(
-    (count) => (
-      <Link
-        className="more-teams-pill"
-        to={getUserPath(currentUser?.name as string)}>
-        {count} {t('label.more')}
-      </Link>
-    ),
+    (count: number, isPersona?: boolean) =>
+      isPersona ? (
+        <Typography.Text
+          className="more-teams-pill"
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowAllPersona(true);
+          }}>
+          {count} {t('label.more')}
+        </Typography.Text>
+      ) : (
+        <Link
+          className="more-teams-pill"
+          to={getUserPath(currentUser?.name as string)}>
+          {count} {t('label.more')}
+        </Link>
+      ),
     [currentUser]
   );
 
@@ -226,8 +237,9 @@ export const UserProfileIcon = () => {
         children: renderLimitedListMenuItem({
           listItems: personas ?? [],
           readMoreKey: 'more-persona',
+          sizeLimit: showAllPersona ? personas?.length : 2,
           labelRenderer: personaLabelRenderer,
-          readMoreLabelRenderer: readMoreTeamRenderer,
+          readMoreLabelRenderer: (count) => readMoreTeamRenderer(count, true),
         }),
         label: (
           <span className="text-grey-muted text-xs">
@@ -271,7 +283,15 @@ export const UserProfileIcon = () => {
         type: 'group',
       },
     ],
-    [currentUser, userName, selectedPersona, teams, roles, personas]
+    [
+      currentUser,
+      userName,
+      selectedPersona,
+      teams,
+      roles,
+      personas,
+      showAllPersona,
+    ]
   );
 
   useEffect(() => {