From 7eb0f4ad281bc6bbba4f16e7c176b3a2fa8ef180 Mon Sep 17 00:00:00 2001
From: Xavier FACQ <xavierfacq@users.noreply.github.com>
Date: Mon, 6 May 2024 09:56:09 +0200
Subject: [PATCH] Dropdowns don't reflect URL parameters (#2843)

* Dropdowns doesn't reflex URL parameters

* Improve tests

* resolve feedbacks
---
 .../__tests__/DownloadDropdowns.test.tsx      |  47 ++-
 .../DownloadDropdowns.test.tsx.snap           | 291 ++++++++++++++++++
 src/components/DownloadDropdowns/index.tsx    | 239 +++++++-------
 .../__snapshots__/marketplace.test.tsx.snap   |   5 +
 4 files changed, 471 insertions(+), 111 deletions(-)

diff --git a/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx b/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx
index 95bd3ed1c..f4f782f4d 100644
--- a/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx
+++ b/src/components/DownloadDropdowns/__tests__/DownloadDropdowns.test.tsx
@@ -4,6 +4,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { createRandomTemurinReleases, mockOsesAPI, mockArchesAPI } from '../../../__fixtures__/hooks';
 import DownloadDropdowns from '..';
 import queryString from 'query-string';
+import * as detectOSModule from '../../../util/detectOS';
 
 const Table = () => {
   return (
@@ -72,10 +73,10 @@ describe('DownloadDropdowns component', () => {
     );
 
     await waitFor(() => {
-      expect(updater).toHaveBeenCalledTimes(1);
+      expect(updater).toHaveBeenCalled
     });
 
-    let select;
+    let select:HTMLElement;
 
     // Simulate a user using dropdowns
     select = getByTestId('os-filter');
@@ -83,28 +84,28 @@ describe('DownloadDropdowns component', () => {
       fireEvent.change(select, { target: { value: 'mock_linux' } });
     });
 
-    expect(updater).toHaveBeenCalledTimes(2);
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId('arch-filter');
     await act(async () => {
       fireEvent.change(select, { target: { value: 'mock_x64' } });
     });
 
-    expect(updater).toHaveBeenCalledTimes(3);
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId('package-type-filter');
     await act(async () => {
       fireEvent.change(select, { target: { value: 'mock_pkg' } });
     });
 
-    expect(updater).toHaveBeenCalledTimes(4);
+    expect(updater).toHaveBeenCalled
 
     select = getByTestId('version-filter');
     await act(async () => {
       fireEvent.change(select, { target: { value: 2 } });
     });
 
-    expect(updater).toHaveBeenCalledTimes(5);
+    expect(updater).toHaveBeenCalled
     expect(container).toMatchSnapshot();
   });
 
@@ -224,4 +225,38 @@ describe('DownloadDropdowns component', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('renders correctly - marketplace fake LINUX', async () => {
+    vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.LINUX);
+
+    const { container } = render(
+      <DownloadDropdowns
+        updaterAction={updater}
+        marketplace={true}
+        Table={Table}
+      />
+    );
+    await waitFor(() => {
+      expect(updater).toHaveBeenCalledTimes(1);
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders correctly - marketplace fake MAC', async () => {
+    vi.spyOn(detectOSModule, 'detectOS').mockReturnValue(detectOSModule.UserOS.MAC);
+
+    const { container } = render(
+      <DownloadDropdowns
+        updaterAction={updater}
+        marketplace={true}
+        Table={Table}
+      />
+    );
+    await waitFor(() => {
+      expect(updater).toHaveBeenCalledTimes(1);
+    });
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap b/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap
index 78206fdc5..6f7b4dc81 100644
--- a/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap
+++ b/src/components/DownloadDropdowns/__tests__/__snapshots__/DownloadDropdowns.test.tsx.snap
@@ -124,6 +124,297 @@ exports[`DownloadDropdowns component > renders correctly - marketplace 1`] = `
         data-testid="version-filter"
         id="version-filter"
       >
+        <option
+          value="2"
+        >
+          2
+        </option>
+        <option
+          value="1"
+        >
+          1 - LTS
+        </option>
+      </select>
+    </div>
+  </div>
+  <div>
+    table
+  </div>
+</div>
+`;
+
+exports[`DownloadDropdowns component > renders correctly - marketplace fake LINUX 1`] = `
+<div>
+  <div>
+    vendor-selector
+  </div>
+  <div
+    class="input-group mb-5 row g-2"
+  >
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="os"
+      >
+        Text
+      </label>
+      <select
+        aria-label="OS Filter"
+        class="form-select form-select-sm"
+        data-testid="os-filter"
+        id="os-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_linux"
+        >
+          Mock_linux
+        </option>
+        <option
+          value="mock_macos"
+        >
+          Mock_macos
+        </option>
+        <option
+          value="mock_windows"
+        >
+          Mock_windows
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="arch"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Architecture Filter"
+        class="form-select form-select-sm"
+        data-testid="arch-filter"
+        id="arch-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_aarch64"
+        >
+          mock_aarch64
+        </option>
+        <option
+          value="mock_ppc64"
+        >
+          mock_ppc64
+        </option>
+        <option
+          value="mock_x64"
+        >
+          mock_x64
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="package-type"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Package Type Filter"
+        class="form-select form-select-sm"
+        data-testid="package-type-filter"
+        id="package-type-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_pkg"
+        >
+          mock_pkg
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="version"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Version Filter"
+        class="form-select form-select-sm"
+        data-testid="version-filter"
+        id="version-filter"
+      >
+        <option
+          value="2"
+        >
+          2
+        </option>
+        <option
+          value="1"
+        >
+          1 - LTS
+        </option>
+      </select>
+    </div>
+  </div>
+  <div>
+    table
+  </div>
+</div>
+`;
+
+exports[`DownloadDropdowns component > renders correctly - marketplace fake MAC 1`] = `
+<div>
+  <div>
+    vendor-selector
+  </div>
+  <div
+    class="input-group mb-5 row g-2"
+  >
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="os"
+      >
+        Text
+      </label>
+      <select
+        aria-label="OS Filter"
+        class="form-select form-select-sm"
+        data-testid="os-filter"
+        id="os-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_linux"
+        >
+          Mock_linux
+        </option>
+        <option
+          value="mock_macos"
+        >
+          Mock_macos
+        </option>
+        <option
+          value="mock_windows"
+        >
+          Mock_windows
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="arch"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Architecture Filter"
+        class="form-select form-select-sm"
+        data-testid="arch-filter"
+        id="arch-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_aarch64"
+        >
+          mock_aarch64
+        </option>
+        <option
+          value="mock_ppc64"
+        >
+          mock_ppc64
+        </option>
+        <option
+          value="mock_x64"
+        >
+          mock_x64
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="package-type"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Package Type Filter"
+        class="form-select form-select-sm"
+        data-testid="package-type-filter"
+        id="package-type-filter"
+      >
+        <option
+          value="any"
+        >
+          Text
+        </option>
+        <option
+          value="mock_pkg"
+        >
+          mock_pkg
+        </option>
+      </select>
+    </div>
+    <div
+      class="input-group-prepend flex-colunm col-12 col-md-3"
+    >
+      <label
+        class="px-2 fw-bold"
+        for="version"
+      >
+        Text
+      </label>
+      <select
+        aria-label="Version Filter"
+        class="form-select form-select-sm"
+        data-testid="version-filter"
+        id="version-filter"
+      >
+        <option
+          value="2"
+        >
+          2
+        </option>
         <option
           value="1"
         >
diff --git a/src/components/DownloadDropdowns/index.tsx b/src/components/DownloadDropdowns/index.tsx
index f2e3cf996..f647c5f4e 100644
--- a/src/components/DownloadDropdowns/index.tsx
+++ b/src/components/DownloadDropdowns/index.tsx
@@ -7,8 +7,8 @@ import VendorSelector from '../VendorSelector'
 import { detectOS, UserOS } from '../../util/detectOS';
 import { setURLParam } from '../../util/setURLParam';
 import { capitalize } from '../../util/capitalize';
-import { packageTypes, defaultArchitecture, defaultPackageType} from '../../util/defaults';
-import { fetchOses, fetchArches} from '../../hooks/fetchConstants';
+import { packageTypes, defaultArchitecture, defaultPackageType } from '../../util/defaults';
+import { fetchOses, fetchArches } from '../../hooks/fetchConstants';
 
 const DownloadDropdowns = ({updaterAction, marketplace, Table}) => {
 
@@ -32,123 +32,152 @@ const DownloadDropdowns = ({updaterAction, marketplace, Table}) => {
       }
     `)
 
+    // load OS and Arches from API
+    const oses = fetchOses(true);
+    const arches = fetchArches(true);
+    const [ready, setReady] = useState(false)
+
     // prepare versions list
     const versions = data.allVersions.edges;
     let versionList = versions;
 
     const queryStringParams = queryString.parse(useLocation().search);
 
-    // init the default selected Operation System, if any from the param 'os'
-    let defaultSelectedOS = 'any';
-    const osParam = queryStringParams.os;
-    if (osParam) {
-        let sop = osParam.toString().toLowerCase();
-        if(fetchOses(true).findIndex(os => os.name.toLowerCase() === sop) >= 0)
-            defaultSelectedOS = sop;
-    }
-
-    // init the default selected Architecture, if any from the param 'arch'
-    let defaultSelectedArch = 'any';
-    const archParam = queryStringParams.arch;
-    if (archParam) {
-        let sap = archParam.toString().toLowerCase();
-        if(fetchArches(true).findIndex(a => a.name.toLowerCase() === sap) >= 0)
-            defaultSelectedArch = sap;
-    }
-
-    // init the default selected Package Type, if any from the param 'package'
-    let defaultSelectedPackageType = 'any';
-    const packageParam = queryStringParams.package;
-    if (packageParam) {
-        let spp = packageParam.toString().toLowerCase();
-        if(packageTypes.findIndex(p => p.toLowerCase() === spp) >= 0)
-            defaultSelectedPackageType = spp;
-    }
-
-    // init the default selected Version, if any from the param 'version' or from 'variant'
-    let defaultSelectedVersion = data.mostRecentLts.version;
-    const versionParam = queryStringParams.version;
-    if (versionParam) {
-        let svp = versionParam.toString();
-        let nvp = Number(svp);
-
-        if(svp.toLowerCase() === 'latest') {
-            // get the latest version of the list
-            defaultSelectedVersion = versions.sort((a, b) => b.node.version - a.node.version)[0].node.version;
-        } else if(versions.findIndex(version => version.node.version === nvp) >= 0) {
-            defaultSelectedVersion = nvp;
-        }
-    }
+    const [os, updateOS] = useState('any');
+    const [arch, updateArch] = useState('any');
+    const [packageType, updatePackageType] = useState('any');
+    const [version, udateVersion] = useState(data.mostRecentLts.version);
+
+    // Marketplace vendor selector only
+    const [selectedVendorIdentifiers, updateSelectedVendorIdentifiers] = useState<string[]>([]);
 
-    // init the default selected Version, if any from the param 'variant'
-    const variantParam = queryStringParams.variant;
-    if (variantParam) {
-        // convert openjdk11 to 11
-        const parsedVersion = variantParam.toString().replace(/\D/g, '')
-        let nvp = Number(parsedVersion);
+    const [releases, setReleases] = useState(null);
 
-        if(versions.findIndex(version => version.node.version === nvp) >= 0) {
-            defaultSelectedVersion = nvp;
-        }
-    }
-
-    if (marketplace) {
-        // in marketplace we have to preselect some values in dropdowns if not given in parameters
-        if(defaultSelectedOS === 'any') {
-            const userOS = detectOS();
-            switch (userOS) {
-                case UserOS.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/)) {
-                            defaultSelectedArch = 'aarch64'
-                        }
-                    }
-                    break;
-                case UserOS.LINUX:
-                case UserOS.UNIX:
-                    defaultSelectedOS = 'linux'
-                break;
-            default:
-                defaultSelectedOS = 'windows'
-                break;
+    /**
+     * This useEffect() is called when OS and arches are finaly loaded
+     */ 
+    useEffect(() => {
+        // do nothing while OS and arches are not loaded
+        if(oses.length === 0 || arches.length === 0) return;
+
+        (async () => {
+            // init the default selected Operation System, if any from the param 'os'
+            let defaultSelectedOS = 'any';
+            const osParam = queryStringParams.os;
+            if (osParam) {
+                let osParamStr = osParam.toString().toLowerCase();
+                if(oses.findIndex(os => os.name.toLowerCase() === osParamStr) >= 0)
+                    defaultSelectedOS = osParamStr;
+            }
+
+            // init the default selected Architecture, if any from the param 'arch'
+            let defaultSelectedArch = 'any';
+            const archParam = queryStringParams.arch;
+            if (archParam) {
+                let archParamStr = archParam.toString().toLowerCase();
+                if(arches.findIndex(a => a.name.toLowerCase() === archParamStr) >= 0)
+                    defaultSelectedArch = archParamStr;
             }
-        }
-        if(defaultSelectedArch === 'any') {
-            defaultSelectedArch = defaultArchitecture;
-        }
-        if(defaultSelectedPackageType === 'any') {
-            defaultSelectedPackageType = defaultPackageType;
-        }
-        // filter non LTS versions
-        versionList = versions.filter((version) => {
-            return version.node.lts === true;
-        });
-        if(versionList.findIndex(version => version.node.version === defaultSelectedVersion) < 0) {
-            defaultSelectedVersion = data.mostRecentLts.version;
-        }
-    }
 
-    const [os, updateOS] = useState(defaultSelectedOS);
-    const [arch, updateArch] = useState(defaultSelectedArch);
-    const [packageType, updatePackageType] = useState(defaultSelectedPackageType);
-    const [version, udateVersion] = useState(defaultSelectedVersion);
+            // init the default selected Package Type, if any from the param 'package'
+            let defaultSelectedPackageType = 'any';
+            const packageParam = queryStringParams.package;
+            if (packageParam) {
+                let packageParamStr = packageParam.toString().toLowerCase();
+                if(packageTypes.findIndex(p => p.toLowerCase() === packageParamStr) >= 0)
+                    defaultSelectedPackageType = packageParamStr;
+            }
 
-    // Marketplace vendor selector only
-    const [selectedVendorIdentifiers, updateSelectedVendorIdentifiers] = useState<string[]>([]);
+            // init the default selected Version, if any from the param 'version' or from 'variant'
+            let defaultSelectedVersion = data.mostRecentLts.version;
+            const versionParam = queryStringParams.version;
+            if (versionParam) {
+                let versionParamStr = versionParam.toString();
+                let versionParamNum = Number(versionParamStr);
 
-    const [releases, setReleases] = useState(null);
+                if(versionParamStr.toLowerCase() === 'latest') {
+                    // get the latest version of the list
+                    defaultSelectedVersion = versions.sort((a, b) => b.node.version - a.node.version)[0].node.version;
+                } else if(versions.findIndex(version => version.node.version === versionParamNum) >= 0) {
+                    defaultSelectedVersion = versionParamNum;
+                }
+            }
+
+            // init the default selected Version, if any from the param 'variant'
+            const variantParam = queryStringParams.variant;
+            if (variantParam) {
+                // convert openjdk<version> to <version> (e.g openjdk11 => 11)
+                const parsedVersion = variantParam.toString().replace(/\D/g, '')
+                let variantParamNum = Number(parsedVersion);
+
+                if(versions.findIndex(version => version.node.version === variantParamNum) >= 0) {
+                    defaultSelectedVersion = variantParamNum;
+                }
+            }
+
+            if (marketplace) {
+                // in marketplace we have to preselect some values in dropdowns if not given in parameters
+                if(defaultSelectedOS === 'any') {
+                    const userOS = detectOS();
+                    switch (userOS) {
+                        case UserOS.MAC:
+                            defaultSelectedOS = 'mac'
+                            if (typeof document !== 'undefined') {
+                                let gl = document.createElement("canvas").getContext("webgl");
+                                // @ts-ignore
+                                let ext = gl && gl.getExtension('WEBGL_debug_renderer_info');
+                                // @ts-ignore
+                                let param = ext && ext.getParameter(d.UNMASKED_RENDERER_WEBGL) || "";
+                                if (param.match(/Apple/) && !param.match(/Apple GPU/)) {
+                                    defaultSelectedArch = 'aarch64'
+                                }
+                            }
+                            break;
+                        case UserOS.LINUX:
+                        case UserOS.UNIX:
+                            defaultSelectedOS = 'linux'
+                        break;
+                    default:
+                        defaultSelectedOS = 'windows'
+                        break;
+                    }
+                }
+                if(defaultSelectedArch === 'any') {
+                    defaultSelectedArch = defaultArchitecture;
+                }
+                if(defaultSelectedPackageType === 'any') {
+                    defaultSelectedPackageType = defaultPackageType;
+                }
+                // filter non LTS versions
+                versionList = versions.filter((version) => {
+                    return version.node.lts === true;
+                });
+                if(versionList.findIndex(version => version.node.version === defaultSelectedVersion) < 0) {
+                    defaultSelectedVersion = data.mostRecentLts.version;
+                }
+            }
 
+            updateOS(defaultSelectedOS);
+            updateArch(defaultSelectedArch);
+            udateVersion(defaultSelectedVersion);
+            updatePackageType(defaultSelectedPackageType);
+
+            // OK we can loaded elements
+            setReady(true)
+        })();
+    }, [oses, arches]);
+
+    /**
+     * This useEffect() is called when a parameter is changed
+     */
     useEffect(() => {
+        // do nothing while params are not ready
+        if(!ready) return
+
         (async () => {
-          setReleases(await updaterAction(version, os, arch, packageType, selectedVendorIdentifiers));
+            setReleases(await updaterAction(version, os, arch, packageType, selectedVendorIdentifiers));
         })();
-    }, [version, os, arch, packageType, selectedVendorIdentifiers]);
+    }, [ready, version, os, arch, packageType, selectedVendorIdentifiers]);
 
     const setOS = useCallback((os) => {
         setURLParam('os', os)
@@ -183,7 +212,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"><Trans>Any</Trans></option>
-                        {fetchOses(true).sort((os1, os2) => os1.name.localeCompare(os2.name)).map(
+                        {oses.sort((os1, os2) => os1.name.localeCompare(os2.name)).map(
                             (os, i): string | JSX.Element => os && (
                                 <option key={`os-${i}`} value={os.name.toLowerCase()}>{capitalize(os.name)}</option>
                             )
@@ -194,7 +223,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"><Trans>Any</Trans></option>
-                        {fetchArches(true).sort((arch1, arch2) => arch1.name.localeCompare(arch2.name)).map(
+                        {arches.sort((arch1, arch2) => arch1.name.localeCompare(arch2.name)).map(
                             (arch, i): string | JSX.Element => arch && (
                                 <option key={`arch-${i}`} value={arch.name.toLowerCase()}>{arch.name}</option>
                             )
diff --git a/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap b/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap
index 61f1f6b25..853bb76a9 100644
--- a/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap
+++ b/src/pages/__tests__/__snapshots__/marketplace.test.tsx.snap
@@ -202,6 +202,11 @@ exports[`Marketplace page > renders correctly 1`] = `
           >
             1 - LTS
           </option>
+          <option
+            value="2"
+          >
+            2
+          </option>
         </select>
       </div>
     </div>