🌱 Add data attributes to table rows

To enable easier and safer selection of table rows by
testing code, add some data attributes to the tr:

  - `data-item-id` - Holds the `idProperty` value of
    a table's items.  This is typically the item's id
    number but may be a frontend generated ID in some
    cases.

  - `data-item-name` - If the table property `dataNameProperty`
    is provided, hold the name property of a table's item.

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/src/app/hooks/table-controls/types.ts

@@ -1,6 +1,10 @@
 import { TableProps, TdProps, ThProps, TrProps } from "@patternfly/react-table";
 import { ISelectionStateArgs, useSelectionState } from "@migtools/lib-ui";
-import { DisallowCharacters, DiscriminatedArgs } from "@app/utils/type-utils";
+import {
+  DisallowCharacters,
+  DiscriminatedArgs,
+  KeyWithValueType,
+} from "@app/utils/type-utils";
 import {
   IFilterStateArgs,
   ILocalFilterDerivedStateArgs,
@@ -314,6 +318,11 @@ export type IUseTableControlPropsArgs<
      * The state for the columns feature. Returned by useColumnState.
      */
     columnState: IColumnState<TColumnKey>;
+    /**
+     * Name of a field in TItem to use as the table row's `data-item-name` value.  Without
+     * this property provided, the `data-item-name` is not added to the table row.
+     */
+    dataNameProperty?: KeyWithValueType<TItem, string>;
   };
 
 /**

client/src/app/hooks/table-controls/useTableControlProps.ts

@@ -67,6 +67,9 @@ export const useTableControlProps = <
       isItemSelected,
     },
     columnNames,
+    idProperty,
+    dataNameProperty,
+    tableName,
     hasActionsColumn = false,
     variant,
     isFilterEnabled,
@@ -134,6 +137,9 @@ export const useTableControlProps = <
   const getTrProps: PropHelpers["getTrProps"] = ({ item, onRowClick }) => {
     const activeItemTrProps = getActiveItemTrProps({ item });
     return {
+      id: `${tableName}-row-item-${item[idProperty]}`,
+      "data-item-id": item[idProperty],
+      "data-item-name": dataNameProperty && item[dataNameProperty],
       ...(isActiveItemEnabled && activeItemTrProps),
       onRowClick: (event) =>
         handlePropagatedRowClick(event, () => {

client/src/app/pages/applications/applications-table/applications-table.tsx

@@ -321,6 +321,7 @@ export const ApplicationsTable: React.FC = () => {
   const tableControls = useLocalTableControls({
     tableName: "applications",
     idProperty: "id",
+    dataNameProperty: "name",
     items: applications || [],
     columnNames: {
       name: "Name",