added breadcrumb in persona detail page (#17393)

openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.test.tsx

@@ -10,7 +10,12 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
 import React from 'react';
 import { getPersonaByName, updatePersona } from '../../../rest/PersonaAPI';
 import { PersonaDetailsPage } from './PersonaDetailsPage';
@@ -18,9 +23,6 @@ import { PersonaDetailsPage } from './PersonaDetailsPage';
 jest.mock('../../../components/PageLayoutV1/PageLayoutV1', () => {
   return jest.fn().mockImplementation(({ children }) => <div>{children}</div>);
 });
-jest.mock('../../../components/PageHeader/PageHeader.component', () => {
-  return jest.fn().mockImplementation(() => <div>PageHeader.component</div>);
-});
 jest.mock('../../../components/common/EntityDescription/DescriptionV1', () => {
   return jest.fn().mockImplementation(() => <div>DescriptionV1.component</div>);
 });
@@ -101,6 +103,12 @@ jest.mock(
       .mockImplementation(() => <div>NoDataPlaceholder.component</div>);
   }
 );
+
+jest.mock(
+  '../../../components/common/TitleBreadcrumb/TitleBreadcrumb.component',
+  () => jest.fn().mockImplementation(() => <p>TitleBreadcrumb.component</p>)
+);
+
 jest.mock('../../../context/PermissionProvider/PermissionProvider', () => ({
   usePermissionProvider: jest.fn().mockReturnValue({
     getEntityPermissionByFqn: jest.fn().mockResolvedValue({
@@ -140,7 +148,10 @@ describe('PersonaDetailsPage', () => {
   it('Component should render', async () => {
     render(<PersonaDetailsPage />);
 
-    expect(await screen.findByText('PageHeader.component')).toBeInTheDocument();
+    await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
+
+    expect(screen.getByTestId('persona-heading')).toBeInTheDocument();
+    expect(screen.getByText('TitleBreadcrumb.component')).toBeInTheDocument();
     expect(
       await screen.findByText('ManageButton.component')
     ).toBeInTheDocument();

openmetadata-ui/src/main/resources/ui/src/pages/Persona/PersonaDetailsPage/PersonaDetailsPage.tsx

@@ -10,20 +10,20 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Button, Col, Row, Tabs } from 'antd';
+import { Button, Col, Row, Tabs, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { compare } from 'fast-json-patch';
 import { isUndefined } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import DescriptionV1 from '../../../components/common/EntityDescription/DescriptionV1';
 import ManageButton from '../../../components/common/EntityPageInfos/ManageButton/ManageButton';
 import NoDataPlaceholder from '../../../components/common/ErrorWithPlaceholder/NoDataPlaceholder';
 import Loader from '../../../components/common/Loader/Loader';
+import TitleBreadcrumb from '../../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { UserSelectableList } from '../../../components/common/UserSelectableList/UserSelectableList.component';
 import { EntityName } from '../../../components/Modals/EntityNameModal/EntityNameModal.interface';
-import PageHeader from '../../../components/PageHeader/PageHeader.component';
 import PageLayoutV1 from '../../../components/PageLayoutV1/PageLayoutV1';
 import { UsersTab } from '../../../components/Settings/Users/UsersTab/UsersTabs.component';
 import {
@@ -55,6 +55,23 @@ export const PersonaDetailsPage = () => {
 
   const { getEntityPermissionByFqn } = usePermissionProvider();
 
+  const breadcrumb = useMemo(
+    () => [
+      {
+        name: t('label.persona-plural'),
+        url: getSettingPath(
+          GlobalSettingsMenuCategory.MEMBERS,
+          GlobalSettingOptions.PERSONA
+        ),
+      },
+      {
+        name: getEntityName(personaDetails),
+        url: '',
+      },
+    ],
+    [personaDetails]
+  );
+
   useEffect(() => {
     getEntityPermissionByFqn(ResourceEntity.PERSONA, fqn).then(
       setEntityPermission
@@ -165,12 +182,15 @@ export const PersonaDetailsPage = () => {
       <Row className="m-b-md page-container" gutter={[0, 16]}>
         <Col span={24}>
           <div className="d-flex justify-between items-start">
-            <PageHeader
-              data={{
-                header: personaDetails.displayName,
-                subHeader: personaDetails.name,
-              }}
-            />
+            <div>
+              <TitleBreadcrumb titleLinks={breadcrumb} />
+              <Typography.Title
+                className="m-b-0 m-t-xs"
+                data-testid="persona-heading"
+                level={5}>
+                {getEntityName(personaDetails)}
+              </Typography.Title>
+            </div>
             <ManageButton
               afterDeleteAction={handleAfterDeleteAction}
               allowSoftDelete={false}