feat(users): extend search to include external ID in user tables

Update the search placeholder and filter logic in ManageUsersTable and
UserInvitationsTable to match against external ID in addition to name
and email. The existing shouldInclude in ManageUsersTable was refactored
to pre-compute the query string and add the externalId check.
UserInvitationsTable gains a search prop with a matching shouldInclude
and a localised placeholder, plus sets searchable: true on the
conditionally-rendered externalId column so TanStack's column-level
filter also covers it.

Add a searchText translation key to user-invitations/translations.ts
mirroring the wording used in the users bundle.

Author: LWS49

client/app/bundles/course/user-invitations/components/tables/UserInvitationsTable.tsx

@@ -168,7 +168,7 @@ const UserInvitationsTable: FC<Props> = (props) => {
             of: 'externalId',
             title: t(tableTranslations.externalId ?? null),
             sortable: false,
-            searchable: false,
+            searchable: true,
             cell: (datum) => datum.externalId ?? null,
           } satisfies ColumnTemplate<InvitationRowData>,
         ]
@@ -278,6 +278,23 @@ const UserInvitationsTable: FC<Props> = (props) => {
       data={processedInvitations}
       getRowId={(datum) => datum.id.toString()}
       indexing={{ indices: true }}
+      search={{
+        searchPlaceholder: t(translations.searchText),
+        searchProps: {
+          shouldInclude: (invitation, filterValue?: string): boolean => {
+            if (!invitation.name && !invitation.email) return false;
+            if (!filterValue?.length) return true;
+
+            const query = filterValue.toLowerCase().trim();
+            return (
+              invitation.name.toLowerCase().trim().includes(query) ||
+              invitation.email.toLowerCase().trim().includes(query) ||
+              (invitation.externalId?.toLowerCase().trim().includes(query) ??
+                false)
+            );
+          },
+        },
+      }}
       sort={{
         initially: { by: 'status', order: 'asc' },
       }}

client/app/bundles/course/user-invitations/translations.ts

@@ -22,6 +22,10 @@ const translations = defineMessages({
     id: 'course.userInvitations.UserInvitationsTable.noInvitations',
     defaultMessage: 'There are no invitations.',
   },
+  searchText: {
+    id: 'course.userInvitations.UserInvitationsTable.searchText',
+    defaultMessage: 'Search by name, email or External ID',
+  },
   pending: {
     id: 'course.userInvitations.UserInvitationsTable.pending',
     defaultMessage: 'Pending',

client/app/bundles/course/users/components/tables/ManageUsersTable/index.tsx

@@ -195,15 +195,11 @@ const ManageUsersTable = (props: ManageUsersTableProps): JSX.Element => {
             if (!user.name && !user.email) return false;
             if (!filterValue?.length) return true;
 
+            const query = filterValue.toLowerCase().trim();
             return (
-              user.name
-                .toLowerCase()
-                .trim()
-                .includes(filterValue.toLowerCase().trim()) ||
-              user.email
-                .toLowerCase()
-                .trim()
-                .includes(filterValue.toLowerCase().trim())
+              user.name.toLowerCase().trim().includes(query) ||
+              user.email.toLowerCase().trim().includes(query) ||
+              (user.externalId?.toLowerCase().trim().includes(query) ?? false)
             );
           },
         },

client/app/bundles/course/users/translations.ts

@@ -7,7 +7,7 @@ const translations = defineMessages({
   },
   searchText: {
     id: 'course.users.ManageUsersTable.ManageUsersTable.searchText',
-    defaultMessage: 'Search by name or email',
+    defaultMessage: 'Search by name, email or External ID',
   },
   renameSuccess: {
     id: 'course.users.ManageUsersTable.renameSuccess',