feat: added video in learning type facet (#401)

openedx · Jul 12, 2024 · fea3bbd · fea3bbd
1 parent 798974b
commit fea3bbd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/packages/catalog-search/src/LearningTypeRadioFacet.jsx b/packages/catalog-search/src/LearningTypeRadioFacet.jsx
@@ -8,7 +8,9 @@ import {
   setRefinementAction,
 } from './data/actions';
 import { features } from './config';
-import { LEARNING_TYPE_COURSE, LEARNING_TYPE_PROGRAM, LEARNING_TYPE_PATHWAY } from './data/constants';
+import {
+  LEARNING_TYPE_COURSE, LEARNING_TYPE_PROGRAM, LEARNING_TYPE_PATHWAY, LEARNING_TYPE_VIDEO,
+} from './data/constants';
 
 const LearningTypeRadioFacet = ({ enablePathways }) => {
   const { refinements, dispatch } = useContext(SearchContext);
@@ -17,7 +19,8 @@ const LearningTypeRadioFacet = ({ enablePathways }) => {
   const typeCourseSelected = refinements.content_type && refinements.content_type.includes(LEARNING_TYPE_COURSE);
   const typeProgramSelected = refinements.content_type && refinements.content_type.includes(LEARNING_TYPE_PROGRAM);
   const typePathwaySelected = refinements.content_type && refinements.content_type.includes(LEARNING_TYPE_PATHWAY);
-  const boldTitle = typeCourseSelected || typeProgramSelected || typePathwaySelected;
+  const typeVideoSelected = refinements.content_type && refinements.content_type.includes(LEARNING_TYPE_VIDEO);
+  const boldTitle = typeCourseSelected || typeProgramSelected || typePathwaySelected || typeVideoSelected;
 
   const handleInputOnChange = (type) => {
     if (type === '') {
@@ -112,6 +115,25 @@ const LearningTypeRadioFacet = ({ enablePathways }) => {
               </Dropdown.Item>
             )
           }
+          {features.ENABLE_VIDEO_CATALOG
+            && (
+              <Dropdown.Item as="label" className="mb-0 py-3 d-flex align-items-center">
+                <Input
+                  type="radio"
+                  checked={typeVideoSelected}
+                  className="facet-item position-relative mr-2 mb-2"
+                  onChange={() => handleInputOnChange(LEARNING_TYPE_VIDEO)}
+                  data-testid="learning-type-videos"
+                />
+                <span className={classNames('facet-item-label', { 'is-refined': typeVideoSelected })}>
+                  <FormattedMessage
+                    id="search.facetFilters.learningType.videos"
+                    defaultMessage="Videos"
+                    description="Title for the learning type facet filter to return videos only"
+                  />
+                </span>
+              </Dropdown.Item>
+            )}
         </Dropdown.Menu>
       </Dropdown>
     </div>

diff --git a/packages/catalog-search/src/config/index.js b/packages/catalog-search/src/config/index.js
@@ -6,6 +6,7 @@ export const FEATURE_PROGRAM_TITLES_FACET = 'PROGRAM_TITLES_FACET';
 export const LEARNING_TYPE_FACET = 'LEARNING_TYPE_FACET';
 export const FEATURE_ENABLE_PATHWAYS = 'ENABLE_PATHWAYS';
 export const FEATURE_SUBTITLE_FACET = 'SUBTITLE_FACET';
+export const FEATURE_ENABLE_VIDEO_CATALOG = 'FEATURE_ENABLE_VIDEO_CATALOG';
 
 // eslint-disable-next-line import/prefer-default-export
 export const features = {
@@ -23,4 +24,7 @@ export const features = {
   SUBTITLE_FACET: (
     process.env.FEATURE_SUBTITLE_FACET || hasFeatureFlagEnabled(FEATURE_SUBTITLE_FACET)
   ),
+  ENABLE_VIDEO_CATALOG: (
+    process.env.FEATURE_ENABLE_VIDEO_CATALOG || hasFeatureFlagEnabled(FEATURE_ENABLE_VIDEO_CATALOG)
+  ),
 };
diff --git a/packages/catalog-search/src/data/constants.js b/packages/catalog-search/src/data/constants.js
@@ -105,6 +105,7 @@ export const STYLE_VARIANTS = {
 export const LEARNING_TYPE_COURSE = 'course';
 export const LEARNING_TYPE_PROGRAM = 'program';
 export const LEARNING_TYPE_PATHWAY = 'learnerpathway';
+export const LEARNING_TYPE_VIDEO = 'video';
 export const LEARNING_TYPE_EXECUTIVE_EDUCATION = 'Executive Education';
 
 export const COURSE_TYPE_EXECUTIVE_EDUCATION = 'executive-education-2u';

diff --git a/packages/catalog-search/src/messages.js b/packages/catalog-search/src/messages.js
@@ -3,6 +3,7 @@ import {
   LEARNING_TYPE_PATHWAY,
   LEARNING_TYPE_COURSE,
   LEARNING_TYPE_PROGRAM,
+  LEARNING_TYPE_VIDEO,
 } from './data/constants';
 
 const AVAILABILITY_AVAILABLE_NOW = 'Available Now';
@@ -52,6 +53,11 @@ const messages = defineMessages({
     defaultMessage: 'Pathway',
     description: 'Title for the pathway filter.',
   },
+  [LEARNING_TYPE_VIDEO]: {
+    id: 'search.facetFilters.filterTitle.video',
+    defaultMessage: 'Video',
+    description: 'Title for the video filter.',
+  },
   [AVAILABILITY_AVAILABLE_NOW]: {
     id: 'search.facetFilters.availability.availableNow',
     defaultMessage: 'Available Now',