Lk/use share browserlist

package.json

@@ -25,16 +25,14 @@
     "access": "public"
   },
   "browserslist": [
-    "last 2 versions",
-    "not ie > 0",
-    "not ie_mob > 0"
+    "extends @edx/browserslist-config"
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^1.3.2",
     "@edx/frontend-component-footer": "^11.1.1",
     "@edx/frontend-component-header": "^3.1.1",
     "@edx/frontend-platform": "2.5.0",
-    "@edx/paragon": "19.6.0",
+    "@edx/paragon": "^19.25.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -69,6 +67,7 @@
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
+    "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-build": "^12.4.15",
     "axios": "0.21.2",
     "axios-mock-adapter": "^1.17.0",

src/components/GradesView/EditModal/__snapshots__/test.jsx.snap

@@ -10,21 +10,9 @@ exports[`EditModal Component snapshots gradeOverrideHistoryError is and empty an
   isOpen={true}
   onClose={[MockFunction this.closeAssignmentModal]}
   size="xl"
+  title="Edit Grades"
   variant="default"
 >
-  <ModalDialogHeader
-    as="div"
-  >
-    <ModalDialogTitle
-      as="h2"
-    >
-      <FormattedMessage
-        defaultMessage="Edit Grades"
-        description="Edit Modal title"
-        id="gradebook.GradesView.EditModal.title"
-      />
-    </ModalDialogTitle>
-  </ModalDialogHeader>
   <ModalDialogBody
     as="div"
   >
@@ -133,24 +121,12 @@ exports[`EditModal Component snapshots gradeOverrideHistoryError is empty and op
   isBlocking={false}
   isFullscreenOnMobile={true}
   isFullscreenScroll={false}
-  isOpen={true}
+  isOpen={false}
   onClose={[MockFunction this.closeAssignmentModal]}
   size="xl"
+  title="Edit Grades"
   variant="default"
 >
-  <ModalDialogHeader
-    as="div"
-  >
-    <ModalDialogTitle
-      as="h2"
-    >
-      <FormattedMessage
-        defaultMessage="Edit Grades"
-        description="Edit Modal title"
-        id="gradebook.GradesView.EditModal.title"
-      />
-    </ModalDialogTitle>
-  </ModalDialogHeader>
   <ModalDialogBody
     as="div"
   >

src/components/GradesView/EditModal/index.jsx

@@ -9,7 +9,7 @@ import {
   ModalDialog,
   ActionRow,
 } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import selectors from 'data/selectors';
 import actions from 'data/actions';
@@ -47,19 +47,14 @@ export class EditModal extends React.Component {
 
   render() {
     return (
-
       <ModalDialog
-        isOpen
+        title={this.props.intl.formatMessage(messages.title)}
+        isOpen={this.props.open}
         onClose={this.closeAssignmentModal}
         size="xl"
         hasCloseButton
         isFullscreenOnMobile
       >
-        <ModalDialog.Header>
-          <ModalDialog.Title>
-            <FormattedMessage {...messages.title} />
-          </ModalDialog.Title>
-        </ModalDialog.Header>
         <ModalDialog.Body>
           <div>
             <ModalHeaders />
@@ -101,6 +96,8 @@ EditModal.propTypes = {
   closeModal: PropTypes.func.isRequired,
   doneViewingAssignment: PropTypes.func.isRequired,
   updateGrades: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
@@ -114,4 +111,4 @@ export const mapDispatchToProps = {
   updateGrades: thunkActions.grades.updateGrades,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(EditModal);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(EditModal));

src/components/GradesView/EditModal/test.jsx

@@ -49,6 +49,8 @@ describe('EditModal', () => {
       closeModal: jest.fn(),
       doneViewingAssignment: jest.fn(),
       updateGrades: jest.fn(),
+
+      intl: { formatMessage: (msg) => msg.defaultMessage },
     };
   });
 

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>

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));

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} />);