Skip to content

fix: improve mui tables styles #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
priscila-moneo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve mui tables styles #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions src/components/mui/__tests__/mui-table-editable.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,22 +359,4 @@ describe("MuiTableEditable", () => {
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();
});
});
53 changes: 39 additions & 14 deletions src/components/mui/editable-table/mui-table-editable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { IconButton, TextField } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import { visuallyHidden } from "@mui/utils";
import styles from "./mui-table-editable.module.less";

import {
DEFAULT_PER_PAGE,
Expand Down Expand Up @@ -123,7 +124,7 @@ const EditableCell = ({ value, isEditing, onBlur, validation }) => {
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<span style={{ flex: 1 }}>{value}</span>
<span style={{ flex: 1, fontWeight: "normal" }}>{value}</span>
{isHovering && (
<EditIcon
fontSize="small"
Expand Down Expand Up @@ -197,7 +198,7 @@ const MuiTableEditable = ({
: `${T.translate("general.row_remove_warning")} ${getName(item)}`,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonColor: "warning",
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Locate the showConfirmDialog implementation
fd -i 'showconfirmdialog' src

# 2) Inspect implementation to confirm what `confirmButtonColor` is passed into
fd -i 'showconfirmdialog' src --exec sed -n '1,220p' {}

# 3) Find how `confirmButtonColor` is used across the codebase
rg -n -C3 '\bconfirmButtonColor\b|sweetalert|Swal' src

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 14269

Use a concrete CSS color value instead of Material-UI palette token.

Line 201 passes "warning" to Swal.fire() (SweetAlert2), which expects a CSS color string, not a palette token. This will fail to render the button color correctly. Use a hex color like "#DD6B55" to match the pattern used consistently throughout the codebase (e.g., src/components/table-editable/EditableTable.js, src/components/mui/formik-inputs/additional-input/meta-field-values.js).

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/mui/editable-table/mui-table-editable.js` at line 201,
Swal.fire is being passed the Material-UI palette token "warning" for
confirmButtonColor which SweetAlert2 expects a concrete CSS color; update the
Swal.fire invocation (the confirmButtonColor option) to use a hex value (e.g.
"#DD6B55") instead of "warning" so the confirm button renders correctly—locate
the Swal.fire call in mui-table-editable (the confirmButtonColor property) and
replace the token string with the concrete color.

Copy link
Copy Markdown
Contributor

@santipalenque santipalenque Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please address this

Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@santipalenque, the fix here is to revert confirmButtonColor back to the hex string "#DD6B55". SweetAlert2's Swal.fire() (which showConfirmDialog wraps) expects a CSS color value — passing the MUI palette token "warning" will result in the confirm button rendering without any color styling.

  • Revert confirmButtonColor from "warning" to "#DD6B55" in src/components/mui/editable-table/mui-table-editable.js

Failed to handle agent chat message. Please try again.

Copy link
Copy Markdown
Contributor Author

@priscila-moneo priscila-moneo Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not an issue, in fact it fixes button color. This si not a SweetAlert2's, it's a MUI Dialog. @santipalenque

Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

confirmButtonText: T.translate("general.yes_delete")
});

Expand Down Expand Up @@ -243,7 +244,8 @@ const MuiTableEditable = ({
sx={{
width: col.width,
minWidth: col.width,
maxWidth: col.width
maxWidth: col.width,
fontWeight: "normal"
}}
align={col.align ?? "left"}
>
Expand All @@ -256,6 +258,7 @@ const MuiTableEditable = ({
: "asc"
}
onClick={() => onSort(col.columnKey, sortDir * -1)}
sx={{ fontWeight: "normal" }}
>
{col.header}
{sortCol === col.columnKey ? (
Expand All @@ -267,13 +270,19 @@ const MuiTableEditable = ({
) : null}
</TableSortLabel>
) : (
col.header
<span style={{ fontWeight: "normal" }}>{col.header}</span>
)}
</TableCell>
))}
{onEdit && <TableCell sx={{ width: 40 }} />}
{onArchive && <TableCell sx={{ width: 80 }} />}
{onDelete && <TableCell sx={{ width: 40 }} />}
{onEdit && (
<TableCell sx={{ width: 40, fontWeight: "normal" }} />
)}
{onArchive && (
<TableCell sx={{ width: 80, fontWeight: "normal" }} />
)}
{onDelete && (
<TableCell sx={{ width: 40, fontWeight: "normal" }} />
)}
</TableRow>
</TableHead>
{/* TABLE BODY */}
Expand All @@ -286,7 +295,8 @@ const MuiTableEditable = ({
onClick={() => handleCellClick(row, col.columnKey)}
sx={getCellSx(row, {
cursor: isEditable(col, row) ? "pointer" : "default",
padding: isEditable(col, row) ? "8px 16px" : undefined // Ensure enough space for the edit icon
padding: isEditable(col, row) ? "8px 16px" : undefined,
fontWeight: "normal"
})}
>
{isEditable(col, row) ? (
Expand All @@ -310,12 +320,17 @@ const MuiTableEditable = ({
) : col.render ? (
col.render(row)
) : (
row[col.columnKey]
<span style={{ fontWeight: "normal" }}>
{row[col.columnKey]}
</span>
)}
</TableCell>
))}
{onEdit && (
<TableCell sx={getCellSx(row)}>
<TableCell
sx={getCellSx(row)}
className={styles.dottedBorderLeft}
>
<IconButton
onClick={() => onEdit(row)}
size="small"
Expand All @@ -326,17 +341,24 @@ const MuiTableEditable = ({
</TableCell>
)}
{onArchive && (
<TableCell align="center" sx={{ width: 80 }}>
<TableCell
align="center"
sx={{
...getCellSx(row, { width: 80, fontWeight: "normal" })
}}
className={styles.dottedBorderLeft}
>
<Button
variant="text"
color="inherit"
size="small"
onClick={() => onArchive(row)}
sx={{
fontSize: "1.3rem",
fontWeight: 500,
fontWeight: "normal",
lineHeight: "2.2rem",
padding: "4px 5px"
padding: "4px 5px",
color: "rgba(0,0,0,0.56)"
}}
>
{row.is_archived
Expand All @@ -346,7 +368,10 @@ const MuiTableEditable = ({
</TableCell>
)}
{onDelete && (
<TableCell sx={getCellSx(row)}>
<TableCell
sx={getCellSx(row)}
className={styles.dottedBorderLeft}
>
<IconButton
onClick={() => handleDelete(row)}
size="small"
Expand Down
0 ...nts/mui/editable-table/styles.module.less → ...able-table/mui-table-editable.module.less
View file
Open in desktop
File renamed without changes.
3 changes: 3 additions & 0 deletions src/components/mui/sortable-table/mui-table-sortable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ const MuiTableSortable = ({
className={`${
col.dottedBorder && styles.dottedBorderLeft
} ${col.className}`}
sx={{ fontWeight: "normal" }}
>
{col.render?.(row) || row[col.columnKey]}
</TableCell>
Expand All @@ -230,6 +231,7 @@ const MuiTableSortable = ({
<IconButton
size="large"
onClick={() => onEdit(row)}
sx={{ padding: 0 }}
>
<EditIcon fontSize="large" />
</IconButton>
Expand All @@ -245,6 +247,7 @@ const MuiTableSortable = ({
<IconButton
size="large"
onClick={() => handleDelete(row)}
sx={{ padding: 0 }}
>
<DeleteIcon fontSize="large" />
</IconButton>
Expand Down
18 changes: 12 additions & 6 deletions src/components/mui/table/mui-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ const MuiTable = ({
);
}

return row[col.columnKey];
return <span style={{ fontWeight: "normal" }}>{row[col.columnKey]}</span>;
};

return (
Expand Down Expand Up @@ -201,7 +201,7 @@ const MuiTable = ({
className={`${
col.dottedBorder && styles.dottedBorderLeft
} ${col.className}`}
sx={getCellSx(row)}
sx={{ ...getCellSx(row), fontWeight: "normal" }}
>
{renderCell(row, col)}
</TableCell>
Expand All @@ -213,7 +213,11 @@ const MuiTable = ({
className={styles.dottedBorderLeft}
sx={getCellSx(row, { width: 40 })}
>
<IconButton size="large" onClick={() => onEdit(row)}>
<IconButton
size="large"
onClick={() => onEdit(row)}
sx={{ padding: 0 }}
>
<EditIcon fontSize="large" />
</IconButton>
</TableCell>
Expand All @@ -222,7 +226,7 @@ const MuiTable = ({
{onArchive && (
<TableCell
align="center"
sx={{ width: 80 }}
sx={{ ...getCellSx(row, { width: 80 }) }}
className={styles.dottedBorderLeft}
>
<Button
Expand All @@ -232,9 +236,10 @@ const MuiTable = ({
onClick={() => onArchive(row)}
sx={{
fontSize: "1.3rem",
fontWeight: 500,
fontWeight: "normal",
lineHeight: "2.2rem",
padding: "4px 5px"
padding: 0,
color: "rgba(0,0,0,0.56)"
}}
>
{row.is_archived
Expand All @@ -254,6 +259,7 @@ const MuiTable = ({
<IconButton
size="large"
onClick={() => handleDelete(row)}
sx={{ padding: 0 }}
>
<DeleteIcon fontSize="large" />
</IconButton>
Expand Down
Loading