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 = () => {