feat: migrate Learner Credit Mgmt to catalog query algolia filters behind feature flag (#1451)

Author: adamstankiewicz

src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.tsx

@@ -13,7 +13,7 @@ import { BulkEnrollContext, BulkEnrollContextValue, Subscription } from '../Bulk
 import { TABLE_HEADERS } from '../CourseSearchResults';
 
 import '../../../../__mocks__/react-instantsearch-dom';
-import { BaseAddCoursesStep } from './AddCoursesStep';
+import { AddCoursesStep } from './AddCoursesStep';
 import { renderWithRouter } from '../../test/testUtils';
 import type { SelectedRow } from '../data/types';
 import type { UseAlgoliaSearchResult } from '../../algolia-search';
@@ -90,7 +90,7 @@ const StepperWrapper = ({
     <IntlProvider locale="en">
       <Provider store={store || defaultMockStore}>
         <BulkEnrollContext.Provider value={value}>
-          <BaseAddCoursesStep
+          <AddCoursesStep
             {...props}
             algolia={algolia || defaultAlgoliaProps}
             subscription={subscription}

src/components/BulkEnrollmentPage/stepper/AddCoursesStep.tsx

@@ -108,7 +108,7 @@ interface AddCoursesStepProps {
   algolia: UseAlgoliaSearchResult;
 }
 
-export const BaseAddCoursesStep: React.FC<AddCoursesStepProps> = ({
+export const AddCoursesStep: React.FC<AddCoursesStepProps> = ({
   subscription,
   algolia,
 }) => {
@@ -166,4 +166,4 @@ export const BaseAddCoursesStep: React.FC<AddCoursesStepProps> = ({
   );
 };
 
-export default withAlgoliaSearch(BaseAddCoursesStep);
+export default withAlgoliaSearch(AddCoursesStep);

src/components/learner-credit-management/BudgetDetailCatalogTabContents.jsx

@@ -1,6 +1,4 @@
-import React, { useEffect, useRef } from 'react';
-import { InstantSearch } from 'react-instantsearch-dom';
-import algoliasearch from 'algoliasearch/lite';
+import { useEffect, useRef } from 'react';
 import { Row, Col } from '@openedx/paragon';
 
 import { SearchData, SEARCH_FACET_FILTERS } from '@edx/frontend-enterprise-catalog-search';
@@ -9,7 +7,6 @@ import CatalogSearch from './search/CatalogSearch';
 import {
   LANGUAGE_REFINEMENT, LEARNING_TYPE_REFINEMENT,
 } from './data';
-import { configuration } from '../../config';
 
 const BudgetDetailCatalogTabContents = () => {
   const navigate = useNavigate();
@@ -32,11 +29,6 @@ const BudgetDetailCatalogTabContents = () => {
     }
   });
 
-  const searchClient = algoliasearch(
-    configuration.ALGOLIA.APP_ID,
-    configuration.ALGOLIA.SEARCH_API_KEY,
-  );
-
   useEffect(() => {
     if (locationState?.budgetActivityScrollToKey === 'catalog') {
       catalogContainerRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -49,15 +41,8 @@ const BudgetDetailCatalogTabContents = () => {
   return (
     <Row data-testid="budget-detail-catalog-tab-contents" ref={catalogContainerRef}>
       <Col>
-        <SearchData
-          searchFacetFilters={[...SEARCH_FACET_FILTERS]}
-        >
-          <InstantSearch
-            indexName={configuration.ALGOLIA.INDEX_NAME}
-            searchClient={searchClient}
-          >
-            <CatalogSearch />
-          </InstantSearch>
+        <SearchData searchFacetFilters={[...SEARCH_FACET_FILTERS]}>
+          <CatalogSearch />
         </SearchData>
       </Col>
     </Row>

src/components/learner-credit-management/data/hooks/useEnterpriseGroup.js renamed to src/components/learner-credit-management/data/hooks/useEnterpriseGroup.ts

@@ -3,25 +3,23 @@ import isEmpty from 'lodash/isEmpty';
 
 import { learnerCreditManagementQueryKeys } from '../constants';
 import LmsApiService from '../../../../data/services/LmsApiService';
+import { SubsidyAccessPolicy } from '../types';
 
 /**
  * Retrieves a enterprise group by the policy the  from the API.
- *
- * @param {*} queryKey The queryKey from the associated `useQuery` call.
  * @returns The enterprise group object
  */
-const getEnterpriseGroup = async ({ subsidyAccessPolicy }) => {
-  if (isEmpty(subsidyAccessPolicy?.groupAssociations)) {
+const getEnterpriseGroup = async ({ subsidyAccessPolicy }: { subsidyAccessPolicy?: SubsidyAccessPolicy }) => {
+  if (!subsidyAccessPolicy || isEmpty(subsidyAccessPolicy.groupAssociations)) {
     return null;
   }
   const response = await LmsApiService.fetchEnterpriseGroup(subsidyAccessPolicy.groupAssociations[0]);
   return response.data;
 };
 
-const useEnterpriseGroup = (subsidyAccessPolicy, { queryOptions } = {}) => useQuery({
+const useEnterpriseGroup = (subsidyAccessPolicy: SubsidyAccessPolicy | undefined) => useQuery({
   queryKey: learnerCreditManagementQueryKeys.group(subsidyAccessPolicy?.uuid),
   queryFn: () => getEnterpriseGroup({ subsidyAccessPolicy }),
-  ...queryOptions,
 });
 
 export default useEnterpriseGroup;

src/components/learner-credit-management/data/hooks/useSubsidyAccessPolicy.js renamed to src/components/learner-credit-management/data/hooks/useSubsidyAccessPolicy.ts

@@ -1,9 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
+import type { AxiosResponse } from 'axios';
 
 import EnterpriseAccessApiService from '../../../../data/services/EnterpriseAccessApiService';
 import { learnerCreditManagementQueryKeys } from '../constants';
 import { isAssignableSubsidyAccessPolicyType } from '../../../../utils';
+import { SubsidyAccessPolicy } from '../types';
 
 /**
  * Retrieves a subsidy access policy by UUID from the API.
@@ -13,17 +15,16 @@ import { isAssignableSubsidyAccessPolicyType } from '../../../../utils';
  */
 const getSubsidyAccessPolicy = async ({ queryKey }) => {
   const subsidyAccessPolicyUUID = queryKey[2];
-  const response = await EnterpriseAccessApiService.retrieveSubsidyAccessPolicy(subsidyAccessPolicyUUID);
-  const subsidyAccessPolicy = camelCaseObject(response.data);
+  const response: AxiosResponse = await EnterpriseAccessApiService.retrieveSubsidyAccessPolicy(subsidyAccessPolicyUUID);
+  const subsidyAccessPolicy: SubsidyAccessPolicy = camelCaseObject(response.data);
   subsidyAccessPolicy.isAssignable = isAssignableSubsidyAccessPolicyType(subsidyAccessPolicy);
   return subsidyAccessPolicy;
 };
 
-const useSubsidyAccessPolicy = (subsidyAccessPolicyId, { queryOptions } = {}) => useQuery({
+const useSubsidyAccessPolicy = (subsidyAccessPolicyId) => useQuery({
   queryKey: learnerCreditManagementQueryKeys.budget(subsidyAccessPolicyId),
   queryFn: getSubsidyAccessPolicy,
   enabled: !!subsidyAccessPolicyId,
-  ...queryOptions,
 });
 
 export default useSubsidyAccessPolicy;

src/components/learner-credit-management/data/types.ts

@@ -0,0 +1,9 @@
+export type SubsidyAccessPolicy = {
+  uuid: string;
+  displayName: string;
+  isAssignable: boolean;
+  policyType: string;
+  assignmentConfiguration: Record<string, string>;
+  catalogUuid: string;
+  groupAssociations: string[];
+};

src/components/learner-credit-management/search/CatalogSearch.jsx

@@ -0,0 +1,111 @@
+import { Skeleton } from '@openedx/paragon';
+import { Configure, InstantSearch } from 'react-instantsearch-dom';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { SearchHeader } from '@edx/frontend-enterprise-catalog-search';
+
+import { configuration } from '../../../config';
+import CatalogSearchResults from './CatalogSearchResults';
+import {
+  SEARCH_RESULT_PAGE_SIZE, useBudgetId, useEnterpriseGroup, useSubsidyAccessPolicy,
+} from '../data';
+import { SearchUnavailableAlert, withAlgoliaSearch, type UseAlgoliaSearchResult } from '../../algolia-search';
+import { SubsidyAccessPolicy } from '../data/types';
+
+interface CatalogSearchProps {
+  algolia: UseAlgoliaSearchResult
+}
+
+/**
+ * Returns the filters to be used in the Algolia search.
+ *
+ * If the catalog query filters are enabled and we have the mappings of catalog<>query, the returned
+ * filters use the catalog query UUIDs.
+ *
+ * Otherwise, the filters use the catalog UUIDs.
+ */
+function useAlgoliaFilters(subsidyAccessPolicy: SubsidyAccessPolicy, algolia: UseAlgoliaSearchResult) {
+  let baseFilters = '';
+  if (algolia.isCatalogQueryFiltersEnabled && algolia.catalogUuidsToCatalogQueryUuids) {
+    baseFilters += `enterprise_catalog_query_uuids:${algolia.catalogUuidsToCatalogQueryUuids[subsidyAccessPolicy.catalogUuid]}`;
+  } else {
+    baseFilters += `enterprise_catalog_uuids:${subsidyAccessPolicy.catalogUuid}`;
+  }
+  baseFilters += ' AND content_type:course';
+  return baseFilters;
+}
+
+export const CatalogSearch = ({ algolia }: CatalogSearchProps) => {
+  const { subsidyAccessPolicyId } = useBudgetId();
+  const subsidyAccessPolicyResult = useSubsidyAccessPolicy(subsidyAccessPolicyId);
+  const subsidyAccessPolicy = subsidyAccessPolicyResult.data!;
+  const searchFilters = useAlgoliaFilters(subsidyAccessPolicy, algolia);
+
+  const { data: enterpriseGroup } = useEnterpriseGroup(subsidyAccessPolicy);
+
+  if (algolia.isCatalogQueryFiltersEnabled && algolia.isLoading) {
+    return (
+      <div data-testid="catalog-search-loading">
+        <Skeleton height={360} />
+        <span className="sr-only">
+          <FormattedMessage
+            id="catalogs.enterpriseCatalogs.loading"
+            defaultMessage="Loading catalog..."
+            description="Loading message for the catalog search."
+          />
+        </span>
+      </div>
+    );
+  }
+
+  if (!algolia.searchClient) {
+    return <SearchUnavailableAlert />;
+  }
+
+  const showSubtitle = subsidyAccessPolicy?.groupAssociations?.length > 0 && !enterpriseGroup?.appliesToAllContexts;
+
+  return (
+    <section>
+      {(
+        subsidyAccessPolicy.displayName ? (
+          <FormattedMessage
+            id="catalogs.enterpriseCatalogs.header.subsidyAccessPolicyName"
+            defaultMessage="{subsidyAccessPolicyName} catalog"
+            description="Search dialogue message with subsidy access policy name."
+            tagName="h3"
+            values={{ subsidyAccessPolicyName: subsidyAccessPolicy.displayName }}
+          />
+        ) : (
+          <FormattedMessage
+            id="catalogs.enterpriseCatalogs.header"
+            defaultMessage="Overview"
+            description="Search dialogue."
+            tagName="h3"
+          />
+        )
+      )}
+      {showSubtitle && (
+        <p>Members of this budget will be able to browse and enroll the content in this catalog.</p>
+      )}
+      <InstantSearch
+        indexName={configuration.ALGOLIA.INDEX_NAME!}
+        searchClient={algolia.searchClient}
+      >
+        <div className="enterprise-catalogs-header">
+          <Configure
+            filters={searchFilters}
+            facetingAfterDistinct
+            hitsPerPage={SEARCH_RESULT_PAGE_SIZE}
+          />
+          <SearchHeader
+            hideTitle
+            variant="default"
+            disableSuggestionRedirect
+          />
+        </div>
+        <CatalogSearchResults />
+      </InstantSearch>
+    </section>
+  );
+};
+
+export default withAlgoliaSearch(CatalogSearch);