Merge pull request #119 from edx/azan/PROD-2333

feat: add activation link in user summary

src/users/UserSummary.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, Button, Input } from '@edx/paragon';
-
 import { postTogglePasswordStatus, postResetPassword } from './data/api';
 import Table from '../Table';
 import { formatDate } from '../utils';
+import { getAccountActivationUrl } from './data/urls';
 
 export default function UserSummary({
   userData,
@@ -241,11 +241,28 @@ export default function UserSummary({
     },
   }));
 
+  if (!userData.isActive) {
+    let dataValue;
+    if (userData.activationKey !== null) {
+      dataValue = {
+        displayValue: <a href={getAccountActivationUrl(userData.activationKey)} rel="noopener noreferrer" target="_blank" className="word_break">{userData.activationKey}</a>,
+      };
+    } else {
+      dataValue = 'N/A';
+    }
+
+    userAccountData.splice(5, 0,
+      {
+        dataName: 'Activation Key/Link',
+        dataValue,
+      });
+  }
+
   return (
     <section className="mb-3">
       <div className="d-flex flex-row flex-wrap">
         <div className="col-sm-6">
-          <div className="flex-column p-4 m-3 card">
+          <div id="account-table" className="flex-column p-4 m-3 card">
             <h4>Account</h4>
             <Table
               data={userAccountData}
@@ -394,6 +411,7 @@ UserSummary.propTypes = {
     username: PropTypes.string,
     id: PropTypes.number,
     email: PropTypes.string,
+    activationKey: PropTypes.string,
     isActive: PropTypes.bool,
     country: PropTypes.string,
     dateJoined: PropTypes.string,

src/users/UserSummary.test.jsx

@@ -5,6 +5,18 @@ import * as api from './data/api';
 import UserSummary from './UserSummary';
 import UserSummaryData from './data/test/userSummary';
 
+const getActivationKeyRow = (data) => {
+  const wrapper = mount(<UserSummary {...data} />);
+  const dataTable = wrapper.find('#account-table table');
+  const rowName = dataTable.find('tbody tr').at(5).find('td').at(0);
+  const rowValue = dataTable.find('tbody tr').at(5).find('td').at(1);
+
+  return {
+    rowName,
+    rowValue,
+  };
+};
+
 describe('User Summary Component Tests', () => {
   let wrapper;
 
@@ -26,6 +38,7 @@ describe('User Summary Component Tests', () => {
       expect(ComponentUserData.lastLogin).toEqual(ExpectedUserData.lastLogin);
       expect(ComponentUserData.dateJoined).toEqual(ExpectedUserData.dateJoined);
       expect(ComponentUserData.passwordStatus).toEqual(ExpectedUserData.passwordStatus);
+      expect(ComponentUserData.activationKey).toEqual(ExpectedUserData.activationKey);
     });
 
     it('Verification Data Values', () => {
@@ -49,6 +62,38 @@ describe('User Summary Component Tests', () => {
     });
   });
 
+  describe('Registration Activation Field', () => {
+    it('Active User Data', () => {
+      const { rowName, rowValue } = getActivationKeyRow(UserSummaryData);
+      expect(rowName.text()).not.toEqual('Activation Key/Link');
+      expect(rowValue.text()).not.toEqual(UserSummaryData.userData.activationKey);
+    });
+
+    it('Inactive User Data ', () => {
+      const InActiveUserData = { ...UserSummaryData.userData, isActive: false };
+      const InActiveUserSummaryData = { ...UserSummaryData, userData: InActiveUserData };
+      const { rowName, rowValue } = getActivationKeyRow(InActiveUserSummaryData);
+      expect(rowName.text()).toEqual('Activation Key/Link');
+      expect(rowValue.text()).toEqual(UserSummaryData.userData.activationKey);
+    });
+
+    it('Active User With No Registration Data ', () => {
+      const InActiveUserData = { ...UserSummaryData.userData, activationKey: null };
+      const InActiveUserSummaryData = { ...UserSummaryData, userData: InActiveUserData };
+      const { rowName, rowValue } = getActivationKeyRow(InActiveUserSummaryData);
+      expect(rowName.text()).not.toEqual('Activation Key/Link');
+      expect(rowValue.text()).not.toEqual(UserSummaryData.userData.activationKey);
+    });
+
+    it('Inactive User With No Registration Data ', () => {
+      const InActiveUserData = { ...UserSummaryData.userData, activationKey: null, isActive: false };
+      const InActiveUserSummaryData = { ...UserSummaryData, userData: InActiveUserData };
+      const { rowName, rowValue } = getActivationKeyRow(InActiveUserSummaryData);
+      expect(rowName.text()).toEqual('Activation Key/Link');
+      expect(rowValue.text()).toEqual('N/A');
+    });
+  });
+
   describe('Disable User Button', () => {
     it('Disable User button for active user', () => {
       const passwordActionButton = wrapper.find('#toggle-password').hostNodes();

src/users/data/test/userSummary.js

@@ -4,6 +4,7 @@ const UserSummaryData = {
     username: 'edx',
     email: '[email protected]',
     id: 1,
+    activationKey: 'db2f834f90fd49afaa3ca2a68a1ae9e1',
     isActive: true,
     country: 'US',
     dateJoined: null,

src/users/data/urls.js

@@ -65,3 +65,7 @@ export const getTogglePasswordStatusUrl = user => `${
 export const getResetPasswordUrl = () => `${
   LMS_BASE_URL
 }/account/password`;
+
+export const getAccountActivationUrl = (activationKey) => `${
+  LMS_BASE_URL
+}/activate/${activationKey}`;

src/users/enrollments/EnrollmentExtra.test.jsx

@@ -5,7 +5,7 @@ import EnrollmentExtra from './EnrollmentExtra';
 
 const props = {
   enrollmentExtraData: {
-    lastModified: new Date(2021, 0, 1, 0, 0, 0, 0).toLocaleString(),
+    lastModified: new Date(2021, 0, 1, 0, 0, 0, 0).toLocaleString('en-US'),
     lastModifiedBy: 'edX',
     reason: 'Test',
     courseName: 'Test Course',