refactor: Use useContentTaxonomyTagsData to get tagsCount

src/library-authoring/component-info/ComponentManagement.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, Stack } from '@openedx/paragon';
@@ -7,13 +8,34 @@ import { useLibraryBlockMetadata } from '../data/apiHooks';
 import StatusWidget from '../generic/status-widget';
 import messages from './messages';
 import { ContentTagsDrawer } from '../../content-tags-drawer';
+import { useContentTaxonomyTagsData } from '../../content-tags-drawer/data/apiHooks';
 
 interface ComponentManagementProps {
   usageKey: string;
 }
 const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
   const intl = useIntl();
   const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  const { data: componentTags } = useContentTaxonomyTagsData(usageKey);
+
+  const tagsCount = React.useMemo(() => {
+    if (!componentTags) {
+      return 0;
+    }
+    let result = 0;
+    componentTags.taxonomies.forEach((taxonomy) => {
+      const countedTags : string[] = [];
+      taxonomy.tags.forEach((tagData) => {
+        tagData.lineage.forEach((tag) => {
+          if (!countedTags.includes(tag)) {
+            result += 1;
+            countedTags.push(tag);
+          }
+        });
+      });
+    });
+    return result;
+  }, [componentTags]);
 
   if (!componentMetadata) {
     return null;
@@ -31,7 +53,7 @@ const ComponentManagement = ({ usageKey }: ComponentManagementProps) => {
           title={(
             <Stack gap={1} direction="horizontal">
               <Icon src={Tag} />
-              {intl.formatMessage(messages.manageTabTagsTitle, { count: componentMetadata.tagsCount })}
+              {intl.formatMessage(messages.manageTabTagsTitle, { count: tagsCount })}
             </Stack>
           )}
           className="border-0"