Skip to content

Frontend: Artifacts bulk delete: make "select all" checkbox in table header work

Problem to solve

We're adding bulk selection/delete functionality to the artifacts management page in !111389 (merged), but the "select all" checkbox in the table header only allows you to de-select selected artifacts for now. We should decide how it will work and then implement that decision.

Proposal

Make checking the checkbox in the table header select all of the visible artifacts:

  • make selectArtifact do nothing if we're trying to select an artifactNode that's already selected (to avoid adding duplicates to the selectedArtifacts array) or if we're trying to de-select an artifactNode that's already not selected (as currently it uses splice/indexOf so it would de-select something anyway)
  • make an event handler for the checkbox handleSelectAllChecked(checked) that calls selectArtifact(artifactNode, checked) on each of the artifacts on the current page (the current page of jobs are stored as an array in jobArtifacts, each element has an artifacts.nodes array that holds its artifacts)
  • use computed props to determine the checked and indeterminate props for the checkbox so that they stay up to date through pagination changes and further selection/de-selection events
Edited by Miranda Fluharty