feat: add internationalization support for sorting and search placeholders

Author: bra-i-am

src/authz-module/libraries-manager/components/SortDropdown.tsx

@@ -3,6 +3,7 @@ import {
   useEffect,
   FC,
 } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   DataTableContext,
   Dropdown,
@@ -28,38 +29,33 @@ const SORT_BY_OPTIONS: SortByOptions = {
   oldest: { id: 'createdAt', desc: false },
 };
 
-const SORT_LABELS: Record<string, string> = {
-  'name-a-z': 'Name A-Z',
-  'name-z-a': 'Name Z-A',
-  newest: 'Newest',
-  oldest: 'Oldest',
-};
-
 const SortDropdown: FC = () => {
+  const intl = useIntl();
   const { toggleSortBy, state } = useContext<DataTableContext>(DataTableContext);
   const [sortOrder, setSortOrder] = useState<string | undefined>(undefined);
 
-  // Get current sort state from DataTable context
+  const SORT_LABELS: Record<string, string> = useMemo(() => ({
+    'name-a-z': intl.formatMessage({ id: 'authz.libraries.team.table.sort.name-a-z', defaultMessage: 'Name A-Z' }),
+    'name-z-a': intl.formatMessage({ id: 'authz.libraries.team.table.sort.name-z-a', defaultMessage: 'Name Z-A' }),
+    newest: intl.formatMessage({ id: 'authz.libraries.team.table.sort.newest', defaultMessage: 'Newest' }),
+    oldest: intl.formatMessage({ id: 'authz.libraries.team.table.sort.oldest', defaultMessage: 'Oldest' }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), []);
+
   const currentSort = useMemo(() => {
     if (!state?.sortBy?.length) { return undefined; }
 
     const activeSortBy = state.sortBy[0];
     return Object.entries(SORT_BY_OPTIONS).find(
       ([, option]) => option.id === activeSortBy.id && option.desc === activeSortBy.desc,
-    )?.[0];
+    )?.[0]; // return the key
   }, [state?.sortBy]);
 
-  // Update local state when external sort changes
   useEffect(() => {
     setSortOrder(currentSort);
   }, [currentSort]);
 
   const handleChangeSortBy = useCallback((newSortOrder: string) => {
-    if (!SORT_BY_OPTIONS[newSortOrder]) {
-      console.warn(`Invalid sort option: ${newSortOrder}`);
-      return;
-    }
-
     setSortOrder(newSortOrder);
     const { id, desc } = SORT_BY_OPTIONS[newSortOrder];
     toggleSortBy(id, desc);
@@ -71,17 +67,15 @@ const SortDropdown: FC = () => {
       ...option,
       label: SORT_LABELS[key],
     })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
   const currentSortLabel = sortOrder ? SORT_LABELS[sortOrder] : 'Sort';
 
   return (
     <Dropdown onSelect={handleChangeSortBy}>
-      <Dropdown.Toggle
-        variant="outline-primary"
-        aria-label={`Sort options. Currently sorted by: ${currentSortLabel}`}
-      >
+      <Dropdown.Toggle variant="outline-primary">
         <Stack direction="horizontal" gap={2}>
           <Icon color="primary" src={SwapVert} />
           {currentSortLabel}
@@ -94,7 +88,6 @@ const SortDropdown: FC = () => {
             key={key}
             active={sortOrder === key}
             eventKey={key}
-            aria-label={`Sort by ${label}`}
           >
             {label}
           </Dropdown.Item>

src/authz-module/libraries-manager/components/TableControlBar.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   DataTable, DataTableContext,
   CheckboxFilter,
@@ -10,8 +11,10 @@ import {
 import MultipleChoiceFilter from './MultipleChoiceFilter';
 import SortDropdown from './SortDropdown';
 import SearchFilter from './SearchFilter';
+import messages from './messages';
 
 const TableControlBar = () => {
+  const intl = useIntl();
   const {
     columns,
     setAllFilters,
@@ -24,6 +27,11 @@ const TableControlBar = () => {
     .filter((column) => column.Filter === TextFilter)
     .map((column) => column.Header);
 
+  const getSearchPlaceholder = () => intl.formatMessage(messages['authz.libraries.team.table.search'], {
+    firstField: columnTextFilterHeaders[0] || 'field',
+    secondField: columnTextFilterHeaders[1] || 'field',
+  });
+
   return (
     <Stack className="pgn__data-table-status-bar mb-3 flex-wrap" gap={2} direction="horizontal">
 
@@ -35,9 +43,10 @@ const TableControlBar = () => {
         if (column.Filter === TextFilter) {
           return (
             <SearchFilter
+              key={column.id || column.accessor}
               filterValue={column.filterValue}
               setFilter={column.setFilter}
-              placeholder={`Search by ${columnTextFilterHeaders.map((header) => header).join(' or ')}`}
+              placeholder={getSearchPlaceholder()}
             />
           );
         }

src/authz-module/libraries-manager/components/messages.ts

@@ -31,6 +31,31 @@ const messages = defineMessages({
     defaultMessage: 'Edit',
     description: 'Edit action',
   },
+  'authz.libraries.team.table.search': {
+    id: 'authz.libraries.team.table.search',
+    defaultMessage: 'Search by {firstField} or {secondField}',
+    description: 'Search placeholder for two specific fields',
+  },
+  'authz.libraries.team.table.sort.name-a-z': {
+    id: 'authz.libraries.team.table.sort.name-a-z',
+    defaultMessage: 'Name A-Z',
+    description: 'Sort by name A-Z',
+  },
+  'authz.libraries.team.table.sort.name-z-a': {
+    id: 'authz.libraries.team.table.sort.name-z-a',
+    defaultMessage: 'Name Z-A',
+    description: 'Sort by name Z-A',
+  },
+  'authz.libraries.team.table.sort.newest': {
+    id: 'authz.libraries.team.table.sort.newest',
+    defaultMessage: 'Newest',
+    description: 'Sort by newest',
+  },
+  'authz.libraries.team.table.sort.oldest': {
+    id: 'authz.libraries.team.table.sort.oldest',
+    defaultMessage: 'Oldest',
+    description: 'Sort by oldest',
+  },
 });
 
 export default messages;