From 4b4924b9cf614c14b37ed863570866bb1cc21f10 Mon Sep 17 00:00:00 2001
From: Kira Miller <31229189+kiram15@users.noreply.github.com>
Date: Tue, 14 Jan 2025 14:36:32 -0700
Subject: [PATCH] fix: small copy/padding changes (#1377)

---
 .../CreateGroupModalContent.jsx               |  2 +-
 .../EnrollmentsTableColumnHeader.jsx          | 40 -------------------
 .../GroupDetailPage/DeleteGroupModal.jsx      |  6 +--
 .../GroupDetailPage/GroupDetailPage.jsx       |  3 +-
 .../GroupDetailPage/GroupMembersTable.jsx     |  7 +++-
 src/components/PeopleManagement/index.jsx     | 13 +++---
 .../tests/CreateGroupModal.test.jsx           |  2 +-
 .../tests/GroupDetailPage.test.jsx            |  4 +-
 8 files changed, 21 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx

diff --git a/src/components/PeopleManagement/CreateGroupModalContent.jsx b/src/components/PeopleManagement/CreateGroupModalContent.jsx
index 7c9eab902d..d9ec078c99 100644
--- a/src/components/PeopleManagement/CreateGroupModalContent.jsx
+++ b/src/components/PeopleManagement/CreateGroupModalContent.jsx
@@ -105,7 +105,7 @@ const CreateGroupModalContent = ({
       <h3>
         <FormattedMessage
           id="people.management.page.create.group.section.header"
-          defaultMessage="Create a custom group of members"
+          defaultMessage="Create a custom group"
           description="Header for the section to create a new group."
         />
       </h3>
diff --git a/src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx b/src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx
deleted file mode 100644
index 939b0e0b74..0000000000
--- a/src/components/PeopleManagement/EnrollmentsTableColumnHeader.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import {
-  OverlayTrigger,
-  Tooltip,
-  Stack,
-  Icon,
-} from '@openedx/paragon';
-import { InfoOutline } from '@openedx/paragon/icons';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-const EnrollmentsTableColumnHeader = () => (
-  <Stack gap={1} direction="horizontal">
-    <span data-testid="members-table-enrollments-column-header">
-      <FormattedMessage
-        id="people.management.groups.detail.page.learnersTable.enrollmentsColumn"
-        defaultMessage="Enrollments"
-        description="Enrollments column header in the Members table"
-      />
-    </span>
-    <OverlayTrigger
-      key="enrollments-column-tooltip"
-      placement="top"
-      overlay={(
-        <Tooltip id="enrollments-column-tooltip">
-          <div>
-            <FormattedMessage
-              id="people.management.groups.detail.page.learnersTable.enrollmentsColumn.tooltip"
-              defaultMessage="Total number of enrollment originated from the budget"
-              description="Tooltip for the Enrollments column header in the Group Members table"
-            />
-          </div>
-        </Tooltip>
-      )}
-    >
-      <Icon size="xs" src={InfoOutline} className="ml-1 d-inline-flex" />
-    </OverlayTrigger>
-  </Stack>
-);
-
-export default EnrollmentsTableColumnHeader;
diff --git a/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx b/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx
index ccf98ee650..e02cac73d8 100644
--- a/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx
+++ b/src/components/PeopleManagement/GroupDetailPage/DeleteGroupModal.jsx
@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import {
   ActionRow, Button, ModalDialog, useToggle,
 } from '@openedx/paragon';
-import { RemoveCircleOutline } from '@openedx/paragon/icons';
+import { RemoveCircle } from '@openedx/paragon/icons';
 
 import GeneralErrorModal from '../GeneralErrorModal';
 import { ROUTE_NAMES } from '../../EnterpriseApp/data/constants';
@@ -56,7 +56,7 @@ const DeleteGroupModal = ({
           <FormattedMessage
             id="people.management.delete.group.modal.body.2"
             defaultMessage={
-            'By deleting this group you will no longer be able to track analytics associated'
+            'By deleting this group, you will no longer be able to track analytics associated'
             + ' with this group and the group will be removed from your People Management page.'
           }
             description="Warning shown when deleting a group part 2."
@@ -67,7 +67,7 @@ const DeleteGroupModal = ({
             <ModalDialog.CloseButton variant="tertiary">
               Go back
             </ModalDialog.CloseButton>
-            <Button variant="danger" data-testid="delete-group-button" onClick={removeEnterpriseGroup} iconBefore={RemoveCircleOutline}>
+            <Button variant="danger" data-testid="delete-group-button" onClick={removeEnterpriseGroup} iconBefore={RemoveCircle}>
               Delete group
             </Button>
           </ActionRow>
diff --git a/src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx b/src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx
index 8da3181588..0cd8706863 100644
--- a/src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx
+++ b/src/components/PeopleManagement/GroupDetailPage/GroupDetailPage.jsx
@@ -13,6 +13,7 @@ import EditGroupNameModal from './EditGroupNameModal';
 import formatDates from '../utils';
 import GroupMembersTable from './GroupMembersTable';
 import AddMembersModal from '../AddMembersModal/AddMembersModal';
+import { makePlural } from '../../../utils';
 
 const GroupDetailPage = () => {
   const intl = useIntl();
@@ -98,7 +99,7 @@ const GroupDetailPage = () => {
                     />
                   </>
                 )}
-                subtitle={`${enterpriseGroup.acceptedMembersCount} accepted members`}
+                subtitle={makePlural(enterpriseGroup.acceptedMembersCount, 'member')}
               />
               <Card.Section className="pt-1 x-small">
                 Created on {formatDates(enterpriseGroup.created)}
diff --git a/src/components/PeopleManagement/GroupDetailPage/GroupMembersTable.jsx b/src/components/PeopleManagement/GroupDetailPage/GroupMembersTable.jsx
index 4c399da953..c212bd9c93 100644
--- a/src/components/PeopleManagement/GroupDetailPage/GroupMembersTable.jsx
+++ b/src/components/PeopleManagement/GroupDetailPage/GroupMembersTable.jsx
@@ -9,7 +9,6 @@ import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import TableTextFilter from '../../learner-credit-management/TableTextFilter';
 import CustomDataTableEmptyState from '../../learner-credit-management/CustomDataTableEmptyState';
 import MemberDetailsTableCell from '../../learner-credit-management/members-tab/MemberDetailsTableCell';
-import EnrollmentsTableColumnHeader from '../EnrollmentsTableColumnHeader';
 import {
   GROUP_MEMBERS_TABLE_DEFAULT_PAGE,
   GROUP_MEMBERS_TABLE_PAGE_SIZE,
@@ -129,7 +128,11 @@ const GroupMembersTable = ({
             disableFilters: true,
           },
           {
-            Header: EnrollmentsTableColumnHeader,
+            Header: intl.formatMessage({
+              id: 'people.management.groups.detail.page.members.columns.enrollments',
+              defaultMessage: 'Enrollments',
+              description: 'Enrollments column header in the Members table in the People management Groups detail page',
+            }),
             accessor: 'enrollmentCount',
             Cell: ({ row }) => row.original.enrollments,
             disableFilters: true,
diff --git a/src/components/PeopleManagement/index.jsx b/src/components/PeopleManagement/index.jsx
index 5f88a5367b..7a6529a1b2 100644
--- a/src/components/PeopleManagement/index.jsx
+++ b/src/components/PeopleManagement/index.jsx
@@ -107,12 +107,13 @@ const PeopleManagementPage = ({ enterpriseId }) => {
             description="Title for people management data table."
           />
         </h3>
-        <FormattedMessage
-          className="mb-4"
-          id="adminPortal.peopleManagement.dataTable.subtitle"
-          defaultMessage="View all members of your organization."
-          description="Subtitle for people management members data table."
-        />
+        <p className="mb-2">
+          <FormattedMessage
+            id="adminPortal.peopleManagement.dataTable.subtitle"
+            defaultMessage="View all members of your organization."
+            description="Subtitle for people management members data table."
+          />
+        </p>
         <PeopleManagementTable />
       </div>
     </>
diff --git a/src/components/PeopleManagement/tests/CreateGroupModal.test.jsx b/src/components/PeopleManagement/tests/CreateGroupModal.test.jsx
index 2fc23d40c2..06fd4f616b 100644
--- a/src/components/PeopleManagement/tests/CreateGroupModal.test.jsx
+++ b/src/components/PeopleManagement/tests/CreateGroupModal.test.jsx
@@ -129,7 +129,7 @@ describe('<CreateGroupModal />', () => {
   });
   it('Modal renders as expected', async () => {
     render(<CreateGroupModalWrapper />);
-    expect(screen.getByText('Create a custom group of members')).toBeInTheDocument();
+    expect(screen.getByText('Create a custom group')).toBeInTheDocument();
     expect(screen.getByText('Name your group')).toBeInTheDocument();
     expect(screen.getByText('Select group members')).toBeInTheDocument();
     expect(screen.getByText('Upload a CSV or select members from the table below.')).toBeInTheDocument();
diff --git a/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx b/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx
index 2145898477..6c8ce15f1d 100644
--- a/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx
+++ b/src/components/PeopleManagement/tests/GroupDetailPage.test.jsx
@@ -95,7 +95,7 @@ describe('<GroupDetailPageWrapper >', () => {
     });
     render(<GroupDetailPageWrapper />);
     expect(screen.queryAllByText(TEST_GROUP.name)).toHaveLength(2);
-    expect(screen.getByText('0 accepted members')).toBeInTheDocument();
+    expect(screen.getByText('0 members')).toBeInTheDocument();
     expect(screen.getByText('View group progress')).toBeInTheDocument();
     expect(screen.getByText('Add and remove group members.')).toBeInTheDocument();
     expect(screen.getByText('Test 2u')).toBeInTheDocument();
@@ -107,7 +107,7 @@ describe('<GroupDetailPageWrapper >', () => {
       sortBy: [{ desc: true, id: 'memberDetails' }],
     }));
 
-    userEvent.click(screen.getByTestId('members-table-enrollments-column-header'));
+    userEvent.click(screen.getByText('Enrollments'));
     await waitFor(() => expect(mockFetchEnterpriseGroupLearnersTableData).toHaveBeenCalledWith({
       filters: [],
       pageIndex: 0,