refactor(groups): migrate groups selectors to react [EE-3842] (#8936)

app/react/components/datatables/Datatable.tsx

@@ -17,6 +17,8 @@ import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import _ from 'lodash';
 
+import { AutomationTestingProps } from '@/types';
+
 import { IconProps } from '@@/Icon';
 
 import { DatatableHeader } from './DatatableHeader';
@@ -32,7 +34,7 @@ import { TableRow } from './TableRow';
 export interface Props<
   D extends Record<string, unknown>,
   TSettings extends BasicTableSettings = BasicTableSettings
-> {
+> extends AutomationTestingProps {
   dataset: D[];
   columns: TableOptions<D>['columns'];
   renderTableSettings?(instance: TableInstance<D>): ReactNode;
@@ -82,6 +84,7 @@ export function Datatable<D extends Record<string, unknown>>({
   highlightedItemId,
   noWidget,
   getRowCanExpand,
+  'data-cy': dataCy,
 }: Props<D>) {
   const isServerSidePagination = typeof pageCount !== 'undefined';
   const enableRowSelection = getIsSelectionEnabled(
@@ -156,6 +159,7 @@ export function Datatable<D extends Record<string, unknown>>({
         emptyContentLabel={emptyContentLabel}
         isLoading={isLoading}
         onSortChange={handleSortChange}
+        data-cy={dataCy}
       />
 
       <DatatableFooter

app/react/components/datatables/DatatableContent.tsx

@@ -1,8 +1,11 @@
 import { Row, Table as TableInstance } from '@tanstack/react-table';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Table } from './Table';
 
-interface Props<D extends Record<string, unknown>> {
+interface Props<D extends Record<string, unknown>>
+  extends AutomationTestingProps {
   tableInstance: TableInstance<D>;
   renderRow(row: Row<D>): React.ReactNode;
   onSortChange?(colId: string, desc: boolean): void;
@@ -16,12 +19,13 @@ export function DatatableContent<D extends Record<string, unknown>>({
   onSortChange,
   isLoading,
   emptyContentLabel,
+  'data-cy': dataCy,
 }: Props<D>) {
   const headerGroups = tableInstance.getHeaderGroups();
   const pageRowModel = tableInstance.getPaginationRowModel();
 
   return (
-    <Table>
+    <Table data-cy={dataCy}>
       <thead>
         {headerGroups.map((headerGroup) => (
           <Table.HeaderRow<D>

app/react/components/datatables/Table.tsx

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
+import { AutomationTestingProps } from '@/types';
+
 import { TableContainer } from './TableContainer';
 import { TableActions } from './TableActions';
 import { TableFooter } from './TableFooter';
@@ -12,14 +14,19 @@ import { TableHeaderCell } from './TableHeaderCell';
 import { TableHeaderRow } from './TableHeaderRow';
 import { TableRow } from './TableRow';
 
-interface Props {
+interface Props extends AutomationTestingProps {
   className?: string;
 }
 
-function MainComponent({ children, className }: PropsWithChildren<Props>) {
+function MainComponent({
+  children,
+  className,
+  'data-cy': dataCy,
+}: PropsWithChildren<Props>) {
   return (
     <div className="table-responsive">
       <table
+        data-cy={dataCy}
         className={clsx(
           'table-hover table-filters nowrap-cells table',
           className

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

@@ -14,6 +14,9 @@ export function createSelectColumn<T>(): ColumnDef<T> {
         indeterminate={table.getIsSomeRowsSelected()}
         onChange={table.getToggleAllRowsSelectedHandler()}
         disabled={table.getRowModel().rows.every((row) => !row.getCanSelect())}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
       />
     ),
     cell: ({ row, table }) => (
@@ -24,6 +27,8 @@ export function createSelectColumn<T>(): ColumnDef<T> {
         onChange={row.getToggleSelectedHandler()}
         disabled={!row.getCanSelect()}
         onClick={(e) => {
+          e.stopPropagation();
+
           if (e.shiftKey) {
             const { rows, rowsById } = table.getRowModel();
             const rowsToToggle = getRowRange(rows, row.id, lastSelectedId);

app/react/components/datatables/useTableState.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useStore } from 'zustand';
 
 import { useSearchBarState } from './SearchBar';
@@ -27,3 +27,23 @@ export function useTableState<
     [settings, search, setSearch]
   );
 }
+
+export function useTableStateWithoutStorage(
+  defaultSortKey: string
+): BasicTableSettings & {
+  setSearch: (search: string) => void;
+  search: string;
+} {
+  const [search, setSearch] = useState('');
+  const [pageSize, setPageSize] = useState(10);
+  const [sortBy, setSortBy] = useState({ id: defaultSortKey, desc: false });
+
+  return {
+    search,
+    setSearch,
+    pageSize,
+    setPageSize,
+    setSortBy: (id: string, desc: boolean) => setSortBy({ id, desc }),
+    sortBy,
+  };
+}