issue-2808 Release notes pages not operational for april releases (#2809

)

* issue-2808 Release notes pages not operational for april releases

* clean code

* Add a CircularProgress while loading

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest'
 import ReleaseNotesRender, { fetchTitle, sortReleaseNotesBy } from '../index';
-import { fetchReleaseNotesForVersion, ReleaseNoteAPIResponse } from '../../../hooks/fetchReleaseNotes';
+import { fetchReleaseNotesForVersion } from '../../../hooks/fetchReleaseNotes';
 import { createMockReleaseNotesAPI } from '../../../__fixtures__/hooks';
 import { DataGridProps } from "@mui/x-data-grid"
 import queryString from 'query-string';
@@ -32,7 +32,7 @@ describe('ReleaseNotesRender component', () => {
  queryString.parse = vi.fn().mockReturnValue({'version': 'jdk-17.0.1+12'});
 
  // @ts-ignore
- fetchReleaseNotesForVersion.mockReturnValue(createMockReleaseNotesAPI(2));
+ fetchReleaseNotesForVersion.mockReturnValue({ releaseNoteAPIResponse :createMockReleaseNotesAPI(2), isValid: true });
 
  const { container } = render(
  <ReleaseNotesRender />
@@ -72,9 +72,9 @@ describe('ReleaseNotesRender component', () => {
  queryString.parse = vi.fn().mockReturnValue({'version': 'jdk-20+36'});
 
  function mockReleaseNotes(num: number) {
- let mockReleaseNotesAPI = createMockReleaseNotesAPI(num);
- mockReleaseNotesAPI.release_notes[0].type = 'Enhancement';
- return mockReleaseNotesAPI;
+ let releaseNoteDataBag = { releaseNoteAPIResponse :createMockReleaseNotesAPI(num), isValid: true };
+ releaseNoteDataBag.releaseNoteAPIResponse.release_notes[0].type = 'Enhancement';
+ return releaseNoteDataBag;
  }
 
  // @ts-ignore
@@ -91,9 +91,9 @@ describe('ReleaseNotesRender component', () => {
  it('should render correctly - priority not defined', () => {
  queryString.parse = vi.fn().mockReturnValue({'version': 'version'});
  function mockReleaseNotes() {
- let mockReleaseNotesAPI = createMockReleaseNotesAPI(1);
- mockReleaseNotesAPI.release_notes[0].priority = undefined;
- return mockReleaseNotesAPI;
+ let releaseNoteDataBag = { releaseNoteAPIResponse :createMockReleaseNotesAPI(1), isValid: true };
+ releaseNoteDataBag.releaseNoteAPIResponse.release_notes[0].priority = undefined;
+ return releaseNoteDataBag;
  }
 
  // @ts-ignore
@@ -110,7 +110,7 @@ describe('ReleaseNotesRender component', () => {
  queryString.parse = vi.fn().mockReturnValue({'version': 'version'});
 
  // @ts-ignore
- fetchReleaseNotesForVersion.mockReturnValue({ release_notes: null});
+ fetchReleaseNotesForVersion.mockReturnValue({ releaseNoteAPIResponse :createMockReleaseNotesAPI(0), isValid: false });
  const { container } = render(
  <ReleaseNotesRender />
  );

src/components/ReleaseNotesRender/index.tsx

@@ -4,6 +4,7 @@ import { useLocation } from '@gatsbyjs/reach-router';
 import queryString from 'query-string';
 import { fetchReleaseNotesForVersion, useOnScreen, ReleaseNoteAPIResponse } from '../../hooks';
 import './ReleaseNotesRender.scss';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export const fetchTitle = (priority) => {
  let title
@@ -109,21 +110,21 @@ const ReleaseNotesRender = (): null | JSX.Element => {
 
  const ref = useRef<HTMLDivElement | null>(null);
  const isVisible = useOnScreen(ref as MutableRefObject<Element>, true);
- const releaseNotes = fetchReleaseNotesForVersion(isVisible, version, sortReleaseNotesBy);
 
- // Set all priorities set as undefined to '?' to avoid errors
- releaseNotes?.release_notes?.forEach((note) => {
- if (note.priority === undefined) {
- note.priority = '6';
- }
- });
+ const releaseNoteDataBag = fetchReleaseNotesForVersion(isVisible, version, sortReleaseNotesBy);
+ const releaseNotes = releaseNoteDataBag ? releaseNoteDataBag.releaseNoteAPIResponse : null;
 
  if(releaseNotes && Array.isArray(releaseNotes.release_notes)) {
  let priorities: string[] = [];
  let types: string[] = [];
  let components: string[] = [];
 
  releaseNotes.release_notes.forEach(release_note => {
+ // Set all priorities set as undefined to '?' to avoid errors
+ if (release_note.priority === undefined) {
+ release_note.priority = '6';
+ }
+
  if(release_note.priority && priorities.indexOf(release_note.priority) < 0) priorities.push(release_note.priority);
  if(release_note.type && types.indexOf(release_note.type) < 0) types.push(release_note.type);
  if(release_note.component && components.indexOf(release_note.component) < 0) components.push(release_note.component);
@@ -162,8 +163,9 @@ const ReleaseNotesRender = (): null | JSX.Element => {
  <div ref={ref} className='text-center'>
  <h2>{version}</h2>
  <div className='pt-3' style={{ display: 'flex', height: '100%' }}>
- <div style={{ flexGrow: 1 }}>
- {!version || releaseNotes?.release_notes === null ? (
+ {!releaseNoteDataBag ? <div style={{ flexGrow: 1 }}><CircularProgress aria-label='loading spinner' /></div> :
+ (<div style={{ flexGrow: 1 }}>
+ {!version || releaseNoteDataBag?.isValid === false ? (
  <>
  <h2>Oops... We couldn't find those release notes</h2>
  <span>Please ensure that you have a specified a version using the version URL parameter: <code>?version=x.x.x</code></span>
@@ -175,7 +177,7 @@ const ReleaseNotesRender = (): null | JSX.Element => {
  <DataGrid
  aria-label='Release Notes'
  autoHeight
- rows={releaseNotes && releaseNotes.release_notes? releaseNotes.release_notes : []}
+ rows={releaseNotes && releaseNotes.release_notes ? releaseNotes.release_notes : []}
  loading={releaseNotes === null}
  columns={columns}
  initialState={{
@@ -209,7 +211,7 @@ const ReleaseNotesRender = (): null | JSX.Element => {
  />
  </>
  )}
- </div>
+ </div>)}
  </div>
  </div>
  );

src/hooks/__tests__/__snapshots__/fetchReleaseNotes.test.tsx.snap

@@ -2,26 +2,29 @@
 
 exports[`fetchReleaseNotesForVersion > returns valid JSON 1`] = `
 {
- "id": "id_mock",
- "release_name": "release_name_mock",
- "release_notes": [
- {
- "component": "component_mock",
- "id": "0",
- "link": "https://link_mock/",
- "priority": "1",
- "title": "title_mock",
- "type": "Bug",
+ "isValid": true,
+ "releaseNoteAPIResponse": {
+ "id": "id_mock",
+ "release_name": "release_name_mock",
+ "release_notes": [
+ {
+ "component": "component_mock",
+ "id": "0",
+ "link": "https://link_mock/",
+ "priority": "1",
+ "title": "title_mock",
+ "type": "Bug",
+ },
+ ],
+ "vendor": "vendor_mock",
+ "version_data": {
+ "build": 0,
+ "major": 0,
+ "minor": 0,
+ "openjdk_version": "openjdk_version_mock",
+ "patch": 0,
+ "security": 0,
  },
- ],
- "vendor": "vendor_mock",
- "version_data": {
- "build": 0,
- "major": 0,
- "minor": 0,
- "openjdk_version": "openjdk_version_mock",
- "patch": 0,
- "security": 0,
  },
 }
 `;

src/hooks/__tests__/fetchReleaseNotes.test.tsx

@@ -25,8 +25,9 @@ describe('fetchReleaseNotesForVersion', () => {
  let spy = vi.spyOn(axios, "get");
 
  const { result } = renderHook(() => fetchReleaseNotesForVersion(true, 'sample_version', sortReleaseNotesByCallback));
+
  await waitFor(() => {
- expect(result.current?.release_name).toBe('release_name_mock')
+ expect(result.current?.releaseNoteAPIResponse?.release_name).toBe('release_name_mock')
  }, { interval: 1 });
  expect(spy).toHaveBeenCalledTimes(1)
  expect(spy).toHaveBeenCalledWith(

src/hooks/fetchReleaseNotes.tsx

@@ -8,12 +8,12 @@ export function fetchReleaseNotesForVersion(
  isVisible: boolean,
  version: any,
  sortReleaseNotesByCallback?: Function,
-): ReleaseNoteAPIResponse | null {
+): ReleaseNoteDataBag | null {
  if (!version) {
  return null
  }
 
- const [releaseNotes, setReleaseNotes] = useState<ReleaseNoteAPIResponse | null>(null);
+ const [releaseNotes, setReleaseNotes] = useState<ReleaseNoteDataBag | null>(null);
 
  useEffect(() => {
  if (isVisible) {
@@ -22,12 +22,19 @@ export function fetchReleaseNotesForVersion(
 
  await axios.get(url.toString())
  .then(function (response) {
- let result = response.data
+ let result = response.data;
  if(sortReleaseNotesByCallback) sortReleaseNotesByCallback(result);
- setReleaseNotes(result)
+ let releaseNoteDataBag: ReleaseNoteDataBag = {
+ releaseNoteAPIResponse: result, 
+ isValid: (result.release_notes !== null)
+ };
+ setReleaseNotes(releaseNoteDataBag);
  })
  .catch(function (error) {
- setReleaseNotes(null)
+ let releaseNoteDataBag: ReleaseNoteDataBag = {
+ isValid: false
+ };
+ setReleaseNotes(releaseNoteDataBag);
  });
  })();
  }
@@ -36,6 +43,11 @@ export function fetchReleaseNotesForVersion(
  return releaseNotes;
 }
 
+export interface ReleaseNoteDataBag {
+ releaseNoteAPIResponse?: ReleaseNoteAPIResponse
+ isValid: boolean
+}
+
 export interface ReleaseNoteAPIResponse {
  id: string;
  release_name: string;

src/pages/temurin/__tests__/release-notes.test.tsx

@@ -25,7 +25,7 @@ describe('Temurin Release Notes page', () => {
  useOnScreen.mockReturnValue(true);
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
- fetchReleaseNotesForVersion.mockReturnValue(createMockReleaseNotesAPI(1));
+ fetchReleaseNotesForVersion.mockReturnValue({ releaseNoteAPIResponse :createMockReleaseNotesAPI(1), isValid: true });
  const { container } = render(<ReleaseNotesPage />);
  // eslint-disable-next-line
  const pageContent = container.querySelector('main');
@@ -47,7 +47,7 @@ describe('Temurin Release Notes page', () => {
  useOnScreen.mockReturnValue(true);
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
- fetchReleaseNotesForVersion.mockReturnValue(createMockReleaseNotesAPI(1));
+ fetchReleaseNotesForVersion.mockReturnValue({ releaseNoteAPIResponse :createMockReleaseNotesAPI(1), isValid: true });
  await act(async () => {
  const { container } = render(<ReleaseNotesPage />);
  const results = await axe(container);