Skip to content

Feature/refactor mui table#264

Merged
smarcet merged 4 commits into
mainfrom
feature/refactor-mui-table
Jun 9, 2026
Merged

Feature/refactor mui table#264
smarcet merged 4 commits into
mainfrom
feature/refactor-mui-table

Conversation

@santipalenque

@santipalenque santipalenque commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

https://app.clickup.com/t/86baay28c

Adding cellSx and headSx to columnOptions to allow style definition by column
Fix Action Cells not being affected by disableProp

Summary by CodeRabbit

  • New Features

    • Action buttons (edit, delete, select, archive) in tables can now be conditionally disabled based on row properties, providing more granular control over user interactions.
  • Tests

    • Added comprehensive test coverage for conditional action button disabling behavior.
  • Chores

    • Package version updated to 5.0.34-beta.0.

@coderabbitai

coderabbitai Bot commented Jun 9, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

This PR refactors MUI table styling to centralize cell layout composition and introduces conditional disabling of action buttons via an options.disableProp configuration field. The archive button bypasses disabling when disableProp is set to "is_archived". Tests validate the behavior across all action columns. Package version bumped to 5.0.34-beta.0.

Changes

Conditional Action Button Disabling in MUI Table

Layer / File(s) Summary
Cell styling constants and helpers
src/components/mui/table/mui-table.js
ACTION_CELL_SX constant now enforces fixed width/minWidth/maxWidth of 40 and verticalAlign. New helpers getDisabledSx, getHeaderSx, getCellSx, and getActionCellSx replace archived-specific styling with generalized layout and disabled-state composition.
Header and data cell rendering with new styling
src/components/mui/table/mui-table.js
Header cells, action header cells, and main data cells now use the new styling helpers. Minor boolean-cell text formatting adjusted.
Action column disabled state via disableProp
src/components/mui/table/mui-table.js
Edit, archive, delete, and select action columns refactored to use getActionCellSx(row) and apply disabled based on options.disableProp. Archive button logic explicitly allows enabling when disableProp is "is_archived" regardless of the row's is_archived value.
Test suite for disableProp conditional disabling
src/components/mui/__tests__/mui-table.test.js
New describe("disableProp") test block with 51 lines validates that action buttons render disabled when row values match the disableProp key, with a special case for archive behavior when disableProp is "is_archived".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • OpenStackweb/openstack-uicore-foundation#213: Both PRs modify src/components/mui/table/mui-table.js styling for table cells and row action controls (including Edit/Archive/Delete TableCell/IconButton sx/typography/width), with the main PR additionally refactoring disabled-state/disableProp logic on those actions.
  • OpenStackweb/openstack-uicore-foundation#239: Both PRs modify src/components/mui/table/mui-table.js around the action-cell/header sizing logic (shared action-cell styling constraints), with the main PR additionally refactoring/adding disabled-state behavior via options.disableProp.

Suggested reviewers

  • smarcet

Poem

🐰 A table of rows, now cleaner and bright,
With helpers for styling, disabled done right,
Action buttons dance to disableProp's tune,
Archive stays nimble beneath the moon,
Tests verify magic—five-oh-four, hooray!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'Feature/refactor mui table' is vague and generic, using broad terms that don't clearly convey the specific changes made (columnOptions properties, disableProp behavior fixes). Use a more descriptive title that highlights the main changes, such as 'Add cellSx/headSx options and fix disableProp for action cells' or 'Refactor MUI table styling and disable behavior'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/refactor-mui-table

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
src/components/mui/table/mui-table.js (1)

108-109: ⚡ Quick win

Centralize and boolean-normalize row disabled evaluation.

options.disableProp && row[options.disableProp] is duplicated and returns non-boolean values. Extracting a single helper with Boolean(...) avoids divergence and prevents accidental disabling from truthy non-boolean payloads.

Suggested refactor
+  const isRowDisabled = (row) =>
+    Boolean(options.disableProp && row?.[options.disableProp]);
+
+  const isArchiveDisabled = (row) =>
+    Boolean(options.disableProp && options.disableProp !== "is_archived" && row?.[options.disableProp]);
+
   const getDisabledSx = (row) =>
-    options.disableProp && row[options.disableProp] ? ARCHIVED_CELL_SX : {};
+    isRowDisabled(row) ? ARCHIVED_CELL_SX : {};

...
-                        disabled={options.disableProp && row[options.disableProp]}
+                        disabled={isRowDisabled(row)}
...
-                        disabled={options.disableProp && options.disableProp !== "is_archived" && row[options.disableProp]}
+                        disabled={isArchiveDisabled(row)}
...
-                          disabled={options.disableProp && row[options.disableProp]}
+                          disabled={isRowDisabled(row)}
...
-                        disabled={options.disableProp && row[options.disableProp]}
+                        disabled={isRowDisabled(row)}

Also applies to: 247-248, 274-275, 295-296, 313-314

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/table/mui-table.js` around lines 108 - 109, Extract a
single helper (e.g., isRowDisabled) that returns a boolean using
Boolean(options.disableProp && row[options.disableProp]) and replace the
duplicated checks (currently used in getDisabledSx and the other occurrences
around the file) with calls to that helper; ensure getDisabledSx(row) uses
isRowDisabled(row) to return ARCHIVED_CELL_SX or {} and update the other spots
(the duplicated expressions at the listed locations) to use the same helper so
the disabled evaluation is centralized and always yields a true boolean.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/mui/table/mui-table.js`:
- Around line 108-109: Extract a single helper (e.g., isRowDisabled) that
returns a boolean using Boolean(options.disableProp && row[options.disableProp])
and replace the duplicated checks (currently used in getDisabledSx and the other
occurrences around the file) with calls to that helper; ensure
getDisabledSx(row) uses isRowDisabled(row) to return ARCHIVED_CELL_SX or {} and
update the other spots (the duplicated expressions at the listed locations) to
use the same helper so the disabled evaluation is centralized and always yields
a true boolean.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 570c4107-c5eb-4379-8640-18cd68610db6

📥 Commits

Reviewing files that changed from the base of the PR and between 2539b02 and 67b2e4a.

📒 Files selected for processing (3)
  • package.json
  • src/components/mui/__tests__/mui-table.test.js
  • src/components/mui/table/mui-table.js

@smarcet smarcet left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

LGTM

@smarcet smarcet merged commit a8e7077 into main Jun 9, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants