@truenas/ui-components 0.7.6 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"

package/types/truenas-ui-components.d.ts

@@ -9713,6 +9713,36 @@ declare class TnTableComponent<T = unknown> implements OnInit {
      * `rowKey = (row: Job) => row.id` on the host.
      */
     expansionKey: _angular_core.InputSignal<((row: T) => unknown) | undefined>;
+    /**
+     * Test id for each ROW, as a function of the row and its index.
+     *
+     * The table writes no id on a `<tr>` of its own, and a cell body is free to be bare
+     * interpolation — `{{ row.username }}` renders no element the consumer can bind to. A list
+     * built that way is unaddressable: an automated suite that has to open, select or delete one
+     * specific row has nothing to select it by but position or cell text, both of which change
+     * under the test. Set this and every row carries `row-<base>` on the `<tr>`, and on its card
+     * in card mode, through the same {@link TnTestIdDirective} as every other id the library
+     * emits — so it honours {@link TN_TEST_ATTR} and is kebab-cased by {@link composeTestId}.
+     *
+     * Pass the base only, not the `row-` prefix, and identify the ROW rather than its position,
+     * the way {@link selectionKey} and {@link expansionKey} do — an index-derived id renames every
+     * row below the one that was deleted. The index is passed for the case where the data genuinely
+     * has nothing unique in it.
+     *
+     * Bind a stable member rather than writing the function in the template, since Angular's
+     * expression grammar has no arrow functions:
+     * `[rowTestId]="rowTestId"` for a `rowTestId = (row: User) => row.username` on the host.
+     *
+     * ```html
+     * <tn-table [dataSource]="users" [rowTestId]="rowTestId" />
+     * <!-- <tr data-testid="row-jane-doe"> -->
+     * ```
+     *
+     * Cells are not covered by this: a suite that has to read one cell of a row still needs an id
+     * on the element that cell renders. Tagging the row is what makes the row itself reachable —
+     * which is the part a consumer cannot add from the outside.
+     */
+    rowTestId: _angular_core.InputSignal<((row: T, index: number) => TnTestIdValue) | undefined>;
     emptyMessage: _angular_core.InputSignal<string>;
     /**
      * Optional second line under `emptyMessage`, for empty states that carry both a headline and an
@@ -9988,6 +10018,16 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     /** True when the layout should keep the table but pin edge columns and scroll. */
     isScrollMode: Signal<boolean>;
     data: Signal<T[]>;
+    /**
+     * The resolved base for each row, by index.
+     *
+     * Computed once per `data()` change rather than called per row per change-detection pass: a
+     * base is usually an array, every call builds a new one, and a new reference restarts the
+     * directive's effect — so binding the call directly would rewrite every row's attribute on
+     * every pass. Recomputing here on the signal the rows are rendered from keeps the value
+     * identical between passes, and correct after a reload hands back new row objects.
+     */
+    protected readonly rowTestIds: Signal<TnTestIdValue[]>;
     effectiveDisplayedColumns: Signal<string[]>;
     /**
      * Every column the table actually renders, including the trailing actions column, which
@@ -10286,7 +10326,7 @@ declare class TnTableComponent<T = unknown> implements OnInit {
     getCardLabel(column: string): string;
     getCellValue(row: T, column: string): unknown;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TnTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "selectionKey": { "alias": "selectionKey"; "required": false; "isSignal": true; }; "expansionKey": { "alias": "expansionKey"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "scrollRegionAriaLabel": { "alias": "scrollRegionAriaLabel"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "cardBreakpoint": { "alias": "cardBreakpoint"; "required": false; "isSignal": true; }; "cardPrimaryCount": { "alias": "cardPrimaryCount"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef", "rowActionsDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TnTableComponent<any>, "tn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "selectionKey": { "alias": "selectionKey"; "required": false; "isSignal": true; }; "expansionKey": { "alias": "expansionKey"; "required": false; "isSignal": true; }; "rowTestId": { "alias": "rowTestId"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "emptyDescription": { "alias": "emptyDescription"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "scrollRegionAriaLabel": { "alias": "scrollRegionAriaLabel"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "isRowExpandable": { "alias": "isRowExpandable"; "required": false; "isSignal": true; }; "activeRow": { "alias": "activeRow"; "required": false; "isSignal": true; }; "activeWhen": { "alias": "activeWhen"; "required": false; "isSignal": true; }; "activeBg": { "alias": "activeBg"; "required": false; "isSignal": true; }; "activeIndicator": { "alias": "activeIndicator"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "expandOnRowClick": { "alias": "expandOnRowClick"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "mobileLayout": { "alias": "mobileLayout"; "required": false; "isSignal": true; }; "cardBreakpoint": { "alias": "cardBreakpoint"; "required": false; "isSignal": true; }; "cardPrimaryCount": { "alias": "cardPrimaryCount"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; "rowDoubleClick": "rowDoubleClick"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; }, ["columnDefs", "detailRowDef", "rowActionsDef"], never, true, [{ directive: typeof TnTestIdDirective; inputs: { "tnTestId": "testId"; }; outputs: {}; }]>;
 }
 
 /**
@@ -10491,6 +10531,17 @@ declare class TnTableHarness extends ComponentHarness {
      * @returns Promise resolving to true if the loading overlay is visible.
      */
     isLoading(): Promise<boolean>;
+    /**
+     * Gets the test id written on a data row by `[rowTestId]`.
+     *
+     * Layout-aware, like the rest of the row queries: reads the card in the card layout, which
+     * carries the same id. Reads `data-testid` first and falls through to `data-test`, so it
+     * answers the same either way the consumer configured `TN_TEST_ATTR`.
+     *
+     * @param rowIndex Zero-based index of the data row (or card).
+     * @returns Promise resolving to the row's test id, or null when `[rowTestId]` is unset.
+     */
+    getRowTestId(rowIndex: number): Promise<string | null>;
     /**
      * Checks if a data row is currently marked active.
      *