From eab07929281fbff45f6c1654f99db15be24f8203 Mon Sep 17 00:00:00 2001 From: Xavier FACQ Date: Thu, 17 Aug 2023 02:31:58 +0200 Subject: [PATCH] Fix/adoptium 666 bookmark support (#2107) * [adoptium-666] add Bookmark Support (+sort available filters) * Add comments / param is now 'package' / Sort by date DESC * Improve covered lines --- .../__tests__/DownloadDropdowns.test.tsx | 11 ++-- .../DownloadDropdowns.test.tsx.snap | 8 +-- src/components/DownloadDropdowns/index.tsx | 65 +++++++++++++------ src/components/TemurinDownloadTable/index.tsx | 2 +- .../__snapshots__/marketplace.test.tsx.snap | 48 +++++++------- .../__snapshots__/releases.test.tsx.snap | 48 +++++++------- src/util/setURLParam.tsx | 25 ++++++- 7 files changed, 128 insertions(+), 79 deletions(-) diff --git a/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx b/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx index 29b722e0a..d19efdf79 100644 --- a/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx +++ b/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx @@ -26,7 +26,7 @@ vi.mock('../../../util/defaults', () => { versionsLTS: [1], defaultPackageType: 'jdk', defaultArchitecture: 'mock_arch', - packageTypes: ['jdk'], + packageTypes: ['mock_jdk'], } }); @@ -46,8 +46,11 @@ const updater = vi.fn().mockImplementation(() => { vi.mock('query-string', () => ({ default: { parse: () => ({ - version: 8, - variant: 'openjdk8', + os: 'linux', + arch: 'x64', + package: 'jdk', + version: 17, + variant: 'openjdk11', }), } })); @@ -85,7 +88,7 @@ describe('DownloadDropdowns component', () => { select = getByTestId('package-type-filter'); await act(async () => { - fireEvent.change(select, { target: { value: 'any' } }); + fireEvent.change(select, { target: { value: 'mock_jdk' } }); }); expect(updater).toHaveBeenCalledTimes(4); diff --git a/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap b/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap index dfa5a623a..5df1d6a1d 100644 --- a/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap +++ b/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap @@ -83,9 +83,9 @@ exports[`DownloadDropdowns component > renders correctly - marketplace 1`] = ` Any @@ -198,9 +198,9 @@ exports[`DownloadDropdowns component > renders correctly 1`] = ` Any diff --git a/src/components/DownloadDropdowns/index.tsx b/src/components/DownloadDropdowns/index.tsx index a1a1621f7..f6857ff03 100644 --- a/src/components/DownloadDropdowns/index.tsx +++ b/src/components/DownloadDropdowns/index.tsx @@ -9,10 +9,8 @@ import { setURLParam } from '../../util/setURLParam'; import { capitalize } from '../../util/capitalize'; import { oses, arches, packageTypes, defaultArchitecture, defaultPackageType} from '../../util/defaults'; -let defaultOS = 'any' -let defaultArch = 'any' - const DownloadDropdowns = ({updaterAction, marketplace, Table}) => { + const data = useStaticQuery(graphql` query VersionsQuery { allVersions(sort: {version: DESC}) { @@ -33,33 +31,55 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => { } `) - const defaultVersion = data.mostRecentLts.version; - const versions = data.allVersions.edges; + // init the default selected Operation System, if any from the param 'os' + let defaultSelectedOS = 'any'; + const osParam = queryString.parse(useLocation().search).os; + if (osParam) { + defaultSelectedOS = osParam.toString(); + } - let versionList = versions; - let selectedVersion = defaultVersion; + // init the default selected Architecture, if any from the param 'arch' + let defaultSelectedArch = 'any'; + const archParam = queryString.parse(useLocation().search).arch; + if (archParam) { + defaultSelectedArch = archParam.toString(); + } + + // init the default selected Package Type, if any from the param 'package' + let defaultSelectedPackageType = 'any'; + const packageParam = queryString.parse(useLocation().search).package; + if (packageParam) { + defaultSelectedPackageType = packageParam.toString(); + } + + // init the default selected Version, if any from the param 'version' or from 'variant' + let defaultSelectedVersion = data.mostRecentLts.version; const versionParam = queryString.parse(useLocation().search).version; if (versionParam) { - selectedVersion = Number(versionParam).toString(); + defaultSelectedVersion = Number(versionParam).toString(); } const variantParam = queryString.parse(useLocation().search).variant; if (variantParam) { // convert openjdk11 to 11 const parsedVersion = variantParam.toString().replace(/\D/g, '') - setURLParam('version', parsedVersion) - selectedVersion = parsedVersion; + defaultSelectedVersion = parsedVersion; } + // prepare versions list + const versions = data.allVersions.edges; + let versionList = versions; + if (marketplace) { // filter non LTS versions versionList = versions.filter((version) => { return version.node.lts === true; }); - defaultArch = defaultArchitecture; + defaultSelectedArch = defaultArchitecture; + defaultSelectedPackageType = defaultPackageType; const userOS = detectOS(); switch (userOS) { case UserOS.MAC: - defaultOS = 'mac' + defaultSelectedOS = 'mac' if (typeof document !== 'undefined') { let w = document.createElement("canvas").getContext("webgl"); // @ts-ignore @@ -67,24 +87,24 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => { // @ts-ignore let g = d && w.getParameter(d.UNMASKED_RENDERER_WEBGL) || ""; if (g.match(/Apple/) && !g.match(/Apple GPU/)) { - defaultArch = 'aarch64' + defaultSelectedArch = 'aarch64' } } break; case UserOS.LINUX: case UserOS.UNIX: - defaultOS = 'linux' + defaultSelectedOS = 'linux' break; default: - defaultOS = 'windows' + defaultSelectedOS = 'windows' break; } } - const [os, updateOS] = useState(defaultOS); - const [arch, updateArch] = useState(defaultArch); - const [packageType, updatePackageType] = useState(defaultPackageType); - const [version, udateVersion] = useState(selectedVersion); + const [os, updateOS] = useState(defaultSelectedOS); + const [arch, updateArch] = useState(defaultSelectedArch); + const [packageType, updatePackageType] = useState(defaultSelectedPackageType); + const [version, udateVersion] = useState(defaultSelectedVersion); // Marketplace vendor selector only const checkboxRef = useRef({}); @@ -99,14 +119,17 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => { }, [version, os, arch, packageType, checkbox]); const setOS = useCallback((os) => { + setURLParam('os', os) updateOS(os); }, []); const setArch = useCallback((arch) => { + setURLParam('arch', arch) updateArch(arch); }, []); const setPackageType = useCallback((packageType) => { + setURLParam('package', packageType) updatePackageType(packageType); }, []); @@ -127,7 +150,7 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => { setArch(e.target.value)} value={arch} className="form-select form-select-sm"> - {arches.map( + {arches.sort((arch1, arch2) => arch1.localeCompare(arch2)).map( (arch, i): string | JSX.Element => arch && ( ) diff --git a/src/components/TemurinDownloadTable/index.tsx b/src/components/TemurinDownloadTable/index.tsx index 672159814..1067b78dc 100644 --- a/src/components/TemurinDownloadTable/index.tsx +++ b/src/components/TemurinDownloadTable/index.tsx @@ -21,7 +21,7 @@ const TemurinDownloadTable = ({results}) => { {results ? ( - results.map( + results.sort((pkg1, pkg2) => pkg2.release_date - pkg1.release_date).map( (pkg, i): string | JSX.Element => pkg && ( diff --git a/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap b/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap index 8d9bca2b5..6c476104a 100644 --- a/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap @@ -215,9 +215,9 @@ exports[`Marketplace page > renders correctly 1`] = ` Any @@ -267,44 +267,44 @@ exports[`Marketplace page > renders correctly 1`] = ` Any diff --git a/src/pages/temurin/__tests__/__snapshots__/releases.test.tsx.snap b/src/pages/temurin/__tests__/__snapshots__/releases.test.tsx.snap index 650bf935f..e7fc205f0 100644 --- a/src/pages/temurin/__tests__/__snapshots__/releases.test.tsx.snap +++ b/src/pages/temurin/__tests__/__snapshots__/releases.test.tsx.snap @@ -74,9 +74,9 @@ exports[`Releases page > renders correctly 1`] = ` Any @@ -126,44 +126,44 @@ exports[`Releases page > renders correctly 1`] = ` Any diff --git a/src/util/setURLParam.tsx b/src/util/setURLParam.tsx index 39da2c04e..659449e6a 100644 --- a/src/util/setURLParam.tsx +++ b/src/util/setURLParam.tsx @@ -1,4 +1,27 @@ export function setURLParam (param: any, value: any) { - let currentURL = window.location.protocol + "//" + window.location.host + window.location.pathname + `?${param}=${value}`; + let currentURLWithParams = window.location.href; + + let params = {}; + + // parse existing query parameters (if any) + if(currentURLWithParams.indexOf('?') > 0) { + currentURLWithParams.substring(currentURLWithParams.indexOf('?')+1) + .split('&') + .forEach(item => { + params[item.split('=')[0]]=item.split('=')[1]; + }); + } + if(param) { + // set the new value for the given param or unset if no value provided + if(value === undefined) delete params[param]; + else params[param]=value; + } + + // rebuild and set the location + var queryString = Object.keys(params).map((key) => { + return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + }).join('&'); + + let currentURL = window.location.protocol + "//" + window.location.host + window.location.pathname + `?${queryString}`; window.history.replaceState({ path: currentURL }, '', currentURL); }