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

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);

src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap

@@ -83,9 +83,9 @@ exports[`DownloadDropdowns component > renders correctly - marketplace 1`] = `
           Any
         </option>
         <option
-          value="jdk"
+          value="mock_jdk"
         >
-          jdk
+          mock_jdk
         </option>
       </select>
     </div>
@@ -198,9 +198,9 @@ exports[`DownloadDropdowns component > renders correctly 1`] = `
           Any
         </option>
         <option
-          value="jdk"
+          value="mock_jdk"
         >
-          jdk
+          mock_jdk
         </option>
       </select>
     </div>

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,58 +31,80 @@ 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
                     let d = w.getExtension('WEBGL_debug_renderer_info');
                     // @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}) => {
                     <label className="px-2 fw-bold" htmlFor="os"><Trans>Operating System</Trans></label>
                     <select id="os-filter" aria-label="OS Filter" data-testid="os-filter" onChange={(e) => setOS(e.target.value)} value={os} className="form-select form-select-sm">
                         <option key="any" value="any">Any</option>
-                        {oses.map(
+                        {oses.sort((os1, os2) => os1.localeCompare(os2)).map(
                             (os, i): string | JSX.Element => os && (
                                 <option key={os.toLowerCase()} value={os.toLowerCase()}>{capitalize(os)}</option>
                             )
@@ -138,7 +161,7 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => {
                     <label className="px-2 fw-bold" htmlFor="arch"><Trans>Architecture</Trans></label>
                     <select id="arch-filter" aria-label="Architecture Filter" data-testid="arch-filter" onChange={(e) => setArch(e.target.value)} value={arch} className="form-select form-select-sm">
                         <option key="any" value="any">Any</option>
-                        {arches.map(
+                        {arches.sort((arch1, arch2) => arch1.localeCompare(arch2)).map(
                             (arch, i): string | JSX.Element => arch && (
                                 <option key={arch.toLowerCase()} value={arch.toLowerCase()}>{arch}</option>
                             )

src/components/TemurinDownloadTable/index.tsx

@@ -21,7 +21,7 @@ const TemurinDownloadTable = ({results}) => {
         <table id="download-table" className="table table-bordered releases-table" style={{borderSpacing: '0 10px', borderCollapse: 'separate'}}>
             <tbody className="table-light">
             {results ? (
-                results.map(
+                results.sort((pkg1, pkg2) => pkg2.release_date - pkg1.release_date).map(
                     (pkg, i): string | JSX.Element =>
                         pkg && (
                             <tr key={i}>

src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap

@@ -215,34 +215,34 @@ exports[`Marketplace page > renders correctly 1`] = `
             Any
           </option>
           <option
-            value="linux"
+            value="aix"
           >
-            Linux
+            AIX
           </option>
           <option
             value="alpine-linux"
           >
             Alpine Linux
           </option>
           <option
-            value="windows"
+            value="linux"
           >
-            Windows
+            Linux
           </option>
           <option
             value="mac"
           >
             macOS
           </option>
           <option
-            value="aix"
+            value="solaris"
           >
-            AIX
+            Solaris
           </option>
           <option
-            value="solaris"
+            value="windows"
           >
-            Solaris
+            Windows
           </option>
         </select>
       </div>
@@ -267,44 +267,44 @@ exports[`Marketplace page > renders correctly 1`] = `
             Any
           </option>
           <option
-            value="x64"
+            value="aarch64"
           >
-            x64
+            aarch64
           </option>
           <option
-            value="x86"
+            value="arm"
           >
-            x86
+            arm
           </option>
           <option
-            value="aarch64"
+            value="ppc64"
           >
-            aarch64
+            ppc64
           </option>
           <option
-            value="s390x"
+            value="ppc64le"
           >
-            s390x
+            ppc64le
           </option>
           <option
-            value="ppc64le"
+            value="s390x"
           >
-            ppc64le
+            s390x
           </option>
           <option
-            value="ppc64"
+            value="sparcv9"
           >
-            ppc64
+            sparcv9
           </option>
           <option
-            value="arm"
+            value="x64"
           >
-            arm
+            x64
           </option>
           <option
-            value="sparcv9"
+            value="x86"
           >
-            sparcv9
+            x86
           </option>
         </select>
       </div>