[adoptium.net-1508] Release notes should initially be sorted by priority & component

src/components/ReleaseNotesRender/__tests__/ReleaseNotesRender.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest'
-import ReleaseNotesRender, { fetchTitle } from '../index';
-import { fetchReleaseNotesForVersion } from '../../../hooks/fetchReleaseNotes';
+import ReleaseNotesRender, { fetchTitle, sortReleaseNotesBy } from '../index';
+import { fetchReleaseNotesForVersion, ReleaseNoteAPIResponse } from '../../../hooks/fetchReleaseNotes';
 import { createMockReleaseNotesAPI  } from '../../../__fixtures__/hooks';
 import { DataGridProps } from "@mui/x-data-grid"
 import queryString from 'query-string';
@@ -117,4 +117,33 @@ describe('ReleaseNotesRender component', () => {
         expect(fetchReleaseNotesForVersion).toHaveBeenCalledTimes(1);
         expect(container).toMatchSnapshot();
     });
+
+    it('properly sort release notes', () => {
+        let unsortedReleaseNotes = {
+            "release_name": "jdk-19.0.2+7",
+            "release_notes": [
+                {
+                "id": "100",
+                "priority": "2",
+                "component": "component_b",
+                },
+                {
+                "id": "200",
+                "component": "component_a",
+                "priority": "2",
+                },
+                {
+                "id": "300",
+                "component": "component_a",
+                "priority": "1",
+                }
+            ]
+        };
+
+        let result = sortReleaseNotesBy(unsortedReleaseNotes);
+
+        expect(result.release_notes[0].id).toBe("300")
+        expect(result.release_notes[1].id).toBe("200")
+        expect(result.release_notes[2].id).toBe("100")
+    });
 });

src/components/ReleaseNotesRender/index.tsx

@@ -2,8 +2,7 @@ import React, { useRef, MutableRefObject } from 'react';
 import { DataGrid, GridColDef, GridToolbarContainer, GridToolbarFilterButton, gridClasses } from '@mui/x-data-grid';
 import { useLocation } from '@gatsbyjs/reach-router';
 import queryString from 'query-string';
-
-import { fetchReleaseNotesForVersion, useOnScreen } from '../../hooks';
+import { fetchReleaseNotesForVersion, useOnScreen, ReleaseNoteAPIResponse } from '../../hooks';
 import './ReleaseNotesRender.scss';
 
 export const fetchTitle = (priority) => {
@@ -30,6 +29,23 @@ export const fetchTitle = (priority) => {
   return title;
 };
 
+export const sortReleaseNotesBy = (releaseNotes: ReleaseNoteAPIResponse) => {
+  // issues/1508: Should initially be sorted by (a) priority then (b) component.
+  if(releaseNotes && Array.isArray(releaseNotes.release_notes)) {
+      releaseNotes.release_notes = [...releaseNotes.release_notes].sort((v1, v2) => {
+          let c = 0;
+          if(v1.priority && v2.priority) {
+              c = v1.priority.localeCompare(v2.priority);
+          }
+          if(c === 0 && v1.component && v2.component) {
+              c = v1.component.localeCompare(v2.component);
+          }
+          return c;
+      });
+  }
+  return releaseNotes;
+};
+
 const CustomToolbar: React.FunctionComponent<{
   setFilterButtonEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
 }> = ({ setFilterButtonEl }) => (
@@ -88,7 +104,7 @@ const ReleaseNotesRender = (): null | JSX.Element => {
 
   const ref = useRef<HTMLDivElement | null>(null);
   const isVisible = useOnScreen(ref as MutableRefObject<Element>, true);
-  const releaseNotes = fetchReleaseNotesForVersion(isVisible, version);
+  const releaseNotes = fetchReleaseNotesForVersion(isVisible, version, sortReleaseNotesBy);
 
   // Set all priorities set as undefined to '?' to avoid errors
   releaseNotes?.release_notes?.forEach((note) => {
@@ -153,6 +169,7 @@ const ReleaseNotesRender = (): null | JSX.Element => {
                     sortModel: [{ field: 'priority', sort: 'asc' }],
                   },
                 }}
+                sortingOrder={['desc', 'asc']}
                 pageSizeOptions={[20, 50, 75]}
                 pagination
                 isRowSelectable={() => false}

src/hooks/__tests__/fetchReleaseNotes.test.tsx

@@ -14,9 +14,11 @@ afterEach(() => {
   vi.clearAllMocks();
 });
 
+let sortReleaseNotesByCallback = vi.fn();
+
 describe('fetchReleaseNotesForVersion', () => {
   it('returns valid JSON', async () => {
-    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version'));
+    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version', sortReleaseNotesByCallback));
     await waitFor(() => {
       expect(result.current?.release_name).toBe('release_name_mock')
     }, { interval: 1 });
@@ -29,7 +31,7 @@ describe('fetchReleaseNotesForVersion', () => {
 
   it('returns null if error is caught in fetch', async () => {
     global.fetch = vi.fn(() => Promise.reject('error'));
-    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version'));
+    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version', sortReleaseNotesByCallback));
     await waitFor(() => {
       expect(result.current).toBe(null)
     }, { interval: 1 });
@@ -40,7 +42,21 @@ describe('fetchReleaseNotesForVersion', () => {
   });
 
   it('returns null if version is not defined', async () => {
-    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, null));
+    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, null, sortReleaseNotesByCallback));
     expect(result.current).toBe(null)
   });
+
+  it('checks sortReleaseNotesByCallback to be called', async () => {
+    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version', sortReleaseNotesByCallback));
+    await waitFor(() => {
+      expect(sortReleaseNotesByCallback).toHaveBeenCalledTimes(1)
+    }, { interval: 1 });
+  });
+
+  it('checks sortReleaseNotesByCallback NOT to be called', async () => {
+    const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version'));
+    await waitFor(() => {
+      expect(sortReleaseNotesByCallback).toHaveBeenCalledTimes(0);
+    }, { interval: 1 });
+  });
 });

src/hooks/fetchReleaseNotes.tsx

@@ -6,6 +6,7 @@ const baseUrl = 'https://api.adoptium.net/v3/info/release_notes';
 export function fetchReleaseNotesForVersion(
     isVisible: boolean,
     version: any,
+    sortReleaseNotesByCallback?: Function,
 ): ReleaseNoteAPIResponse | null {
     if (!version) {
         return null
@@ -15,7 +16,9 @@ export function fetchReleaseNotesForVersion(
     useEffect(() => {
         if (isVisible) {
         (async () => {
-            setReleaseNotes(await fetchReleaseNote(version));
+            let result = await fetchReleaseNote(version);
+            if(sortReleaseNotesByCallback) sortReleaseNotesByCallback(result);
+            setReleaseNotes(result);
         })();
         }
     }, [isVisible]);