Feature/grid filter continued

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.34",
+    "version": "5.0.36-beta.2",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {

src/components/index.js

@@ -78,6 +78,8 @@ export {useSnackbarMessage} from './mui/SnackbarNotification/Context'
 export {default as MuiInfiniteTable} from './mui/infinite-table'
 export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
 export {default as MuiTable} from './mui/table/mui-table'
+export {default as MuiCustomTablePagination} from './mui/table/CustomTablePagination'
+export {default as MuiBulkEditTable} from './mui/BulkEditTable'
 export {default as MuiSponsorOrderGrid} from './mui/SponsorOrderGrid'
 export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow, FeeRow as MuiFeeRow, PaymentRow as MuiPaymentRow, RefundRow as MuiRefundRow, DiscountRow as MuiDiscountRow} from './mui/table/extra-rows'
 export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'

src/components/mui/BulkEditTable/BulkEditTable.js

@@ -0,0 +1,160 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Checkbox from "@mui/material/Checkbox";
+import Toolbar from "./components/Toolbar";
+import Heading from "./components/Heading";
+import Row from "./components/Row";
+import useRowSelection from "./hooks/useRowSelection";
+import styles from "./BulkEditTable.module.less";
+import CustomTablePagination from "../table/CustomTablePagination";
+
+const BulkEditTable = ({ options, columns, data, onSort, onUpdate, totalRows, perPage, currentPage, onPageChange, onPerPageChange }) => {
+  const {
+    selectedRows,
+    isSelected,
+    toggleRow,
+    isAllSelected,
+    toggleAll,
+    editField,
+    editEnabled,
+    enterEditMode,
+    cancel,
+    reset
+  } = useRowSelection();
+
+  const dataIds = data.map((row) => row.id).join(",");
+
+  // reset selection/edit state whenever the set of rows shown changes
+  // (pagination, filtering, sorting, search, etc.)
+  useEffect(() => {
+    reset();
+  }, [dataIds]);
+
+  const getSortDir = (columnKey) =>
+    columnKey === options.sortCol ? options.sortDir : null;
+
+  const handleUpdateEvents = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    onUpdate(selectedRows)
+      .then(() => reset())
+      .catch((error) => {
+        console.error("Error updating events:", error);
+      });
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Toolbar
+        editEnabled={editEnabled}
+        hasSelection={selectedRows.length > 0}
+        onEdit={enterEditMode}
+        onApply={handleUpdateEvents}
+        onCancel={cancel}
+      />
+      <Paper elevation={0} sx={{ width: "100%", mb: 2 }}>
+        <TableContainer
+          component={Paper}
+          className={styles.tableWrapper}
+          sx={{ borderRadius: 0, boxShadow: "none" }}
+        >
+          <Table>
+            <TableHead sx={{ backgroundColor: "#EAEDF4" }}>
+              <TableRow>
+                <TableCell
+                  align="center"
+                  className={styles.checkColumn}
+                  sx={{ backgroundColor: "#EAEDF4" }}
+                >
+                  <Checkbox
+                    checked={isAllSelected(data)}
+                    onChange={() => toggleAll(data)}
+                    slotProps={{ input: { "aria-label": "select all" } }}
+                  />
+                </TableCell>
+                {columns.map((col, i) => {
+                  const sortable = !!col.sortable;
+                  const colWidth = col.width ?? "";
+
+                  return (
+                    <Heading
+                      editEnabled={editEnabled}
+                      onSort={onSort}
+                      sortDir={getSortDir(col.columnKey)}
+                      sortable={sortable}
+                      columnIndex={i}
+                      columnKey={col.columnKey}
+                      width={colWidth}
+                      key={`heading_${col.columnKey}`}
+                    >
+                      {col.label}
+                    </Heading>
+                  );
+                })}
+                {options.actions && (
+                  <TableCell
+                    align="center"
+                    className={styles.actionColumn}
+                    sx={{ backgroundColor: "#EAEDF4" }}
+                  >
+                    {options.actionsHeader || " "}
+                  </TableCell>
+                )}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {columns.length > 0 &&
+                data.map((row) => (
+                  <Row
+                    key={`row_${row.id}`}
+                    row={row}
+                    editEnabled={editEnabled}
+                    isSelected={isSelected(row.id)}
+                    editRow={selectedRows.find((r) => r.id === row.id) || row}
+                    onToggle={() => toggleRow(row)}
+                    onFieldChange={(key, value) =>
+                      editField(row.id, key, value)
+                    }
+                    columns={columns}
+                    actions={options.actions}
+                  />
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        {perPage && currentPage && onPageChange && (
+          <CustomTablePagination
+            totalRows={totalRows}
+            perPage={perPage}
+            currentPage={currentPage}
+            onPageChange={onPageChange}
+            onPerPageChange={onPerPageChange}
+          />
+        )}
+      </Paper>
+    </Box>
+  );
+};
+
+BulkEditTable.propTypes = {
+  options: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  onSort: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  totalRows: PropTypes.number,
+  perPage: PropTypes.number,
+  currentPage: PropTypes.number,
+  onPageChange: PropTypes.func,
+  onPerPageChange: PropTypes.func
+};
+
+export default BulkEditTable;

src/components/mui/BulkEditTable/BulkEditTable.module.less

@@ -0,0 +1,58 @@
+.tableWrapper {
+  width: 100%;
+  overflow-x: auto;
+  position: relative;
+
+  td {
+    max-width: 150px;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    vertical-align: middle;
+
+    &.dataColumn {
+      min-width: 150px;
+    }
+  }
+
+  // shared by header (th) and body (td) cells so the checkbox/action columns
+  // stay pinned and aligned in both rows while the data columns scroll
+  // horizontally. Background color is intentionally NOT set here: header
+  // cells need the header's grey, body cells need white, set via sx where
+  // each is rendered (an explicit color is required, `inherit` resolves to
+  // transparent here and lets the scrolling columns show through).
+  .checkColumn {
+    text-align: center;
+    position: sticky;
+    z-index: 5;
+    left: 0;
+  }
+
+  .actionColumn {
+    text-align: center;
+    position: sticky;
+    z-index: 5;
+    right: 0;
+    width: 60px;
+    min-width: 60px;
+    max-width: 60px;
+  }
+
+  .bulkEditCol {
+    min-width: 250px;
+  }
+}
+
+.dottedBorderLeft {
+  position: relative;
+  border-left: none;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 1px dashed #e0e0e0;
+    height: 60%;
+    align-self: center;
+  }
+}

src/components/mui/BulkEditTable/__tests__/BulkEditTable.test.js

@@ -0,0 +1,48 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import BulkEditTable from "../BulkEditTable";
+
+describe("BulkEditTable", () => {
+  const baseProps = {
+    options: {
+      className: "test-table",
+      actions: {}
+    },
+    columns: [
+      { columnKey: "id", value: "id", sortable: true },
+      { columnKey: "title", value: "title", sortable: true }
+    ],
+    onSort: jest.fn(),
+    data: [
+      { id: 1, title: "Event 1" },
+      { id: 2, title: "Event 2" }
+    ]
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("applies bulk updates to selected rows", async () => {
+    const user = userEvent.setup();
+    const onUpdate = jest.fn(() => Promise.resolve());
+
+    render(<BulkEditTable {...baseProps} onUpdate={onUpdate} />);
+
+    const checkboxes = screen.getAllByRole("checkbox");
+
+    await user.click(checkboxes[1]);
+    await user.click(screen.getByText("event_list.edit_selected"));
+    await act(async () => {
+      await user.click(screen.getByText("bulk_actions_page.btn_apply_changes"));
+    });
+
+    await waitFor(() => {
+      expect(onUpdate).toHaveBeenCalledTimes(1);
+      expect(onUpdate).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ id: 1 })])
+      );
+    });
+  });
+});

