fix: small copy/padding changes (#1377)

openedx · Jan 14, 2025 · 4b4924b · 4b4924b
1 parent 598996b
commit 4b4924b
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 56 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,