feat: added waffle flag state for Courseware Search

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Icon } from '@edx/paragon';
+import { Search } from '@edx/paragon/icons';
+import { useModel } from '../../generic/model-store';
+import messages from './messages';
+
+const CoursewareSearch = ({ intl, ...rest }) => {
+  const { courseId } = useParams();
+  const { enabled } = useModel('coursewareSearch', courseId);
+
+  if (!enabled) { return null; }
+
+  return (
+    <Button variant="tertiary" size="sm" className="p-1 mt-2 mr-2 rounded-lg" aria-label={intl.formatMessage(messages.searchOpenAction)} data-testid="courseware-search-button" {...rest}>
+      <Icon src={Search} />
+    </Button>
+  );
+};
+
+CoursewareSearch.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearch);

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  initializeMockApp,
+  render,
+  screen,
+} from '../../setupTest';
+import { useModel } from '../../generic/model-store';
+import { CoursewareSearch } from './index';
+
+jest.mock('../../generic/model-store', () => ({
+  useModel: jest.fn(),
+}));
+
+function renderComponent() {
+  const { container } = render(<CoursewareSearch />);
+  return container;
+}
+
+describe('CoursewareSearch', () => {
+  beforeAll(async () => {
+    initializeMockApp();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('When rendered by default', () => {
+    beforeEach(() => {
+      useModel.mockReturnValue({ enabled: false });
+      renderComponent();
+    });
+
+    it('Should not show', () => {
+      expect(screen.queryByTestId('courseware-search-button')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('When rendered with the waffle flag enabled', () => {
+    beforeEach(() => {
+      useModel.mockReturnValue({ enabled: true });
+      renderComponent();
+    });
+
+    it('Should show', () => {
+      expect(screen.getByTestId('courseware-search-button')).toBeInTheDocument();
+    });
+  });
+});

src/course-home/courseware-search/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as CoursewareSearch } from './CoursewareSearch';

src/course-home/courseware-search/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  searchOpenAction: {
+    id: 'learn.coursewareSerch.openAction',
+    defaultMessage: 'Search within this course',
+    description: 'Aria-label for a button that will pop up Courseware Search.',
+  },
+});
+
+export default messages;

src/course-home/data/api.js

@@ -445,3 +445,9 @@ export async function unsubscribeFromCourseGoal(token) {
   return getAuthenticatedHttpClient().post(url.href)
     .then(res => camelCaseObject(res));
 }
+
+export async function getCoursewareSearchEnabledFlag(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware-search/enabled/`;
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return { enabled: data.enabled || false };
+}

src/course-home/data/thunks.js

@@ -12,6 +12,7 @@ import {
   postDismissWelcomeMessage,
   postRequestCert,
   getLiveTabIframe,
+  getCoursewareSearchEnabledFlag,
 } from './api';
 
 import {
@@ -52,6 +53,16 @@ export function fetchTab(courseId, tab, getTabData, targetUserId) {
           },
         }));
       }
+
+      const { enabled } = await getCoursewareSearchEnabledFlag(courseId);
+      dispatch(addModel({
+        modelType: 'coursewareSearch',
+        model: {
+          id: courseId,
+          enabled,
+        },
+      }));
+
       // Disable the access-denied path for now - it caused a regression
       if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
         dispatch(fetchTabDenied({ courseId }));

src/course-tabs/CourseTabsNavigation.jsx

@@ -5,11 +5,15 @@ import classNames from 'classnames';
 
 import messages from './messages';
 import Tabs from '../generic/tabs/Tabs';
+import { CoursewareSearch } from '../course-home/courseware-search';
 
 const CourseTabsNavigation = ({
   activeTabSlug, className, tabs, intl,
 }) => (
   <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
+    <div className="float-right">
+      <CoursewareSearch data-testid="courseware-search" />
+    </div>
     <div className="container-xl">
       <Tabs
         className="nav-underline-tabs"

src/course-tabs/CourseTabsNavigation.test.jsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { initializeMockApp, render, screen } from '../setupTest';
 import { CourseTabsNavigation } from './index';
+import { useModel } from '../generic/model-store';
+
+jest.mock('../generic/model-store', () => ({
+  useModel: jest.fn(),
+}));
 
 describe('Course Tabs Navigation', () => {
   beforeAll(async () => {
+    useModel.mockReturnValue({ enabled: false });
     initializeMockApp();
   });
 
@@ -29,4 +35,17 @@ describe('Course Tabs Navigation', () => {
     expect(screen.getByRole('link', { name: tabs[1].title })).toHaveAttribute('href', tabs[1].url);
     expect(screen.getByRole('link', { name: tabs[1].title })).not.toHaveClass('active');
   });
+
+  it('does not render the CoursewareSearch component by default', () => {
+    render(<CourseTabsNavigation tabs={[]} />);
+
+    expect(screen.queryByTestId('courseware-search')).not.toBeInTheDocument();
+  });
+
+  it('renders the CoursewareSearch component if the waffle flag is enabled', () => {
+    useModel.mockReturnValue({ enabled: true });
+    render(<CourseTabsNavigation tabs={[]} />);
+
+    expect(screen.getByTestId('courseware-search')).toBeInTheDocument();
+  });
 });