fix: include children component while analyzing course for imports

Currently, components with children are not supported by libraries v2.
The analysis step before importing a course considers the parent block
while counting unsupported blocks but does not include children in the
unsupported count.

We fetch usage_keys of all unsupported blocks and fetch the children
blocks that contain these usage_keys in their breadcrumb field i.e.,
they are part of the unsupported blocks.

Author: navinkarkera

.env

@@ -45,7 +45,7 @@ INVITE_STUDENTS_EMAIL_TO=''
 ENABLE_CHECKLIST_QUALITY=''
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
-LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content"
 # Fallback in local style files
 PARAGON_THEME_URLS={}
 COURSE_TEAM_SUPPORT_EMAIL=''

.env.test

@@ -40,6 +40,6 @@ INVITE_STUDENTS_EMAIL_TO="[email protected]"
 ENABLE_CHECKLIST_QUALITY=true
 ENABLE_GRADING_METHOD_IN_PROBLEMS=false
 # "Multi-level" blocks are unsupported in libraries
-LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder"
+LIBRARY_UNSUPPORTED_BLOCKS="conditional,step-builder,problem-builder,library_content"
 PARAGON_THEME_URLS=
 COURSE_TEAM_SUPPORT_EMAIL='[email protected]'

src/library-authoring/import-course/stepper/ReviewImportDetails.tsx

@@ -11,6 +11,7 @@ import { useMigrationInfo } from '@src/library-authoring/data/apiHooks';
 import { useGetBlockTypes } from '@src/search-manager';
 import { SummaryCard } from './SummaryCard';
 import messages from '../messages';
+import { useGetContentHits } from '../../../search-manager/data/apiHooks';
 
 interface Props {
   courseId?: string;
@@ -123,26 +124,55 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
     markAnalysisComplete(!isBlockDataPending);
   }, [isBlockDataPending]);
 
