Merge pull request #17665 from edx/MLoTurco/learner-3925-table

Add entitlement table to support app

Learner-3925

lms/djangoapps/support/static/support/jsx/entitlements/components/Main/Main.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { StatusAlert } from '@edx/paragon';
 import SearchContainer from '../Search/SearchContainer.jsx';
+import EntitlementSupportTableContainer from '../Table/EntitlementSupportTableContainer.jsx';
 
 const Main = props => (
   <div>
@@ -16,12 +17,14 @@ const Main = props => (
       Entitlement Support Page
     </h2>
     <SearchContainer />
+    <EntitlementSupportTableContainer ecommerceUrl={props.ecommerceUrl} />
   </div>
 );
 
 Main.propTypes = {
   errorMessage: PropTypes.string.isRequired,
   dismissErrorMessage: PropTypes.func.isRequired,
+  ecommerceUrl: PropTypes.string.isRequired,
 };
 
 export default Main;

lms/djangoapps/support/static/support/jsx/entitlements/components/Search/SearchContainer.jsx

@@ -7,7 +7,6 @@ const mapStateToProps = state => ({
   entitlements: state.entitlements,
 });
 
-
 const mapDispatchToProps = dispatch => ({
   fetchEntitlements: username => dispatch(fetchEntitlements(username)),
 });

lms/djangoapps/support/static/support/jsx/entitlements/components/Table/EntitlementSupportTable.jsx

+import React from 'react';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+
+import { Hyperlink, Table } from '@edx/paragon';
+
+const entitlementColumns = [
+  {
+    label: 'User',
+    key: 'user',
+  },
+  {
+    label: 'Course UUID',
+    key: 'courseUuid',
+  },
+  {
+    label: 'Enrollment',
+    key: 'enrollmentCourseRun',
+  },
+  {
+    label: 'Mode',
+    key: 'mode',
+  },
+  {
+    label: 'Expired At',
+    key: 'expiredAt',
+  },
+  {
+    label: 'Created',
+    key: 'createdAt',
+  },
+  {
+    label: 'Modified',
+    key: 'modifiedAt',
+  },
+  {
+    label: 'Order',
+    key: 'orderNumber',
+  },
+  {
+    label: 'Actions',
+    key: 'button',
+    columnSortable: false,
+    hideHeader: false,
+  },
+];
+
+const parseEntitlementData = (entitlements, ecommerceUrl) =>
+  entitlements.map((entitlement) => {
+    const { expiredAt, created, modified, orderNumber } = entitlement;
+    return Object.assign({}, entitlement, {
+      expiredAt: expiredAt ? moment(expiredAt).format('lll') : '',
+      createdAt: moment(created).format('lll'),
+      modifiedAt: moment(modified).format('lll'),
+      orderNumber: <Hyperlink
+        destination={`${ecommerceUrl}${orderNumber}/`}
+        content={orderNumber || ''}
+      />,
+      button: <div> No Actions Currently Available </div>,
+    });
+  });
+
+const EntitlementSupportTable = props => (
+  <Table
+    data={parseEntitlementData(props.entitlements, props.ecommerceUrl)}
+    columns={entitlementColumns}
+  />
+);
+
+EntitlementSupportTable.propTypes = {
+  entitlements: PropTypes.arrayOf(PropTypes.shape({
+    uuid: PropTypes.string.isRequired,
+    courseUuid: PropTypes.string.isRequired,
+    enrollmentCourseRun: PropTypes.string,
+    created: PropTypes.string.isRequired,
+    modified: PropTypes.string.isRequired,
+    expiredAt: PropTypes.string,
+    mode: PropTypes.string.isRequired,
+    orderNumber: PropTypes.string,
+    supportDetails: PropTypes.arrayOf(PropTypes.shape({
+      supportUser: PropTypes.string,
+      action: PropTypes.string,
+      comments: PropTypes.string,
+      unenrolledRun: PropTypes.string,
+    })),
+    user: PropTypes.string.isRequired,
+  })).isRequired,
+  ecommerceUrl: PropTypes.string.isRequired,
+};
+
+export default EntitlementSupportTable;

lms/djangoapps/support/static/support/jsx/entitlements/components/Table/EntitlementSupportTableContainer.jsx

+import { connect } from 'react-redux';
+
+import EntitlementSupportTable from './EntitlementSupportTable.jsx';
+
+const mapStateToProps = state => ({
+  entitlements: state.entitlements,
+});
+
+const EntitlementSupportTableContainer = connect(
+  mapStateToProps,
+)(EntitlementSupportTable);
+
+export default EntitlementSupportTableContainer;

lms/djangoapps/support/static/support/jsx/entitlements/data/actions/entitlement.js

-import { getEntitlements } from '../api/client';
+import camelize from 'camelize';
 
+import { getEntitlements } from '../api/client';
 import { entitlementActions } from './constants';
 import { displayError } from './error';
 
@@ -22,12 +23,11 @@ const fetchEntitlements = username =>
       throw new Error(response);
     })
     .then(
-      json => dispatch(fetchEntitlementsSuccess(json.results)),
+      json => dispatch(fetchEntitlementsSuccess(camelize(json.results))),
       error => dispatch(fetchEntitlementsFailure(error)),
     );
   };
 
-
 export {
   fetchEntitlements,
   fetchEntitlementsSuccess,

lms/djangoapps/support/static/support/jsx/entitlements/data/api/client.js

@@ -16,8 +16,7 @@ const getEntitlements = username => fetch(
   },
 );
 
-
-const createEntitlement = ({ username, courseUuid, mode, action, comments }) => fetch(
+const createEntitlement = ({ username, courseUuid, mode, action, comments = null }) => fetch(
   `${entitlementApi}`, {
     credentials: 'same-origin',
     method: 'post',
@@ -34,9 +33,8 @@ const createEntitlement = ({ username, courseUuid, mode, action, comments }) =>
   },
 );
 
-
-const updateEntitlement = ({ entitlementUuid, unenrolledRun, action, comments }) => fetch(
-  `${entitlementApi}/${entitlementUuid}`, {
+const updateEntitlement = ({ uuid, action, unenrolledRun = null, comments = null }) => fetch(
+  `${entitlementApi}/${uuid}`, {
     credentials: 'same-origin',
     method: 'patch',
     headers: HEADERS,
@@ -52,7 +50,6 @@ const updateEntitlement = ({ entitlementUuid, unenrolledRun, action, comments })
   },
 );
 
-
 export {
   getEntitlements,
   createEntitlement,

package-lock.json

@@ -1624,6 +1624,11 @@
         "map-obj": "1.0.1"
       }
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "can-use-dom": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "backbone-associations": "0.6.2",
     "backbone.paginator": "2.0.6",
     "bootstrap": "4.0.0-beta.2",
+    "camelize": "1.0.0",
     "classnames": "2.2.5",
     "coffee-loader": "0.7.3",
     "coffee-script": "1.6.1",