feat: extend BFF feature flag to take into account Waffle flag (#1239)

src/components/NotFoundPage/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { Container } from '@openedx/paragon';

src/components/TagCloud/index.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Chip } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';

src/components/Toasts/Toasts.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { Toast } from '@openedx/paragon';
 
 import { ToastsContext } from './ToastsProvider';

src/components/Toasts/Toasts.test.jsx

@@ -1,7 +1,4 @@
-import React from 'react';
-import {
-  render, screen, act,
-} from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import userEvent from '@testing-library/user-event';
 import ToastsProvider, { ToastsContext } from './ToastsProvider';

src/components/Toasts/ToastsProvider.jsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   useState,
   useMemo,

src/components/academies/AcademyContentCard.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Button,
   CardGrid,

src/components/academies/AcademyDetailPage.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   Container, Breadcrumb,
 } from '@openedx/paragon';

src/components/academies/GoToAcademy.jsx

@@ -1,9 +1,7 @@
 import { Link } from 'react-router-dom';
 import { Button } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import React from 'react';
-import useEnterpriseCustomer from '../app/data/hooks/useEnterpriseCustomer';
-import { useAcademies } from '../app/data';
+import { useEnterpriseCustomer, useAcademies } from '../app/data';
 
 const GoToAcademy = () => {
   const { data: academies } = useAcademies();

src/components/academies/PathwaysSection.jsx

@@ -1,5 +1,4 @@
 import { Button, Container, useToggle } from '@openedx/paragon';
-import React from 'react';
 import PropTypes from 'prop-types';
 import DOMPurify from 'dompurify';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';

src/components/academies/tests/AcademyDetailPage.test.jsx

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import '@testing-library/jest-dom/extend-expect';

src/components/academies/tests/PathwaysSection.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';

src/components/app/Layout.test.jsx

@@ -9,7 +9,7 @@ import '@testing-library/jest-dom/extend-expect';
 
 import Layout from './Layout';
 import { queryClient, renderWithRouterProvider } from '../../utils/tests';
-import { useEnterpriseCustomer } from './data';
+import { useEnterpriseCustomer, useIsBFFEnabled } from './data';
 import { authenticatedUserFactory, enterpriseCustomerFactory } from './data/services/data/__factories__';
 
 const mockEnterpriseCustomer = enterpriseCustomerFactory();
@@ -49,6 +49,7 @@ jest.mock('../../utils/common', () => ({
 jest.mock('./data', () => ({
   ...jest.requireActual('./data'),
   useEnterpriseCustomer: jest.fn(),
+  useIsBFFEnabled: jest.fn(),
 }));
 
 const LayoutWrapper = ({
@@ -67,6 +68,7 @@ describe('Layout', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer });
+    useIsBFFEnabled.mockReturnValue(false);
   });
 
   it('renders the not found page when the user is not linked to an enterprise customer', () => {
@@ -103,43 +105,61 @@ describe('Layout', () => {
       maintenanceMessage: undefined,
       maintenanceStartTimestamp: undefined,
       maintenanceEndTimestamp: undefined,
+      isBFFEnabled: false,
+    },
+    {
+      isSystemMaintenanceAlertOpen: false,
+      maintenanceMessage: undefined,
+      maintenanceStartTimestamp: undefined,
+      maintenanceEndTimestamp: undefined,
+      isBFFEnabled: true,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: undefined,
       maintenanceEndTimestamp: undefined,
+      isBFFEnabled: false,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
       maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
+      isBFFEnabled: false,
     },
     {
       isSystemMaintenanceAlertOpen: false,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
       maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
+      isBFFEnabled: false,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: undefined,
       maintenanceEndTimestamp: dayjs().add(2, 'm').toISOString(),
+      isBFFEnabled: false,
     },
     {
       isSystemMaintenanceAlertOpen: true,
       maintenanceMessage: 'Hello World!',
       maintenanceStartTimestamp: dayjs().subtract(1, 'm').toISOString(),
       maintenanceEndTimestamp: undefined,
+      isBFFEnabled: false,
     },
   ])('renders with enterprise customer (%s)', ({
     isSystemMaintenanceAlertOpen,
     maintenanceMessage,
     maintenanceStartTimestamp,
     maintenanceEndTimestamp,
+    isBFFEnabled,
   }) => {
+    // Mock the BFF-enabled status
+    useIsBFFEnabled.mockReturnValue(isBFFEnabled);
+
+    // Merge the config values related to maintenance banner message
     if (maintenanceMessage) {
       mergeConfig({
         IS_MAINTENANCE_ALERT_ENABLED: isSystemMaintenanceAlertOpen,
@@ -151,7 +171,6 @@ describe('Layout', () => {
         MAINTENANCE_ALERT_START_TIMESTAMP: maintenanceStartTimestamp ?? '',
       });
     }
-
     if (maintenanceEndTimestamp) {
       mergeConfig({
         MAINTENANCE_ALERT_END_TIMESTAMP: maintenanceEndTimestamp ?? '',
@@ -168,7 +187,7 @@ describe('Layout', () => {
         },
       ],
     }, {
-      initialEntries: ['/test-enterprise'],
+      initialEntries: [`/${mockEnterpriseCustomer.slug}`],
     });
     expect(screen.getByTestId('site-header')).toBeInTheDocument();
     expect(screen.getByTestId('enterprise-banner')).toBeInTheDocument();
@@ -180,5 +199,9 @@ describe('Layout', () => {
     } else if (maintenanceMessage) {
       expect(screen.queryByText(maintenanceMessage)).not.toBeInTheDocument();
     }
+
+    // Verify logging service is called with the correct custom attributes
+    expect(mockSetCustomAttribute).toHaveBeenCalledWith('enterprise_customer_uuid', mockEnterpriseCustomer.uuid);
+    expect(mockSetCustomAttribute).toHaveBeenCalledWith('is_bff_enabled', isBFFEnabled);
   });
 });

src/components/app/data/hooks/index.js

@@ -47,3 +47,4 @@ export { default as useVideoDetails } from './useVideoDetails';
 export { default as useVideoCourseMetadata } from './useVideoCourseMetadata';
 export { default as useVideoCourseReviews } from './useVideoCourseReviews';
 export { default as useBFF } from './useBFF';
+export { default as useIsBFFEnabled } from './useIsBFFEnabled';

src/components/app/data/hooks/useBFF.js

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { logError } from '@edx/frontend-platform/logging';
 import useEnterpriseCustomer from './useEnterpriseCustomer';
 import { resolveBFFQuery } from '../queries';
+import useEnterpriseFeatures from './useEnterpriseFeatures';
 
 /**
  * Uses the route to determine which API call to make for the BFF
@@ -19,13 +20,17 @@ export default function useBFF({
   fallbackQueryConfig = null,
 }) {
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
+  const enterpriseFeatures = useEnterpriseFeatures();
   const { enterpriseSlug } = useParams();
   const location = useLocation();
 
   // Determine the BFF query to use based on the current location
   const matchedBFFQuery = resolveBFFQuery(
     location.pathname,
-    { enterpriseCustomerUuid: enterpriseCustomer.uuid },
+    {
+      enterpriseCustomerUuid: enterpriseCustomer.uuid,
+      enterpriseFeatures,
+    },
   );
 
   // Determine which query to call, the original hook or the new BFF