UI Refactor - One table/list component

[filipslezaklab]

Unify and Standardize Table Component Across UI

Term "Table" means both tables and lists here.

We currently have a collection of loosely coupled components that can be composed to create a table, but they lack cohesion and standardization. This fragmentation affects both stability, maintenance and development time of both existing and next parts of UI that includes this topic.

Problem

Due to the iterative nature of past UI table development:

• There is no single, flexible, and reusable table component that fits most use cases.
• Some tables are implemented on top of virtualized list component; others (like the Users table) implement custom logic entirely from the ground up, mostly bcs pervious iteration did not have all features or it was forked from then current implementation of users table which was often changed.
• Maintenance is difficult because tables across the app differ in structure, features, and behavior.

Case Study

The most comprehensive and thought-through implementation so far has been during the development of ACL page. These examples encapsulate nearly all features, use cases, and problems we've encountered with table components in the app. Any future implementation should be validated against these.

Proposal

• Introduce a unified Table component with:

  • A complete yet flexible API.
  • Prop-driven configuration that can handle both internal data sources and external APIs.
  • virtualization out of the box
  • Optional support for sorting, filtering, infinite scrolling etc.

• Optionally, we can add a TablePage layout component as a convenience wrapper for simple, repetitive pages (e.g. OIDC, Webhooks). This could further improve dev speed and maintainability but should be considered secondary.

Goal

• Simplify table creation and updates.
• Ensure consistent UX across the app.
• Improve long-term maintainability and reduce duplication.

Estimation

Needs at least 1 or 2 days to make an POC out of ACL's to make an proper estimation for the rest of the work.