Ensure Apps Sort as expected when Sorting on Display Name

ui/src/data/api.ts

@@ -147,7 +147,7 @@ export const serverApps = {
       user_options: {
         name: 'test-app-3',
         jhub_app: true,
-        display_name: 'Test App 3',
+        display_name: 'TEST App 3',
         description:
           'Lorem ipsum dolor sit amet consectetur. Sit vestibulum facilisis auctor pulvinar ac. Dras.',
         thumbnail: DEFAULT_APP_LOGO,

ui/src/utils/jupyterhub.test.ts

@@ -6,6 +6,7 @@ import {
   filterAndSortApps,
   getAppLogoUrl,
   getApps,
+  getFriendlyDateStr,
   getFriendlyDisplayName,
   getFriendlyFrameworkName,
   getJhData,
@@ -94,6 +95,43 @@ describe('JupyterHub utils', () => {
     expect(result).toBe('Python');
   });
 
+  test('returns a friendly date string for recent change', () => {
+    const result = getFriendlyDateStr(new Date());
+    expect(result).toBe('Just now');
+  });
+
+  test('returns a friendly date string for change within 1 minute', () => {
+    const currentDate = new Date();
+    const result = getFriendlyDateStr(
+      new Date(currentDate.setMinutes(currentDate.getMinutes() - 1)),
+    );
+    expect(result).toBe('1 minute ago');
+  });
+
+  test('returns a friendly date string for change within minutes', () => {
+    const currentDate = new Date();
+    const result = getFriendlyDateStr(
+      new Date(currentDate.setMinutes(currentDate.getMinutes() - 5)),
+    );
+    expect(result).toBe('5 minutes ago');
+  });
+
+  test('returns a friendly date string for change within hours', () => {
+    const currentDate = new Date();
+    const result = getFriendlyDateStr(
+      new Date(currentDate.setHours(currentDate.getHours() - 5)),
+    );
+    expect(result).toBe('5 hours ago');
+  });
+
+  test('returns a friendly date string for change within days', () => {
+    const currentDate = new Date();
+    const result = getFriendlyDateStr(
+      new Date(currentDate.setHours(currentDate.getHours() - 120)),
+    );
+    expect(result).toBe('5 days ago');
+  });
+
   test('gets app theme url window object', () => {
     const result = getAppLogoUrl();
     expect(result).toBe('/img/logo.png');
@@ -105,15 +143,39 @@ describe('JupyterHub utils', () => {
     expect(document.location.href).toBe(mockUrl);
   });
 
-  test('filters and sorts apps', () => {
+  test('filters and sorts apps by recently modified', () => {
+    const apps = filterAndSortApps(
+      serverApps,
+      currentUser,
+      '',
+      'all',
+      [],
+      'Recently modified',
+    );
+    expect(apps[0].name).toBe('Test App');
+  });
+
+  test('filters and sorts apps by name asc', () => {
+    const apps = filterAndSortApps(
+      serverApps,
+      currentUser,
+      '',
+      'all',
+      [],
+      'Name: A-Z',
+    );
+    expect(apps[0].name).toBe('App with a long name that should be truncated');
+  });
+
+  test('filters and sorts apps by name desc', () => {
     const apps = filterAndSortApps(
       serverApps,
       currentUser,
       '',
       'all',
       [],
-      'name',
+      'Name: Z-A',
     );
-    expect(apps.length).toBe(5);
+    expect(apps[0].name).toBe('TEST App 3');
   });
 });

ui/src/utils/jupyterhub.ts

@@ -207,7 +207,7 @@ export const filterAndSortApps = (
         : 'all';
 
   // Get Apps based on ownership type and search value
-  const apps = getApps(data, ownershipType, currentUser?.name ?? '')
+  const apps = getApps(data, ownershipType, currentUser.name)
     .filter(
       (app) =>
         app.name.toLowerCase().includes(searchToLower) ||
@@ -226,9 +226,9 @@ export const filterAndSortApps = (
     if (sortByValue === 'Recently modified') {
       return a.last_activity > b.last_activity ? -1 : 1;
     } else if (sortByValue === 'Name: A-Z') {
-      return a.name > b.name ? 1 : -1;
+      return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1;
     }
-    return a.name > b.name ? -1 : 1;
+    return a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1;
   });
   return apps;
 };