Merge branch 'master' into kiram15/ENT-9925

Author: kiram15

package-lock.json

@@ -30,77 +30,77 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
-    "@babel/plugin-transform-runtime": "7.12.1",
+    "@babel/plugin-transform-runtime": "7.25.9",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-catalog-search": "10.3.0",
+    "@edx/frontend-enterprise-catalog-search": "10.8.0",
     "@edx/frontend-enterprise-hotjar": "7.1.0",
     "@edx/frontend-enterprise-logistration": "9.1.0",
     "@edx/frontend-enterprise-utils": "9.1.0",
-    "@edx/frontend-platform": "8.0.0",
+    "@edx/frontend-platform": "8.1.5",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx/paragon": "21.13.1",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
-    "algoliasearch": "4.8.3",
-    "axios-mock-adapter": "1.19.0",
-    "classnames": "2.2.6",
-    "color": "3.1.3",
+    "algoliasearch": "4.24.0",
+    "axios-mock-adapter": "1.22.0",
+    "classnames": "2.5.1",
+    "color": "3.2.1",
     "color-contrast-checker": "^2.1.0",
-    "core-js": "3.7.0",
+    "core-js": "3.40.0",
     "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
     "dayjs": "^1.11.9",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
     "history": "4.10.1",
-    "html-react-parser": "3.0.7",
+    "html-react-parser": "3.0.16",
     "jest-environment-jsdom": "29.7.0",
     "lodash": "4.17.21",
     "lodash.debounce": "4.0.8",
     "plotly.js": "^2.33.0",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
-    "react-instantsearch-dom": "6.8.3",
-    "react-markdown": "6.0.0",
+    "react-instantsearch-dom": "6.40.4",
+    "react-markdown": "6.0.3",
     "react-plotly.js": "^2.6.0",
     "react-redux": "7.2.9",
-    "react-router": "6.21.1",
-    "react-router-dom": "6.21.1",
-    "redux": "4.0.4",
-    "redux-devtools-extension": "2.13.8",
-    "redux-form": "8.3.8",
+    "react-router": "6.29.0",
+    "react-router-dom": "6.29.0",
+    "redux": "4.2.1",
+    "redux-devtools-extension": "2.13.9",
+    "redux-form": "8.3.10",
     "redux-logger": "3.0.6",
-    "redux-mock-store": "1.5.4",
-    "redux-thunk": "2.3.0",
-    "regenerator-runtime": "0.13.7",
-    "sanitize-html": "2.12.1",
+    "redux-mock-store": "1.5.5",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "0.14.1",
+    "sanitize-html": "2.14.0",
     "timeago.js": "4.0.2",
     "universal-cookie": "4.0.4",
     "use-context-selector": "^1.4.1",
