diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.test.tsx
index 97f5dad5d15..f14fe762de5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotDetails/BotDetails.test.tsx
@@ -122,6 +122,19 @@ jest.mock('./AuthMechanismForm', () =>
)
);
+jest.mock('../containers/PageLayout', () =>
+ jest
+ .fn()
+ .mockImplementation(({ children, leftPanel, rightPanel, header }) => (
+
+ {header}
+
{leftPanel}
+ {children}
+
{rightPanel}
+
+ ))
+);
+
describe('Test BotsDetail Component', () => {
it('Should render all child elements', async () => {
const { container } = render(
, {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
index 4c037b2d91f..fb015a0cfc5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
@@ -700,7 +700,8 @@ const CreateUser = ({
}
- layout={PageLayoutType['2ColRTL']}>
+ layout={PageLayoutType['2ColRTL']}
+ pageTitle={t('label.create-entity', { entity: t('label.user') })}>
{t('label.create-entity', {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/AddCustomProperty/AddCustomProperty.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/AddCustomProperty/AddCustomProperty.tsx
index bdfd15cc64a..69c0db7a8f6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/AddCustomProperty/AddCustomProperty.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/CustomEntityDetail/AddCustomProperty/AddCustomProperty.tsx
@@ -174,6 +174,9 @@ const AddCustomProperty = () => {
}>
= ({ title }) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {`${title} | ${t('label.open-metadata')}`}
+
+ );
+};
+
+export default DocumentTitle;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
index 9df5b0f92a6..398ab2864ac 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
@@ -31,6 +31,7 @@ import {
toUpper,
} from 'lodash';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { ENTITY_PATH } from '../../constants/constants';
import { tabsInfo } from '../../constants/explore.constants';
@@ -76,6 +77,7 @@ const Explore: React.FC
= ({
onChangePage = noop,
loading,
}) => {
+ const { t } = useTranslation();
const { tab } = useParams<{ tab: string }>();
const [showAdvanceSearchModal, setShowAdvanceSearchModal] = useState(false);
@@ -268,7 +270,8 @@ const Explore: React.FC = ({
/>
- }>
+ }
+ pageTitle={t('label.explore')}>
{
const mockFunction = jest.fn();
+jest.mock('../containers/PageLayoutV1', () =>
+ jest.fn().mockImplementation(({ children }) => {children}
)
+);
+
describe('Test Explore component', () => {
it('Component should render', async () => {
const { container } = render(
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx
index cd071d21b68..8c0564429fa 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx
@@ -12,6 +12,7 @@
*/
import React from 'react';
+import { useTranslation } from 'react-i18next';
import PageLayoutV1 from '../containers/PageLayoutV1';
import GlobalSettingRouter from '../router/GlobalSettingRouter';
@@ -19,10 +20,13 @@ import './GlobalSetting.less';
import GlobalSettingLeftPanel from './GlobalSettingLeftPanel';
const GlobalSetting = () => {
+ const { t } = useTranslation();
+
return (
}>
+ leftPanel={}
+ pageTitle={t('label.setting-plural')}>
);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
index 208bf7a4767..9a0a351ccc9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@@ -231,7 +231,10 @@ const MyData: React.FC = ({
);
return (
-
+
{error ? (
) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.test.tsx
index 87f95e09304..918cd4f3966 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.test.tsx
@@ -98,6 +98,10 @@ jest.mock('components/PermissionProvider/PermissionProvider', () => {
};
});
+jest.mock('../containers/PageLayoutV1', () =>
+ jest.fn().mockImplementation(({ children }) => {children}
)
+);
+
describe('Test ProfilerDashboardPage component', () => {
beforeEach(() => cleanup());
@@ -107,7 +111,7 @@ describe('Test ProfilerDashboardPage component', () => {
wrapper: MemoryRouter,
});
});
- const pageContainer = await screen.findByTestId('page-layout-v1');
+
const profilerSwitch = await screen.findByTestId('profiler-switch');
const EntityPageInfo = await screen.findByText('EntityPageInfo component');
const ProfilerTab = await screen.findByText('ProfilerTab component');
@@ -116,7 +120,6 @@ describe('Test ProfilerDashboardPage component', () => {
);
const DataQualityTab = screen.queryByText('DataQualityTab component');
- expect(pageContainer).toBeInTheDocument();
expect(profilerSwitch).toBeInTheDocument();
expect(EntityPageInfo).toBeInTheDocument();
expect(ProfilerTab).toBeInTheDocument();
@@ -134,7 +137,7 @@ describe('Test ProfilerDashboardPage component', () => {
wrapper: MemoryRouter,
});
});
- const pageContainer = await screen.findByTestId('page-layout-v1');
+
const profilerSwitch = await screen.findByTestId('profiler-switch');
const EntityPageInfo = await screen.findByText('EntityPageInfo component');
const ProfilerTab = screen.queryByText('ProfilerTab component');
@@ -144,7 +147,6 @@ describe('Test ProfilerDashboardPage component', () => {
);
const statusDropdown = await screen.findByText('label.status');
- expect(pageContainer).toBeInTheDocument();
expect(profilerSwitch).toBeInTheDocument();
expect(EntityPageInfo).toBeInTheDocument();
expect(DataQualityTab).toBeInTheDocument();
@@ -163,7 +165,7 @@ describe('Test ProfilerDashboardPage component', () => {
wrapper: MemoryRouter,
});
});
- const pageContainer = await screen.findByTestId('page-layout-v1');
+
const profilerSwitch = await screen.findByTestId('profiler-switch');
const EntityPageInfo = await screen.findByText('EntityPageInfo component');
const ProfilerTab = await screen.findByText('ProfilerTab component');
@@ -172,7 +174,6 @@ describe('Test ProfilerDashboardPage component', () => {
);
const DataQualityTab = screen.queryByText('DataQualityTab component');
- expect(pageContainer).toBeInTheDocument();
expect(profilerSwitch).toBeInTheDocument();
expect(EntityPageInfo).toBeInTheDocument();
expect(ProfilerTab).toBeInTheDocument();
@@ -231,10 +232,8 @@ describe('Test ProfilerDashboardPage component', () => {
});
});
- const pageContainer = await screen.findByTestId('page-layout-v1');
const addTest = await screen.findByTestId('add-test');
- expect(pageContainer).toBeInTheDocument();
expect(addTest).toBeInTheDocument();
await act(async () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.tsx
index 0898bc1b870..f0aef5ed39a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.tsx
@@ -456,7 +456,7 @@ const ProfilerDashboard: React.FC = ({
}, [table]);
return (
-
+
({
checkValidImage: jest.fn().mockImplementation(() => Promise.resolve(true)),
}));
+jest.mock('../containers/PageLayoutV1', () =>
+ jest.fn().mockImplementation(({ children, leftPanel, rightPanel }) => (
+
+ {leftPanel}
+ {children}
+ {rightPanel}
+
+ ))
+);
+
describe('Test User Component', () => {
it('Should render user component', async () => {
const { container } = render(
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index a2402da8594..672287f8ae0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -951,7 +951,10 @@ const Users = ({
);
return (
-
+
+ jest.fn().mockImplementation(() => DocumentTitle
)
+);
+
+describe('PageLayout', () => {
+ it('Should render with children', () => {
+ const { getByText } = render(
+
+ Test Child Element
+
+ );
+
+ expect(getByText('Test Child Element')).toBeInTheDocument();
+ });
+
+ it('Should render with left panel', () => {
+ const { getByText } = render(
+ Test Left Panel }
+ pageTitle="Test Page Title">
+ Test Child Element
+
+ );
+
+ expect(getByText('Test Left Panel')).toBeInTheDocument();
+ });
+
+ it('Should render with right panel', () => {
+ const { getByText } = render(
+ Test Right Panel
Test Child Element
+
+ );
+
+ expect(getByText('Test Right Panel')).toBeInTheDocument();
+ });
+
+ it('Should render with header', () => {
+ const { getByText } = render(
+ Test Header } pageTitle="Test Page Title">
+
Test Child Element
+
+ );
+
+ expect(getByText('Test Header')).toBeInTheDocument();
+ });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
index 75c86831482..8e6830d3982 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
@@ -12,6 +12,7 @@
*/
import classNames from 'classnames';
+import DocumentTitle from 'components/DocumentTitle/DocumentTitle';
import React, { FC, Fragment, ReactNode } from 'react';
import { PageLayoutType } from '../../enums/layout.enum';
@@ -22,6 +23,7 @@ interface PageLayoutProp {
children: ReactNode;
layout?: PageLayoutType;
classes?: string;
+ pageTitle: string;
}
export const leftPanelAntCardStyle = {
@@ -40,6 +42,7 @@ const PageLayout: FC
= ({
children,
rightPanel,
layout = PageLayoutType['3Col'],
+ pageTitle,
classes = '',
}: PageLayoutProp) => {
const getLeftPanel = () => {
@@ -163,7 +166,12 @@ const PageLayout: FC = ({
}
};
- return getLayoutByType(layout);
+ return (
+
+
+ {getLayoutByType(layout)}
+
+ );
};
export default PageLayout;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.test.tsx
new file mode 100644
index 00000000000..b3d5b0713eb
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 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 PageLayoutV1 from './PageLayoutV1';
+
+jest.mock('components/DocumentTitle/DocumentTitle', () =>
+ jest.fn().mockImplementation(() => DocumentTitle
)
+);
+
+describe('PageLayoutV1', () => {
+ it('Should render with the left panel, center content, and right panel', () => {
+ const leftPanelText = 'Left panel';
+ const centerText = 'Center content';
+ const rightPanelText = 'Right panel';
+ const { getByText } = render(
+ {leftPanelText}