-  const totalUnsupportedBlocks = useMemo(() => {
+  const unsupportedBlockTypes = useMemo(() => {
     if (!blockTypes) {
+      return undefined;
+    }
+    return Object.entries(blockTypes).filter(([blockType, ]) => (
+      getConfig().LIBRARY_UNSUPPORTED_BLOCKS.includes(blockType)
+    ));
+  }, [blockTypes]);
+
+  const totalUnsupportedBlocks = useMemo(() => {
+    if (!unsupportedBlockTypes) {
       return 0;
     }
-    const unsupportedBlocks = Object.entries(blockTypes).reduce((total, [blockType, count]) => {
-      const isUnsupportedBlock = getConfig().LIBRARY_UNSUPPORTED_BLOCKS.includes(blockType);
-      if (isUnsupportedBlock) {
-        return total + count;
-      }
-      return total;
+    const unsupportedBlocks = unsupportedBlockTypes.reduce((total, [, count]) => {
+      return total + count;
     }, 0);
     return unsupportedBlocks;
-  }, [blockTypes]);
+  }, [unsupportedBlockTypes]);
+
+  const { data: unsupportedBlocksData } = useGetContentHits([
+    `context_key = "${courseId}"`,
+    `block_type IN [${unsupportedBlockTypes?.flatMap(([value]) => `"${value}"`).join(',')}]`,
+  ], totalUnsupportedBlocks > 0, totalUnsupportedBlocks, 'always')
+
+  const { data: unsupportedBlocksChildren } = useGetBlockTypes([
+    `context_key = "${courseId}"`,
+    `breadcrumbs.usage_key IN [${unsupportedBlocksData?.hits.map((value) => `"${value.usage_key}"`).join(',')}]`,
+  ], (unsupportedBlocksData?.estimatedTotalHits || 0) > 0);
+
+  const totalUnsupportedBlockChildren = useMemo(() => {
+    if (!unsupportedBlocksChildren) {
+      return 0;
+    }
+    const unsupportedBlocks = Object.values(unsupportedBlocksChildren).reduce((total, count) => {
+      return total + count;
+    }, 0);
+    return unsupportedBlocks;
+  }, [unsupportedBlocksChildren]);
+
+  const finalUnssupportedBlocks = useMemo(() => {
+    return totalUnsupportedBlocks + totalUnsupportedBlockChildren;
+  }, [totalUnsupportedBlocks, totalUnsupportedBlockChildren]);
 
   const totalBlocks = useMemo(() => {
     if (!blockTypes) {
       return undefined;
     }
-    return Object.values(blockTypes).reduce((total, block) => total + block, 0) - totalUnsupportedBlocks;
-  }, [blockTypes]);
+    return Object.values(blockTypes).reduce((total, block) => total + block, 0) - finalUnssupportedBlocks;
+  }, [blockTypes, finalUnssupportedBlocks]);
 
   const totalComponents = useMemo(() => {
     if (!blockTypes) {
@@ -157,15 +187,15 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
         return total;
       },
       0,
-    ) - totalUnsupportedBlocks;
-  }, [blockTypes]);
+    ) - finalUnssupportedBlocks;
+  }, [blockTypes, finalUnssupportedBlocks]);
 
   const unsupportedBlockPercentage = useMemo(() => {
     if (!blockTypes || !totalBlocks) {
       return 0;
     }
-    return (totalUnsupportedBlocks / (totalBlocks + totalUnsupportedBlocks)) * 100;
-  }, [blockTypes]);
+    return (finalUnssupportedBlocks / (totalBlocks + finalUnssupportedBlocks)) * 100;
+  }, [blockTypes, finalUnssupportedBlocks]);
 
   return (
     <Stack gap={4}>
@@ -181,10 +211,10 @@ export const ReviewImportDetails = ({ courseId, markAnalysisComplete }: Props) =
         sections={blockTypes?.chapter}
         subsections={blockTypes?.sequential}
         units={blockTypes?.vertical}
-        unsupportedBlocks={totalUnsupportedBlocks}
+        unsupportedBlocks={finalUnssupportedBlocks}
         isPending={isBlockDataPending}
       />
-      {!isBlockDataPending && totalUnsupportedBlocks > 0
+      {!isBlockDataPending && finalUnssupportedBlocks > 0
         && (
         <>
           <h4><FormattedMessage {...messages.importCourseAnalysisDetails} /></h4>

src/search-manager/data/api.ts

@@ -1,7 +1,7 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import type {
-  Filter, MeiliSearch, MultiSearchQuery,
+  Filter, MeiliSearch, MultiSearchQuery, SearchResponse,
 } from 'meilisearch';
 import { ContainerType } from '../../generic/key-utils';
 
@@ -552,3 +552,23 @@ export async function fetchTagsThatMatchKeyword({
 
   return { matches: Array.from(matches).map((tagPath) => ({ tagPath })), mayBeMissingResults: hits.length === limit };
 }
+
+/**
+ * Fetch the blocks that match query
+ */
+export const fetchContentHits = async (
+  client: MeiliSearch,
+  indexName: string,
+  extraFilter?: Filter,
+  limit?: number,
+): Promise<SearchResponse<Record<string, any>>> => {
+  // Convert 'extraFilter' into an array
+  const extraFilterFormatted = forceArray(extraFilter);
+
+  const results = await client.index(indexName).search("", {
+    filter: extraFilterFormatted,
+    limit,
+  });
+
+  return results;
+};

src/search-manager/data/apiHooks.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { keepPreviousData, skipToken, useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { type Filter, MeiliSearch } from 'meilisearch';
 
 import {
@@ -11,6 +11,7 @@ import {
   getContentSearchConfig,
   fetchBlockTypes,
   type PublishStatus,
+  fetchContentHits,
 } from './api';
 
 /**
@@ -286,7 +287,7 @@ export const useTagFilterOptions = (args: {
   return { ...mainQuery, data };
 };
 
-export const useGetBlockTypes = (extraFilters: Filter) => {
+export const useGetBlockTypes = (extraFilters: Filter, enabled: boolean = true) => {
   const { client, indexName } = useContentSearchConnection();
   return useQuery({
     enabled: client !== undefined && indexName !== undefined,
@@ -298,7 +299,23 @@ export const useGetBlockTypes = (extraFilters: Filter) => {
       extraFilters,
       'block_types',
     ],
-    queryFn: () => fetchBlockTypes(client!, indexName!, extraFilters),
+    queryFn: enabled ? () => fetchBlockTypes(client!, indexName!, extraFilters): skipToken,
     refetchOnMount: 'always',
   });
 };
+
+export const useGetContentHits = (extraFilters: Filter, enabled: boolean = true, limit?: number, refetchOnMount?: boolean | 'always') => {
+  const { client, indexName } = useContentSearchConnection();
+  return useQuery({
+    enabled: client !== undefined && indexName !== undefined,
+    queryKey: [
+      'content_search',
+      client?.config.apiKey,
+      client?.config.host,
+      indexName,
+      extraFilters,
+    ],
+    queryFn: enabled ? () => fetchContentHits(client!, indexName!, extraFilters, limit): skipToken,
+    refetchOnMount,
+  });
+};