diff --git a/package.json b/package.json
index a669ab3c..c456a9ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "openstack-uicore-foundation",
- "version": "5.0.33-beta.4",
+ "version": "5.0.34-beta.0",
"description": "ui reactjs components for openstack marketing site",
"main": "lib/openstack-uicore-foundation.js",
"scripts": {
diff --git a/src/components/mui/__tests__/mui-table.test.js b/src/components/mui/__tests__/mui-table.test.js
index 02a03bc9..55435d0a 100644
--- a/src/components/mui/__tests__/mui-table.test.js
+++ b/src/components/mui/__tests__/mui-table.test.js
@@ -197,6 +197,57 @@ describe("MuiTable", () => {
expect(onPerPageChange).toHaveBeenCalledWith(20);
});
+ describe("disableProp", () => {
+ const disabledData = [
+ { id: 1, name: "Alice", role: "Dev", is_disabled: true },
+ { id: 2, name: "Bob", role: "PM", is_disabled: false }
+ ];
+ const disabledOptions = { sortCol: "", sortDir: 1, disableProp: "is_disabled" };
+
+ test("disables edit button for rows where disableProp is truthy", () => {
+ setup({ data: disabledData, onEdit: jest.fn(), options: disabledOptions });
+ const buttons = screen.getAllByTestId("action-edit");
+ expect(buttons[0]).toBeDisabled();
+ expect(buttons[1]).not.toBeDisabled();
+ });
+
+ test("disables delete button for rows where disableProp is truthy", () => {
+ setup({ data: disabledData, onDelete: jest.fn(), options: disabledOptions });
+ const buttons = screen.getAllByTestId("action-delete");
+ expect(buttons[0]).toBeDisabled();
+ expect(buttons[1]).not.toBeDisabled();
+ });
+
+ test("disables select button for rows where disableProp is truthy", () => {
+ setup({ data: disabledData, onSelect: jest.fn(), options: disabledOptions });
+ const buttons = screen.getAllByTestId("action-select");
+ expect(buttons[0]).toBeDisabled();
+ expect(buttons[1]).not.toBeDisabled();
+ });
+
+ test("disables archive button for rows where disableProp is truthy and not 'is_archived'", () => {
+ setup({ data: disabledData, onArchive: jest.fn(), options: disabledOptions });
+ const buttons = screen.getAllByTestId("action-archive");
+ expect(buttons[0]).toBeDisabled();
+ expect(buttons[1]).not.toBeDisabled();
+ });
+
+ test("does not disable archive button when disableProp is 'is_archived'", () => {
+ const archivedData = [
+ { id: 1, name: "Alice", role: "Dev", is_archived: true },
+ { id: 2, name: "Bob", role: "PM", is_archived: false }
+ ];
+ setup({
+ data: archivedData,
+ onArchive: jest.fn(),
+ options: { sortCol: "", sortDir: 1, disableProp: "is_archived" }
+ });
+ const buttons = screen.getAllByTestId("action-archive");
+ expect(buttons[0]).not.toBeDisabled();
+ expect(buttons[1]).not.toBeDisabled();
+ });
+ });
+
test("renders boolean true as CheckIcon", () => {
const boolCols = [{ columnKey: "active", header: "Active" }];
render(
diff --git a/src/components/mui/table/mui-table.js b/src/components/mui/table/mui-table.js
index 53472aa5..136bf35e 100644
--- a/src/components/mui/table/mui-table.js
+++ b/src/components/mui/table/mui-table.js
@@ -47,7 +47,10 @@ const ARCHIVED_CELL_SX = {
const ACTION_CELL_SX = {
p: 0,
textAlign: "center",
- verticalAlign: "middle"
+ verticalAlign: "middle",
+ width: 40,
+ minWidth: 40,
+ maxWidth: 40
};
const MuiTable = ({
@@ -102,12 +105,32 @@ const MuiTable = ({
const {sortCol, sortDir} = options;
- const getArchivedCellSx = (row) =>
- options.disableProp && row[options.disableProp] ? ARCHIVED_CELL_SX : null;
+ const getDisabledSx = (row) =>
+ options.disableProp && row[options.disableProp] ? ARCHIVED_CELL_SX : {};
- const getCellSx = (row, baseSx = {}) => ({
- ...baseSx,
- ...(getArchivedCellSx(row) || {})
+ const getHeaderSx = (col) => ({
+ ...(col.width && {
+ width: col.width,
+ minWidth: col.width,
+ maxWidth: col.width
+ }),
+ ...(col.headSx || {}),
+ })
+
+ const getCellSx = (row, col) => ({
+ fontWeight: "normal",
+ ...(col.width && {
+ width: col.width,
+ minWidth: col.width,
+ maxWidth: col.width
+ }),
+ ...(col.cellSx || {}),
+ ...getDisabledSx(row)
+ });
+
+ const getActionCellSx = (row) => ({
+ ...ACTION_CELL_SX,
+ ...getDisabledSx(row)
});
const handleDelete = async (item) => {
@@ -143,7 +166,7 @@ const MuiTable = ({
);
}
- return {row[col.columnKey]};
+ return {row[col.columnKey]};
};
return (
@@ -160,11 +183,7 @@ const MuiTable = ({
{columns.map((col) => (
{col.sortable ? (
@@ -191,10 +210,10 @@ const MuiTable = ({
)}
))}
- {onEdit && }
+ {onEdit && }
{onArchive && }
- {onDelete && }
- {onSelect && }
+ {onDelete && }
+ {onSelect && }
@@ -207,15 +226,8 @@ const MuiTable = ({
{renderCell(row, col)}
@@ -225,23 +237,23 @@ const MuiTable = ({
onEdit(row)}
- sx={{ padding: 0 }}
+ sx={{padding: 0}}
data-testid="action-edit"
+ disabled={options.disableProp && row[options.disableProp]}
>
-
+
)}
- {/* Archive column */}
{onArchive && (