feat: Added CoursewareSearchResults UI component

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
@@ -10,15 +10,27 @@ import { useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
 
 import CoursewareSearchForm from './CoursewareSearchForm';
+import CoursewareSearchResults from './CoursewareSearchResults';
+import mockedData from './test-data/mockedResults';
 
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
+  const [results, setResults] = useState();
   const dispatch = useDispatch();
 
   useLockScroll();
 
   const info = useElementBoundingBox('courseTabsNavigation');
   const top = info ? `${Math.floor(info.top)}px` : 0;
 
+  const handleSubmit = (search) => {
+    if (!search) {
+      setResults(undefined);
+      return;
+    }
+
+    setResults(search.toLowerCase() !== 'lorem ipsum' ? mockedData : []);
+  };
+
   return (
     <section className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-section" {...sectionProps}>
       <div className="courseware-search__close">
@@ -32,60 +44,15 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
         </Button>
       </div>
       <div className="courseware-search__outer-content">
-        <div className="courseware-search__content" style={{ height: '999px' }}>
+        <div className="courseware-search__content">
+          <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
           <CoursewareSearchForm
+            onSubmit={handleSubmit}
             placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
           />
-          <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,
-            ultricies vel massa.Aliquam in vehicula dolor, id scelerisque felis.
-            Morbi posuere scelerisque tincidunt. Proin et gravida tortor. Vestibulum vel orci vulputate,
-            gravida justo eu, varius dolor. Etiam viverra diam sed est tincidunt, et aliquam est efficitur.
-            Donec imperdiet eros quis est condimentum faucibus.
-          </p>
-          <p>
-            In mattis, tellus ut lacinia viverra, ligula ex sagittis ex, sed mollis ex enim ut velit.
-            Nunc elementum, risus eget feugiat scelerisque, sapien felis laoreet nisl, ut pharetra neque
-            lorem a elit. Maecenas elementum, metus fringilla suscipit imperdiet, mi nunc efficitur elit,
-            sed consequat massa magna sit amet dui. Curabitur ultrices nisi vel lorem scelerisque, pharetra
-            luctus nunc pulvinar. Morbi aliquam ante eget arcu condimentum consectetur. Fusce faucibus lacus
-            sed pretium ultrices. Curabitur neque lacus, elementum convallis augue placerat, gravida
-            scelerisque ipsum. Donec bibendum lectus id ullamcorper sodales. Integer quis ante facilisis erat
-            maximus viverra. Nunc rutrum posuere lectus, aliquam congue odio blandit nec. Phasellus placerat,
-            magna non bibendum lacinia, tortor orci vulputate dui, vitae imperdiet turpis dui nec tortor.
-            Praesent porttitor mollis diam ut gravida. Praesent vitae felis dignissim sem accumsan dignissim.
-            Fusce ullamcorper bibendum ante ac pellentesque. Aliquam sed leo vel leo pellentesque cursus a at risus.
-            Donec sollicitudin maximus diam, sit amet molestie sapien commodo at.
-          </p>
-          <p>
-            Cras ornare pulvinar est id rhoncus. Aenean ut risus magna. Fusce cursus pulvinar dui ut egestas.
-            Quisque condimentum risus non mi sagittis, eu facilisis enim hendrerit. Integer faucibus dapibus rutrum.
-            Nullam vitae mollis tortor, eu lacinia mi. Nunc commodo ex id eros hendrerit, vel interdum augue tristique.
-            Suspendisse ullamcorper, purus in vestibulum auctor, justo nisi finibus dolor,
-            nec dignissim arcu enim a augue.
-          </p>
-          <p>
-            Fusce vel libero odio. Orci varius natoque penatibus et magnis dis parturient montes,
-            nascetur ridiculus mus. Pellentesque at varius turpis. Ut pulvinar efficitur congue. Vivamus cursus,
-            purus at aliquet malesuada, felis quam blandit dolor, a interdum justo est semper augue.
-            In eu lectus sit amet est pellentesque porta vel eget magna. Morbi sollicitudin turpis vitae faucibus
-            pulvinar. Etiam placerat pulvinar porta.
-          </p>
-          <p>
-            Suspendisse mattis eget felis non sagittis. Nulla facilisi. In bibendum cursus purus, non venenatis tellus
-            dignissim sit amet. Phasellus volutpat ipsum turpis, non imperdiet nisi elementum a. Nunc mollis, sapien
-            cursus vehicula consectetur, nunc turpis pulvinar mauris, at varius justo mi egestas nisi. Fusce semper
-            sapien in orci rhoncus ornare. Donec maximus mi eu pulvinar convallis.
-          </p>
-          <p>
-            Nullam tortor sem, hendrerit eu sapien ac, venenatis rhoncus ligula. Donec nibh leo, venenatis sed interdum
-            ac, pharetra sed nibh. Orci varius natoque penatibus et magnis dis parturient montes,
-            nascetur ridiculus mus. Sed congue risus eu mattis condimentum. In id nulla sit amet magna suscipit
-            consectetur. Nullam vitae augue felis. In consequat tempus diam, a eleifend ante bibendum ac.
-            Vivamus mi orci, fermentum ac viverra quis, tristique a ipsum. Morbi imperdiet porta sem, in sollicitudin
-            risus dignissim at. Nulla dapibus iaculis vestibulum.
-          </p>
+          {results !== undefined ? (
+            <CoursewareSearchResults results={results} />
+          ) : null}
         </div>
       </div>
     </section>

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Folder, TextFields, VideoCamera, Article,
+} from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import messages from './messages';
+
+const iconTypeMapping = {
+  document: Folder,
+  text: TextFields,
+  video: VideoCamera,
+};
+const defaultIcon = Article;
+
+const CoursewareSearchResults = ({ intl, results }) => {
+  if (!results?.length) {
+    return (
+      <div className="courseware-search-results">
+        <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="courseware-search-results" data-testid="search-results">
+      {results.map(({
+        title, href, type, breadcrumbs, contentMatches, isExternal,
+      }) => {
+        const key = type.toLowerCase();
+        const icon = iconTypeMapping[key] || defaultIcon;
+
+        const linkProps = isExternal ? {
+          href,
+          target: '_blank',
+          rel: 'nofollow',
+        } : { href };
+
+        return (
+          <a className="courseware-search-results__item" {...linkProps}>
+            <div className="courseware-search-results__icon"><Icon src={icon} /></div>
+            <div className="courseware-search-results__info">
+              <div className="courseware-search-results__title">
+                <span>{title}</span>
+                {contentMatches ? (<em>{contentMatches}</em>) : null }
+              </div>
+              {breadcrumbs?.length ? (
+                <ul className="courseware-search-results__breadcrumbs">
+                  {breadcrumbs.map(bc => (<li><div>{bc}</div></li>))}
+                </ul>
+              ) : null}
+            </div>
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+CoursewareSearchResults.propTypes = {
+  intl: intlShape.isRequired,
+  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,
+  })),
+};
+
+CoursewareSearchResults.defaultProps = {
+  results: [],
+};
+
+export default injectIntl(CoursewareSearchResults);

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  initializeMockApp,
+  render,
+  screen,
+} from '../../setupTest';
+import CoursewareSearchResults from './CoursewareSearchResults';
+import messages from './messages';
+import mockedData from './test-data/mockedResults';
+
+jest.mock('react-redux');
+
+function renderComponent({ results }) {
+  const { container } = render(<CoursewareSearchResults results={results} />);
+  return container;
+}
+
+describe('CoursewareSearchResults', () => {
+  beforeAll(async () => {
+    initializeMockApp();
+  });
+
+  describe('when an empty array is provided', () => {
+    beforeEach(() => { renderComponent({ results: [] }); });
+
+    it('should render a "no results found" message.', () => {
+      expect(screen.getByTestId('no-results').textContent).toBe(messages.searchResultsNone.defaultMessage);
+    });
+  });
+
+  describe('when list of results is provided', () => {
+    beforeEach(() => { renderComponent({ results: mockedData }); });
+
+    it('should match the snapshot', () => {
+      expect(screen.getByTestId('search-results')).toMatchSnapshot();
+    });
+  });
+});