fix: match archive row color in form items table

src/components/mui/__tests__/mui-table-editable.test.js

@@ -29,6 +29,23 @@ jest.mock("@mui/material/ButtonBase/TouchRipple", () => ({
   default: () => null
 }));
 
+// TableCell shim to inspect sx prop in tests
+jest.mock("@mui/material/TableCell", () => {
+  const React = require("react");
+  return {
+    __esModule: true,
+    default: ({ children, sx, ...rest }) => (
+      <td
+        data-testid="mui-table-cell"
+        data-sx={sx ? JSON.stringify(sx) : ""}
+        {...rest}
+      >
+        {children}
+      </td>
+    )
+  };
+});
+
 // TablePagination shim
 jest.mock("@mui/material/TablePagination", () => {
   const React = require("react");
@@ -145,7 +162,7 @@ const setup = (overrides = {}) => {
     onPageChange: jest.fn(),
     onPerPageChange: jest.fn(),
     onSort: jest.fn(),
-    options: { sortCol: "name", sortDir: "-1" },
+    options: { sortCol: "name", sortDir: -1 },
     getName: (item) => item.name,
     onEdit: jest.fn(),
     onDelete: jest.fn(),
@@ -156,6 +173,17 @@ const setup = (overrides = {}) => {
   return props;
 };
 
+const getCellSx = (cell) => {
+  const rawSx = cell.getAttribute("data-sx");
+  if (!rawSx) return {};
+
+  try {
+    return JSON.parse(rawSx);
+  } catch {
+    return {};
+  }
+};
+
 // ---- Tests ----
 describe("MuiTableEditable", () => {
   test("renders headers and rows", () => {
@@ -270,7 +298,7 @@ describe("MuiTableEditable", () => {
 
   test("sort click triggers onSort with flipped dir", async () => {
     const user = userEvent.setup();
-    const { onSort } = setup({ options: { sortCol: "name", sortDir: "-1" } });
+    const { onSort } = setup({ options: { sortCol: "name", sortDir: -1 } });
 
     // 1) Try our mock's testid first (desc + active when sortDir === "-1")
     let sortBtn = screen.queryByTestId("sort-label-desc-active");
@@ -295,6 +323,45 @@ describe("MuiTableEditable", () => {
     expect(onSort).toHaveBeenCalled();
     const [colKey, newDir] = onSort.mock.calls[0];
     expect(colKey).toBe("name");
-    expect(newDir).toBe(1); // "-1" * -1 => 1
+    expect(newDir).toBe(1);
+  });
+
+  test("applies archived styles to content, edit and delete cells when disableProp matches", () => {
+    setup({
+      options: { sortCol: "name", sortDir: -1, disableProp: "is_archived" },
+      data: [
+        { id: 1, name: "Alice", role: "Dev", age: 35, is_archived: true },
+        { id: 2, name: "Bob", role: "PM", age: 41, is_archived: false }
+      ],
+      onArchive: jest.fn()
+    });
+
+    const aliceRow = screen.getByText("Alice").closest("tr");
+    const cells = within(aliceRow).getAllByTestId("mui-table-cell");
+
+    const archivedCellIndexes = [0, 1, 2, 3, 5];
+    archivedCellIndexes.forEach((index) => {
+      const sx = getCellSx(cells[index]);
+      expect(sx.backgroundColor).toBe("background.light");
+      expect(sx.color).toBe("text.disabled");
+    });
+  });
+
+  test("does not apply archived styles to archive/unarchive action cell", () => {
+    setup({
+      options: { sortCol: "name", sortDir: -1, disableProp: "is_archived" },
+      data: [{ id: 1, name: "Alice", role: "Dev", age: 35, is_archived: true }],
+      onArchive: jest.fn()
+    });
+
+    const unarchiveButton = screen.getByRole("button", {
+      name: "general.unarchive"
+    });
+    const actionCell = unarchiveButton.closest("td");
+    const sx = getCellSx(actionCell);
+
+    expect(sx.width).toBe(80);
+    expect(sx.backgroundColor).toBeUndefined();
+    expect(sx.color).toBeUndefined();
   });
 });

src/components/mui/editable-table/mui-table-editable.js

@@ -23,6 +23,11 @@ import {
 } from "../../../utils/constants";
 import showConfirmDialog from "../showConfirmDialog";
 
+const ARCHIVED_CELL_SX = {
+  backgroundColor: "background.light",
+  color: "text.disabled"
+};
+
 const validateValue = (value, validation) => {
   if (!validation) return { isValid: true };
 
@@ -132,7 +137,7 @@ const MuiTableEditable = ({
   onPageChange,
   onPerPageChange,
   onSort,
-  options = { sortCol: "", sortDir: 1 },
+  options = { sortCol: "", sortDir: 1, disableProp: null },
   getName = (item) => item.name,
   onEdit,
   onArchive,
@@ -163,6 +168,14 @@ const MuiTableEditable = ({
 
   const { sortCol, sortDir } = options;
 
+  const getArchivedCellSx = (row) =>
+    options.disableProp && row[options.disableProp] ? ARCHIVED_CELL_SX : null;
+
+  const getCellSx = (row, baseSx = {}) => ({
+    ...baseSx,
+    ...(getArchivedCellSx(row) || {})
+  });
+
   const handleDelete = async (item) => {
     const isConfirmed = await showConfirmDialog({
       title: T.translate("general.are_you_sure"),
@@ -249,17 +262,16 @@ const MuiTableEditable = ({
             </TableHead>
             {/* TABLE BODY */}
             <TableBody>
-              {data.map((row, idx) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <TableRow key={`row-${idx}`} hover>
+              {data.map((row) => (
+                <TableRow key={row.id}>
                   {columns.map((col) => (
                     <TableCell
                       key={`${row.id}-${col.columnKey}`}
                       onClick={() => handleCellClick(row.id, col.columnKey)}
-                      sx={{
+                      sx={getCellSx(row, {
                         cursor: col.editable ? "pointer" : "default",
                         padding: col.editable ? "8px 16px" : undefined // Ensure enough space for the edit icon
-                      }}
+                      })}
                     >
                       {col.editable ? (
                         <EditableCell
@@ -287,7 +299,7 @@ const MuiTableEditable = ({
                     </TableCell>
                   ))}
                   {onEdit && (
-                    <TableCell>
+                    <TableCell sx={getCellSx(row)}>
                       <IconButton
                         onClick={() => onEdit(row)}
                         size="small"
@@ -318,7 +330,7 @@ const MuiTableEditable = ({
                     </TableCell>
                   )}
                   {onDelete && (
-                    <TableCell>
+                    <TableCell sx={getCellSx(row)}>
                       <IconButton
                         onClick={() => handleDelete(row)}
                         size="small"

src/components/mui/table/mui-table.js

@@ -28,6 +28,11 @@ import {
 import showConfirmDialog from "../showConfirmDialog";
 import styles from "./mui-table.module.less";
 
+const ARCHIVED_CELL_SX = {
+  backgroundColor: "background.light",
+  color: "text.disabled"
+};
+
 const MuiTable = ({
   columns = [],
   data = [],
@@ -73,6 +78,14 @@ const MuiTable = ({
 
   const { sortCol, sortDir } = options;
 
+  const getArchivedCellSx = (row) =>
+    options.disableProp && row[options.disableProp] ? ARCHIVED_CELL_SX : null;
+
+  const getCellSx = (row, baseSx = {}) => ({
+    ...baseSx,
+    ...(getArchivedCellSx(row) || {})
+  });
+
   const handleDelete = async (item) => {
     const isConfirmed = await showConfirmDialog({
       title: deleteDialogTitle || T.translate("general.are_you_sure"),
@@ -161,9 +174,8 @@ const MuiTable = ({
 
             {/* TABLE BODY */}
             <TableBody>
-              {data.map((row, idx) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <TableRow key={`row-${idx}`}>
+              {data.map((row) => (
+                <TableRow key={row.id}>
                   {/* Main content columns */}
                   {columns.map((col) => (
                     <TableCell
@@ -172,14 +184,7 @@ const MuiTable = ({
                       className={`${
                         col.dottedBorder && styles.dottedBorderLeft
                       } ${col.className}`}
-                      sx={{
-                        ...(options.disableProp && row[options.disableProp]
-                          ? {
-                              backgroundColor: "background.light",
-                              color: "text.disabled"
-                            }
-                          : {})
-                      }}
+                      sx={getCellSx(row)}
                     >
                       {renderCell(row, col)}
                     </TableCell>
@@ -189,15 +194,7 @@ const MuiTable = ({
                     <TableCell
                       align="center"
                       className={styles.dottedBorderLeft}
-                      sx={{
-                        width: 40,
-                        ...(options.disableProp && row[options.disableProp]
-                          ? {
-                              backgroundColor: "background.light",
-                              color: "text.disabled"
-                            }
-                          : {})
-                      }}
+                      sx={getCellSx(row, { width: 40 })}
                     >
                       <IconButton size="large" onClick={() => onEdit(row)}>
                         <EditIcon fontSize="large" />
@@ -234,15 +231,7 @@ const MuiTable = ({
                     <TableCell
                       align="center"
                       className={styles.dottedBorderLeft}
-                      sx={{
-                        width: 40,
-                        ...(options.disableProp && row[options.disableProp]
-                          ? {
-                              backgroundColor: "background.light",
-                              color: "text.disabled"
-                            }
-                          : {})
-                      }}
+                      sx={getCellSx(row, { width: 40 })}
                     >
                       <IconButton
                         size="large"

src/pages/sponsors/sponsor-form-item-list-page/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2025 OpenStack Foundation
+ * Copyright 2026 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -192,7 +192,8 @@ const SponsorFormItemListPage = ({
 
   const tableOptions = {
     sortCol: order,
-    sortDir: orderDir
+    sortDir: orderDir,
+    disableProp: "is_archived"
   };
 
   return (

src/pages/sponsors/sponsor-forms-tab/components/manage-items/sponsor-forms-manage-items.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2024 OpenStack Foundation
+ * Copyright 2026 OpenStack Foundation
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -352,7 +352,8 @@ const SponsorFormsManageItems = ({
           data={items}
           options={{
             sortCol: order,
-            sortDir: orderDir
+            sortDir: orderDir,
+            disableProp: "is_archived"
           }}
           perPage={perPage}
           totalRows={totalCount}