fix: translation for header of course filter form (course status) (#289)

openedx · Feb 26, 2024 · e8660b9 · e8660b9
1 parent 99815e8
commit e8660b9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/containers/CourseFilterControls/components/FilterForm.jsx b/src/containers/CourseFilterControls/components/FilterForm.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { FilterKeys } from 'data/constants/app';
 
 import { Form } from '@edx/paragon';
 
 import Checkbox from './Checkbox';
+import messages from '../messages';
 
 export const filterOrder = [
   FilterKeys.inProgress,
@@ -18,20 +20,23 @@ export const filterOrder = [
 export const FilterForm = ({
   filters,
   handleFilterChange,
-}) => (
-  <Form.Group>
-    <div className="filter-form-heading mb-1">Course Status</div>
-    <Form.CheckboxSet
-      name="course-status-filters"
-      onChange={handleFilterChange}
-      value={filters}
-    >
-      {filterOrder.map(filterKey => (
-        <Checkbox filterKey={filterKey} key={filterKey} />
-      ))}
-    </Form.CheckboxSet>
-  </Form.Group>
-);
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Form.Group>
+      <div className="filter-form-heading mb-1">{formatMessage(messages.courseStatus)}</div>
+      <Form.CheckboxSet
+        name="course-status-filters"
+        onChange={handleFilterChange}
+        value={filters}
+      >
+        {filterOrder.map(filterKey => (
+          <Checkbox filterKey={filterKey} key={filterKey} />
+        ))}
+      </Form.CheckboxSet>
+    </Form.Group>
+  );
+};
 FilterForm.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.string).isRequired,
   handleFilterChange: PropTypes.func.isRequired,

diff --git a/src/containers/CourseFilterControls/messages.js b/src/containers/CourseFilterControls/messages.js
@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  courseStatus: {
+    id: 'learner-dash.courseListFilters.courseStatus',
+    description: 'course status filter form heading',
+    defaultMessage: 'Course Status',
+  },
   inProgress: {
     id: 'learner-dash.courseListFilters.inProgress',
     description: 'in-progress filter checkbox label for course list filters',