[fix-5575]: sorting chevron (#2783)

* Sorting options styling

* Fix tests

src/signals/incident-management/containers/IncidentOverviewPage/components/IncidentOverviewTitle/__tests__/IncidentOverviewTitle.test.js

@@ -139,7 +139,7 @@ describe('containers/IncidentOverviewTitle', () => {
     expect(
       screen.getByText('Zoekresultaten voor "Foo bar"')
     ).toBeInTheDocument()
-    expect(screen.getByText('Sorteer op datum (oud-nieuw)')).toBeInTheDocument()
+    expect(screen.getByText('Sorteer op datum (nieuw-oud)')).toBeInTheDocument()
   })
 
   it('should provide the IncidentOverviewTitle component with sort information', () => {
@@ -155,7 +155,7 @@ describe('containers/IncidentOverviewTitle', () => {
       )
     )
 
-    expect(screen.getByText('Sorteer op datum (nieuw-oud)')).toBeInTheDocument()
+    expect(screen.getByText('Sorteer op datum (oud-nieuw)')).toBeInTheDocument()
 
     const resetBtn = screen.getByText('Wis sortering')
 

src/signals/incident-management/containers/IncidentOverviewPage/components/List/index.test.tsx

@@ -342,7 +342,7 @@ describe('List', () => {
 
     userEvent.click(screen.getByRole('columnheader', { name: 'Datum' }))
 
-    expect(orderingChangedActionMock).toHaveBeenCalledWith('created_at')
+    expect(orderingChangedActionMock).toHaveBeenCalledWith('-created_at')
   })
 
   it('should sort by clicking on the column header and pick the opposite reversed', () => {
@@ -352,7 +352,7 @@ describe('List', () => {
 
     userEvent.click(screen.getByRole('columnheader', { name: 'Datum' }))
 
-    expect(orderingChangedActionMock).toHaveBeenCalledWith('-created_at')
+    expect(orderingChangedActionMock).toHaveBeenCalledWith('created_at')
   })
 
   it('should not sort when sorting is disabled except date', () => {

src/signals/incident-management/containers/IncidentOverviewPage/components/List/index.tsx

@@ -45,7 +45,7 @@ import {
 } from './styles'
 import { useIncidentManagementContext } from '../../../../context'
 import { SortOptionLabels, SortOptions } from '../../contants'
-import compareSortOptions from '../../utils'
+import { compareSortOptions } from '../../utils'
 import ThSort from '../Th'
 
 export const getDaysOpen = (incident: IncidentListItem) => {
@@ -141,7 +141,7 @@ const List: FunctionComponent<ListProps> = ({
             <ThParent />
             <ThSort
               StyledComponent={ThPriority}
-              sortOption={SortOptions.PRIORITY_DESC}
+              sortOption={SortOptions.PRIORITY_ASC}
               headerText={SortOptionLabels.URGENTIE}
               ordering={ordering}
               changeOrder={changeOrder}
@@ -158,7 +158,7 @@ const List: FunctionComponent<ListProps> = ({
             <ThDay $isDisabled={true}>Dag</ThDay>
             <ThSort
               StyledComponent={ThDate}
-              sortOption={SortOptions.CREATED_AT_ASC}
+              sortOption={SortOptions.CREATED_AT_DESC}
               headerText={SortOptionLabels.DATUM}
               ordering={ordering}
               changeOrder={changeOrder}

src/signals/incident-management/containers/IncidentOverviewPage/components/SortIcon/SortIcon.test.tsx

@@ -15,7 +15,7 @@ describe('SortIcon', () => {
       />
     )
 
-    expect(screen.getByTestId('chevron-up')).toBeInTheDocument()
+    expect(screen.getByTestId('chevron-down')).toBeInTheDocument()
   })
 
   it('should render a sort icon for created at desc when its asc', () => {
@@ -26,7 +26,7 @@ describe('SortIcon', () => {
       />
     )
 
-    expect(screen.getByTestId('chevron-down')).toBeInTheDocument()
+    expect(screen.getByTestId('chevron-up')).toBeInTheDocument()
   })
 
   it('should render a sort icon for id when its desc', () => {
@@ -74,6 +74,26 @@ describe('SortIcon', () => {
     expect(screen.getByTestId('chevron-up')).toBeInTheDocument()
   })
 
+  it('should render a sort icon for priority desc', () => {
+    const { rerender } = render(
+      <SortIcon
+        sortOption={SortOptions.PRIORITY_ASC}
+        selectedSortOption={SortOptions.PRIORITY_DESC}
+      />
+    )
+
+    expect(screen.getByTestId('chevron-down')).toBeInTheDocument()
+
+    rerender(
+      <SortIcon
+        sortOption={SortOptions.PRIORITY_DESC}
+        selectedSortOption={SortOptions.PRIORITY_ASC}
+      />
+    )
+
+    expect(screen.getByTestId('chevron-up')).toBeInTheDocument()
+  })
+
   it('should return null when there is no match between sortOption and selectedSortOption', () => {
     render(
       <SortIcon

src/signals/incident-management/containers/IncidentOverviewPage/components/SortIcon/SortIcon.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2023 Gemeente Amsterdam
 import { Chevron } from './styled'
 import type { SortOptions } from '../../contants'
-import compareSortOptions from '../../utils'
+import { compareSortOptions, sortException } from '../../utils'
 
 export default function SortIcon({
   selectedSortOption,
@@ -11,18 +11,22 @@ export default function SortIcon({
   sortOption: SortOptions
   selectedSortOption?: SortOptions
 }) {
-  /**
-   * The sorting for created at differs from the other columns because the dates
-   * are sorted from newest to oldest by default. The sorting differs for ID because
-   * it chevrons behaviour needs to mimick that of the created at chevron. The
-   * other columns are sorted alphabetically by from A to Z by default.
-   */
   if (
     !selectedSortOption ||
     !compareSortOptions(selectedSortOption, sortOption)
   )
     return null
 
+  if (sortException(sortOption)) {
+    const rotateException = !selectedSortOption?.startsWith('-')
+    return (
+      <Chevron
+        data-testid={rotateException ? 'chevron-up' : 'chevron-down'}
+        $rotated={rotateException}
+      />
+    )
+  }
+
   const rotate = selectedSortOption?.startsWith('-')
   return (
     <Chevron

src/signals/incident-management/containers/IncidentOverviewPage/contants.ts

@@ -9,10 +9,10 @@ export enum SortOptions {
   ID_DESC = '-id',
   DISTRICT_ASC = 'area_name',
   DISTRICT_DESC = '-area_name',
-  CREATED_AT_ASC = '-created_at',
-  CREATED_AT_DESC = 'created_at',
-  PRIORITY_ASC = '-priority',
-  PRIORITY_DESC = 'priority',
+  CREATED_AT_ASC = 'created_at',
+  CREATED_AT_DESC = '-created_at',
+  PRIORITY_ASC = 'priority',
+  PRIORITY_DESC = '-priority',
   STATUS_ASC = 'status',
   STATUS_DESC = '-status',
   SUBCATEGORY_ASC = 'sub_category',
@@ -61,9 +61,9 @@ export const sortOptionsList: SortOption[] = [
     key: SortOptionKeys.DATUM,
     label: SortOptionLabels.DATUM,
     asc: SortOptions.CREATED_AT_ASC,
-    asc_label: '(nieuw-oud)',
+    asc_label: '(oud-nieuw)',
     desc: SortOptions.CREATED_AT_DESC,
-    desc_label: '(oud-nieuw)',
+    desc_label: '(nieuw-oud)',
   },
   {
     key: SortOptionKeys.ID,
@@ -101,8 +101,8 @@ export const sortOptionsList: SortOption[] = [
     key: SortOptionKeys.URGENTIE,
     label: SortOptionLabels.URGENTIE,
     asc: SortOptions.PRIORITY_ASC,
-    asc_label: '(laag-hoog)',
+    asc_label: '(hoog-laag-normaal)',
     desc: SortOptions.PRIORITY_DESC,
-    desc_label: '(hoog-laag)',
+    desc_label: '(normaal-laag-hoog)',
   },
 ]

src/signals/incident-management/containers/IncidentOverviewPage/utils.ts

@@ -1,7 +1,15 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2023 Gemeente Amsterdam
-import type { SortOptions } from './contants'
+import { SortOptions } from './contants'
 
-export default function compareSortOptions(a: SortOptions, b: SortOptions) {
+export function compareSortOptions(a: SortOptions, b: SortOptions) {
   return a.replace('-', '') === b.replace('-', '')
 }
+
+export const sortException = (sortOption: SortOptions) => {
+  /** Priority is based on alphabetical order, therefore chevron should be reversed. */
+  return (
+    sortOption === SortOptions.PRIORITY_ASC ||
+    sortOption === SortOptions.PRIORITY_DESC
+  )
+}