From b1366cd474bac25e44299bf4b6867167c0c5f53a Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Tue, 6 Feb 2024 15:37:47 +0530
Subject: [PATCH 1/6] unit test case of Users tab

---
 .../Users/UsersTab/UsersTab.test.tsx          | 124 ++++++++++++++++++
 .../Users/UsersTab/UsersTabs.component.tsx    |  30 +++--
 .../src/components/Users/mocks/User.mocks.ts  |  65 +++++++++
 3 files changed, 205 insertions(+), 14 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTab.test.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTab.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTab.test.tsx
new file mode 100644
index 000000000000..a1a015a459d3
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTab.test.tsx
@@ -0,0 +1,124 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { getUserById } from '../../../rest/userAPI';
+import { mockUsersTabData } from '../mocks/User.mocks';
+import { UsersTab } from './UsersTabs.component';
+
+jest.mock('../../../rest/userAPI', () => ({
+  getUserById: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve(mockUsersTabData)),
+}));
+
+jest.mock('../../common/PopOverCard/UserPopOverCard', () =>
+  jest.fn().mockReturnValue('Aaron Johnson')
+);
+jest.mock('react-router-dom', () => ({
+  Link: jest
+    .fn()
+    .mockImplementation(({ children }: { children: React.ReactNode }) => (
+      <p data-testid="link">{children}</p>
+    )),
+  useHistory: jest.fn(),
+}));
+
+const mockUsers = [
+  {
+    deleted: false,
+    displayName: 'Aaron Johnson',
+    fullyQualifiedName: 'aaron_johnson0',
+    href: 'http://localhost:8585/api/v1/users/f281e7fd-5fd3-4279-8a2d-ade80febd743',
+    id: 'f281e7fd-5fd3-4279-8a2d-ade80febd743',
+    name: 'aaron_johnson0',
+    type: 'user',
+  },
+];
+
+const mockOnRemoveUser = jest.fn();
+
+describe('UsersTab', () => {
+  it('should renders Users Tab', async () => {
+    await act(async () => {
+      render(<UsersTab users={mockUsers} onRemoveUser={mockOnRemoveUser} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    expect(await screen.findByText('label.username')).toBeInTheDocument();
+    expect(await screen.findByText('label.team-plural')).toBeInTheDocument();
+    expect(await screen.findByText('label.role-plural')).toBeInTheDocument();
+    expect(await screen.findByText('label.action-plural')).toBeInTheDocument();
+  });
+
+  it('should display the user details', async () => {
+    await act(async () => {
+      render(<UsersTab users={mockUsers} onRemoveUser={mockOnRemoveUser} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    expect(await screen.findByText('Aaron Johnson')).toBeInTheDocument();
+    expect(await screen.findByText('Sales')).toBeInTheDocument();
+    expect(await screen.findByText('Data Steward')).toBeInTheDocument();
+  });
+
+  it('should render empty placeholder if no data', async () => {
+    (getUserById as jest.Mock).mockImplementation(() => Promise.resolve([])),
+      await act(async () => {
+        render(<UsersTab users={[]} onRemoveUser={mockOnRemoveUser} />, {
+          wrapper: MemoryRouter,
+        });
+      });
+
+    expect(
+      await screen.findByTestId('assign-error-placeholder-label.user')
+    ).toBeInTheDocument();
+  });
+
+  it('should display the remove confirmation modal when remove button is clicked', async () => {
+    await act(async () => {
+      render(<UsersTab users={mockUsers} onRemoveUser={mockOnRemoveUser} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('remove-user-btn'));
+    });
+
+    expect(
+      await screen.getByTestId('remove-confirmation-modal')
+    ).toBeInTheDocument();
+  });
+
+  it('should close the remove confirmation modal when cancel button is clicked', async () => {
+    await act(async () => {
+      render(<UsersTab users={mockUsers} onRemoveUser={mockOnRemoveUser} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    await act(async () => {
+      userEvent.click(screen.getByTestId('remove-user-btn'));
+    });
+    await act(async () => {
+      userEvent.click(screen.getByText('label.cancel'));
+    });
+
+    expect(
+      screen.queryByTestId('remove-confirmation-modal')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTabs.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTabs.component.tsx
index b0d26a980dbc..10f0022bae78 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTabs.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UsersTab/UsersTabs.component.tsx
@@ -134,20 +134,22 @@ export const UsersTab = ({ users, onRemoveUser }: UsersTabProps) => {
         rowKey="fullyQualifiedName"
         size="small"
       />
-      <Modal
-        cancelText={t('label.cancel')}
-        data-testid="remove-confirmation-modal"
-        okText={t('label.confirm')}
-        open={Boolean(removeUserDetails?.state)}
-        title={t('label.removing-user')}
-        onCancel={handleRemoveCancel}
-        onOk={handleRemoveConfirm}>
-        {t('message.are-you-sure-want-to-text', {
-          text: t('label.remove-entity-lowercase', {
-            entity: removeUserDetails?.user.name,
-          }),
-        })}
-      </Modal>
+      {Boolean(removeUserDetails?.state) && (
+        <Modal
+          cancelText={t('label.cancel')}
+          data-testid="remove-confirmation-modal"
+          okText={t('label.confirm')}
+          open={Boolean(removeUserDetails?.state)}
+          title={t('label.removing-user')}
+          onCancel={handleRemoveCancel}
+          onOk={handleRemoveConfirm}>
+          {t('message.are-you-sure-want-to-text', {
+            text: t('label.remove-entity-lowercase', {
+              entity: removeUserDetails?.user.name,
+            }),
+          })}
+        </Modal>
+      )}
     </>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts b/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
index 7832c71855ef..186a471bcd5e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
@@ -208,6 +208,71 @@ export const mockTeamsData = {
   ],
   paging: { total: 7 },
 };
+export const mockUsersTabData = {
+  id: 'f281e7fd-5fd3-4279-8a2d-ade80febd743',
+  name: 'aaron_johnson0',
+  fullyQualifiedName: 'aaron_johnson0',
+  displayName: 'Aaron Johnson',
+  version: 1.5,
+  updatedAt: 1707198736848,
+  updatedBy: 'admin',
+  email: 'aaron_johnson0@gmail.com',
+  href: 'http://localhost:8585/api/v1/users/f281e7fd-5fd3-4279-8a2d-ade80febd743',
+  isAdmin: false,
+  teams: [
+    {
+      id: '35c03c5c-5160-41af-b08d-ef2b2b9e6adf',
+      type: 'team',
+      name: 'Sales',
+      fullyQualifiedName: 'Sales',
+      deleted: false,
+      href: 'http://localhost:8585/api/v1/teams/35c03c5c-5160-41af-b08d-ef2b2b9e6adf',
+    },
+  ],
+  changeDescription: {
+    fieldsAdded: [
+      {
+        name: 'teams',
+        newValue:
+          '[{"id":"35c03c5c-5160-41af-b08d-ef2b2b9e6adf","type":"team","name":"Sales","fullyQualifiedName":"Sales","deleted":false}]',
+      },
+    ],
+    fieldsUpdated: [],
+    fieldsDeleted: [
+      {
+        name: 'teams',
+        oldValue: '[{"id":"f39f326a-81a1-42ca-976]',
+      },
+    ],
+    previousVersion: 1.4,
+  },
+  deleted: false,
+  roles: [
+    {
+      id: 'e4b20aef-c6c4-4416-aaae-f60185c7cac0',
+      type: 'role',
+      name: 'DataSteward',
+      fullyQualifiedName: 'DataSteward',
+      description: 'Users with Data Steward',
+      displayName: 'Data Steward',
+      deleted: false,
+      href: 'http://localhost:8585/api/v1/roles/e4b20aef-c6c4-4416-aaae-f60185c7cac0',
+    },
+  ],
+  inheritedRoles: [
+    {
+      id: '5f1445a7-c299-4dde-8c5b-704c6cd68ee6',
+      type: 'role',
+      name: 'DataConsumer',
+      fullyQualifiedName: 'DataConsumer',
+      description:
+        'Users with Data Consumer role use different data assets for their day to day work.',
+      displayName: 'Data Consumer',
+      deleted: false,
+      href: 'http://localhost:8585/api/v1/roles/5f1445a7-c299-4dde-8c5b-704c6cd68ee6',
+    },
+  ],
+};
 
 export const mockUserRole = {
   data: [

From 17a12765658d8ca17b0aa05b13fb3bf7a82b33e1 Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Tue, 6 Feb 2024 23:59:46 +0530
Subject: [PATCH 2/6] unit test case of user profile icon component

---
 .../UserProfileIcon.component.tsx             |   8 +-
 .../UserProfileIcon/UserProfileIcon.test.tsx  | 107 ++++++++++++++++++
 2 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx

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 d450b838322c..622040853cd0 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
@@ -111,6 +111,8 @@ export const UserProfileIcon = () => {
   useEffect(() => {
     if (profilePicture) {
       setIsImgUrlValid(true);
+    } else {
+      setIsImgUrlValid(false);
     }
   }, [profilePicture]);
 
@@ -133,7 +135,9 @@ export const UserProfileIcon = () => {
 
   const personaLabelRenderer = useCallback(
     (item: EntityReference) => (
-      <span onClick={() => handleSelectedPersonaChange(item)}>
+      <span
+        data-testid="persona-label"
+        onClick={() => handleSelectedPersonaChange(item)}>
         {getEntityName(item)}{' '}
         {selectedPersona?.id === item.id && (
           <CheckOutlined className="m-l-xs" style={{ color: '#4CAF50' }} />
@@ -318,6 +322,7 @@ export const UserProfileIcon = () => {
             <img
               alt="user"
               className="app-bar-user-avatar"
+              data-testid="app-bar-user-avatar"
               referrerPolicy="no-referrer"
               src={profilePicture ?? ''}
               onError={handleOnImageError}
@@ -333,6 +338,7 @@ export const UserProfileIcon = () => {
             </Tooltip>
             <Typography.Text
               className="text-grey-muted text-xs w-28"
+              data-testid="default-persona"
               ellipsis={{ tooltip: true }}>
               {isEmpty(selectedPersona)
                 ? t('label.default')
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
new file mode 100644
index 000000000000..43e452915126
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
@@ -0,0 +1,107 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { getImageWithResolutionAndFallback } from '../../../utils/ProfilerUtils';
+import { useApplicationConfigContext } from '../../ApplicationConfigProvider/ApplicationConfigProvider';
+import { mockUserData } from '../mocks/User.mocks';
+import { UserProfileIcon } from './UserProfileIcon.component';
+
+const mockLogout = jest.fn();
+const mockUpdateSelectedPersona = jest.fn();
+
+jest.mock('../../ApplicationConfigProvider/ApplicationConfigProvider', () => ({
+  useApplicationConfigContext: jest.fn().mockImplementation(() => ({
+    selectedPersona: {},
+    updateSelectedPersona: mockUpdateSelectedPersona,
+  })),
+}));
+
+jest.mock('../../../utils/EntityUtils', () => ({
+  getEntityName: jest.fn().mockReturnValue('Test User'),
+}));
+
+jest.mock('../../../utils/ProfilerUtils', () => ({
+  getImageWithResolutionAndFallback: jest
+    .fn()
+    .mockImplementation(() => 'valid-image-url'),
+  ImageQuality: jest.fn().mockReturnValue('6x'),
+}));
+
+jest.mock('../../common/AvatarComponent/Avatar', () =>
+  jest.fn().mockReturnValue(<div>Avatar</div>)
+);
+
+jest.mock('react-router-dom', () => ({
+  Link: jest
+    .fn()
+    .mockImplementation(({ children }: { children: React.ReactNode }) => (
+      <p data-testid="link">{children}</p>
+    )),
+}));
+
+jest.mock('../../Auth/AuthProviders/AuthProvider', () => ({
+  useAuthContext: jest.fn(() => ({
+    currentUser: mockUserData,
+  })),
+  onLogoutHandler: mockLogout,
+}));
+
+describe('UserProfileIcon', () => {
+  it('should render User Profile Icon', () => {
+    const { getByTestId } = render(<UserProfileIcon />);
+
+    expect(getByTestId('dropdown-profile')).toBeInTheDocument();
+  });
+
+  it('should display the user name', () => {
+    const { getByText } = render(<UserProfileIcon />);
+
+    expect(getByText('Test User')).toBeInTheDocument();
+  });
+
+  it('should display default in case of no persona is selected', () => {
+    const { getByText } = render(<UserProfileIcon />);
+
+    expect(getByText('label.default')).toBeInTheDocument();
+  });
+
+  it('should display image if image url is valid', () => {
+    const { getByTestId } = render(<UserProfileIcon />);
+
+    expect(getByTestId('app-bar-user-avatar')).toBeInTheDocument();
+  });
+
+  it('should not display avatar if image url is valid', () => {
+    (getImageWithResolutionAndFallback as jest.Mock).mockImplementation(
+      () => undefined
+    );
+    const { queryByTestId, getByText } = render(<UserProfileIcon />);
+
+    expect(queryByTestId('app-bar-user-avatar')).not.toBeInTheDocument();
+    expect(getByText('Avatar')).toBeInTheDocument();
+  });
+
+  it('should display the user team', () => {
+    (useApplicationConfigContext as jest.Mock).mockImplementation(() => ({
+      selectedPersona: {
+        id: '3362fe18-05ad-4457-9632-84f22887dda6',
+        type: 'team',
+      },
+      updateSelectedPersona: jest.fn(),
+    }));
+    const { getByTestId } = render(<UserProfileIcon />);
+
+    expect(getByTestId('default-persona')).toHaveTextContent('Test User');
+  });
+});

From c1b0c10d0281c4d79207383e570373c1b2e46dd5 Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Wed, 7 Feb 2024 12:39:24 +0530
Subject: [PATCH 3/6] added test case of userProfileIcon

---
 .../UserProfileIcon/UserProfileIcon.test.tsx      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
index 43e452915126..b9a15357ea01 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
@@ -10,10 +10,11 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { getImageWithResolutionAndFallback } from '../../../utils/ProfilerUtils';
 import { useApplicationConfigContext } from '../../ApplicationConfigProvider/ApplicationConfigProvider';
+import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
 import { mockUserData } from '../mocks/User.mocks';
 import { UserProfileIcon } from './UserProfileIcon.component';
 
@@ -104,4 +105,16 @@ describe('UserProfileIcon', () => {
 
     expect(getByTestId('default-persona')).toHaveTextContent('Test User');
   });
+
+  it('should show empty placeholder when no teams data', async () => {
+    (useAuthContext as jest.Mock).mockImplementation(() => ({
+      currentUser: { ...mockUserData, teams: [] },
+      onLogoutHandler: mockLogout,
+    }));
+    const teamLabels = screen.queryAllByText('label.team-plural');
+
+    teamLabels.forEach((label) => {
+      expect(label).toHaveTextContent('--');
+    });
+  });
 });

From 184a5c036e782109f56ae04a4ac4eb32c6eeeb8c Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Wed, 7 Feb 2024 15:24:46 +0530
Subject: [PATCH 4/6] code cleanup and add test case of user profile icon

---
 .../AppInstallVerifyCard.component.tsx        |  3 +-
 .../AddWidgetModal/AddWidgetModal.tsx         |  3 +-
 .../UserProfileIcon.component.tsx             | 18 ++++--
 .../UserProfileIcon/UserProfileIcon.test.tsx  | 63 +++++++++++++++++--
 .../src/components/Users/mocks/User.mocks.ts  | 11 ++++
 .../Widgets/FeedsWidget/FeedsWidget.test.tsx  |  2 +-
 .../resources/ui/src/constants/constants.ts   |  1 +
 7 files changed, 87 insertions(+), 14 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppInstallVerifyCard/AppInstallVerifyCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppInstallVerifyCard/AppInstallVerifyCard.component.tsx
index bf19eeacc68c..ae6077214a0f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppInstallVerifyCard/AppInstallVerifyCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Applications/AppInstallVerifyCard/AppInstallVerifyCard.component.tsx
@@ -26,6 +26,7 @@ import {
 } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { LIGHT_GREEN_COLOR } from '../../../constants/constants';
 import { Transi18next } from '../../../utils/CommonUtils';
 import { getRelativeTime } from '../../../utils/date-time/DateTimeUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
@@ -50,7 +51,7 @@ const AppInstallVerifyCard = ({
       <Space className="p-t-lg">
         <AppLogo appName={appData?.fullyQualifiedName ?? ''} />
         <Divider dashed className="w-44 app-card-divider">
-          <CheckCircleTwoTone twoToneColor="#4CAF50" />
+          <CheckCircleTwoTone twoToneColor={LIGHT_GREEN_COLOR} />
         </Divider>
         <Avatar
           className="app-marketplace-avatar flex-center bg-white border"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx
index a38c10800ef5..53dbb3ff9eff 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx
@@ -17,6 +17,7 @@ import { AxiosError } from 'axios';
 import { isEmpty, toString } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { LIGHT_GREEN_COLOR } from '../../../constants/constants';
 import { ERROR_PLACEHOLDER_TYPE } from '../../../enums/common.enum';
 import { WidgetWidths } from '../../../enums/CustomizablePage.enum';
 import { Document } from '../../../generated/entity/docStore/document';
@@ -88,7 +89,7 @@ function AddWidgetModal({
                 <CheckOutlined
                   className="m-l-xs"
                   data-testid={`${widget.name}-check-icon`}
-                  style={{ color: '#4CAF50' }}
+                  style={{ color: LIGHT_GREEN_COLOR }}
                 />
               )}
             </Space>
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 622040853cd0..89a5eba09173 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
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 import { CheckOutlined } from '@ant-design/icons';
-import { Dropdown, Tooltip, Typography } from 'antd';
+import { Dropdown, Space, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { isEmpty } from 'lodash';
 import React, {
@@ -27,6 +27,7 @@ import { ReactComponent as DropDownIcon } from '../../../assets/svg/DropDown.svg
 import {
   getTeamAndUserDetailsPath,
   getUserPath,
+  LIGHT_GREEN_COLOR,
   NO_DATA_PLACEHOLDER,
   TERM_ADMIN,
   TERM_USER,
@@ -135,14 +136,19 @@ export const UserProfileIcon = () => {
 
   const personaLabelRenderer = useCallback(
     (item: EntityReference) => (
-      <span
+      <Space
+        className="w-full"
         data-testid="persona-label"
         onClick={() => handleSelectedPersonaChange(item)}>
         {getEntityName(item)}{' '}
         {selectedPersona?.id === item.id && (
-          <CheckOutlined className="m-l-xs" style={{ color: '#4CAF50' }} />
+          <CheckOutlined
+            className="m-l-xs"
+            data-testid="check-outlined"
+            style={{ color: LIGHT_GREEN_COLOR }}
+          />
         )}
-      </span>
+      </Space>
     ),
     [handleSelectedPersonaChange, selectedPersona]
   );
@@ -321,8 +327,8 @@ export const UserProfileIcon = () => {
           {isImgUrlValid ? (
             <img
               alt="user"
-              className="app-bar-user-avatar"
-              data-testid="app-bar-user-avatar"
+              className="app-bar-user-profile-pic"
+              data-testid="app-bar-user-profile-pic"
               referrerPolicy="no-referrer"
               src={profilePicture ?? ''}
               onError={handleOnImageError}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
index b9a15357ea01..f4904a5c02a9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
@@ -10,12 +10,13 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { getImageWithResolutionAndFallback } from '../../../utils/ProfilerUtils';
 import { useApplicationConfigContext } from '../../ApplicationConfigProvider/ApplicationConfigProvider';
 import { useAuthContext } from '../../Auth/AuthProviders/AuthProvider';
-import { mockUserData } from '../mocks/User.mocks';
+import { mockPersonaData, mockUserData } from '../mocks/User.mocks';
 import { UserProfileIcon } from './UserProfileIcon.component';
 
 const mockLogout = jest.fn();
@@ -77,13 +78,13 @@ describe('UserProfileIcon', () => {
     expect(getByText('label.default')).toBeInTheDocument();
   });
 
-  it('should display image if image url is valid', () => {
+  it('should display image if profile pic is valid', () => {
     const { getByTestId } = render(<UserProfileIcon />);
 
-    expect(getByTestId('app-bar-user-avatar')).toBeInTheDocument();
+    expect(getByTestId('app-bar-user-profile-pic')).toBeInTheDocument();
   });
 
-  it('should not display avatar if image url is valid', () => {
+  it('should not display profile pic if image url is invalid', () => {
     (getImageWithResolutionAndFallback as jest.Mock).mockImplementation(
       () => undefined
     );
@@ -117,4 +118,56 @@ describe('UserProfileIcon', () => {
       expect(label).toHaveTextContent('--');
     });
   });
+
+  it('should show checked if selected persona is true', async () => {
+    (useAuthContext as jest.Mock).mockImplementation(() => ({
+      currentUser: {
+        ...mockUserData,
+        personas: mockPersonaData,
+      },
+      onLogoutHandler: mockLogout,
+    }));
+    (useApplicationConfigContext as jest.Mock).mockImplementation(() => ({
+      selectedPersona: {
+        id: '0430976d-092a-46c9-90a8-61c6091a6f38',
+        type: 'persona',
+      },
+      updateSelectedPersona: jest.fn(),
+    }));
+    const { getByTestId } = render(<UserProfileIcon />);
+    await act(async () => {
+      userEvent.click(getByTestId('dropdown-profile'));
+    });
+    await act(async () => {
+      fireEvent.click(getByTestId('persona-label'));
+    });
+
+    expect(getByTestId('check-outlined')).toBeInTheDocument();
+  });
+
+  it('should not show checked if selected persona is true', async () => {
+    (useAuthContext as jest.Mock).mockImplementation(() => ({
+      currentUser: {
+        ...mockUserData,
+        personas: mockPersonaData,
+      },
+      onLogoutHandler: mockLogout,
+    }));
+    (useApplicationConfigContext as jest.Mock).mockImplementation(() => ({
+      selectedPersona: {
+        id: 'test',
+        type: 'persona',
+      },
+      updateSelectedPersona: jest.fn(),
+    }));
+    const { getByTestId, queryByTestId } = render(<UserProfileIcon />);
+    await act(async () => {
+      userEvent.click(getByTestId('dropdown-profile'));
+    });
+    await act(async () => {
+      fireEvent.click(getByTestId('persona-label'));
+    });
+
+    expect(queryByTestId('check-outlined')).not.toBeInTheDocument();
+  });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts b/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
index 186a471bcd5e..9b98b85c3127 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/mocks/User.mocks.ts
@@ -1104,3 +1104,14 @@ export const mockAccessData = {
   tokenType: TokenType.PersonalAccessToken,
   userId: '445291f4d62c1bae',
 };
+export const mockPersonaData = [
+  {
+    description: 'Person-04',
+    displayName: 'Person-04',
+    fullyQualifiedName: 'Person-04',
+    href: 'http://localhost:8585/api/v1/personas/0430976d-092a-46c9-90a8-61c6091a6f38',
+    id: '0430976d-092a-46c9-90a8-61c6091a6f38',
+    name: 'Person-04',
+    type: 'persona',
+  },
+];
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.test.tsx
index 168332b75750..32dbec765c61 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Widgets/FeedsWidget/FeedsWidget.test.tsx
@@ -136,7 +136,7 @@ describe('FeedsWidget', () => {
       const { getAllByRole } = render(<FeedsWidget {...widgetProps} />);
       const tabs = getAllByRole('tab');
       const selectedTab = tabs[index];
-      selectedTab.click();
+      fireEvent.click(selectedTab);
 
       expect(selectedTab.getAttribute('aria-selected')).toBe('true');
     });
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
index d62e71016795..3238156ece35 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@@ -42,6 +42,7 @@ export const GREEN_COLOR_OPACITY_30 = '#28A74530';
 export const BORDER_COLOR = '#0000001a';
 export const BLACK_COLOR = '#000000';
 export const WHITE_COLOR = '#ffffff';
+export const LIGHT_GREEN_COLOR = '#4CAF50';
 
 export const DEFAULT_CHART_OPACITY = 1;
 export const HOVER_CHART_OPACITY = 0.3;

From d4036f2f4cde68cd5fa72d0676e71023299c045d Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Wed, 7 Feb 2024 15:36:10 +0530
Subject: [PATCH 5/6] minor fix

---
 openmetadata-ui/src/main/resources/ui/src/styles/app.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 18bad6b89672..29a88fbf721c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -700,7 +700,7 @@ a[href].link-text-grey,
   padding-right: 0.25rem;
 }
 
-.app-bar-user-avatar {
+.app-bar-user-profile-pic {
   display: inline-block;
   height: 36px;
   width: 36px;

From c6d5db1fb1405b4d58822ed8e3402bc544ee5499 Mon Sep 17 00:00:00 2001
From: Harsh Vador <harsh.vador@somaiya.edu>
Date: Wed, 7 Feb 2024 15:38:24 +0530
Subject: [PATCH 6/6] minor fix

---
 .../components/Users/UserProfileIcon/UserProfileIcon.test.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
index f4904a5c02a9..c8e5e278046f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/UserProfileIcon/UserProfileIcon.test.tsx
@@ -90,7 +90,7 @@ describe('UserProfileIcon', () => {
     );
     const { queryByTestId, getByText } = render(<UserProfileIcon />);
 
-    expect(queryByTestId('app-bar-user-avatar')).not.toBeInTheDocument();
+    expect(queryByTestId('app-bar-user-profile-pic')).not.toBeInTheDocument();
     expect(getByText('Avatar')).toBeInTheDocument();
   });