Fix/adoptium 769 temurin archive shows one checksum for multiple arte…

…facts (#2068) * [adoptium-769] Temurin archive shows one checksum for multiple artefacts * Set unique "key" prop to each child * Improve css * Adapt tests
adoptium · Aug 9, 2023 · 37b2ace · 37b2ace
1 parent f71d0be
commit 37b2ace
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 16 deletions.
diff --git 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,17 +182,24 @@ 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);"
  >
  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
@@ -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,23 +53,24 @@ 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) {
  return (
  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>
  )