Merge pull request #143 from edx/aakbar/PROD-2462

feat: add enrollmentv2

jest.config.js

@@ -8,5 +8,6 @@ module.exports = createConfig('jest', {
     '/node_modules/',
     'src/setupTest.js',
     'src/i18n',
+    'src/users/v2/UserPage.jsx'
   ],
 });

package.json

@@ -49,12 +49,14 @@
     "react-responsive": "8.1.0",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
+    "react-table": "^7.6.3",
     "react-transition-group": "4.4.1",
     "redux": "4.0.5"
   },
   "devDependencies": {
     "@edx/frontend-build": "^5.5.1",
     "@testing-library/react": "10.3.0",
+    "@types/react-table": "^7.7.2",
     "axios-mock-adapter": "^1.19.0",
     "check-prop-types": "1.1.2",
     "codecov": "3.8.1",

src/components/Table.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { useTable, useExpanded, useSortBy } from 'react-table';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons';
+
+export default function Table({
+  columns, data, renderRowSubComponent, styleName,
+}) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    visibleColumns,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy,
+    useExpanded, // Using useExpanded to track the expanded state
+  );
+
+  return (
+    <>
+      <table {...getTableProps()} className={styleName}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps(column.sortable && column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  <span>
+                    {/* eslint-disable-next-line no-nested-ternary */}
+                    {column.isSorted
+                      ? column.isSortedDesc
+                        ? <FontAwesomeIcon icon={faSortDown} />
+                        : <FontAwesomeIcon icon={faSortUp} />
+                      : ''}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+            return (
+              <React.Fragment {...row.getRowProps()}>
+                <tr>
+                  {row.cells.map(cell => (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  ))}
+                </tr>
+                {/*
+                    If the row is in an expanded state, render a row with a
+                    column that fills the entire length of the table.
+                  */}
+                {row.isExpanded ? (
+                  <tr>
+                    <td colSpan={visibleColumns.length}>
+                      {/*
+                          Inside it, call our renderRowSubComponent function. In reality,
+                          you could pass whatever you want as props to
+                          a component like this, including the entire
+                          table instance.
+                          it's merely a rendering option we created for ourselves
+                        */}
+                      {renderRowSubComponent({ row })}
+                    </td>
+                  </tr>
+                ) : null}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+      <br />
+    </>
+  );
+}
+
+Table.propTypes = {
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    header: PropTypes.string.isRequired,
+    accessor: PropTypes.string.isRequired,
+    sortable: PropTypes.bool,
+  })).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  renderRowSubComponent: PropTypes.func,
+  styleName: PropTypes.string,
+};
+
+Table.defaultProps = {
+  renderRowSubComponent: null,
+  styleName: null,
+};

src/index.jsx

@@ -14,6 +14,7 @@ import SupportHomePage from './supportHome/SupportHomePage';
 import Header from './supportHeader';
 import appMessages from './i18n';
 import UserPage from './users/UserPage';
+// import UserPageV2 from './users/v2/UserPage';
 import UserMessagesProvider from './userMessages/UserMessagesProvider';
 
 import './index.scss';
@@ -35,6 +36,7 @@ subscribe(APP_READY, () => {
         <Switch>
           <Route exact path="/" component={SupportHomePage} />
           <Route path="/users" component={UserPage} />
+          {/* <Route path="/usersv2" component={UserPageV2} /> */}
         </Switch>
       </UserMessagesProvider>
     </AppProvider>,

src/overrides.scss

@@ -1,6 +1,42 @@
 
 // Reverting the container width to 1440px to keep the support tools styling consistent
 // See https://github.com/edx/paragon/pull/533 for paragon breaking change
+
 .container-fluid {
-max-width: 1440px;
+  max-width: 1440px;
+}
+
+.custom-table {
+  font-size: small;
+  width: 100%;
+  th {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid black;
+  }
+  td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid silver;
+  }
+}
+
+.custom-expander-table {
+  font-size: small;
+  margin-left: 10%;
+  th {
+    margin: 0;
+    padding: 0.5rem;
+    background-color: lightgray;
+    border-bottom: 0px;
+  }
+  td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 0px;
+  }
+}
+
+.text-center {
+  margin: auto;
 }