feat: adds more tracking events

Author: Katrina Nguyen

src/components/Admin/AdminSearchForm.jsx

@@ -2,19 +2,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { connect } from 'react-redux';
 
 import { Form } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';
 
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import SearchBar from '../SearchBar';
 import { formatTimestamp, updateUrl } from '../../utils';
 import IconWithTooltip from '../IconWithTooltip';
 import { withLocation, withNavigate } from '../../hoc';
 import EVENT_NAMES from '../../eventTracking';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 class AdminSearchForm extends React.Component {
   componentDidUpdate(prevProps) {
@@ -72,10 +71,10 @@ class AdminSearchForm extends React.Component {
       page: 1,
     };
     updateUrl(navigate, location.pathname, updateParams);
-    console.log(EVENT_NAMES.LEARNER_PROGRESS_REPORT.FILTER_BY_GROUP_DROPDOWN)
     sendEnterpriseTrackEvent(
-      enterpriseUUID,
+      this.props.enterpriseId,
       EVENT_NAMES.LEARNER_PROGRESS_REPORT.FILTER_BY_GROUP_DROPDOWN,
+      { group: event.target.value },
     );
   }
 
@@ -89,7 +88,6 @@ class AdminSearchForm extends React.Component {
         searchCourseQuery, searchDateQuery, searchQuery, searchBudgetQuery, searchGroupQuery,
       },
     } = this.props;
-
     const courseTitles = Array.from(new Set(tableData.map(en => en.course_title).sort()));
     const courseDates = Array.from(new Set(tableData.map(en => en.course_start_date).sort().reverse()));
     const columnWidth = (budgets?.length || groups?.length) ? 'col-md-3' : 'col-md-6';
@@ -313,13 +311,9 @@ AdminSearchForm.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string,
   }),
-  enterpriseUUID: PropTypes.string,
+  enterpriseId: PropTypes.string,
   // injected
   intl: intlShape.isRequired,
 };
 
-const mapStateToProps = state => ({
-  enterpriseUUID: state.portalConfiguration.enterpriseId,
-});
-
-export default connect(mapStateToProps)(withLocation(withNavigate(injectIntl(AdminSearchForm))));
+export default withLocation(withNavigate(injectIntl(AdminSearchForm)));

src/components/PeopleManagement/CreateGroupModal.jsx

