feat: add display name in heading of catalog tab (#1074)

* feat: display search result cards in catalog tab

* fix: failing test in BudgetDetailPage

* fix: replace word register with enroll

* fix: implemented reviewer comments

* fix: lint error

* fix: lint error

* feat: added policy's catalog uuid to search filter

* feat: implement view course button to learn more

* fix: failing test

* fix: added test

* fix: added test coverage

* fix: refactored based on reviewer feedback

* fix: lint error

* fix: refactored code to include new api field and updated test

* fix: removing unused prop in test

* fix: refactored

* fix: search filters

* chore: rebase

* feat: add display name

* chore: refactored

* chore: fix lint error

* chore: refactored

* fix: refactored and updated test

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

@@ -16,12 +16,13 @@ const CatalogSearch = () => {
     data: subsidyAccessPolicy,
   } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
   const searchFilters = `enterprise_catalog_uuids:${subsidyAccessPolicy.catalogUuid} AND content_type:course`;
+  const displayName = subsidyAccessPolicy.displayName ? `${subsidyAccessPolicy.displayName} catalog` : 'Overview';
 
   return (
     <section>
       <FormattedMessage
         id="catalogs.enterpriseCatalogs.header"
-        defaultMessage="Budget associated catalog"
+        defaultMessage={displayName}
         description="Search dialogue."
         tagName="h3"
       />

src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx

@@ -502,23 +502,27 @@ describe('<BudgetDetailPage />', () => {
     expect(modalPopupContents.getByText(expectedModalPopupContent, { exact: false })).toBeInTheDocument();
   });
 
-  it('renders with catalog tab active on initial load for assignable budgets', async () => {
+  it.each([
+    { displayName: null },
+    { displayName: 'Test Budget Display Name' },
+  ])('renders with catalog tab active on initial load for assignable budgets with %s display name', ({ displayName }) => {
     useParams.mockReturnValue({
       budgetId: mockSubsidyAccessPolicyUUID,
       activeTabKey: 'catalog',
     });
     useSubsidyAccessPolicy.mockReturnValue({
       isInitialLoading: false,
-      data: mockAssignableSubsidyAccessPolicy,
+      data: { ...mockAssignableSubsidyAccessPolicy, displayName },
     });
     useBudgetDetailActivityOverview.mockReturnValueOnce({
       isLoading: false,
       data: mockEmptyStateBudgetDetailActivityOverview,
     });
     renderWithRouter(<BudgetDetailPageWrapper />);
-
+    const expectedDisplayName = displayName ? `${displayName} catalog` : 'Overview';
     // Catalog tab exists and is active
     expect(screen.getByText('Catalog').getAttribute('aria-selected')).toBe('true');
+    expect(screen.getByText(expectedDisplayName, { selector: 'h3' }));
   });
 
   it('hides catalog tab when budget is not assignable', () => {