Merge pull request #101 from edx/aakbar/PROD-2277

Add Detail button to show Support Details for each Entitlement

src/users/data/test/entitlements.js

@@ -14,9 +14,17 @@ const entitlementsData = {
         supportDetails: [{
           supportUser: 'admin',
           action: 'CREATE',
+          actionCreated: Date().toLocaleString(),
           comments: 'creating entitlement',
           unenrolledRun: null,
         },
+        {
+          supportUser: 'admin',
+          action: 'EXPIRE',
+          actionCreated: Date().toLocaleString(),
+          comments: 'expiring entitlement',
+          unenrolledRun: null,
+        },
         ],
       },
       {

src/users/entitlements/Entitlements.jsx

@@ -4,7 +4,7 @@ import React, {
 import PropTypes from 'prop-types';
 
 import {
-  Button, Collapsible, TransitionReplace,
+  Button, Collapsible, Modal, TransitionReplace,
 } from '@edx/paragon';
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import EntitlementForm from './EntitlementForm';
@@ -27,6 +27,9 @@ export default function Entitlements({
   const [courseSummaryUUID, setCourseSummaryUUID] = useState(null);
   const [courseSummaryData, setCourseSummaryData] = useState(null);
   const [courseSummaryErrors, setCourseSummaryErrors] = useState(false);
+  const [entitlementDetailModalIsOpen, setEntitlementDetailModalIsOpen] = useState(false);
+  const [entitlementSupportDetailsTitle, setEntitlementSupportDetailsTitle] = useState('');
+  const [entitlementSupportDetails, setEntitlementSupportDetails] = useState([]);
   const formRef = useRef(null);
   const summaryRef = useRef(null);
 
@@ -45,6 +48,20 @@ export default function Entitlements({
     setCourseSummaryErrors(false);
   }
 
+  // Modal to display Support Details for each Entitlement
+  const openEntitlementsSupportDetailsModal = (title, supportDetails) => {
+    const tableData = supportDetails.map(supportDetail => ({
+      action: supportDetail.action,
+      comments: supportDetail.comments,
+      actionCreated: formatDate(supportDetail.created),
+      supportUser: supportDetail.supportUser,
+      unenrolledRun: supportDetail.unenrolledRun,
+    }));
+    setEntitlementSupportDetails(tableData);
+    setEntitlementSupportDetailsTitle(title);
+    setEntitlementDetailModalIsOpen(true);
+  };
+
   const handleCourseSummaryDataGet = useCallback((courseUUID) => {
     if (courseUUID !== null && courseUUID !== undefined) {
       setCourseSummaryData(null);
@@ -126,8 +143,19 @@ export default function Entitlements({
         displayValue: (
           <div>
             <Button
+              id="details"
               type="button"
               variant="outline-primary"
+              onClick={() => {
+                openEntitlementsSupportDetailsModal('Entitlement Support Details', entitlement.supportDetails);
+              }}
+            >
+              Details
+            </Button>
+            <Button
+              id="reissue"
+              type="button"
+              variant="outline-primary mt-2 mr-2"
               disabled={!entitlement.enrollmentCourseRun}
               onClick={() => {
                 clearCourseSummary();
@@ -139,8 +167,7 @@ export default function Entitlements({
             </Button>
             <Button
               type="button"
-              className="mt-2"
-              variant="outline-danger"
+              variant="outline-danger mt-2"
               disabled={entitlement.expiredAt}
               onClick={() => {
                 clearCourseSummary();
@@ -193,6 +220,24 @@ export default function Entitlements({
     },
   ];
 
+  const supportDetailsColumn = [
+    {
+      label: 'Action', key: 'action', width: 'col-3',
+    },
+    {
+      label: 'Comments', key: 'comments', width: 'col-3',
+    },
+    {
+      label: 'Action Creation Timestamp', key: 'actionCreated', width: 'col-3',
+    },
+    {
+      label: 'Support User', key: 'supportUser', width: 'col-3',
+    },
+    {
+      label: 'Unenrolled Run', key: 'unenrolledRun', width: 'col-3',
+    },
+  ];
+
   const tableDataSortable = [...tableData];
 
   return (
@@ -240,6 +285,18 @@ export default function Entitlements({
           />
         ) : (<React.Fragment key="nothing" />)}
       </TransitionReplace>
+      <Modal
+        open={entitlementDetailModalIsOpen}
+        onClose={() => setEntitlementDetailModalIsOpen(false)}
+        title={entitlementSupportDetailsTitle}
+        id="support-details"
+        body={(
+          <Table
+            data={entitlementSupportDetails}
+            columns={supportDetailsColumn}
+          />
+        )}
+      />
       <Collapsible title={`Entitlements (${tableData.length})`} defaultOpen={expanded}>
         <Table
           className="w-100"

src/users/entitlements/Entitlements.test.jsx

@@ -48,6 +48,30 @@ describe('Entitlements Listing', () => {
     expect(collapsible.text()).toEqual('Entitlements (0)');
   });
 
+  it('Support Details data', () => {
+    wrapper = mount(<EntitlementsPageWrapper {...entitlementsData} />);
+    const tableRowsLengths = [2, 0];
+
+    const tableData = wrapper.find('table.table');
+    tableData.find('tbody tr').forEach((row, i) => {
+      const detailButton = row.find('button#details');
+      expect(detailButton.text()).toEqual('Details');
+      let supportDetailsModal = wrapper.find('Modal#support-details');
+      expect(supportDetailsModal.prop('open')).toEqual(false);
+      detailButton.simulate('click');
+
+      supportDetailsModal = wrapper.find('Modal#support-details');
+      expect(supportDetailsModal.prop('open')).toEqual(true);
+      expect(supportDetailsModal.prop('title')).toEqual('Entitlement Support Details');
+      expect(supportDetailsModal.find('table thead tr th')).toHaveLength(5);
+      expect(supportDetailsModal.find('table tbody tr')).toHaveLength(tableRowsLengths[i]);
+      supportDetailsModal.find('button.btn-link').simulate('click');
+
+      supportDetailsModal = wrapper.find('Modal#support-details');
+      expect(supportDetailsModal.prop('open')).toEqual(false);
+    });
+  });
+
   describe('Expire and Reissue entitlement buttons', () => {
     describe('Expire Entitlement button', () => {
       it('Disabled Expire entitlement button', () => {
@@ -98,7 +122,7 @@ describe('Entitlements Listing', () => {
         const tableData = wrapper.find('table.table');
 
         tableData.find('tbody tr').forEach(row => {
-          const reissueButton = row.find('button.btn-outline-primary').last();
+          const reissueButton = row.find('button#reissue').last();
           expect(reissueButton.text()).toEqual('Reissue');
           expect(reissueButton.prop('disabled')).toBeTruthy();
         });