HAI-1510 Fix lower and upper case names causing problems in table sor…

…ting (#369) Fixed problem where sorting in users rights view table would not work correctly when there are names in both lower and upper case.
City-of-Helsinki · Sep 19, 2023 · ac815b8 · ac815b8
1 parent 0793950
commit ac815b8
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 38 deletions.
diff --git a/src/domain/hanke/accessRights/AccessRightsView.test.tsx b/src/domain/hanke/accessRights/AccessRightsView.test.tsx
@@ -80,7 +80,7 @@ test('Pagination works', async () => {
   await waitForLoadingToFinish();
   fireEvent.click(screen.getByTestId('hds-pagination-next-button'));
 
-  expect((screen.getByRole('table') as HTMLTableElement).tBodies[0].rows).toHaveLength(1);
+  expect((screen.getByRole('table') as HTMLTableElement).tBodies[0].rows).toHaveLength(2);
   expect(screen.getAllByText(users[10].nimi)).toHaveLength(2);
   expect(screen.getAllByText(users[10].sahkoposti)).toHaveLength(2);
 });
@@ -96,11 +96,11 @@ test('Sorting by users name works', async () => {
   expect(screen.getByTestId('nimi-2')).toHaveTextContent(users[8].nimi);
   expect(screen.getByTestId('nimi-3')).toHaveTextContent(users[5].nimi);
   expect(screen.getByTestId('nimi-4')).toHaveTextContent(users[0].nimi);
-  expect(screen.getByTestId('nimi-5')).toHaveTextContent(users[6].nimi);
-  expect(screen.getByTestId('nimi-6')).toHaveTextContent(users[7].nimi);
-  expect(screen.getByTestId('nimi-7')).toHaveTextContent(users[10].nimi);
-  expect(screen.getByTestId('nimi-8')).toHaveTextContent(users[4].nimi);
-  expect(screen.getByTestId('nimi-9')).toHaveTextContent(users[1].nimi);
+  expect(screen.getByTestId('nimi-5')).toHaveTextContent(users[11].nimi);
+  expect(screen.getByTestId('nimi-6')).toHaveTextContent(users[6].nimi);
+  expect(screen.getByTestId('nimi-7')).toHaveTextContent(users[7].nimi);
+  expect(screen.getByTestId('nimi-8')).toHaveTextContent(users[10].nimi);
+  expect(screen.getByTestId('nimi-9')).toHaveTextContent(users[4].nimi);
 
   fireEvent.click(screen.getByTestId('hds-table-sorting-header-nimi'));
 
@@ -111,9 +111,9 @@ test('Sorting by users name works', async () => {
   expect(screen.getByTestId('nimi-4')).toHaveTextContent(users[7].nimi);
   expect(screen.getByTestId('nimi-5')).toHaveTextContent(users[6].nimi);
   expect(screen.getByTestId('nimi-6')).toHaveTextContent(users[0].nimi);
-  expect(screen.getByTestId('nimi-7')).toHaveTextContent(users[5].nimi);
-  expect(screen.getByTestId('nimi-8')).toHaveTextContent(users[8].nimi);
-  expect(screen.getByTestId('nimi-9')).toHaveTextContent(users[9].nimi);
+  expect(screen.getByTestId('nimi-7')).toHaveTextContent(users[11].nimi);
+  expect(screen.getByTestId('nimi-8')).toHaveTextContent(users[5].nimi);
+  expect(screen.getByTestId('nimi-9')).toHaveTextContent(users[8].nimi);
 });
 
 test('Sorting by users email works', async () => {
@@ -127,11 +127,11 @@ test('Sorting by users email works', async () => {
   expect(screen.getByTestId('sahkoposti-2')).toHaveTextContent(users[8].sahkoposti);
   expect(screen.getByTestId('sahkoposti-3')).toHaveTextContent(users[5].sahkoposti);
   expect(screen.getByTestId('sahkoposti-4')).toHaveTextContent(users[0].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-5')).toHaveTextContent(users[6].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-6')).toHaveTextContent(users[7].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-7')).toHaveTextContent(users[10].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-8')).toHaveTextContent(users[4].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-9')).toHaveTextContent(users[1].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-5')).toHaveTextContent(users[11].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-6')).toHaveTextContent(users[6].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-7')).toHaveTextContent(users[7].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-8')).toHaveTextContent(users[10].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-9')).toHaveTextContent(users[4].sahkoposti);
 
   fireEvent.click(screen.getByTestId('hds-table-sorting-header-sahkoposti'));
 
@@ -141,26 +141,30 @@ test('Sorting by users email works', async () => {
   expect(screen.getByTestId('sahkoposti-3')).toHaveTextContent(users[10].sahkoposti);
   expect(screen.getByTestId('sahkoposti-4')).toHaveTextContent(users[7].sahkoposti);
   expect(screen.getByTestId('sahkoposti-5')).toHaveTextContent(users[6].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-6')).toHaveTextContent(users[0].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-7')).toHaveTextContent(users[5].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-8')).toHaveTextContent(users[8].sahkoposti);
-  expect(screen.getByTestId('sahkoposti-9')).toHaveTextContent(users[9].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-6')).toHaveTextContent(users[11].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-7')).toHaveTextContent(users[0].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-8')).toHaveTextContent(users[5].sahkoposti);
+  expect(screen.getByTestId('sahkoposti-9')).toHaveTextContent(users[8].sahkoposti);
 });
 
 test('Filtering works', async () => {
   const { user } = render(<AccessRightsViewContainer hankeTunnus="HAI22-2" />);
 
   await waitForLoadingToFinish();
-  await user.type(screen.getByRole('combobox', { name: 'Haku' }), 'Matti Meikäläinen');
+  fireEvent.change(screen.getByRole('combobox', { name: 'Haku' }), {
+    target: { value: 'Teppo Työmies' },
+  });
 
   await waitFor(() =>
     expect((screen.getByRole('table') as HTMLTableElement).tBodies[0].rows).toHaveLength(1),
   );
-  expect(screen.getAllByText(users[0].nimi)).toHaveLength(2);
+  expect(screen.getAllByText(users[1].nimi)).toHaveLength(2);
 
   // Clear the search
   await user.click(screen.getByRole('button', { name: 'Clear' }));
-  await user.type(screen.getByRole('combobox', { name: 'Haku' }), 'ak');
+  fireEvent.change(screen.getByRole('combobox', { name: 'Haku' }), {
+    target: { value: 'ak' },
+  });
 
   await waitFor(() =>
     expect((screen.getByRole('table') as HTMLTableElement).tBodies[0].rows).toHaveLength(2),

diff --git a/src/domain/hanke/accessRights/AccessRightsView.tsx b/src/domain/hanke/accessRights/AccessRightsView.tsx
@@ -35,6 +35,15 @@ import { updateHankeUsers } from '../hankeUsers/hankeUsersApi';
 import Container from '../../../common/components/container/Container';
 import UserCard from './UserCard';
 
+function sortCaseInsensitive(rowOneColumn: string, rowTwoColumn: string) {
+  const rowOneColUpperCase = rowOneColumn.toUpperCase();
+  const rowTwoColUpperCase = rowTwoColumn.toUpperCase();
+  if (rowOneColUpperCase === rowTwoColUpperCase) {
+    return 0;
+  }
+  return rowOneColUpperCase > rowTwoColUpperCase ? 1 : -1;
+}
+
 type Props = {
   hankeUsers: HankeUser[];
   hankeTunnus: string;
@@ -75,6 +84,13 @@ function AccessRightsView({ hankeUsers, hankeTunnus, hankeName, signedInUser }:
       columns,
       data: usersData,
       autoResetFilters: false,
+      sortTypes: {
+        alphanumeric: (row1, row2, columnName) => {
+          const rowOneColumn: string = row1.values[columnName];
+          const rowTwoColumn: string = row2.values[columnName];
+          return sortCaseInsensitive(rowOneColumn, rowTwoColumn);
+        },
+      },
     },
     useFilters,
     useSortBy,
@@ -182,6 +198,26 @@ function AccessRightsView({ hankeUsers, hankeTunnus, hankeName, signedInUser }:
     );
   }
 
+  const tableCols = [
+    {
+      headerName: t('form:yhteystiedot:labels:nimi'),
+      key: NAME_KEY,
+      isSortable: true,
+      customSortCompareFunction: sortCaseInsensitive,
+    },
+    {
+      headerName: t('form:yhteystiedot:labels:email'),
+      key: EMAIL_KEY,
+      isSortable: true,
+      customSortCompareFunction: sortCaseInsensitive,
+    },
+    {
+      headerName: t('hankeUsers:accessRights'),
+      key: ACCESS_RIGHT_LEVEL_KEY,
+      transform: getAccessRightSelect,
+    },
+  ];
+
   return (
     <article className={styles.container}>
       <header className={styles.header}>
@@ -261,23 +297,7 @@ function AccessRightsView({ hankeUsers, hankeTunnus, hankeName, signedInUser }:
 
         <div className={styles.table}>
           <Table
-            cols={[
-              {
-                headerName: t('form:yhteystiedot:labels:nimi'),
-                key: NAME_KEY,
-                isSortable: true,
-              },
-              {
-                headerName: t('form:yhteystiedot:labels:email'),
-                key: EMAIL_KEY,
-                isSortable: true,
-              },
-              {
-                headerName: t('hankeUsers:accessRights'),
-                key: ACCESS_RIGHT_LEVEL_KEY,
-                transform: getAccessRightSelect,
-              },
-            ]}
+            cols={tableCols}
             rows={page.map((row) => row.original)}
             onSort={handleTableSort}
             indexKey="id"

diff --git a/src/domain/mocks/data/users-data.json b/src/domain/mocks/data/users-data.json
@@ -86,5 +86,13 @@
     "kayttooikeustaso": "KATSELUOIKEUS",
     "tunnistautunut": false,
     "hankeTunnus": "HAI22-2"
+  },
+  {
+    "id": "3fa85f64-5717-4562-b3fc-2c963f66af5",
+    "sahkoposti": "[email protected]",
+    "nimi": "matti Meikäläinen",
+    "kayttooikeustaso": "KATSELUOIKEUS",
+    "tunnistautunut": true,
+    "hankeTunnus": "HAI22-2"
   }
 ]