Resolving Reversed Date Sorting in Your ESHOPMAN Admin Dashboard

Efficient storefront management within HubSpot relies on a seamless experience with your ESHOPMAN Admin Dashboard. Accurate data presentation and sorting are crucial for quick decision-making and operational efficiency. Recently, our vibrant ESHOPMAN community identified and addressed a subtle yet impactful bug related to date sorting labels in the Admin Dashboard, ensuring that your data always appears as expected.

The Challenge: Reversed Date Sorting Labels

A community member reported an inconsistency where the date sorting options in the ESHOPMAN Admin Dashboard were effectively reversed. When users selected "Newest first" for columns like 'Created' or 'Updated', the system would display the oldest records at the top. Conversely, choosing "Oldest first" would unexpectedly bring the newest records to the forefront. This issue affected all date columns generated by core ESHOPMAN UI components, including critical areas like Customer Groups, Policy lists, and Role tables.

Understanding the ESHOPMAN Technical Root Cause

This wasn't a database-level issue, but rather a fascinating interplay between the ESHOPMAN Admin's user interface, its localization files, and how it communicates with the underlying Admin API. The core of the problem lay in the translation files, specifically en.json (and 33 other locale files mirroring this structure).

• The translation key filters.sorting.dateAsc was incorrectly mapped to the label "Newest first".
• The translation key filters.sorting.dateDesc was incorrectly mapped to "Oldest first".

When the ESHOPMAN Admin Dashboard, built on Node.js/TypeScript, sent a request to the Admin API to sort by date, it correctly used parameters like order=created_at for ascending order (oldest first) and order=-created_at for descending order (newest first). However, the UI component responsible for displaying the sorting labels was pulling the reversed strings from the translation files. This meant that while the backend sorted correctly, the labels presented to the user were misleading.

For instance, the problematic translation entries looked like this:

{  "filters.sorting.dateAsc": "Newest first",  "filters.sorting.dateDesc": "Oldest first"}

This created a direct conflict between the displayed label and the actual sorting behavior, leading to user confusion. Interestingly, some ESHOPMAN plugins, such as a draft-order plugin, already implemented the correct label-to-sort mapping, highlighting the inconsistency within the core Admin Dashboard.

Steps to Observe the Reversed Sorting

To see this behavior in your ESHOPMAN Admin Dashboard:

1. Navigate to a list view with date columns, for example, Customers > Customer Groups.
2. Open the sort menu for the 'Created' column.
3. Select "Newest first".
4. Observe that the URL will contain order=created_at (ascending), and the oldest customer groups will be listed at the top, contrary to the label.

The ESHOPMAN Community-Driven Solution

The fix for this issue is straightforward but critical for user experience: swapping the values of the filters.sorting.dateAsc and filters.sorting.dateDesc translation keys in en.json and all other affected locale files. This simple adjustment ensures that the displayed label accurately reflects the sorting order applied by the ESHOPMAN Admin API.

The ESHOPMAN community played a crucial role in identifying this bug and proposing a solution. While automated attempts to fix the issue were made, the complexity of ensuring a safe, global localization update meant that a manual contribution from a dedicated community member was ultimately needed. This collaborative approach underscores the strength of the ESHOPMAN ecosystem and its commitment to continuous improvement, driven by developers and merchants alike.

Impact on Your ESHOPMAN Experience

Resolving this bug significantly enhances the usability of the ESHOPMAN Admin Dashboard. Merchants managing their storefronts via HubSpot CMS and developers working with the ESHOPMAN Admin API can now rely on accurate date sorting, streamlining tasks such as reviewing recent customer activity, tracking order statuses, or managing content updates. This fix is another step towards a more intuitive and powerful headless commerce experience with ESHOPMAN.