-    "uuid": "9.0.0",
-    "validator": "13.7.0"
+    "uuid": "9.0.1",
+    "validator": "13.12.0"
   },
   "peerDependencies": {
     "clean-webpack-plugin": "3.0.0",
-    "dotenv": "8.2.0",
+    "dotenv": "8.6.0",
     "dotenv-webpack": "3.0.0",
-    "html-webpack-plugin": "4.5.0",
-    "mini-css-extract-plugin": "0.11.2",
+    "html-webpack-plugin": "4.5.2",
+    "mini-css-extract-plugin": "0.12.0",
     "webpack": "^5.0.0",
-    "webpack-merge": "5.4.0"
+    "webpack-merge": "5.10.0"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.0.0",
+    "@edx/browserslist-config": "1.5.0",
     "@faker-js/faker": "^7.6.0",
-    "@openedx/frontend-build": "14.0.3",
-    "@testing-library/dom": "9.3.1",
+    "@openedx/frontend-build": "14.2.2",
+    "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "5.0.3",
+    "@testing-library/react-hooks": "5.1.3",
     "@testing-library/user-event": "12.8.3",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
-    "css-loader": "5.2.6",
+    "css-loader": "5.2.7",
     "enzyme": "3.11.0",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",

package.json

@@ -6,6 +6,9 @@
   "patch": {
     "automerge": true
   },
+  "major": {
+    "dependencyDashboardApproval": true
+  },
   "rebaseWhen": "behind-base-branch",
   "packageRules": [
     {

renovate.json

@@ -7,11 +7,13 @@ 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';
 
 class AdminSearchForm extends React.Component {
   componentDidUpdate(prevProps) {
@@ -69,6 +71,11 @@ class AdminSearchForm extends React.Component {
       page: 1,
     };
     updateUrl(navigate, location.pathname, updateParams);
+    sendEnterpriseTrackEvent(
+      this.props.enterpriseId,
+      EVENT_NAMES.LEARNER_PROGRESS_REPORT.FILTER_BY_GROUP_DROPDOWN,
+      { group: event.target.value },
+    );
   }
 
   render() {
@@ -305,6 +312,7 @@ AdminSearchForm.propTypes = {
   location: PropTypes.shape({
     pathname: PropTypes.string,
   }),
+  enterpriseId: PropTypes.string,
   // injected
   intl: intlShape.isRequired,
 };

src/components/Admin/AdminSearchForm.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { FormControl } from '@openedx/paragon';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import AdminSearchForm from './AdminSearchForm';
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
+import EVENT_NAMES from '../../eventTracking';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -17,10 +19,19 @@ jest.mock('../../utils', () => ({
   updateUrl: jest.fn(),
 }));
 
+jest.mock('@edx/frontend-enterprise-utils', () => {
+  const originalModule = jest.requireActual('@edx/frontend-enterprise-utils');
+  return ({
+    ...originalModule,
+    sendEnterpriseTrackEvent: jest.fn(),
+  });
+});
+
 const DEFAULT_PROPS = {
   searchEnrollmentsList: () => {},
   searchParams: {},
   tableData: [],
+  enterpriseId: 'test-id',
 };
 
 const AdminSearchFormWrapper = props => (
@@ -100,6 +111,13 @@ describe('<AdminSearchForm />', () => {
 
     selectElement.simulate('change', { target: { value: groupUUID } });
     expect(updateUrl).toHaveBeenCalled();
+    expect(sendEnterpriseTrackEvent).toHaveBeenCalledWith(
+      'test-id',
+      EVENT_NAMES.LEARNER_PROGRESS_REPORT.FILTER_BY_GROUP_DROPDOWN,
+      {
+        group: groupUUID,
+      },
+    );
     expect(updateUrl).toHaveBeenCalledWith(
       undefined,
       '/admin/learners',

src/components/Admin/AdminSearchForm.test.jsx

@@ -545,6 +545,7 @@ class Admin extends React.Component {
                                 tableData={this.getTableData() ? this.getTableData().results : []}
                                 budgets={budgets}
                                 groups={groups}
+                                enterpriseId={enterpriseId}
                               />
                             )}
                           </>

src/components/Admin/index.jsx

@@ -11,7 +11,7 @@ import {
 import LmsApiService from '../../../data/services/LmsApiService';
 import SystemErrorAlertModal from '../../learner-credit-management/cards/assignment-allocation-status-modals/SystemErrorAlertModal';
 import AddMembersModalContent from './AddMembersModalContent';
-import { learnerCreditManagementQueryKeys } from '../../learner-credit-management/data';
+import { peopleManagementQueryKeys } from '../constants';
 import { useAllEnterpriseGroupLearners } from '../data/hooks';
 
 const AddMembersModal = ({
@@ -44,7 +44,7 @@ const AddMembersModal = ({
       });
       await LmsApiService.inviteEnterpriseLearnersToGroup(groupUuid, requestBody);
       queryClient.invalidateQueries({
-        queryKey: learnerCreditManagementQueryKeys.group(groupUuid),
+        queryKey: peopleManagementQueryKeys.group(groupUuid),
       });
       setAddButtonState('complete');
       handleCloseAddMembersModal();

src/components/PeopleManagement/AddMembersModal/AddMembersModal.jsx

@@ -8,10 +8,13 @@ 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 EVENT_NAMES from '../../eventTracking';
+import { learnerCreditManagementQueryKeys } from '../learner-credit-management/data';
 
 const CreateGroupModal = ({
   isModalOpen,
@@ -24,6 +27,8 @@ const CreateGroupModal = ({
   const [groupName, setGroupName] = useState('');
   const [canCreateGroup, setCanCreateGroup] = useState(false);
   const [canInviteMembers, setCanInviteMembers] = useState(false);
+  const [isCreateGroupFileUpload, setIsCreateGroupFileUpload] = useState(false);
+  const [isCreateGroupListSelection, setIsCreateGroupListSelection] = useState(false);
   const [isSystemErrorModalOpen, openSystemErrorModal, closeSystemErrorModal] = useToggle(false);
   const handleCloseCreateGroupModal = () => {
     closeModal();
@@ -38,13 +43,43 @@ const CreateGroupModal = ({
       groupName,
     };
     let groupCreationResponse;
-
     try {
       groupCreationResponse = await LmsApiService.createEnterpriseGroup(options);
+      sendEnterpriseTrackEvent(
+        enterpriseUUID,
+        EVENT_NAMES.PEOPLE_MANAGEMENT.CREATE_GROUP_MODAL_BUTTON_SUBMIT,
+        { status: 'success' },
+      );
+      if (isCreateGroupListSelection && isCreateGroupFileUpload) {
+        sendEnterpriseTrackEvent(
+          enterpriseUUID,
+          EVENT_NAMES.PEOPLE_MANAGEMENT.GROUP_CREATE_WITH_CSV_AND_LIST,
+        );
+      } else if (isCreateGroupListSelection) {
+        sendEnterpriseTrackEvent(
+          enterpriseUUID,
+          EVENT_NAMES.PEOPLE_MANAGEMENT.GROUP_CREATE_WITH_LIST_SELECTION,
+        );
+      } else if (isCreateGroupFileUpload) {
+        sendEnterpriseTrackEvent(
+          enterpriseUUID,
+          EVENT_NAMES.PEOPLE_MANAGEMENT.GROUP_CREATE_WITH_UPLOAD_CSV,
+        );
+      }
+      setIsCreateGroupListSelection(false);
+      setIsCreateGroupFileUpload(false);
     } catch (err) {
       logError(err);
       setCreateButtonState('error');
       openSystemErrorModal();
+      sendEnterpriseTrackEvent(
+        enterpriseUUID,
+        EVENT_NAMES.PEOPLE_MANAGEMENT.CREATE_GROUP_MODAL_BUTTON_SUBMIT,
+        {
+          status: 'error',
+          message: err,
+        },
+      );
     }
 
     try {
@@ -53,7 +88,7 @@ const CreateGroupModal = ({
       });
       await LmsApiService.inviteEnterpriseLearnersToGroup(groupCreationResponse.data.uuid, requestBody);
       queryClient.invalidateQueries({
-        queryKey: peopleManagementQueryKeys.group(enterpriseUUID),
+        queryKey: learnerCreditManagementQueryKeys.group(enterpriseUUID),
       });
       setCreateButtonState('complete');
       handleCloseCreateGroupModal();
@@ -114,6 +149,8 @@ const CreateGroupModal = ({
           onEmailAddressesChange={handleEmailAddressesChange}
           isGroupInvite
           enterpriseUUID={enterpriseUUID}
+          setIsCreateGroupFileUpload={setIsCreateGroupFileUpload}
+          setIsCreateGroupListSelection={setIsCreateGroupListSelection}
         />
       </FullscreenModal>
       <SystemErrorAlertModal

src/components/PeopleManagement/CreateGroupModal.jsx

@@ -17,10 +17,12 @@ import EnterpriseCustomerUserDataTable from './EnterpriseCustomerUserDataTable';
 import { useEnterpriseLearners } from '../learner-credit-management/data';
 
 const CreateGroupModalContent = ({
+  enterpriseUUID,
+  isGroupInvite,
   onEmailAddressesChange,
   onSetGroupName,
-  isGroupInvite,
-  enterpriseUUID,
+  setIsCreateGroupFileUpload,
+  setIsCreateGroupListSelection,
 }) => {
   const [learnerEmails, setLearnerEmails] = useState([]);
   const [emailAddressesInputValue, setEmailAddressesInputValue] = useState('');
@@ -55,7 +57,8 @@ const CreateGroupModalContent = ({
       return;
     }
     setLearnerEmails(prev => [...prev, ...value]);
-  }, [onEmailAddressesChange]);
+    setIsCreateGroupListSelection(true);
+  }, [onEmailAddressesChange, setIsCreateGroupListSelection]);
 
   const handleRemoveMembersBulkAction = useCallback((value) => {
     if (!value) {
@@ -138,6 +141,7 @@ const CreateGroupModalContent = ({
           <FileUpload
             memberInviteMetadata={memberInviteMetadata}
             setEmailAddressesInputValue={setEmailAddressesInputValue}
+            setIsCreateGroupFileUpload={setIsCreateGroupFileUpload}
           />
         </Col>
         <Col>
@@ -161,6 +165,8 @@ CreateGroupModalContent.propTypes = {
   onSetGroupName: PropTypes.func,
   isGroupInvite: PropTypes.bool,
   enterpriseUUID: PropTypes.string.isRequired,
+  setIsCreateGroupFileUpload: PropTypes.func,
+  setIsCreateGroupListSelection: PropTypes.func,
 };
 
 export default CreateGroupModalContent;