Description

Problems

1. Thank you, David Vail for finding inconsistent colspan="5" attribute of td element when presence of Advisory column increases total to 6.
   Therefore layer has less than available width.
2. When I expanded the wrong td element, I also found inconsistent colspan attribute for component table itself.
   • Images: colspan={7} attribute is out-of-date and too small.
   • Deployments: colspan={6} attribute is up-to-date, becamebut incorrect when I substituted inline value with computed value, because colspan={8} attribute of TbodyUnified for filtered empty state is incorrect. Maybe copy-paste from images?

Solution

Follow conditional colSpan pattern from elsewhere.

User-facing documentation

• CHANGELOG.md update is not needed
• documentation PR is not needed

Testing and quality

• the change is production ready: the change is GA, or otherwise the functionality is gated by a feature flag
• CI results are inspected

Automated testing

• added unit tests
• added e2e tests
• added regression tests
• added compatibility tests
• modified existing tests

How I validated my change

1. npm run tsc in ui/apps/platform folder.
2. npm run lint in ui/apps/platform folder.

Manual testing with Advisory column

Temporarily edit code to simulate ROX_FLATTEN_CVE_DATA feature flag enabled, because it is not yet enabled for staging demo.

1. Visit /main/vulnerabilities/user-workloads/cves/id with and expand vulnerability row to see ImageComponentVulnerabilitiesTable element.

   • Before changes, with constant colSpan={5} prop, see inconsistent colspan="5" attribute of td element, therefore layer has less than available width.
     

   • After changes, with conditional colSpan={colSpanForDockerfileLayer} prop, consistent colspan="6" attribute of td element, therefore layer has available width.
     

2. Click Deployments and then expand vulnerability row to see DeploymentComponentVulnerabilitiesTable element.

   • Before changes, with constant colSpan={8} prop, see inconsistent colspan="8" attribute of td element, therefore layer has less than available width.
     

   • After changes, with conditional colSpan={colSpanForDockerfileLayer} prop, consistent colspan="9" attribute of td element, therefore layer has available width.
     

Manual testing without Advisory column

1. Visit /main/vulnerabilities/user-workloads/cves/id with and expand vulnerability row to see ImageComponentVulnerabilitiesTable element.

   • Before and after changes, with conditional colSpan={colSpanForDockerfileLayer} prop, see consistent colspan="5" attribute of td element, therefore layer has available width.

2. Click Deployments and then expand vulnerability row to see DeploymentComponentVulnerabilitiesTable element.

   • Before and after changes, with conditional colSpan={colSpanForDockerfileLayer} prop, see consistent colspan="8" attribute of td element, therefore layer has available width.

Bonus

1. Visit /main/vulnerabilities/user-workloads/cves/id with and expand vulnerability row to see ImageComponentVulnerabilitiesTable element.

   • Before changes, with constant colSpan={7} prop, see inconsistent colspan="7" attribute of td element, therefore component table has less than available width.
     

   • After changes, with conditional colSpan={colSpanForComponentVulnerabilitiesTable} prop, consistent colspan="8" attribute of td element, therefore component table has available width.
     

2. Click Deployments filter for no matches, and then expand vulnerability row to see DeploymentComponentVulnerabilitiesTable element.

   • Before changes, with incorrect 8 + -hiddenColumnCount prop, see inconsistent colspan="8" attribute of td element, although TbodyFilteredEmpty has available width.
     

   • After changes, with conditional 7 + -hiddenColumnCount prop, see consistent colspan="7" attribute of td element, therefore TbodyFilteredEmpty has available width.