Minor(ui): Close profile dropdown on redirection to user profile page (#21733)

* close dropdown on redirection

* address comment

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Users.spec.ts

@@ -505,4 +505,24 @@ test.describe('User Profile Feed Interactions', () => {
       adminPage.locator('[data-testid="user-display-name"]')
     ).toHaveText(fullyQualifiedName);
   });
+
+  test('Close the profile dropdown after redirecting to user profile page', async ({
+    adminPage,
+  }) => {
+    await redirectToHomePage(adminPage);
+    await adminPage.locator('[data-testid="dropdown-profile"] svg').click();
+    await adminPage.waitForSelector('[role="menu"].profile-dropdown', {
+      state: 'visible',
+    });
+    const userResponse = adminPage.waitForResponse(
+      '/api/v1/users/name/*?fields=*&include=all'
+    );
+    await adminPage.getByTestId('user-name').click();
+    await userResponse;
+    await adminPage.waitForLoadState('networkidle');
+
+    await expect(
+      adminPage.locator('.user-profile-dropdown-overlay')
+    ).not.toBeVisible();
+  });
 });

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UserProfileIcon/UserProfileIcon.component.tsx

@@ -116,6 +116,7 @@ export const UserProfileIcon = () => {
     currentUser?.profile?.images
   );
   const [showAllPersona, setShowAllPersona] = useState<boolean>(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
 
   const handleOnImageError = useCallback(() => {
     setIsImgUrlValid(false);
@@ -207,6 +208,10 @@ export const UserProfileIcon = () => {
     [currentUser]
   );
 
+  const handleCloseDropdown = useCallback(() => {
+    setIsDropdownOpen(false);
+  }, []);
+
   const items: ItemType[] = useMemo(
     () => [
       {
@@ -215,7 +220,8 @@ export const UserProfileIcon = () => {
         label: (
           <Link
             data-testid="user-name"
-            to={getUserPath(currentUser?.name as string)}>
+            to={getUserPath(currentUser?.name as string)}
+            onClick={handleCloseDropdown}>
             <Typography.Paragraph
               className="ant-typography-ellipsis-custom font-medium cursor-pointer text-link-color m-b-0"
               ellipsis={{ rows: 1, tooltip: true }}>
@@ -354,7 +360,10 @@ export const UserProfileIcon = () => {
         defaultOpenKeys: ['personas', 'roles', 'inheritedRoles', 'teams'],
         rootClassName: 'profile-dropdown w-68 p-x-md p-y-sm',
       }}
-      trigger={['click']}>
+      open={isDropdownOpen}
+      overlayClassName="user-profile-dropdown-overlay"
+      trigger={['click']}
+      onOpenChange={setIsDropdownOpen}>
       <Button
         className="user-profile-btn flex-center"
         data-testid="dropdown-profile"