diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.test.tsx
index 23e5716d737..d21604ae6ab 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.test.tsx
@@ -15,6 +15,7 @@ import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ContainerChildren from './ContainerChildren';
+const mockFetchChildren = jest.fn();
const mockChildrenList = [
{
id: '1',
@@ -32,11 +33,26 @@ const mockChildrenList = [
},
];
+const mockDataProps = {
+ childrenList: mockChildrenList,
+ fetchChildren: mockFetchChildren,
+};
+
describe('ContainerChildren', () => {
+ it('Should call fetch container function on load', () => {
+ render(
+
+
+
+ );
+
+ expect(mockFetchChildren).toHaveBeenCalled();
+ });
+
it('Should render table with correct columns', () => {
render(
-
+
);
@@ -48,7 +64,7 @@ describe('ContainerChildren', () => {
it('Should render container names as links', () => {
render(
-
+
);
@@ -68,7 +84,7 @@ describe('ContainerChildren', () => {
it('Should render container descriptions as rich text', () => {
render(
-
+
);
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
index a6ce725514c..5ad9324e7a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ContainerDetail/ContainerChildren/ContainerChildren.tsx
@@ -18,7 +18,7 @@ import Table from 'components/common/Table/Table';
import { getContainerDetailPath } from 'constants/constants';
import { Container } from 'generated/entity/data/container';
import { EntityReference } from 'generated/type/entityReference';
-import React, { FC, useMemo } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { getEntityName } from 'utils/EntityUtils';
@@ -26,11 +26,13 @@ import { getEntityName } from 'utils/EntityUtils';
interface ContainerChildrenProps {
childrenList: Container['children'];
isLoading?: boolean;
+ fetchChildren: () => void;
}
const ContainerChildren: FC = ({
childrenList,
isLoading,
+ fetchChildren,
}) => {
const { t } = useTranslation();
@@ -72,6 +74,10 @@ const ContainerChildren: FC = ({
[]
);
+ useEffect(() => {
+ fetchChildren();
+ }, []);
+
return (
{
const { t } = useTranslation();
const { getEntityPermissionByFqn } = usePermissionProvider();
const { postFeed, deleteFeed, updateFeed } = useActivityFeedProvider();
- const { entityFQN: containerName, tab = EntityTabs.SCHEMA } =
+ const { entityFQN: containerName, tab } =
useParams<{ entityFQN: string; tab: EntityTabs }>();
// Local states
@@ -130,10 +130,10 @@ const ContainerPage = () => {
}
};
- const fetchContainerChildren = async (containerFQN: string) => {
+ const fetchContainerChildren = async () => {
setIsChildrenLoading(true);
try {
- const { children } = await getContainerByName(containerFQN, 'children');
+ const { children } = await getContainerByName(containerName, 'children');
setContainerChildrenData(children);
} catch (error) {
showErrorToast(error as AxiosError);
@@ -218,6 +218,11 @@ const ContainerPage = () => {
[AppState.userDetails, AppState.nonSecureUserDetails]
);
+ const isDataModelEmpty = useMemo(
+ () => isEmpty(containerData?.dataModel),
+ [containerData]
+ );
+
const getEntityFeedCount = () => {
getFeedCounts(EntityType.CONTAINER, containerName, setFeedCount);
};
@@ -484,8 +489,13 @@ const ContainerPage = () => {
const tabs = useMemo(
() => [
{
- label: ,
- key: EntityTabs.SCHEMA,
+ label: (
+
+ ),
+ key: isDataModelEmpty ? EntityTabs.CHILDREN : EntityTabs.SCHEMA,
children: (
@@ -505,15 +515,23 @@ const ContainerPage = () => {
onThreadLinkSelect={onThreadLinkSelect}
/>
-
+ {isDataModelEmpty ? (
+
+ ) : (
+
+ )}
{
),
},
+ ...(isDataModelEmpty
+ ? []
+ : [
+ {
+ label: (
+
+ ),
+ key: EntityTabs.CHILDREN,
+ children: (
+
+
+
+
+
+ ),
+ },
+ ]),
+
{
label: (
{
/>
),
},
- {
- label: (
-
- ),
- key: EntityTabs.CHILDREN,
- children: (
-
-
-
-
-
- ),
- },
-
{
label: ,
key: EntityTabs.LINEAGE,
@@ -619,6 +645,7 @@ const ContainerPage = () => {
},
],
[
+ isDataModelEmpty,
containerData,
description,
containerName,
@@ -667,12 +694,6 @@ const ContainerPage = () => {
fetchResourcePermission(containerName);
}, [containerName]);
- useEffect(() => {
- if (tab === EntityTabs.CHILDREN && hasViewPermission) {
- fetchContainerChildren(containerName);
- }
- }, [tab, containerName, hasViewPermission]);
-
useEffect(() => {
if (hasViewPermission) {
getEntityFeedCount();
@@ -723,7 +744,10 @@ const ContainerPage = () => {