src/components/mui/BulkEditTable/components/Cell.js

@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TextField from "@mui/material/TextField";
+
+const DEFAULT_PLACEHOLDER = "Enter text...";
+
+const Cell = ({ col, row, editRow, isEditingRow, onChange }) => {
+  if (isEditingRow && col.editableField === true) {
+    return (
+      <TextField
+        id={col.columnKey}
+        placeholder={col.placeholder || DEFAULT_PLACEHOLDER}
+        multiline
+        minRows={2}
+        fullWidth
+        size="small"
+        onChange={onChange}
+        value={editRow[col.columnKey] || ""}
+      />
+    );
+  }
+
+  if (isEditingRow && col.editableField) {
+    // editableField functions may short-circuit (e.g. `cond && <Input />`) and
+    // return `undefined` rather than `false`, which React rejects as a component return value.
+    return (
+      col.editableField({
+        value:
+          editRow[col.columnKey]?.id ??
+          editRow[col.columnKey]?.value ??
+          editRow[col.columnKey],
+        onChange,
+        row: editRow,
+        rowData: editRow[col.columnKey]
+      }) ?? null
+    );
+  }
+
+  if (col.render) {
+    return col.render(row[col.columnKey], row) ?? null;
+  }
+
+  return (
+    <span style={{ fontWeight: "normal" }}>{row[col.columnKey] ?? null}</span>
+  );
+};
+
+Cell.propTypes = {
+  col: PropTypes.object.isRequired,
+  row: PropTypes.object.isRequired,
+  editRow: PropTypes.object.isRequired,
+  isEditingRow: PropTypes.bool,
+  onChange: PropTypes.func
+};
+
+export default Cell;