[Tekton] Spike: material UI/backstage virtualised grid with custom react component in columns

[invincibleJai]

Description: Currently Tekton plugin uses @patternfly/react-virtualized-extension for the virtualized grid but to be consistent across plugins we would need to use material UI/backstage for the same.

Acceptance Criteria:

• [x] Check if material UI/backstage supports virtualized grid
• [x] Check if material UI/backstage supports custom react components as columns for the grid i.e task status
• [x] Share observation finding with leads/PM

[debsmita1]

The Backstage core component Table doesn’t support virtualization, the Material UI does and uses the react-virtuoso package to render a virtualized table.

Both these table components are capable of rendering customized react components as columns

Tried both Pagination and Virtualization. With Pagination, everything works fine (working branch: https://github.com/debsmita1/backstage-plugins/tree/PRL-pagination-table)

Video: https://youtu.be/J4N6EJ36Gk8

With virtualization, there are two issues mentioned below that require a bit more investigation and collaboration to find an approach to fix them. (working branch: https://github.com/debsmita1/backstage-plugins/tree/PRL-virtualized-table)

1. Every time the Table component re-renders after the backstage API call, the scroll position is not persisted. As a result, if a user is scrolling through the table and in that moment if re-render occurs the user is taken to the top of the list.

2. Resize observer loop limit exceeded issue. Every time the PipelineRun List page reloads a runtime error is shown to the user which can be ignored. I found related topics on the react-virtuoso repository but there’s no solution on how one can get rid of it (https://github.com/petyosi/react-virtuoso/issues/875 , https://github.com/petyosi/react-virtuoso/issues/254)

Video: https://youtu.be/jz7LZJJFfmc