@@ -8,11 +8,12 @@ import { snakeCaseObject } from '@edx/frontend-platform/utils';
 import {
   ActionRow, Button, FullscreenModal, StatefulButton, useToggle,
 } from '@openedx/paragon';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+
 import LmsApiService from '../../data/services/LmsApiService';
 import SystemErrorAlertModal from '../learner-credit-management/cards/assignment-allocation-status-modals/SystemErrorAlertModal';
 import CreateGroupModalContent from './CreateGroupModalContent';
 import { peopleManagementQueryKeys } from './constants';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import EVENT_NAMES from '../../eventTracking';
 
 const CreateGroupModal = ({
@@ -26,6 +27,7 @@ const CreateGroupModal = ({
   const [groupName, setGroupName] = useState('');
   const [canCreateGroup, setCanCreateGroup] = useState(false);
   const [canInviteMembers, setCanInviteMembers] = useState(false);
+  const [isCreateGroupFileUpload, setIsCreateGroupFileUpload] = useState(false);
   const [isSystemErrorModalOpen, openSystemErrorModal, closeSystemErrorModal] = useToggle(false);
   const handleCloseCreateGroupModal = () => {
     closeModal();
@@ -40,22 +42,29 @@ const CreateGroupModal = ({
       groupName,
     };
     let groupCreationResponse;
-    
     try {
       groupCreationResponse = await LmsApiService.createEnterpriseGroup(options);
       sendEnterpriseTrackEvent(
         enterpriseUUID,
         EVENT_NAMES.PEOPLE_MANAGEMENT.CREATE_GROUP_MODAL_BUTTON_SUBMIT,
-        { status: 'success'},
+        { status: 'success' },
       );
+
+      if (isCreateGroupFileUpload) {
+        sendEnterpriseTrackEvent(
+          enterpriseUUID,
+          EVENT_NAMES.PEOPLE_MANAGEMENT.GROUP_CREATE_WITH_UPLOAD_CSV,
+        );
+      }
     } catch (err) {
       logError(err);
       setCreateButtonState('error');
       openSystemErrorModal();
       sendEnterpriseTrackEvent(
         enterpriseUUID,
         EVENT_NAMES.PEOPLE_MANAGEMENT.CREATE_GROUP_MODAL_BUTTON_SUBMIT,
-        { status: 'error',
+        {
+          status: 'error',
           message: err,
         },
       );
@@ -128,6 +137,7 @@ const CreateGroupModal = ({
           onEmailAddressesChange={handleEmailAddressesChange}
           isGroupInvite
           enterpriseUUID={enterpriseUUID}
+          setIsCreateGroupFileUpload={setIsCreateGroupFileUpload}
         />
       </FullscreenModal>
       <SystemErrorAlertModal

src/components/PeopleManagement/CreateGroupModalContent.jsx

@@ -18,6 +18,7 @@ import { useEnterpriseLearners } from '../learner-credit-management/data';
 
 const CreateGroupModalContent = ({
   onEmailAddressesChange,
+  setIsCreateGroupFileUpload,
   onSetGroupName,
   isGroupInvite,
   enterpriseUUID,
@@ -138,6 +139,7 @@ const CreateGroupModalContent = ({
           <FileUpload
             memberInviteMetadata={memberInviteMetadata}
             setEmailAddressesInputValue={setEmailAddressesInputValue}
+            setIsCreateGroupFileUpload={setIsCreateGroupFileUpload}
           />
         </Col>
         <Col>
@@ -161,6 +163,7 @@ CreateGroupModalContent.propTypes = {
   onSetGroupName: PropTypes.func,
   isGroupInvite: PropTypes.bool,
   enterpriseUUID: PropTypes.string.isRequired,
+  setIsCreateGroupFileUpload: PropTypes.func,
 };
 
 export default CreateGroupModalContent;

src/components/PeopleManagement/DownloadCSVButton.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import {
   Icon, Spinner, StatefulButton, Toast, useToggle,
@@ -10,7 +11,6 @@ import { Download, Check } from '@openedx/paragon/icons';
 import { logError } from '@edx/frontend-platform/logging';
 import { downloadCsv, getTimeStampedFilename } from '../../utils';
 import EVENT_NAMES from '../../eventTracking';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 const csvHeaders = ['Name', 'Email', 'Joined Organization', 'Enrollments'];
 
@@ -19,7 +19,12 @@ const dataEntryToRow = (entry) => {
   return [name, email, joinedOrg, enrollments];
 };
 
-const DownloadCsvButton = ({ enterpriseUUID, testId, fetchData, totalCt }) => {
+const DownloadCsvButton = ({
+  enterpriseUUID,
+  testId,
+  fetchData,
+  totalCt,
+}) => {
   const [buttonState, setButtonState] = useState('pageLoading');
   const [isToastOpen, openToast, closeToast] = useToggle(false);
   const intl = useIntl();

src/components/PeopleManagement/GroupDetailPage/DownloadCsvIconButton.jsx

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
 import { connect } from 'react-redux';
 
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import {
   Icon, IconButtonWithTooltip, Toast, useToggle,
 } from '@openedx/paragon';
 import { Download } from '@openedx/paragon/icons';
 import { logError } from '@edx/frontend-platform/logging';
 import GeneralErrorModal from '../GeneralErrorModal';
 import { downloadCsv, getTimeStampedFilename } from '../../../utils';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import EVENT_NAMES from '../../../eventTracking';
 
 const csvHeaders = ['Name', 'Email', 'Recent action', 'Enrollments'];
@@ -57,15 +57,16 @@ const DownloadCsvIconButton = ({
       sendEnterpriseTrackEvent(
         enterpriseUUID,
         EVENT_NAMES.PEOPLE_MANAGEMENT.DOWNLOAD_GROUP_MEMBERS,
-        { status: 'success'}
+        { status: 'success' },
       );
     }).catch((err) => {
       logError(err);
       openErrorModal();
       sendEnterpriseTrackEvent(
         enterpriseUUID,
         EVENT_NAMES.PEOPLE_MANAGEMENT.DOWNLOAD_GROUP_MEMBERS,
-        { status: 'error',
+        {
+          status: 'error',
           message: err,
         },
       );
@@ -116,4 +117,4 @@ const mapStateToProps = state => ({
   enterpriseUUID: state.portalConfiguration.enterpriseId,
 });
 
-export default connect(mapStateToProps)(DownloadCsvIconButton);
+export default connect(mapStateToProps)(DownloadCsvIconButton);

src/components/PeopleManagement/index.jsx

@@ -7,6 +7,7 @@ import {
   ActionRow, Button, Skeleton, Toast, useToggle,
 } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import Hero from '../Hero';
 import { SUBSIDY_TYPES } from '../../data/constants/subsidyTypes';
@@ -16,7 +17,6 @@ import { useAllFlexEnterpriseGroups } from '../learner-credit-management/data';
 import ZeroState from './ZeroState';
 import GroupCardGrid from './GroupCardGrid';
 import PeopleManagementTable from './PeopleManagementTable';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import EVENT_NAMES from '../../eventTracking';
 
 const PeopleManagementPage = ({ enterpriseId }) => {
@@ -56,7 +56,7 @@ const PeopleManagementPage = ({ enterpriseId }) => {
       enterpriseId,
       EVENT_NAMES.PEOPLE_MANAGEMENT.PAGE_VISIT,
     );
-  }, []);
+  }, [enterpriseId]);
 
   useEffect(() => {
     // parameter is for confirmation toast after deleting a group

src/components/PeopleManagement/tests/AddMembersModal.test.jsx

@@ -62,6 +62,7 @@ const defaultProps = {
   enterpriseUUID,
   groupName: 'test-group-name',
   groupUuid: TEST_GROUP,
+  setIsCreateGroupFileUpload: jest.fn(),
 };
 
 const mockTabledata = {

src/components/PeopleManagement/tests/DownloadCsvButton.test.jsx

@@ -2,12 +2,25 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import { act, render, screen } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { Provider } from 'react-redux';
 
 import '@testing-library/jest-dom/extend-expect';
 
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import userEvent from '@testing-library/user-event';
 import DownloadCsvButton from '../DownloadCSVButton';
 import { downloadCsv } from '../../../utils';
+import EVENT_NAMES from '../../../eventTracking';
+
+jest.mock('@edx/frontend-enterprise-utils', () => {
+  const originalModule = jest.requireActual('@edx/frontend-enterprise-utils');
+  return ({
+    ...originalModule,
+    sendEnterpriseTrackEvent: jest.fn(),
+  });
+});
 
 jest.mock('file-saver', () => ({
   ...jest.requireActual('file-saver'),
@@ -51,11 +64,20 @@ const DEFAULT_PROPS = {
   fetchData: jest.fn(() => Promise.resolve(mockData)),
   testId,
 };
+const enterpriseId = 'test-enterprise-id';
+const mockStore = configureMockStore([thunk]);
+const store = mockStore({
+  portalConfiguration: {
+    enterpriseId,
+  },
+});
 
 const DownloadCSVButtonWrapper = props => (
-  <IntlProvider locale="en">
-    <DownloadCsvButton {...props} />
-  </IntlProvider>
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <DownloadCsvButton {...props} />
+    </IntlProvider>
+  </Provider>
 );
 
 describe('DownloadCSVButton', () => {
@@ -71,7 +93,11 @@ describe('DownloadCSVButton', () => {
     // Click the download button.
     screen.getByTestId(testId).click();
     await flushPromises();
-
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
+      enterpriseId,
+      EVENT_NAMES.PEOPLE_MANAGEMENT.DOWNLOAD_ALL_ORG_MEMBERS,
+      { status: 'success' },
+    );
     expect(DEFAULT_PROPS.fetchData).toHaveBeenCalled();
     const expectedFileName = '2024-01-20-people-report.csv';
     const expectedHeaders = ['Name', 'Email', 'Joined Organization', 'Enrollments'];
@@ -94,5 +120,13 @@ describe('DownloadCSVButton', () => {
 
     expect(DEFAULT_PROPS.fetchData).toHaveBeenCalled();
     expect(logError).toHaveBeenCalled();
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
+      enterpriseId,
+      EVENT_NAMES.PEOPLE_MANAGEMENT.DOWNLOAD_ALL_ORG_MEMBERS,
+      {
+        status: 'error',
+        message: new Error('Error fetching data'),
+      },
+    );
   });
 });