chore: DataTable Empty expect string as content

openedx · Jan 5, 2023 · 011737b · 011737b
1 parent 524116a
commit 011737b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 25 deletions.
diff --git a/src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap b/src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap
@@ -48,13 +48,7 @@ exports[`GradebookTable component snapshot - fields1 and 2 between email and tot
     <DataTable.TableControlBar />
     <DataTable.Table />
     <DataTable.EmptyTable
-      content={
-        <FormattedMessage
-          defaultMessage="No results found"
-          description="Gradebook table message when no learner results were found"
-          id="gradebook.GradesView.table.noResultsFound"
-        />
-      }
+      content="No results found"
     />
   </DataTable>
 </div>

diff --git a/src/components/GradesView/GradebookTable/index.jsx b/src/components/GradesView/GradebookTable/index.jsx
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { DataTable } from '@edx/paragon';
-import { FormattedMessage, getLocale, isRtl } from '@edx/frontend-platform/i18n';
+import {
+  FormattedMessage, getLocale, isRtl, injectIntl, intlShape,
+} from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import { Headings } from 'data/constants/grades';
@@ -44,21 +46,17 @@ export class GradebookTable extends React.Component {
     return { Header: label, accessor: heading };
   }
 
-  mapRows(entry) {
-    const dataRow = {
-      [Headings.username]: (
-        <Fields.Username username={entry.username} userKey={entry.external_user_key} />
-      ),
-      [Headings.email]: (<Fields.Email email={entry.email} />),
-      [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${isRtl(getLocale()) ? '\u200f' : ''}%`,
-    };
-    entry.section_breakdown.forEach(subsection => {
-      dataRow[subsection.label] = (
-        <GradeButton {...{ entry, subsection }} />
-      );
-    });
-    return dataRow;
-  }
+  mapRows = entry => ({
+    [Headings.username]: (
+      <Fields.Username username={entry.username} userKey={entry.external_user_key} />
+    ),
+    [Headings.email]: (<Fields.Email email={entry.email} />),
+    [Headings.totalGrade]: `${roundGrade(entry.percent * 100)}${isRtl(getLocale()) ? '\u200f' : ''}%`,
+    ...entry.section_breakdown.reduce((acc, subsection) => ({
+      ...acc,
+      [subsection.label]: <GradeButton {...{ entry, subsection }} />,
+    }), {}),
+  });
 
   nullMethod() {
     return null;
@@ -77,7 +75,7 @@ export class GradebookTable extends React.Component {
         >
           <DataTable.TableControlBar />
           <DataTable.Table />
-          <DataTable.EmptyTable content={<FormattedMessage {...messages.noResultsFound} />} />
+          <DataTable.EmptyTable content={this.props.intl.formatMessage(messages.noResultsFound)} />
         </DataTable>
       </div>
     );
@@ -106,11 +104,13 @@ GradebookTable.propTypes = {
     user_name: PropTypes.string,
   })),
   headings: PropTypes.arrayOf(PropTypes.string).isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
   grades: selectors.grades.allGrades(state),
   headings: selectors.root.getHeadings(state),
 });
 
-export default connect(mapStateToProps)(GradebookTable);
+export default injectIntl(connect(mapStateToProps)(GradebookTable));
diff --git a/src/components/GradesView/GradebookTable/test.jsx b/src/components/GradesView/GradebookTable/test.jsx
@@ -80,6 +80,8 @@ describe('GradebookTable', () => {
         fields.field2,
         Headings.totalGrade,
       ],
+
+      intl: { formatMessage: (msg) => msg.defaultMessage },
     };
     test('snapshot - fields1 and 2 between email and totalGrade, mocked rows', () => {
       el = shallow(<GradebookTable {...props} />);