#16521: fix issue in userProfilePage for roles. teams and displayName (…

…#16527)

* fix update on roles and backlink them in user profile page

* fix teams, displayName and profile pic issue

* sonar fix

* fix cypress issue

* minor changes

openmetadata-ui/src/main/resources/ui/cypress/common/Utils/Users.ts

@@ -245,9 +245,9 @@ export const editTeams = (teamName: string) => {
  cy.get('[data-testid="inline-save-btn"]').click({ timeout: 10000 });
  verifyResponseStatusCode('@updateTeams', 200);
 
- cy.get('.ant-collapse-expand-icon > .anticon > svg').click();
- cy.get('.page-layout-v1-vertical-scroll').scrollTo(0, 0);
- cy.get(`[data-testid="${teamName}"]`).should('be.visible');
+ cy.get(`[data-testid="${teamName}-link"]`)
+  .scrollIntoView()
+  .should('be.visible');
 };
 
 export const handleUserUpdateDetails = (
@@ -284,8 +284,7 @@ export const handleAdminUpdateDetails = (
  editDisplayName(editedUserName);
 
  // edit teams
- cy.get('.ant-collapse-expand-icon > .anticon > svg').scrollIntoView();
- cy.get('.ant-collapse-expand-icon > .anticon > svg').click();
+ cy.get('.ant-collapse-expand-icon > .anticon > svg').scrollIntoView().click();
  editTeams(teamName);
 
  // edit description

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

@@ -349,7 +349,8 @@ const Users = ({ userData, queryFilters, updateUserDetails }: Props) => {
  <Chip
  showNoDataPlaceholder
  data={userData.personas ?? []}
- icon={<PersonaIcon height={14} />}
+ entityType={EntityType.PERSONA}
+ icon={<PersonaIcon height={20} />}
  noDataPlaceholder={t('message.no-persona-assigned')}
  />
  </Card>

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

@@ -115,12 +115,17 @@ const UserProfileDetails = ({
  setIsDisplayNameEdit(false);
  }, [userData.displayName, displayName, updateUserDetails]);
 
+ const handleCloseEditDisplayName = useCallback(() => {
+ setDisplayName(userData.displayName);
+ setIsDisplayNameEdit(false);
+ }, [userData.displayName]);
+
  const displayNameRenderComponent = useMemo(
  () =>
- isDisplayNameEdit && hasEditPermission ? (
+ isDisplayNameEdit ? (
  <InlineEdit
  isLoading={isLoading}
- onCancel={() => setIsDisplayNameEdit(false)}
+ onCancel={handleCloseEditDisplayName}
  onSave={handleDisplayNameSave}>
  <Input
  className="w-full"
@@ -173,6 +178,7 @@ const UserProfileDetails = ({
  getEntityName,
  onDisplayNameChange,
  handleDisplayNameSave,
+ handleCloseEditDisplayName,
  ]
  );
 
@@ -286,6 +292,7 @@ const UserProfileDetails = ({
  <Chip
  showNoDataPlaceholder
  data={defaultPersona ? [defaultPersona] : []}
+ entityType={EntityType.PERSONA}
  noDataPlaceholder={NO_DATA_PLACEHOLDER}
  />
 

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.test.tsx

@@ -63,13 +63,16 @@ jest.mock('../UserProfileImage/UserProfileImage.component', () => {
 });
 
 jest.mock('../../../../common/InlineEdit/InlineEdit.component', () => {
- return jest.fn().mockImplementation(({ onSave, children }) => (
+ return jest.fn().mockImplementation(({ onSave, onCancel, children }) => (
  <div data-testid="inline-edit">
  <span>InlineEdit</span>
  {children}
  <button data-testid="display-name-save-button" onClick={onSave}>
  DisplayNameButton
  </button>
+ <button data-testid="display-name-cancel-button" onClick={onCancel}>
+ DisplayNameCancelButton
+ </button>
  </div>
  ));
 });
@@ -224,6 +227,28 @@ describe('Test User Profile Details Component', () => {
  expect(screen.getByText('InlineEdit')).toBeInTheDocument();
  });
 
+ it('should not render changed displayName in input if not saved', async () => {
+ render(<UserProfileDetails {...mockPropsData} />, {
+ wrapper: MemoryRouter,
+ });
+
+ fireEvent.click(screen.getByTestId('edit-displayName'));
+
+ act(() => {
+ fireEvent.change(screen.getByTestId('displayName'), {
+ target: { value: 'data-test' },
+ });
+ });
+
+ act(() => {
+ fireEvent.click(screen.getByTestId('display-name-cancel-button'));
+ });
+
+ fireEvent.click(screen.getByTestId('edit-displayName'));
+
+ expect(screen.getByTestId('displayName')).toHaveValue('');
+ });
+
  it('should call updateUserDetails on click of DisplayNameButton', async () => {
  render(<UserProfileDetails {...mockPropsData} />, {
  wrapper: MemoryRouter,

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

@@ -13,6 +13,7 @@
 
 import { Image } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
+import { getEntityName } from '../../../../../utils/EntityUtils';
 import {
  getImageWithResolutionAndFallback,
  ImageQuality,
@@ -50,7 +51,7 @@ const UserProfileImage = ({ userData }: UserProfileImageProps) => {
  />
  ) : (
  <ProfilePicture
- displayName={userData?.displayName ?? userData.name}
+ displayName={getEntityName(userData)}
  height="54"
  name={userData?.name ?? ''}
  width="54"

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileImage/UserProfileImage.test.tsx

@@ -31,6 +31,10 @@ jest.mock('../../../../common/ProfilePicture/ProfilePicture', () => {
  return jest.fn().mockReturnValue(<p>ProfilePicture</p>);
 });
 
+jest.mock('../../../../../utils/EntityUtils', () => ({
+ getEntityName: jest.fn().mockReturnValue('getEntityName'),
+}));
+
 describe('Test User User Profile Image Component', () => {
  it('should render user profile image component', async () => {
  render(<UserProfileImage {...mockPropsData} />);

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

@@ -15,6 +15,7 @@ import { Card, Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as UserIcons } from '../../../../../assets/svg/user.svg';
+import { EntityType } from '../../../../../enums/entity.enum';
 import Chip from '../../../../common/Chip/Chip.component';
 import { UserProfileInheritedRolesProps } from './UserProfileInheritedRoles.interface';
 
@@ -37,6 +38,7 @@ const UserProfileInheritedRoles = ({
  }>
  <Chip
  data={inheritedRoles ?? []}
+ entityType={EntityType.ROLE}
  icon={<UserIcons height={20} />}
  noDataPlaceholder={t('message.no-inherited-roles-found')}
  />

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

@@ -14,7 +14,7 @@
 import { Card, Select, Space, Tooltip, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { isEmpty, toLower } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../../../assets/svg/edit-new.svg';
 import { ReactComponent as UserIcons } from '../../../../../assets/svg/user.svg';
@@ -24,6 +24,7 @@ import {
  PAGE_SIZE_LARGE,
  TERM_ADMIN,
 } from '../../../../../constants/constants';
+import { EntityType } from '../../../../../enums/entity.enum';
 import { Role } from '../../../../../generated/entity/teams/role';
 import { useAuth } from '../../../../../hooks/authHooks';
 import { getRoles } from '../../../../../rest/rolesAPIV1';
@@ -87,6 +88,15 @@ const UserProfileRoles = ({
  }
  };
 
+ const setUserRoles = useCallback(() => {
+ const defaultUserRoles = [
+ ...(userRoles?.map((role) => role.id) ?? []),
+ ...(isUserAdmin ? [toLower(TERM_ADMIN)] : []),
+ ];
+
+ setSelectedRoles(defaultUserRoles);
+ }, [userRoles, isUserAdmin]);
+
  const handleRolesSave = async () => {
  setIsLoading(true);
  // filter out the roles , and exclude the admin one
@@ -122,6 +132,7 @@ const UserProfileRoles = ({
  : []),
  ...(userRoles ?? []),
  ]}
+ entityType={EntityType.ROLE}
  icon={<UserIcons height={20} />}
  noDataPlaceholder={t('message.no-roles-assigned')}
  showNoDataPlaceholder={!isUserAdmin}
@@ -130,14 +141,14 @@ const UserProfileRoles = ({
  [userRoles, isUserAdmin]
  );
 
- useEffect(() => {
- const defaultUserRoles = [
- ...(userRoles?.map((role) => role.id) ?? []),
- ...(isUserAdmin ? [toLower(TERM_ADMIN)] : []),
- ];
+ const handleCloseEditRole = useCallback(() => {
+ setIsRolesEdit(false);
+ setUserRoles();
+ }, [setUserRoles]);
 
- setSelectedRoles(defaultUserRoles);
- }, [isUserAdmin, userRoles]);
+ useEffect(() => {
+ setUserRoles();
+ }, [setUserRoles]);
 
  useEffect(() => {
  if (isRolesEdit && isEmpty(roles)) {
@@ -176,7 +187,7 @@ const UserProfileRoles = ({
  <InlineEdit
  direction="vertical"
  isLoading={isLoading}
- onCancel={() => setIsRolesEdit(false)}
+ onCancel={handleCloseEditRole}
  onSave={handleRolesSave}>
  <Select
  allowClear

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileRoles/UserProfileRoles.test.tsx

@@ -11,9 +11,18 @@
  * limitations under the License.
  */
 
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+ act,
+ findByRole,
+ fireEvent,
+ render,
+ screen,
+ waitForElement,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { useAuth } from '../../../../../hooks/authHooks';
+import { MOCK_USER_ROLE } from '../../../../../mocks/User.mock';
 import { getRoles } from '../../../../../rest/rolesAPIV1';
 import { mockUserRole } from '../../mocks/User.mocks';
 import UserProfileRoles from './UserProfileRoles.component';
@@ -29,12 +38,16 @@ jest.mock('../../../../../hooks/authHooks', () => ({
 }));
 
 jest.mock('../../../../common/InlineEdit/InlineEdit.component', () => {
- return jest.fn().mockImplementation(({ onSave }) => (
+ return jest.fn().mockImplementation(({ children, onCancel, onSave }) => (
  <div data-testid="inline-edit">
  <span>InlineEdit</span>
+ {children}
  <button data-testid="save" onClick={onSave}>
  save
  </button>
+ <button data-testid="cancel" onClick={onCancel}>
+ cancel
+ </button>
  </div>
  ));
 });
@@ -147,4 +160,52 @@ describe('Test User Profile Roles Component', () => {
 
  expect(screen.getByText('InlineEdit')).toBeInTheDocument();
  });
+
+ it('should maintain initial state if edit is close without save', async () => {
+ (useAuth as jest.Mock).mockImplementation(() => ({
+ isAdminUser: true,
+ }));
+
+ render(
+ <UserProfileRoles
+ {...mockPropsData}
+ userRoles={MOCK_USER_ROLE.slice(0, 2)}
+ />
+ );
+
+ fireEvent.click(screen.getByTestId('edit-roles-button'));
+
+ const selectInput = await findByRole(
+ screen.getByTestId('select-user-roles'),
+ 'combobox'
+ );
+
+ await act(async () => {
+ userEvent.click(selectInput);
+ });
+
+ // wait for list to render, checked with item having in the list
+ await waitForElement(() => screen.findByText('admin'));
+
+ await act(async () => {
+ userEvent.click(screen.getByText('admin'));
+ });
+
+ fireEvent.click(screen.getByTestId('cancel'));
+
+ fireEvent.click(screen.getByTestId('edit-roles-button'));
+
+ await act(async () => {
+ userEvent.click(selectInput);
+ });
+
+ expect(
+ screen.getByText('37a00e0b-383c-4451-b63f-0bad4c745abc')
+ ).toBeInTheDocument();
+ expect(
+ screen.getByText('afc5583c-e268-4f6c-a638-a876d04ebaa1')
+ ).toBeInTheDocument();
+
+ expect(screen.queryByText('admin')).not.toBeInTheDocument();
+ });
 });

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

@@ -12,14 +12,15 @@
  */
 
 import { Card, Space, Tooltip, Typography } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../../../assets/svg/edit-new.svg';
 import { ReactComponent as IconTeamsGrey } from '../../../../../assets/svg/teams-grey.svg';
 import {
  DE_ACTIVE_COLOR,
  ICON_DIMENSION,
 } from '../../../../../constants/constants';
+import { EntityType } from '../../../../../enums/entity.enum';
 import { EntityReference } from '../../../../../generated/entity/type';
 import { useAuth } from '../../../../../hooks/authHooks';
 import { getNonDeletedTeams } from '../../../../../utils/CommonUtils';
@@ -55,17 +56,27 @@ const UserProfileTeams = ({
  () => (
  <Chip
  data={getNonDeletedTeams(teams ?? [])}
+ entityType={EntityType.TEAM}
  icon={<IconTeamsGrey height={20} />}
  noDataPlaceholder={t('message.no-team-found')}
  />
  ),
  [teams, getNonDeletedTeams]
  );
 
- useEffect(() => {
+ const setUserTeams = useCallback(() => {
  setSelectedTeams(getNonDeletedTeams(teams ?? []));
  }, [teams]);
 
+ const handleCloseEditTeam = useCallback(() => {
+ setIsTeamsEdit(false);
+ setUserTeams();
+ }, [setUserTeams]);
+
+ useEffect(() => {
+ setUserTeams();
+ }, [setUserTeams]);
+
  return (
  <Card
  className="relative card-body-border-none card-padding-y-0"
@@ -97,7 +108,7 @@ const UserProfileTeams = ({
  <InlineEdit
  direction="vertical"
  isLoading={isLoading}
- onCancel={() => setIsTeamsEdit(false)}
+ onCancel={handleCloseEditTeam}
  onSave={handleTeamsSave}>
  <TeamsSelectable
  filterJoinable