From 13c6342c9004595f21280c652b75e23968e4a43e Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Fri, 3 Sep 2021 20:54:29 +0530 Subject: [PATCH] Fixed #388 Show the document count in explore page next to tabs and also in services tabs (#399) --- .../resources/ui/src/pages/explore/index.tsx | 44 +++++++++++++++++++ .../resources/ui/src/pages/services/index.tsx | 3 +- .../resources/ui/src/pages/teams/index.tsx | 16 ++----- .../main/resources/ui/src/react-app-env.d.ts | 1 + .../utils/{CommonUtils.ts => CommonUtils.tsx} | 12 +++++ 5 files changed, 62 insertions(+), 14 deletions(-) rename catalog-rest-service/src/main/resources/ui/src/utils/{CommonUtils.ts => CommonUtils.tsx} (87%) 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 fff1dfcbf5b..f743b7551f8 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 @@ -44,6 +44,7 @@ import { usePrevious } from '../../hooks/usePrevious'; import useToastContext from '../../hooks/useToastContext'; import { getAggregationList } from '../../utils/AggregationUtils'; import { formatDataResponse } from '../../utils/APIUtils'; +import { getCountBadge } from '../../utils/CommonUtils'; import { getFilterString } from '../../utils/FilterUtils'; import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant'; import { getAggrWithDefaultValue } from './explore.constants'; @@ -92,10 +93,13 @@ const ExplorePage: React.FC = (): React.ReactElement => { const [sortOrder, setSortOrder] = useState('desc'); const [searchIndex, setSearchIndex] = useState(SearchIndex.TABLE); const [currentTab, setCurrentTab] = useState(1); + const [tableCount, setTableCount] = useState(0); + const [topicCount, setTopicCount] = useState(0); const [fieldList, setFieldList] = useState>(tableSortingFields); const isMounting = useRef(true); const previsouIndex = usePrevious(searchIndex); + const handleSelectedFilter = ( checked: boolean, selectedFilter: string, @@ -174,6 +178,40 @@ const ExplorePage: React.FC = (): React.ReactElement => { } }; + const fetchCounts = () => { + const emptyValue = ''; + const tableCount = searchData( + searchText, + 0, + 0, + getFilterString(filters), + emptyValue, + emptyValue, + SearchIndex.TABLE + ); + const topicCount = searchData( + searchText, + 0, + 0, + getFilterString(filters), + emptyValue, + emptyValue, + SearchIndex.TOPIC + ); + Promise.all([tableCount, topicCount]) + .then(([table, topic]: Array) => { + setTableCount(table.data.hits.total.value); + setTopicCount(topic.data.hits.total.value); + }) + .catch((err: AxiosError) => { + setError(ERROR404); + showToast({ + variant: 'error', + body: err.response?.data?.responseMessage ?? ERROR500, + }); + }); + }; + const fetchTableData = (forceSetAgg: boolean) => { setIsLoading(true); @@ -358,6 +396,7 @@ const ExplorePage: React.FC = (): React.ReactElement => { resetFilters(); }}> Tables + {getCountBadge(tableCount)} {getSortingElements()} @@ -400,6 +440,10 @@ const ExplorePage: React.FC = (): React.ReactElement => { } }, [currentPage, filters, sortField, sortOrder]); + useEffect(() => { + fetchCounts(); + }, [searchText, filters]); + // alwyas Keep this useEffect at the end... useEffect(() => { isMounting.current = false; 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 6c8a78d912a..b85d480ae1d 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 @@ -49,7 +49,7 @@ import { servicesDisplayName, } from '../../constants/services.const'; import { ServiceCategory } from '../../enums/service.enum'; -import { getTabClasses } from '../../utils/CommonUtils'; +import { getCountBadge, getTabClasses } from '../../utils/CommonUtils'; import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils'; import SVGIcons from '../../utils/SvgUtils'; @@ -281,6 +281,7 @@ const ServicesPage = () => { setServiceList(services[tab.name]); }}> {tab.displayName} + {getCountBadge(services[tab.name].length)} ))} diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx index c393b8994b5..2594ef4eb17 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/teams/index.tsx @@ -37,7 +37,7 @@ import Loader from '../../components/Loader/Loader'; import FormModal from '../../components/Modals/FormModal'; import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor'; import { ERROR404 } from '../../constants/constants'; -import { countBackground } from '../../utils/styleconstant'; +import { getCountBadge } from '../../utils/CommonUtils'; import SVGIcons from '../../utils/SvgUtils'; import AddUsersModal from './AddUsersModal'; import Form from './Form'; @@ -143,16 +143,6 @@ const TeamsPage = () => { return tab === currentTab ? 'active' : ''; }; - const getCount = (count = 0) => { - return ( - - {count} - - ); - }; - const getTabs = () => { return (
@@ -163,7 +153,7 @@ const TeamsPage = () => { setCurrentTab(1); }}> Users - {getCount(currentTeam?.users.length)} + {getCountBadge(currentTeam?.users.length)}
diff --git a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts index b4e1335b247..b87fbcc5ca7 100644 --- a/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts +++ b/catalog-rest-service/src/main/resources/ui/src/react-app-env.d.ts @@ -24,3 +24,4 @@ declare module 'react-draft-wysiwyg'; declare module 'markdown-draft-js'; declare module 'react-syntax-highlighter'; declare module 'rehype-raw'; +declare module 'react-codemirror2'; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx similarity index 87% rename from catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts rename to catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx index d412d3e3ce8..2a9952e398e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts +++ b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx @@ -1,6 +1,8 @@ import { isEmpty } from 'lodash'; import { UserTeam } from 'Models'; +import React from 'react'; import AppState from '../AppState'; +import { countBackground } from './styleconstant'; export const arraySorterByKey = ( key: string, @@ -91,3 +93,13 @@ export const getTabClasses = ( ) => { return 'tw-gh-tabs' + (activeTab === tab ? ' active' : ''); }; + +export const getCountBadge = (count = 0) => { + return ( + + {count} + + ); +};