chore(data-cy): require data-cy attributes [EE-6880] (#11453)

app/react/components/datatables/ColumnVisibilityMenu.tsx

@@ -47,6 +47,7 @@ export function ColumnVisibilityMenu<D extends object>({
                   <div key={column.id}>
                     <Checkbox
                       checked={column.getIsVisible()}
+                      data-cy="column-visibility-checkbox"
                       label={
                         typeof column.columnDef.header === 'string'
                           ? column.columnDef.header

app/react/components/datatables/Datatable.tsx

@@ -108,7 +108,8 @@ export function Datatable<D extends DefaultType>({
   );
 
   const allColumns = useMemo(
-    () => _.compact([!disableSelect && createSelectColumn<D>(), ...columns]),
+    () =>
+      _.compact([!disableSelect && createSelectColumn<D>(dataCy), ...columns]),
     [disableSelect, columns]
   );
 
@@ -179,6 +180,7 @@ export function Datatable<D extends DefaultType>({
         description={description}
         renderTableActions={() => renderTableActions(selectedItems)}
         renderTableSettings={() => renderTableSettings(tableInstance)}
+        data-cy={`${dataCy}-header`}
       />
 
       <DatatableContent<D>

app/react/components/datatables/DatatableHeader.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { IconProps } from '@@/Icon';
 
 import { SearchBar } from './SearchBar';
@@ -14,7 +16,7 @@ type Props = {
   renderTableActions?(): ReactNode;
   description?: ReactNode;
   titleId?: string;
-};
+} & AutomationTestingProps;
 
 export function DatatableHeader({
   onSearchChange,
@@ -25,12 +27,19 @@ export function DatatableHeader({
   titleIcon,
   description,
   titleId,
+  'data-cy': dataCy,
 }: Props) {
   if (!title) {
     return null;
   }
 
-  const searchBar = <SearchBar value={searchValue} onChange={onSearchChange} />;
+  const searchBar = (
+    <SearchBar
+      value={searchValue}
+      onChange={onSearchChange}
+      data-cy={`${dataCy}-search-input`}
+    />
+  );
   const tableActions = !!renderTableActions && (
     <Table.Actions>{renderTableActions()}</Table.Actions>
   );
@@ -44,6 +53,7 @@ export function DatatableHeader({
       label={title}
       icon={titleIcon}
       description={description}
+      data-cy={dataCy}
     >
       {searchBar}
       {tableActions}

app/react/components/datatables/Filter.tsx

@@ -48,6 +48,7 @@ export function MultipleSelectionFilter({
                     type="checkbox"
                     checked={value.includes(option)}
                     onChange={() => handleChange(option)}
+                    data-cy={`filter_${filterKey}_${index}`}
                   />
                   <label htmlFor={`filter_${filterKey}_${index}`}>
                     {option}

app/react/components/datatables/NestedDatatable.tsx

@@ -8,13 +8,15 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 
+import { AutomationTestingProps } from '@/types';
+
 import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
 import { NestedTable } from './NestedTable';
 import { DatatableContent } from './DatatableContent';
 import { BasicTableSettings, DefaultType } from './types';
 
-interface Props<D extends DefaultType> {
+interface Props<D extends DefaultType> extends AutomationTestingProps {
   dataset: D[];
   columns: TableOptions<D>['columns'];
 
@@ -41,6 +43,7 @@ export function NestedDatatable<D extends DefaultType>({
   isLoading,
   initialSortBy,
   search,
+  'data-cy': dataCy,
   'aria-label': ariaLabel,
 }: Props<D>) {
   const tableInstance = useReactTable<D>({
@@ -74,6 +77,7 @@ export function NestedDatatable<D extends DefaultType>({
           emptyContentLabel={emptyContentLabel}
           renderRow={(row) => <Table.Row<D> cells={row.getVisibleCells()} />}
           aria-label={ariaLabel}
+          data-cy={dataCy}
         />
       </Table.Container>
     </NestedTable>

app/react/components/datatables/QuickActionsSettings.tsx

@@ -25,6 +25,7 @@ export function QuickActionsSettings({ actions }: Props) {
       {actions.map(({ id, label }) => (
         <Checkbox
           key={id}
+          data-cy="quick-actions-checkbox"
           label={label}
           id={`quick-actions-${id}`}
           checked={!settings.hiddenQuickActions.includes(id)}

app/react/components/datatables/SearchBar.tsx

@@ -37,15 +37,21 @@ export function SearchBar({
       <Search className="searchIcon lucide shrink-0" />
       <input
         type="text"
+        data-cy={dataCy}
         className="searchInput"
         value={searchValue}
         onChange={(e) => setSearchValue(e.target.value)}
         placeholder={placeholder}
-        data-cy={dataCy}
         aria-label="Search input"
       />
       {children}
-      <Button onClick={onClear} icon={X} color="none" disabled={!searchValue} />
+      <Button
+        onClick={onClear}
+        icon={X}
+        color="none"
+        disabled={!searchValue}
+        data-cy={`${dataCy}-clear-button`}
+      />
     </div>
   );
 }

app/react/components/datatables/TableSettingsMenuAutoRefresh.tsx

@@ -21,6 +21,7 @@ export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
     <>
       <Checkbox
         id="settings-auto-refresh"
+        data-cy="settings-auto-refresh"
         label="Auto refresh"
         checked={isEnabled}
         onChange={(e) => onChange(e.target.checked ? 10 : 0)}
@@ -30,6 +31,7 @@ export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
         <div>
           <label htmlFor="settings_refresh_rate">Refresh rate</label>
           <select
+            data-cy="settings-refresh-rate"
             id="settings_refresh_rate"
             className="small-select"
             value={value}

app/react/components/datatables/buildNameColumn.tsx

@@ -8,6 +8,7 @@ import { defaultGetRowId } from './defaultGetRowId';
 export function buildNameColumn<T extends DefaultType>(
   nameKey: keyof T,
   path: string,
+  dataCy: string,
   idParam = 'id',
   idGetter: (row: T) => string = defaultGetRowId<T>
 ): ColumnDef<T> {
@@ -35,6 +36,7 @@ export function buildNameColumn<T extends DefaultType>(
           to={path}
           params={{ [idParam]: idGetter(row.original) }}
           title={name}
+          data-cy={`${dataCy}_${name}`}
         >
           {name}
         </Link>

app/react/components/datatables/expand-column.tsx

@@ -18,6 +18,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
             color="none"
             icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
             title="Expand all"
+            data-cy="expand-all-rows-button"
             aria-label="Expand all rows"
           />
         )
@@ -35,6 +36,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
           color="none"
           icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
           title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
+          data-cy={`expand-row-button_${row.index}`}
           aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
           aria-expanded={row.getIsExpanded()}
         />

app/react/components/datatables/select-column.tsx

@@ -2,7 +2,7 @@ import { ColumnDef, Row } from '@tanstack/react-table';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 
-export function createSelectColumn<T>(): ColumnDef<T> {
+export function createSelectColumn<T>(dataCy: string): ColumnDef<T> {
   let lastSelectedId = '';
 
   return {
@@ -10,6 +10,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
     header: ({ table }) => (
       <Checkbox
         id="select-all"
+        data-cy={`select-all-checkbox-${dataCy}`}
         checked={table.getIsAllRowsSelected()}
         indeterminate={table.getIsSomeRowsSelected()}
         onChange={table.getToggleAllRowsSelectedHandler()}
@@ -24,6 +25,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
     cell: ({ row, table }) => (
       <Checkbox
         id={`select-row-${row.id}`}
+        data-cy={`select-row-checkbox_${row.id}`}
         checked={row.getIsSelected()}
         indeterminate={row.getIsSomeSelected()}
         onChange={row.getToggleSelectedHandler()}