diff --git a/catalog-rest-service/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx b/catalog-rest-service/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx index 8b767f5b5cc..a00c89bfe35 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/recently-viewed/RecentlyViewed.tsx @@ -27,13 +27,16 @@ import { getRecentlyViewedData } from '../../utils/CommonUtils'; import { getOwnerFromId, getTierFromTableTags } from '../../utils/TableUtils'; import { getTableTags } from '../../utils/TagsUtils'; import TableDataCard from '../common/table-data-card/TableDataCard'; +import Loader from '../Loader/Loader'; import Onboarding from '../onboarding/Onboarding'; const RecentlyViewed: FunctionComponent = () => { const recentlyViewedData = getRecentlyViewedData(); const [data, setData] = useState>([]); + const [isLoading, setIsloading] = useState(false); const fetchRecentlyViewedEntity = async () => { + setIsloading(true); const arrData: Array = []; for (const oData of recentlyViewedData) { @@ -156,6 +159,7 @@ const RecentlyViewed: FunctionComponent = () => { break; } } + setIsloading(false); setData(arrData); }; @@ -167,27 +171,33 @@ const RecentlyViewed: FunctionComponent = () => { return ( <> - {data.length ? ( - data.map((item, index) => { - return ( -
- -
- ); - }) + {isLoading ? ( + ) : ( - + <> + {data.length ? ( + data.map((item, index) => { + return ( +
+ +
+ ); + }) + ) : ( + + )} + )} ); diff --git a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx index 49c6e4de6ff..fb74dcc673e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx @@ -92,7 +92,7 @@ describe('Test SearchedData Component', () => { } ); - const searchedDataContainer = getByTestId(container, 'fluid-container'); + const searchedDataContainer = getByTestId(container, 'search-container'); expect(searchedDataContainer).toBeInTheDocument(); }); diff --git a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx index 81fc17c72da..b3005b317c0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx @@ -27,7 +27,6 @@ import { } from '../../utils/TableUtils'; import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES'; import TableDataCard from '../common/table-data-card/TableDataCard'; -import PageContainer from '../containers/PageContainer'; import Loader from '../Loader/Loader'; import Onboarding from '../onboarding/Onboarding'; import Pagination from '../Pagination'; @@ -55,7 +54,6 @@ const SearchedData: React.FC = ({ showOnlyChildren = false, searchText, totalValue, - fetchLeftPanel, }: SearchedDataProp) => { const highlightSearchResult = () => { return data.map((table, index) => { @@ -108,50 +106,46 @@ const SearchedData: React.FC = ({ return ( <> - -
- {isLoading ? ( - + {isLoading ? ( + + ) : ( +
+ {totalValue > 0 || showOnboardingTemplate || showOnlyChildren ? ( + <> + {children} + {!showOnlyChildren ? ( + <> + {showResultCount && searchText ? ( +
+ {pluralize(totalValue, 'result')} +
+ ) : null} + {data.length > 0 ? ( +
+ {highlightSearchResult()} + {totalValue > PAGE_SIZE && data.length > 0 && ( + + )} +
+ ) : ( + + )} + + ) : null} + ) : ( <> - {totalValue > 0 || showOnboardingTemplate || showOnlyChildren ? ( - <> - {children} - {!showOnlyChildren ? ( - <> - {showResultCount && searchText ? ( -
- {pluralize(totalValue, 'result')} -
- ) : null} - {data.length > 0 ? ( -
- {highlightSearchResult()} - {totalValue > PAGE_SIZE && data.length > 0 && ( - - )} -
- ) : ( - - )} - - ) : null} - - ) : ( - <> - {children} - - - )} + {children} + )}
- + )} ); }; diff --git a/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts b/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts index 7cbb98d83af..04f8e8cce9d 100644 --- a/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts +++ b/catalog-rest-service/src/main/resources/ui/src/constants/services.const.ts @@ -16,6 +16,7 @@ */ import { ServiceTypes } from 'Models'; +import noDataFound from '../assets/img/no-data-placeholder.png'; import noService from '../assets/img/no-service.png'; import airflow from '../assets/img/service-icon-airflow.png'; import athena from '../assets/img/service-icon-athena.png'; @@ -39,6 +40,7 @@ import tableau from '../assets/img/service-icon-tableau.png'; import trino from '../assets/img/service-icon-trino.png'; import plus from '../assets/svg/plus.svg'; +export const NoDataFoundPlaceHolder = noDataFound; export const MYSQL = mysql; export const MSSQL = mssql; export const REDSHIFT = redshift; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.test.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.test.tsx index a3bce877cc3..ee47cd68a5a 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.test.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.test.tsx @@ -54,10 +54,12 @@ describe('Test Explore page', () => { const { container } = render(, { wrapper: MemoryRouter, }); + const pageContainer = await findByTestId(container, 'fluid-container'); const searchData = await findByTestId(container, 'search-data'); const wrappedContent = await findByTestId(container, 'wrapped-content'); const tabs = await findAllByTestId(container, 'tab'); + expect(pageContainer).toBeInTheDocument(); expect(searchData).toBeInTheDocument(); expect(wrappedContent).toBeInTheDocument(); expect(tabs.length).toBe(4); diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx index fd8d3c1097b..f450e87af49 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx @@ -32,6 +32,7 @@ import { searchData } from '../../axiosAPIs/miscAPI'; import { Button } from '../../components/buttons/Button/Button'; import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES'; import FacetFilter from '../../components/common/facetfilter/FacetFilter'; +import PageContainer from '../../components/containers/PageContainer'; import DropDownList from '../../components/dropdown/DropDownList'; import SearchedData from '../../components/searched-data/SearchedData'; import { @@ -577,6 +578,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { setFieldList(tabsInfo[getCurrentTab(tab) - 1].sortingFields); setSortField(tabsInfo[getCurrentTab(tab) - 1].sortField); setSortOrder('desc'); + setError(''); setCurrentTab(getCurrentTab(tab)); setSearchIndex(getCurrentIndex(tab)); setCurrentPage(1); @@ -609,33 +611,38 @@ const ExplorePage: React.FC = (): React.ReactElement => { const fetchLeftPanel = () => { return ( - onClearFilterHandler(value)} - onSelectHandler={handleSelectedFilter} - /> + <> + {!error && ( + onClearFilterHandler(value)} + onSelectHandler={handleSelectedFilter} + /> + )} + ); }; return ( - <> - {error ? ( - - ) : ( - - {getTabs()} - - )} - + +
+ {getTabs()} + {error ? ( + + ) : ( + + )} +
+
); }; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.test.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.test.tsx index 11539d0c020..383a7bcc633 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.test.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.test.tsx @@ -223,11 +223,13 @@ describe('Test MyData page', () => { const { container } = render(, { wrapper: MemoryRouter, }); + const pageContainer = await findByTestId(container, 'fluid-container'); const searchData = await findByTestId(container, 'search-data'); const wrappedContent = await findByTestId(container, 'wrapped-content'); const tabs = await findAllByTestId(container, 'tab'); const myDataHeader = await findByText(container, /MyDataHeader/i); + expect(pageContainer).toBeInTheDocument(); expect(searchData).toBeInTheDocument(); expect(wrappedContent).toBeInTheDocument(); expect(myDataHeader).toBeInTheDocument(); diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx index 508a93c85de..b824d8023d1 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data/index.tsx @@ -23,6 +23,7 @@ import React, { useEffect, useRef, useState } from 'react'; import AppState from '../../AppState'; import { searchData } from '../../axiosAPIs/miscAPI'; import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES'; +import PageContainer from '../../components/containers/PageContainer'; import Loader from '../../components/Loader/Loader'; import MyDataHeader from '../../components/my-data/MyDataHeader'; import RecentlyViewed from '../../components/recently-viewed/RecentlyViewed'; @@ -44,6 +45,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { const [currentPage, setCurrentPage] = useState(1); const [totalNumberOfValue, setTotalNumberOfValues] = useState(0); const [isLoading, setIsLoading] = useState(true); + const [isEntityLoading, setIsEntityLoading] = useState(true); const [currentTab, setCurrentTab] = useState(1); const [error, setError] = useState(''); const [filter, setFilter] = useState(''); @@ -72,7 +74,9 @@ const MyDataPage: React.FC = (): React.ReactElement => { }; const fetchTableData = (setAssetCount = false) => { - setIsLoading(true); + if (!isEntityLoading) { + setIsLoading(true); + } searchData( '', currentPage, @@ -91,10 +95,12 @@ const MyDataPage: React.FC = (): React.ReactElement => { setAggregations(res.data.aggregations); } setIsLoading(false); + setIsEntityLoading(false); } else { setData([]); setTotalNumberOfValues(0); setIsLoading(false); + setIsEntityLoading(false); } }) .catch((err: AxiosError) => { @@ -104,6 +110,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { body: err.response?.data?.responseMessage ?? ERROR500, }); setIsLoading(false); + setIsEntityLoading(false); }); }; @@ -115,6 +122,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(1)}`} data-testid="tab" onClick={() => { + setIsEntityLoading(true); setCurrentTab(1); setFilter(''); setCurrentPage(1); @@ -125,6 +133,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(2)}`} data-testid="tab" onClick={() => { + setIsEntityLoading(true); setCurrentTab(2); setFilter(Ownership.OWNER); setCurrentPage(1); @@ -135,6 +144,7 @@ const MyDataPage: React.FC = (): React.ReactElement => { className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(3)}`} data-testid="tab" onClick={() => { + setIsEntityLoading(true); setCurrentTab(3); setFilter(Ownership.FOLLOWERS); setCurrentPage(1); @@ -163,23 +173,15 @@ const MyDataPage: React.FC = (): React.ReactElement => { return ( <> - {isLoading ? ( - + {error ? ( + ) : ( <> - {error ? ( - + {isLoading ? ( + ) : ( - 0 ? true : false} - totalValue={totalNumberOfValue}> - <> + +
{ )} /> {getTabs()} - {currentTab === 1 ? : null} - - + 0 ? true : false} + totalValue={totalNumberOfValue}> + {currentTab === 1 ? : null} + +
+
)} )} diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx index f17610d6d86..464c156e059 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/services/index.tsx @@ -44,7 +44,7 @@ import { } from '../../constants/constants'; import { arrServiceTypes, - NOSERVICE, + NoDataFoundPlaceHolder, PLUS, servicesDisplayName, } from '../../constants/services.const'; @@ -81,7 +81,7 @@ export type ApiData = { const ServicesPage = () => { const showToast = useToastContext(); - const { isAdminUser } = useAuth(); + const { isAdminUser, isAuthDisabled } = useAuth(); const [isModalOpen, setIsModalOpen] = useState(false); const [serviceName, setServiceName] = useState('databaseServices'); @@ -328,6 +328,7 @@ const ServicesPage = () => { value: service.collection.name, }; }); + setIsLoading(false); } else { setIsLoading(false); } @@ -466,7 +467,7 @@ const ServicesPage = () => { title={TITLE_FOR_NON_ADMIN_ACTION}>
{ ) : (
- No Service + No Service

diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx index 8f809323f86..79cbc6e81b3 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx @@ -219,12 +219,12 @@ const TagsPage = () => { return ( <> - {isLoading ? ( - + {error ? ( +

{error}

) : ( - {error ? ( -

{error}

+ {isLoading ? ( + ) : (
{currentCategory && (