Refactor Authentication Tables in the Administration Tab

[Annaseli]

Description:

The Administration tab in the UI contains four authentication-related tabs: My Credentials, Users, Groups, and Policies. These sections display data in tables using the DataTable function that uses a generic Table from: 📂 webui/src/lib/components/controls.jsx

Currently, DataTable relies on the generic React-Bootstrap "Table" component, which lacks advanced functionality.

The original intent of using a "Table" was to allow the table itself to auto-adjust column widths, ensuring each cell gets the right amount of space while maintaining a structured layout.

However, a change (fix to Issue#8489) breaks this principle in two ways: 1️⃣ Column Width Distribution: Instead of letting the table determine the optimal cell sizes, columns are now evenly distributed, leading to inefficient spacing. 2️⃣ First Column Handling: The first column is treated differently, altering the table's appearance.

Given these issues, Itai Gilo proposes a different approach to improve table structure and maintainability.

🔹 Proposed Solution by Itai Gilo: Introduce AuthDataTable

Since authentication tables follow a consistent structure, we can create a specialized table component (AuthDataTable) instead of using the generic DataTable.

✅ Key Changes:

• Move away from using "Table" instead, use col-* classes for better column control.
• Define a structured layout for Auth tables:
  • First column (checkbox) → Fixed size.
  • Second column (name, which can be long) → Larger width (e.g., col-4).
  • Utility columns (fixed-size actions) → Smaller width (col-2).
  • Actions column (can also be long) → Larger width (e.g., col-4).

✅ Expected Benefits:

• Ensures consistent column sizing across all authentication-related tables.
• Prevents unnecessary space distribution in tables with long names or actions.
• Keeps the checkbox and utility columns fixed, allowing names/actions to use available space efficiently.