UI : Fix the Classifications Count issue (#9744)

* Fix the Tags Count

* minor changes

* added unit test for left panel count

openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/components/SelectTestSuite.tsx

@@ -225,7 +225,7 @@ const SelectTestSuite: React.FC<SelectTestSuiteProps> = ({
                   <SVGIcons
                     alt="plus"
                     className="w-4 m-r-xss"
-                    icon={Icons.ICON_PLUS_PRIMERY}
+                    icon={Icons.ICON_PLUS_PRIMARY}
                   />
                 }
                 onClick={() => setIsNewTestSuite(true)}>

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}>
-                      <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMERY} />{' '}
+                      <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMARY} />{' '}
                       <span>{t('label.add-glossary')}</span>
                     </button>
                   </Tooltip>

openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx

@@ -54,7 +54,7 @@ const Tags: FunctionComponent<TagProps> = ({
         <SVGIcons
           alt="plus"
           className="tw-w-3.5 tw-mr-1"
-          icon={Icons.ICON_PLUS_PRIMERY}
+          icon={Icons.ICON_PLUS_PRIMARY}
         />
       ) : (
         startWith

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;
+};

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 <FontAwesomeIcon icon="check" />;
+    }
+
+    return <Loader size="small" type="default" />;
+  }
+
+  return (
+    <SVGIcons alt="delete" icon="icon-delete" title="Delete" width="16px" />
+  );
+};

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(<TagsPage />);
+    });
+    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(<TagsPage />);

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';
-
+import { DeleteTagsType } from './TagsPage.interface';
-type DeleteTagDetailsType = {
+import { getDeleteIcon } from './TagsPageUtils';
-  id: string;
-  name: string;
-  categoryName?: string;
-  isCategory: boolean;
-  status?: LoadingState;
-};
-
-type DeleteTagsType = {
-  data: DeleteTagDetailsType | undefined;
-  state: boolean;
-};
 
 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(
+        const currentClassification = await getClassificationByName(name, [
-          name,
+          'usageCount',
-          '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 (
       <LeftPanelCard id="tags">
@@ -613,7 +616,7 @@ const TagsPage = () => {
                       setIsAddingClassification((prevState) => !prevState);
                       setErrorDataClassification(undefined);
                     }}>
-                    <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMERY} />{' '}
+                    <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMARY} />{' '}
                     <span>
                       {t('label.add-entity', {
                         entity: t('label.classification'),
@@ -641,7 +644,7 @@ const TagsPage = () => {
                     {getEntityName(category as unknown as EntityReference)}
                   </Typography.Paragraph>
                   {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 ? (
+            {getDeleteIcon(deleteTags, record.id)}
-              deleteTags.data?.status === 'success' ? (
-                <FontAwesomeIcon icon="check" />
-              ) : (
-                <Loader size="small" type="default" />
-              )
-            ) : (
-              <SVGIcons
-                alt="delete"
-                icon="icon-delete"
-                title="Delete"
-                width="16px"
-              />
-            )}
           </button>
         ),
       },

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: {

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<Props> = ({ icon, ...props }: Props) => {
       IconComponent = IconPlus;
 
       break;
-    case Icons.ICON_PLUS_PRIMERY:
+    case Icons.ICON_PLUS_PRIMARY:
       IconComponent = IconPlusPrimery;
 
       break;