Bw/recommendations panel (#63)

Co-authored-by: Shafqat Farhan <shafqat.farhan@arbisoft.com>

src/containers/CourseFilterControls/CourseFilterControls.jsx

@@ -14,6 +14,8 @@ import {
 } from '@edx/paragon';
 import { Close, Tune } from '@edx/paragon/icons';
 
+import { hooks as appHooks } from 'data/redux';
+
 import FilterForm from './components/FilterForm';
 import SortForm from './components/SortForm';
 import useCourseFilterControlsData from './hooks';
@@ -28,6 +30,7 @@ export const CourseFilterControls = ({
   setFilters,
 }) => {
   const { formatMessage } = useIntl();
+  const hasCourses = appHooks.useHasCourses();
   const {
     isOpen,
     open,
@@ -50,6 +53,7 @@ export const CourseFilterControls = ({
         variant="outline-primary"
         iconBefore={Tune}
         onClick={open}
+        disabled={!hasCourses}
       >
         {formatMessage(messages.refine)}
       </Button>

src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -1,14 +1,23 @@
 import { shallow } from 'enzyme';
 
 import { breakpoints, useWindowSize } from '@edx/paragon';
+
+import { hooks as appHooks } from 'data/redux';
+
 import CourseFilterControls from './CourseFilterControls';
 import useCourseFilterControlsData from './hooks';
 
+jest.mock('data/redux', () => ({
+  hooks: { useHasCourses: jest.fn() },
+}));
+
 jest.mock('./hooks', () => jest.fn().mockName('useCourseFilterControlsData'));
 
 jest.mock('./components/FilterForm', () => 'FilterForm');
 jest.mock('./components/SortForm', () => 'SortForm');
 
+appHooks.useHasCourses.mockReturnValue(true);
+
 describe('CourseFilterControls', () => {
   const props = {
     sortBy: 'test-sort-by',
@@ -30,13 +39,23 @@ describe('CourseFilterControls', () => {
     handleSortChange: jest.fn().mockName('handleSortChange'),
   });
 
-  describe('snapshot', () => {
-    test('is mobile', () => {
+  describe('no courses', () => {
+    test('snapshot', () => {
+      appHooks.useHasCourses.mockReturnValueOnce(false);
+      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
+      const wrapper = shallow(<CourseFilterControls {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('mobile', () => {
+    test('snapshot', () => {
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
       const wrapper = shallow(<CourseFilterControls {...props} />);
       expect(wrapper).toMatchSnapshot();
     });
-    test('is not mobile', () => {
+  });
+  describe('is not mobile', () => {
+    test('snapshot', () => {
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
       const wrapper = shallow(<CourseFilterControls {...props} />);
       expect(wrapper).toMatchSnapshot();

src/containers/CourseFilterControls/__snapshots__/CourseFilterControls.test.jsx.snap

@@ -1,10 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseFilterControls snapshot is mobile 1`] = `
+exports[`CourseFilterControls is not mobile snapshot 1`] = `
 <div
   id="course-filter-controls"
 >
   <Button
+    disabled={false}
+    iconBefore={[MockFunction icons.Tune]}
+    onClick={[MockFunction open]}
+    variant="outline-primary"
+  >
+    Refine
+  </Button>
+  <Form>
+    <ModalPopup
+      isOpen={false}
+      onClose={[MockFunction close]}
+      placement="bottom-end"
+      positionRef="test-target"
+    >
+      <div
+        className="bg-white p-3 rounded shadow d-flex flex-row"
+        id="course-filter-controls-card"
+      >
+        <div
+          className="filter-form-col"
+        >
+          <FilterForm
+            filters={
+              Array [
+                "test-filter",
+              ]
+            }
+            handleFilterChange={[MockFunction handleFilterChange]}
+          />
+        </div>
+        <hr
+          className="h-100 bg-primary-200 mx-3 my-0"
+        />
+        <div
+          className="filter-form-col text-left m-1"
+        >
+          <SortForm
+            handleSortChange={[MockFunction handleSortChange]}
+            sortBy="test-sort-by"
+          />
+        </div>
+      </div>
+    </ModalPopup>
+  </Form>
+</div>
+`;
+
+exports[`CourseFilterControls mobile snapshot 1`] = `
+<div
+  id="course-filter-controls"
+>
+  <Button
+    disabled={false}
     iconBefore={[MockFunction icons.Tune]}
     onClick={[MockFunction open]}
     variant="outline-primary"
@@ -63,11 +116,12 @@ exports[`CourseFilterControls snapshot is mobile 1`] = `
 </div>
 `;
 
-exports[`CourseFilterControls snapshot is not mobile 1`] = `
+exports[`CourseFilterControls no courses snapshot 1`] = `
 <div
   id="course-filter-controls"
 >
   <Button
+    disabled={true}
     iconBefore={[MockFunction icons.Tune]}
     onClick={[MockFunction open]}
     variant="outline-primary"