Refactor components from injectIntl HOC to useTranslation hook

[Copilot]

Migrates 8 components from the deprecated injectIntl Higher-Order Component pattern to the modern useTranslation hook, addressing tech debt around hard-coded role strings and outdated translation patterns.

Changes

• Removed HOC wrapper pattern: Eliminated injectIntl() wrapper and WrappedComponentProps interface extensions
• Adopted hook pattern: Added const { t } = useTranslation() calls within component bodies
• Updated translation calls: Replaced all intl.formatMessage() with t() function calls
• Simplified props interfaces: Removed intl prop dependencies from component signatures

Files Modified

• users/components/tables/CoursesTable.tsx
• course/users/components/misc/UserProfileCard.tsx
• course/users/components/buttons/UserManagementButtons.tsx
• course/user-invitations/components/tables/InvitationResultUsersTable.tsx
• course/user-invitations/components/tables/UserInvitationsTable.tsx
• course/enrol-requests/components/buttons/PendingEnrolRequestsButtons.tsx
• course/user-invitations/components/forms/IndividualInvitation.tsx
• course/user-invitations/components/tables/InvitationResultInvitationsTable.tsx

Example

Before:

interface Props extends WrappedComponentProps {
  user: CourseUserEntity;
}

const UserProfileCard: FC<Props> = ({ user, intl }) => {
  return <div>{intl.formatMessage(translations.level)}</div>;
};

export default injectIntl(UserProfileCard);

After:

interface Props {
  user: CourseUserEntity;
}

const UserProfileCard: FC<Props> = ({ user }) => {
  const { t } = useTranslation();
  return <div>{t(translations.level)}</div>;
};

export default UserProfileCard;

All translation keys, component behavior, and rendering logic remain unchanged. COURSE_USER_ROLES mapping still uses hard-coded strings pending future translation implementation.

Original prompt

Problem Statement

We have identified that COURSE_USER_ROLES is a mapping that leads to hard-coded strings. Sometimes, this mapping is displayed directly to the user, which is problematic because it should be translatable.

Several components are still using the deprecated injectIntl hook instead of the new useTranslation hook with the t() function.

Task

Refactor the following components to use the useTranslation hook instead of injectIntl:

1. client/app/bundles/users/components/tables/CoursesTable.tsx
2. client/app/bundles/course/users/components/misc/UserProfileCard.tsx
3. client/app/bundles/course/users/components/buttons/UserManagementButtons.tsx
4. client/app/bundles/course/user-invitations/components/tables/InvitationResultUsersTable.tsx
5. client/app/bundles/course/user-invitations/components/tables/UserInvitationsTable.tsx
6. client/app/bundles/course/enrol-requests/components/buttons/PendingEnrolRequestsButtons.tsx
7. client/app/bundles/course/user-invitations/components/forms/IndividualInvitation.tsx
8. client/app/bundles/course/user-invitations/components/tables/InvitationResultInvitationsTable.tsx

Requirements

1. Replace injectIntl and WrappedComponentProps imports with useTranslation hook
2. Replace intl.formatMessage() calls with t() function
3. Remove the injectIntl HOC wrapper at component export
4. Convert components from class-based props pattern to using the hook directly
5. Look at other components in the repository (like CourseUserItem.tsx, ManageUsersTable/index.tsx) for reference on how to properly use the useTranslation hook
6. DO NOT MAKE ANY CHANGES TO THE COMPONENT FUNCTIONALITY - only refactor the translation mechanism

Important Notes

• The components should maintain all existing functionality
• All translation keys and messages should remain the same
• Component behavior, props, and rendering logic should not change
• Only the translation mechanism should be updated from intl to t()

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[adi-herwana-nus]

@copilot Your PR is failing jslint, run yarn lint-fix on the client directory to fix it.

[adi-herwana-nus]

@copilot It seems you are failing because the workflow used Node v20. Can you try using node v22 to match the project version?