[KBK-43] Add Courseware search - tabbed filters

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Tabs, Tab } from '@edx/paragon';
+
+import CoursewareSearchResultPropType from './CoursewareSearchResult.PropTypeDefinition';
+// TODO IN KBK-44: import CoursewareSearchResults from "./CoursewareSearchResults"
+
+export const filteredResultsBySelection = ({ filterKey = 'all', results = [] }) => {
+  if (['document', 'video', 'text'].includes(filterKey)) {
+    return results.filter(result => result?.type?.toLowerCase() === filterKey);
+  }
+
+  return results;
+};
+
+const tabConfiguration = [
+  { eventKey: 'all', title: 'All content' },
+  { eventKey: 'course_outline', title: 'Course outline' },
+  { eventKey: 'text', title: 'Text' },
+  { eventKey: 'video', title: 'Video' },
+];
+
+// TODO: remove comment on next line once KBK-44 is available
+export const CoursewareSearchResultsFilter = ({ intl, results }) => { // eslint-disable-line no-unused-vars
+  if (!results || !results.length) { return null; }
+
+  return (
+    <Tabs id="courseware-search-results-tabs" data-testid="courseware-search-results-tabs" variant="tabs" defaultActiveKey="all">
+      {tabConfiguration.map((tab) => (
+        <Tab {...tab} key={tab.eventKey}>
+          {/* <CoursewareSearchResults
+              intl={intl}
+              results={filteredResultsBySelection({ filterKey: tab.eventKey, results })}
+            /> */}
+        </Tab>
+      ))}
+    </Tabs>
+  );
+};
+
+CoursewareSearchResultsFilter.propTypes = {
+  intl: intlShape.isRequired,
+  results: PropTypes.arrayOf(CoursewareSearchResultPropType),
+};
+
+CoursewareSearchResultsFilter.defaultProps = {
+  results: [],
+};
+
+export default injectIntl(CoursewareSearchResultsFilter);

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import {
+  initializeMockApp,
+  render,
+  screen,
+  waitFor,
+} from '../../setupTest';
+import { CoursewareSearchResultsFilter, filteredResultsBySelection } from './CoursewareResultsFilter';
+
+const mockResults = [
+  { type: 'video', title: 'video_title' },
+  { type: 'video', title: 'video_title2' },
+  { type: 'document', title: 'document_title' },
+  { type: 'text', title: 'text_title1' },
+  { type: 'text', title: 'text_title2' },
+  { type: 'text', title: 'text_title3' },
+];
+
+describe('CoursewareSearchResultsFilter', () => {
+  beforeAll(initializeMockApp);
+
+  describe('filteredResultsBySelection', () => {
+    it('returns a no values array when no results are provided', () => {
+      const results = filteredResultsBySelection({ results: [] });
+
+      expect(results.length).toEqual(0);
+    });
+
+    it('returns all values when no key value is provided', () => {
+      const results = filteredResultsBySelection({ results: mockResults });
+
+      expect(results.length).toEqual(mockResults.length);
+    });
+
+    it('returns all values when the key value "all" is provided', () => {
+      const results = filteredResultsBySelection({ filterKey: 'all', results: mockResults });
+
+      expect(results.length).toEqual(mockResults.length);
+    });
+
+    it('returns only "video"-typed elements when the key value "video" is given', () => {
+      const results = filteredResultsBySelection({ filterKey: 'video', results: mockResults });
+
+      expect(results.length).toEqual(2);
+    });
+
+    it('returns only "course_outline"-typed elements when the key value "document" is given', () => {
+      const results = filteredResultsBySelection({ filterKey: 'document', results: mockResults });
+
+      expect(results.length).toEqual(1);
+    });
+
+    it('returns only "text"-typed elements when the key value "text" is given', () => {
+      const results = filteredResultsBySelection({ filterKey: 'text', results: mockResults });
+
+      expect(results.length).toEqual(3);
+    });
+  });
+
+  describe('</CoursewareSearchResultsFilter />', () => {
+    it('should render', async () => {
+      await render(<CoursewareSearchResultsFilter results={mockResults} />);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('courseware-search-results-tabs')).toBeInTheDocument();
+        expect(screen.queryByText(/All content/)).toBeInTheDocument();
+        expect(screen.queryByText(/Course outline/)).toBeInTheDocument();
+        expect(screen.queryByText(/Text/)).toBeInTheDocument();
+        expect(screen.queryByText(/Video/)).toBeInTheDocument();
+      });
+    });
+
+    it('should not render if no results are provided', async () => {
+      await render(<CoursewareSearchResultsFilter results={[]} />);
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('courseware-search-results-tabs')).not.toBeInTheDocument();
+        expect(screen.queryByText(/All content/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Course outline/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Text/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Video/)).not.toBeInTheDocument();
+      });
+    });
+  });
+});

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

@@ -10,6 +10,7 @@ import { useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
 
 import CoursewareSearchForm from './CoursewareSearchForm';
+import CoursewareSearchResultsFilterContainer from './CoursewareResultsFilter';
 
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
   const dispatch = useDispatch();
@@ -36,6 +37,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
           <CoursewareSearchForm
             placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
           />
+          <CoursewareSearchResultsFilterContainer results={[/* results set goes here */]} />
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper rutrum odio quis congue.
             Duis sodales nibh et sapien elementum fermentum. Quisque magna urna, gravida at gravida et,

src/course-home/courseware-search/CoursewareSearchResult.PropTypeDefinition.jsx

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export default {
+  results: PropTypes.arrayOf(PropTypes.objectOf({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    type: PropTypes.string,
+    breadcrumbs: PropTypes.arrayOf(PropTypes.string),
+    contentMatches: PropTypes.number,
+    isExternal: PropTypes.bool,
+  })),
+};