From 25ef20fe1664c574e664020c05d41ef792b67e28 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 17 Jan 2023 14:21:10 +0530 Subject: [PATCH] UI : Fix the Classifications Count issue (#9744) * Fix the Tags Count * minor changes * added unit test for left panel count --- .../components/SelectTestSuite.tsx | 2 +- .../Glossary/GlossaryV1.component.tsx | 2 +- .../ui/src/components/Tag/Tags/tags.tsx | 2 +- .../ui/src/pages/tags/TagsPage.interface.ts | 27 +++++++++ .../ui/src/pages/tags/TagsPageUtils.tsx | 35 +++++++++++ .../ui/src/pages/tags/index.test.tsx | 22 +++++++ .../resources/ui/src/pages/tags/index.tsx | 60 ++++++++----------- .../resources/ui/src/pages/tags/tags.mock.ts | 3 + .../main/resources/ui/src/utils/SvgUtils.tsx | 4 +- 9 files changed, 117 insertions(+), 40 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPage.interface.ts create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPageUtils.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx index 67acb4c1e26..9eb7c8ad4a3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx @@ -225,7 +225,7 @@ const SelectTestSuite: React.FC = ({ } onClick={() => setIsNewTestSuite(true)}> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx index 77aee8596fc..c928ba681ba 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx @@ -323,7 +323,7 @@ const GlossaryV1 = ({ data-testid="add-glossary" disabled={!createGlossaryPermission} onClick={handleAddGlossaryClick}> - {' '} + {' '} {t('label.add-glossary')} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx index da1388aee5a..a578c7efa56 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx @@ -54,7 +54,7 @@ const Tags: FunctionComponent = ({ ) : ( startWith diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPage.interface.ts b/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPage.interface.ts new file mode 100644 index 00000000000..a87c281b973 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPage.interface.ts @@ -0,0 +1,27 @@ +/* + * Copyright 2022 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 { LoadingState } from 'Models'; + +export type DeleteTagDetailsType = { + id: string; + name: string; + categoryName?: string; + isCategory: boolean; + status?: LoadingState; +}; + +export type DeleteTagsType = { + data: DeleteTagDetailsType | undefined; + state: boolean; +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPageUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPageUtils.tsx new file mode 100644 index 00000000000..973c6c79a97 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/TagsPageUtils.tsx @@ -0,0 +1,35 @@ +/* + * Copyright 2022 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import Loader from 'components/Loader/Loader'; +import React from 'react'; +import SVGIcons from 'utils/SvgUtils'; +import { DeleteTagsType } from './TagsPage.interface'; + +export const getDeleteIcon = ( + deleteTags: DeleteTagsType, + id: string | undefined +) => { + if (deleteTags.data?.id === id) { + if (deleteTags.data?.status === 'success') { + return ; + } + + return ; + } + + return ( + + ); +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx index b1ff3faa653..2fcb0acc14b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx @@ -18,6 +18,7 @@ import { findByTestId, findByText, fireEvent, + getByText, queryByTitle, render, screen, @@ -297,6 +298,27 @@ describe('Test TagsPage page', () => { expect(sidePanelCategories).toHaveLength(3); }); + it('Classification LeftPanel count should render properly', async () => { + await act(async () => { + render(); + }); + const leftPanelContent = await screen.findByTestId('left-panel-content'); + const sidePanelCategories = await screen.findAllByTestId( + 'side-panel-classification' + ); + + expect(leftPanelContent).toBeInTheDocument(); + expect(sidePanelCategories).toHaveLength(3); + + const getAllCounts = await screen.findAllByTestId('filter-count'); + + expect(getAllCounts).toHaveLength(3); + + expect(getByText(getAllCounts[0], '2')).toBeInTheDocument(); + expect(getByText(getAllCounts[1], '3')).toBeInTheDocument(); + expect(getByText(getAllCounts[2], '5')).toBeInTheDocument(); + }); + it('OnClick of add new tag, FormModal should display', async () => { await act(async () => { render(); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx index 05dcf8906d5..d32da5f5da5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx @@ -44,7 +44,7 @@ import { import TagsLeftPanelSkeleton from 'components/Skeleton/Tags/TagsLeftPanelSkeleton.component'; import { compare } from 'fast-json-patch'; import { isEmpty, isUndefined, toLower, trim } from 'lodash'; -import { FormErrorData, LoadingState } from 'Models'; +import { FormErrorData } from 'Models'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Link, useHistory, useParams } from 'react-router-dom'; @@ -91,19 +91,8 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import Form from './Form'; import './TagPage.style.less'; - -type DeleteTagDetailsType = { - id: string; - name: string; - categoryName?: string; - isCategory: boolean; - status?: LoadingState; -}; - -type DeleteTagsType = { - data: DeleteTagDetailsType | undefined; - state: boolean; -}; +import { DeleteTagsType } from './TagsPage.interface'; +import { getDeleteIcon } from './TagsPageUtils'; const TagsPage = () => { const { getEntityPermission, permissions } = usePermissionProvider(); @@ -205,7 +194,7 @@ const TagsPage = () => { setIsLoading(true); try { - const response = await getAllClassifications('', 1000); + const response = await getAllClassifications('termCount', 1000); setClassifications(response.data); if (setCurrent && response.data.length) { setCurrentClassification(response.data[0]); @@ -229,11 +218,23 @@ const TagsPage = () => { if (currentClassification?.name !== name || update) { setIsLoading(true); try { - const currentClassification = await getClassificationByName( - name, - 'usageCount' - ); + const currentClassification = await getClassificationByName(name, [ + 'usageCount', + 'termCount', + ]); if (currentClassification) { + setClassifications((prevClassifications) => + prevClassifications.map((data) => { + if (data.name === name) { + return { + ...data, + termCount: currentClassification.termCount, + }; + } + + return data; + }) + ); setCurrentClassification(currentClassification); setCurrentClassificationName(currentClassification.name); setIsLoading(false); @@ -587,6 +588,8 @@ const TagsPage = () => { } }; + // Use the component in the render method + const fetchLeftPanel = () => { return ( @@ -613,7 +616,7 @@ const TagsPage = () => { setIsAddingClassification((prevState) => !prevState); setErrorDataClassification(undefined); }}> - {' '} + {' '} {t('label.add-entity', { entity: t('label.classification'), @@ -641,7 +644,7 @@ const TagsPage = () => { {getEntityName(category as unknown as EntityReference)} {getCountBadge( - 0, + category.termCount, 'tw-self-center', currentClassification?.name === category.name )} @@ -731,20 +734,7 @@ const TagsPage = () => { !classificationPermissions.EditAll } onClick={() => handleActionDeleteTag(record)}> - {deleteTags.data?.id === record.id ? ( - deleteTags.data?.status === 'success' ? ( - - ) : ( - - ) - ) : ( - - )} + {getDeleteIcon(deleteTags, record.id)} ), }, diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/tags.mock.ts b/openmetadata-ui/src/main/resources/ui/src/pages/tags/tags.mock.ts index ba9ee08a127..506d5a63524 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/tags.mock.ts +++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/tags.mock.ts @@ -22,6 +22,7 @@ export const MOCK_ALL_CLASSIFICATIONS = { updatedAt: 1672147362401, updatedBy: 'admin', href: 'http://localhost:8585/api/v1/classifications/5e77a82e-4bc8-46eb-af52-a383a505eea6', + termCount: 2, changeDescription: { fieldsAdded: [], fieldsUpdated: [ @@ -57,6 +58,7 @@ export const MOCK_ALL_CLASSIFICATIONS = { deleted: false, provider: 'system', mutuallyExclusive: true, + termCount: 3, }, { id: '9005388e-5355-412c-8ba9-fc6dbe192a45', @@ -70,6 +72,7 @@ export const MOCK_ALL_CLASSIFICATIONS = { deleted: false, provider: 'user', mutuallyExclusive: false, + termCount: 5, }, ], paging: { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx index 307f522ddf3..b7fab5f1b76 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx @@ -309,7 +309,7 @@ export const Icons = { ICON_DEPLOY: 'icon-deploy', TOUR: 'tour', ICON_PLUS: 'icon-plus', - ICON_PLUS_PRIMERY: 'icon-plus-primary', + ICON_PLUS_PRIMARY: 'icon-plus-primary', ICON_PLUS_PRIMARY_OUTLINED: 'icon-plus-primary-outlined', ICON_MINUS: 'icon-minus', TAG: 'icon-tag', @@ -776,7 +776,7 @@ const SVGIcons: FunctionComponent = ({ icon, ...props }: Props) => { IconComponent = IconPlus; break; - case Icons.ICON_PLUS_PRIMERY: + case Icons.ICON_PLUS_PRIMARY: IconComponent = IconPlusPrimery; break;