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 && (