diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx
new file mode 100644
index 00000000000..28453b5be35
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeader/EntityHeader.component.tsx
@@ -0,0 +1,77 @@
+/*
+ * 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 { Col, Row } from 'antd';
+import classNames from 'classnames';
+import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
+import { TitleBreadcrumbProps } from 'components/common/title-breadcrumb/title-breadcrumb.interface';
+import { EntityType } from 'enums/entity.enum';
+import React, { ReactNode } from 'react';
+import { getEntityLinkFromType, getEntityName } from 'utils/EntityUtils';
+import EntityHeaderTitle from '../EntityHeaderTitle/EntityHeaderTitle.component';
+
+interface Props {
+ extra?: ReactNode;
+ breadcrumb: TitleBreadcrumbProps['titleLinks'];
+ entityData: {
+ displayName?: string;
+ name: string;
+ fullyQualifiedName?: string;
+ deleted?: boolean;
+ };
+ entityType?: EntityType;
+ icon: ReactNode;
+ titleIsLink?: boolean;
+ openEntityInNewPage?: boolean;
+ gutter?: 'default' | 'large';
+}
+
+export const EntityHeader = ({
+ breadcrumb,
+ entityData,
+ extra,
+ icon,
+ titleIsLink = false,
+ entityType,
+ openEntityInNewPage,
+ gutter = 'default',
+}: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
{extra}
+
+ );
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
new file mode 100644
index 00000000000..f4f31a53074
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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 { ExclamationCircleFilled } from '@ant-design/icons';
+import { Col, Row, Typography } from 'antd';
+import { ReactComponent as IconExternalLink } from 'assets/svg/external-link-grey.svg';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { EntityHeaderTitleProps } from './EntityHeaderTitle.interface';
+
+const EntityHeaderTitle = ({
+ icon,
+ name,
+ displayName,
+ link,
+ openEntityInNewPage,
+ deleted = false,
+}: EntityHeaderTitleProps) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+ )}
+
+ );
+};
+
+export default EntityHeaderTitle;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardTitle.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
similarity index 58%
rename from openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardTitle.less
rename to openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
index 19774fe1dff..7cae0cbf9a2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card-v2/TableDataCardTitle.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
@@ -1,5 +1,5 @@
/*
- * Copyright 2022 Collate.
+ * 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
@@ -10,25 +10,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@import url('../../../styles/variables.less');
-@link-btn-color: #37352f;
-
-.table-data-card-title-container {
- .ant-btn-link {
- color: @link-btn-color;
- font-weight: 600;
- padding: 0px;
- font-size: 16px;
- }
- .ant-btn-link > span {
- color: @link-btn-color;
- }
-}
-
-.button-hover {
- .ant-btn-link > span {
- &:hover {
- color: @primary-color;
- }
- }
+export interface EntityHeaderTitleProps {
+ icon: React.ReactNode;
+ name: string;
+ displayName: string;
+ link?: string;
+ openEntityInNewPage?: boolean;
+ deleted?: boolean;
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.test.tsx
new file mode 100644
index 00000000000..6cd014377ac
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import EntityHeaderTitle from './EntityHeaderTitle.component';
+
+describe('EntityHeaderTitle', () => {
+ it('should render icon', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('test-icon')).toBeInTheDocument();
+ });
+
+ it('should render name', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('test-name')).toBeInTheDocument();
+ });
+
+ it('should render displayName', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Test DisplayName')).toBeInTheDocument();
+ });
+
+ it('should render link if link is provided', () => {
+ render(
+ ,
+ { wrapper: MemoryRouter }
+ );
+
+ expect(screen.getByTestId('entity-header-display-name')).toHaveProperty(
+ 'href',
+ 'http://localhost/test-link'
+ );
+ });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityHeaderTitle/EntityHeaderTitle.component.tsx
deleted file mode 100644
index f039441c266..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityHeaderTitle/EntityHeaderTitle.component.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * 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 { Col, Row, Typography } from 'antd';
-import React from 'react';
-
-interface props {
- icon: React.ReactNode;
- name: string;
- displayName: string;
-}
-
-const EntityHeaderTitle = ({ icon, name, displayName }: props) => {
- return (
-
-
{icon}
-
-
-
- {name}
-
-
- {displayName}
-
-
-
-
- );
-};
-
-export default EntityHeaderTitle;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx
index e4f0dc294c5..6c83b771b09 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/EntitySummaryPanel.component.tsx
@@ -12,19 +12,21 @@
*/
import { CloseOutlined } from '@ant-design/icons';
-import { Col, Drawer, Row } from 'antd';
-import TableDataCardTitle from 'components/common/table-data-card-v2/TableDataCardTitle.component';
+import { Drawer } from 'antd';
+import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
import { EntityType } from 'enums/entity.enum';
import { Tag } from 'generated/entity/classification/tag';
import { Container } from 'generated/entity/data/container';
+import { Dashboard } from 'generated/entity/data/dashboard';
import { GlossaryTerm } from 'generated/entity/data/glossaryTerm';
+import { Table } from 'generated/entity/data/table';
import { get } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
import { useParams } from 'react-router-dom';
-import { Dashboard } from '../../../generated/entity/data/dashboard';
+import { getEntityBreadcrumbs } from 'utils/EntityUtils';
+import { getServiceIcon } from 'utils/TableUtils';
import { Mlmodel } from '../../../generated/entity/data/mlmodel';
import { Pipeline } from '../../../generated/entity/data/pipeline';
-import { Table } from '../../../generated/entity/data/table';
import { Topic } from '../../../generated/entity/data/topic';
import ContainerSummary from './ContainerSummary/ContainerSummary.component';
import DashboardSummary from './DashboardSummary/DashboardSummary.component';
@@ -42,70 +44,44 @@ export default function EntitySummaryPanel({
handleClosePanel,
}: EntitySummaryPanelProps) {
const { tab } = useParams<{ tab: string }>();
- const [currentSearchIndex, setCurrentSearchIndex] = useState();
const summaryComponent = useMemo(() => {
const type = get(entityDetails, 'details.entityType') ?? EntityType.TABLE;
+ const entity = entityDetails.details;
switch (type) {
case EntityType.TABLE:
- setCurrentSearchIndex(EntityType.TABLE);
-
- return ;
+ return ;
case EntityType.TOPIC:
- setCurrentSearchIndex(EntityType.TOPIC);
-
- return ;
+ return ;
case EntityType.DASHBOARD:
- setCurrentSearchIndex(EntityType.DASHBOARD);
-
- return (
-
- );
+ return ;
case EntityType.PIPELINE:
- setCurrentSearchIndex(EntityType.PIPELINE);
-
- return (
-
- );
+ return ;
case EntityType.MLMODEL:
- setCurrentSearchIndex(EntityType.MLMODEL);
-
- return (
-
- );
+ return ;
case EntityType.CONTAINER:
- setCurrentSearchIndex(EntityType.CONTAINER);
+ return ;
- return (
-
- );
case EntityType.GLOSSARY_TERM:
- setCurrentSearchIndex(EntityType.GLOSSARY);
+ return ;
- return (
-
- );
case EntityType.TAG:
- setCurrentSearchIndex(EntityType.TAG);
-
- return ;
+ return ;
default:
return null;
}
}, [tab, entityDetails]);
+ const icon = useMemo(() => {
+ return getServiceIcon(entityDetails.details);
+ }, [entityDetails]);
+
return (
-