From 543ad3e08162bb573ee296e575fa70060c554495 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Tue, 9 Jun 2026 16:02:58 -0300
Subject: [PATCH 1/3] chore: add cellSx and make disableProp affect actions

---
 src/components/mui/table/mui-table.js | 82 ++++++++++++++++-----------
 1 file changed, 49 insertions(+), 33 deletions(-)

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 <span style={{ fontWeight: "normal" }}>{row[col.columnKey]}</span>;
+    return <span style={{fontWeight: "normal"}}>{row[col.columnKey]}</span>;
   };
 
   return (
@@ -160,11 +183,7 @@ const MuiTable = ({
                 {columns.map((col) => (
                   <TableCell
                     key={col.columnKey}
-                    sx={{
-                      width: col.width,
-                      minWidth: col.width,
-                      maxWidth: col.width
-                    }}
+                    sx={getHeaderSx(col)}
                     align={col.align ?? "left"}
                   >
                     {col.sortable ? (
@@ -191,10 +210,10 @@ const MuiTable = ({
                     )}
                   </TableCell>
                 ))}
-                {onEdit && <TableCell sx={{...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40}}/>}
+                {onEdit && <TableCell sx={ACTION_CELL_SX}/>}
                 {onArchive && <TableCell sx={{...ACTION_CELL_SX, width: 80, minWidth: 80, maxWidth: 80}}/>}
-                {onDelete && <TableCell sx={{...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40}}/>}
-                {onSelect && <TableCell sx={{...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40}}/>}
+                {onDelete && <TableCell sx={ACTION_CELL_SX}/>}
+                {onSelect && <TableCell sx={ACTION_CELL_SX}/>}
               </TableRow>
             </TableHead>
 
@@ -207,15 +226,8 @@ const MuiTable = ({
                     <TableCell
                       key={col.columnKey}
                       align={col.align ?? "left"}
-                      className={`${
-                        col.dottedBorder && styles.dottedBorderLeft
-                      } ${col.className}`}
-                      sx={getCellSx(row, {
-                        width: col.width,
-                        minWidth: col.width,
-                        maxWidth: col.width,
-                        fontWeight: "normal"
-                      })}
+                      className={`${col.dottedBorder && styles.dottedBorderLeft} ${col.className}`}
+                      sx={getCellSx(row, col)}
                     >
                       {renderCell(row, col)}
                     </TableCell>
@@ -225,23 +237,23 @@ const MuiTable = ({
                     <TableCell
                       align="center"
                       className={styles.dottedBorderLeft}
-                      sx={getCellSx(row, {...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40})}
+                      sx={getActionCellSx(row)}
                     >
                       <IconButton
                         size="medium"
                         onClick={() => onEdit(row)}
-                        sx={{ padding: 0 }}
+                        sx={{padding: 0}}
                         data-testid="action-edit"
+                        disabled={options.disableProp && row[options.disableProp]}
                       >
-                        <EditIcon fontSize="large" />
+                        <EditIcon fontSize="large"/>
                       </IconButton>
                     </TableCell>
                   )}
-                  {/* Archive column */}
                   {onArchive && (
                     <TableCell
                       align="center"
-                      sx={getCellSx(row, {...ACTION_CELL_SX, width: 80, minWidth: 80, maxWidth: 80})}
+                      sx={{...getActionCellSx(row), width: 80, minWidth: 80, maxWidth: 80}}
                       className={styles.dottedBorderLeft}
                     >
                       <Button
@@ -258,6 +270,8 @@ const MuiTable = ({
                           padding: 0,
                           color: "rgba(0,0,0,0.56)"
                         }}
+                        // bypass disabled if disableProp is "is_archived"
+                        disabled={options.disableProp && options.disableProp !== "is_archived" && row[options.disableProp]}
                       >
                         {row.is_archived
                           ? T.translate("general.unarchive")
@@ -270,14 +284,15 @@ const MuiTable = ({
                     <TableCell
                       align="center"
                       className={styles.dottedBorderLeft}
-                      sx={getCellSx(row, {...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40})}
+                      sx={getActionCellSx(row)}
                     >
                       {canDelete(row) && (
                         <IconButton
                           size="medium"
                           onClick={() => handleDelete(row)}
                           data-testid="action-delete"
-                          sx={{ padding: 0 }}
+                          sx={{padding: 0}}
+                          disabled={options.disableProp && row[options.disableProp]}
                         >
                           <DeleteIcon fontSize="large"/>
                         </IconButton>
@@ -287,14 +302,15 @@ const MuiTable = ({
                   {onSelect && (
                     <TableCell
                       align="center"
-                      sx={getCellSx(row, {...ACTION_CELL_SX, width: 40, minWidth: 40, maxWidth: 40})}
+                      sx={getActionCellSx(row)}
                       className={styles.dottedBorderLeft}
                     >
                       <IconButton
                         size="medium"
                         onClick={() => onSelect(row)}
                         data-testid="action-select"
-                        sx={{ padding: 0 }}
+                        sx={{padding: 0}}
+                        disabled={options.disableProp && row[options.disableProp]}
                       >
                         <ArrowForwardIcon/>
                       </IconButton>

From aa3b414f61a1cdfa3e642d4b353d2014809c9bf5 Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Tue, 9 Jun 2026 16:05:00 -0300
Subject: [PATCH 2/3] chore: add tests

---
 .../mui/__tests__/mui-table.test.js           | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

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(

From 67b2e4a56f6079eb032a711b4fcf9f0e475cf6ab Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Tue, 9 Jun 2026 16:06:45 -0300
Subject: [PATCH 3/3] v5.0.34-beta.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dfe67991..c456a9ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.32",
+    "version": "5.0.34-beta.0",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {