From 37b2ace9c519984bcd057f5806e631d9f6037f64 Mon Sep 17 00:00:00 2001
From: Xavier FACQ <xavierfacq@users.noreply.github.com>
Date: Wed, 9 Aug 2023 10:29:47 +0200
Subject: [PATCH] Fix/adoptium 769 temurin archive shows one checksum for
 multiple artefacts (#2068)

* [adoptium-769] Temurin archive shows one checksum for multiple artefacts

* Set unique "key" prop to each child

* Improve css

* Adapt tests
---
 .../TemurinArchiveTable.test.tsx.snap         | 61 ++++++++++++++++---
 src/components/TemurinArchiveTable/index.tsx  | 23 ++++---
 2 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/components/TemurinArchiveTable/__tests__/__snapshots__/TemurinArchiveTable.test.tsx.snap b/src/components/TemurinArchiveTable/__tests__/__snapshots__/TemurinArchiveTable.test.tsx.snap
index b6f0b0b4f..b6c7ea7d4 100644
--- a/src/components/TemurinArchiveTable/__tests__/__snapshots__/TemurinArchiveTable.test.tsx.snap
+++ b/src/components/TemurinArchiveTable/__tests__/__snapshots__/TemurinArchiveTable.test.tsx.snap
@@ -150,14 +150,25 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
             >
               <tbody>
                 <tr>
-                  <td />
                   <td
                     class="fw-bold"
+                  >
+                    OS / Architecture
+                  </td>
+                  <td
+                    class="fw-bold"
+                    style="border-left: 1px solid rgb(221, 221, 221);"
                   >
                     Installer
                   </td>
                   <td
                     class="fw-bold"
+                  >
+                    SHA256
+                  </td>
+                  <td
+                    class="fw-bold"
+                    style="border-left: 1px solid rgb(221, 221, 221);"
                   >
                     Binary
                   </td>
@@ -171,7 +182,9 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
                   <td>
                     Os_mock architecture_mock
                   </td>
-                  <td>
+                  <td
+                    style="border-left: 1px solid rgb(221, 221, 221); padding-left: 20px;"
+                  >
                     <a
                       class="btn"
                       style="width: 9em; background-color: rgb(215, 222, 233);"
@@ -179,9 +192,14 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
                       Not Available
                     </a>
                   </td>
-                  <td>
+                  <td
+                    style="padding-right: 20px;"
+                  />
+                  <td
+                    style="border-left: 1px solid rgb(221, 221, 221); padding-left: 20px;"
+                  >
                     <a
-                      class="btn btn-secondary"
+                      class="btn btn-primary"
                       href="/download"
                       state="[object Object]"
                       style="width: 9em;"
@@ -323,14 +341,25 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
             >
               <tbody>
                 <tr>
-                  <td />
                   <td
                     class="fw-bold"
+                  >
+                    OS / Architecture
+                  </td>
+                  <td
+                    class="fw-bold"
+                    style="border-left: 1px solid rgb(221, 221, 221);"
                   >
                     Installer
                   </td>
                   <td
                     class="fw-bold"
+                  >
+                    SHA256
+                  </td>
+                  <td
+                    class="fw-bold"
+                    style="border-left: 1px solid rgb(221, 221, 221);"
                   >
                     Binary
                   </td>
@@ -344,7 +373,9 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
                   <td>
                     Os_mock architecture_mock
                   </td>
-                  <td>
+                  <td
+                    style="border-left: 1px solid rgb(221, 221, 221); padding-left: 20px;"
+                  >
                     <a
                       class="btn btn-primary"
                       href="/download"
@@ -355,9 +386,23 @@ exports[`TemurinArchiveTable component > renders correctly 1`] = `
                        
                     </a>
                   </td>
-                  <td>
+                  <td
+                    style="padding-right: 20px;"
+                  >
                     <a
-                      class="btn btn-secondary"
+                      data-bs-checksum="installer_checksum_mock"
+                      data-bs-target="#checksumModal"
+                      data-bs-toggle="modal"
+                      href=""
+                    >
+                      Text
+                    </a>
+                  </td>
+                  <td
+                    style="border-left: 1px solid rgb(221, 221, 221); padding-left: 20px;"
+                  >
+                    <a
+                      class="btn btn-primary"
                       href="/download"
                       state="[object Object]"
                       style="width: 9em;"
diff --git a/src/components/TemurinArchiveTable/index.tsx b/src/components/TemurinArchiveTable/index.tsx
index 1a95cd5e2..84fcf405d 100644
--- a/src/components/TemurinArchiveTable/index.tsx
+++ b/src/components/TemurinArchiveTable/index.tsx
@@ -22,7 +22,7 @@ const TemurinArchiveTable = ({results, updatePage}) => {
                         results.releases.map(
                             (release, i): string | JSX.Element =>
                                 release && (
-                                    <tr key={i} className="release-row">
+                                    <tr key={`release-${i}`} className="release-row">
                                         <td className="text-white" style={{backgroundColor: "#333"}}>
                                             <div>
                                                 <a href={release.release_link} className="link-light">
@@ -53,9 +53,10 @@ const TemurinArchiveTable = ({results, updatePage}) => {
                                             <table className="archive-platforms">
                                                 <tbody>
                                                     <tr>
-                                                        <td></td>
-                                                        <td className="fw-bold">Installer</td>
-                                                        <td className="fw-bold">Binary</td>
+                                                        <td className="fw-bold">OS / Architecture</td>
+                                                        <td className="fw-bold" style={{borderLeft: "1px solid rgb(221, 221, 221)"}}>Installer</td>
+                                                        <td className="fw-bold">SHA256</td>
+                                                        <td className="fw-bold" style={{borderLeft: "1px solid rgb(221, 221, 221)"}}>Binary</td>
                                                         <td className="fw-bold">SHA256</td>
                                                     </tr>
                                                     {Object.keys(release.platforms).map(function(key) {
@@ -63,13 +64,13 @@ const TemurinArchiveTable = ({results, updatePage}) => {
                                                             release.platforms[key].assets.map(
                                                                 (asset, i): string | JSX.Element =>
                                                                     asset && (
-                                                                        <tr key={asset.checksum}>
+                                                                        <tr key={`asset-${i}`}>
                                                                             <td>
                                                                             {i === 0 &&
                                                                                 `${capitalize(asset.os)} ${asset.architecture === 'x32' ? 'x86' : asset.architecture}`
                                                                             }
                                                                             </td>
-                                                                            <td>
+                                                                            <td style={{borderLeft: "1px solid rgb(221, 221, 221)", paddingLeft: "20px"}}>
                                                                                 {asset.installer_link ? (
                                                                                     <DownloadButton
                                                                                         link={asset.installer_link}
@@ -85,7 +86,13 @@ const TemurinArchiveTable = ({results, updatePage}) => {
                                                                                     </a>
                                                                                 }
                                                                             </td>
-                                                                            <td>
+                                                                            <td style={{paddingRight: "20px"}}>
+                                                                            {asset.installer_link ? (
+                                                                                <a href="" data-bs-toggle="modal" data-bs-target="#checksumModal" data-bs-checksum={asset.installer_checksum}><Trans>Checksum</Trans></a>
+                                                                            ): <></>
+                                                                            }
+                                                                            </td>
+                                                                            <td style={{borderLeft: "1px solid rgb(221, 221, 221)", paddingLeft: "20px"}}>
                                                                                 <DownloadButton
                                                                                     link={asset.link}
                                                                                     platform={key}
@@ -142,7 +149,7 @@ const DownloadButton = ({ link, type, size, platform, version, installer }: Down
     let os: string = capitalize(platform.split("-")[0])
     let arch: string = platform.split("-")[1]
     return (
-        <Link to="/download" state={{ link: link, os: os, arch: arch, pkg_type: type, java_version: version }} className={installer ? `btn btn-primary` : `btn btn-secondary`} style={{width: "9em"}}>
+        <Link to="/download" state={{ link: link, os: os, arch: arch, pkg_type: type, java_version: version }} className="btn btn-primary" style={{width: "9em"}}>
             {type} {!installer ? (size + " MB") : ""}
         </Link>
     )