Paragon table deprecation migration to DataTable (#1691)

* refactor: changed derecated table component to datatable * fix: missing single quote added that was crashing frontend * refactor: added override styles for edx.org theme * refactor: added missing file
openedx · Jul 26, 2022 · f825660 · f825660
1 parent d08e6ea
commit f825660
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 13 deletions.
diff --git a/credentials/static/components/FoldingTable.jsx b/credentials/static/components/FoldingTable.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Table } from '@edx/paragon';
+import { DataTable } from '@edx/paragon';
 
 /**
  *  Depending on view width, either renders as a normal everyday
@@ -23,8 +23,9 @@ class FoldingTable extends React.Component {
 
   renderTable() {
     return (
-      <Table
+      <DataTable
         className={['table-borderless', 'table-responsive']}
+        itemCount={this.props.data.length}
         {...this.props}
       />
     );

diff --git a/credentials/static/components/ProgramRecord.jsx b/credentials/static/components/ProgramRecord.jsx
@@ -387,14 +387,14 @@ class ProgramRecord extends React.Component {
               columns={[
                 // Note that when you change one of these strings, you should look at
                 // the foldedColumns for any necessary changes there too.
-                { key: 'name', label: gettext('Course Name') },
-                { key: 'school', label: gettext('School') },
-                { key: 'course_id', label: gettext('Course ID') },
-                { key: 'percent_grade', label: gettext('Highest Grade Earned') },
-                { key: 'letter_grade', label: gettext('Letter Grade') },
-                { key: 'attempts', label: gettext('Verified Attempts') },
-                { key: 'issue_date', label: gettext('Date Earned') },
-                { key: 'status', label: gettext('Status') },
+                { accessor: 'name', Header: gettext('Course Name') },
+                { accessor: 'school', Header: gettext('School') },
+                { accessor: 'course_id', Header: gettext('Course ID') },
+                { accessor: 'percent_grade', Header: gettext('Highest Grade Earned') },
+                { accessor: 'letter_grade', Header: gettext('Letter Grade') },
+                { accessor: 'attempts', Header: gettext('Verified Attempts') },
+                { accessor: 'issue_date', Header: gettext('Date Earned') },
+                { accessor: 'status', Header: gettext('Status') },
               ]}
               foldedColumns={[
                 { key: 'name', className: 'h6 font-weight-bold' },

diff --git a/credentials/static/components/specs/ProgramRecord.test.jsx b/credentials/static/components/specs/ProgramRecord.test.jsx
@@ -104,7 +104,7 @@ describe('<ProgramRecord />', () => {
 
       const firstRowData = programRows.at(0).find('td');
       expect(firstRowData.at(0).text()).toEqual(grades[0].name);
-      expect(firstRowData.at(0).key()).toEqual('name');
+      expect(firstRowData.at(0).key()).toEqual('cell_0_name');
       expect(firstRowData.at(1).text()).toEqual(grades[0].school);
       expect(firstRowData.at(2).text()).toEqual(grades[0].course_id);
       expect(firstRowData.at(3).text()).toEqual('82%');
@@ -115,7 +115,7 @@ describe('<ProgramRecord />', () => {
 
       const thirdRowData = programRows.at(2).find('td');
       expect(thirdRowData.at(0).text()).toEqual(grades[2].name);
-      expect(thirdRowData.at(0).key()).toEqual('name');
+      expect(thirdRowData.at(0).key()).toEqual('cell_2_name');
       expect(thirdRowData.at(1).text()).toEqual(grades[2].school);
       expect(thirdRowData.at(2).text()).toEqual('');
       expect(thirdRowData.at(3).text()).toEqual('');

diff --git a/credentials/static/sass/overrides.scss b/credentials/static/sass/overrides.scss
@@ -0,0 +1,12 @@
+// ------------------------------
+// Overrides styles
+
+// ------------------------------
+
+.pgn__data-table-cell-wrap {
+    max-width: 20vw;
+    display: table-cell !important;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
diff --git a/credentials/templates/base.html b/credentials/templates/base.html
@@ -17,6 +17,7 @@
 
     {% if base_style_template %}
       {% include base_style_template %}
+      {% render_bundle 'override-style' 'css' %}
     {% else %}
       {% include '_base_style.html' %}
     {%  endif %}

diff --git a/credentials/templates/programs.html b/credentials/templates/programs.html
@@ -36,7 +36,7 @@
             isPublic: {{ is_public|yesno:"true,false"}},
             uuid: '{{uuid}}',
             helpUrl: '{{records_help_url}}',
-            programListUrl: '{{program_list_url}},
+            programListUrl: '{{program_list_url}}',
           });
         </script>
     {% endblock %}

diff --git a/webpack.config.js b/webpack.config.js
@@ -19,6 +19,7 @@ module.exports = {
   entry: {
     'base.style-ltr': './credentials/static/sass/main-ltr.scss',
     'base.style-rtl': './credentials/static/sass/main-rtl.scss',
+    'override-style': './credentials/static/sass/overrides.scss',
     'openedx.certificate.style-ltr': './credentials/apps/credentials_theme_openedx/static/sass/certificate-ltr.scss',
     'openedx.certificate.style-rtl': './credentials/apps/credentials_theme_openedx/static/sass/certificate-rtl.scss',
     sharing: './credentials/static/js/sharing.js',