Refactor/move table action buttons by ako3131 · Pull Request #377 · OpenStackweb/openstack-uicore-foundation

ako3131 · 2026-10-29T18:22:42Z

ref: https://app.clickup.com/t/9014802374/86bc67fpv

Summary

Declutters MUI table rows: Delete moves into a "⋮" row actions menu, and MuiTable rows open for editing on click.

MuiTable: Edit column removed. Clicking a row (or Enter on a focused row) calls onEdit; rows disabled via disableProp stay inert. Clicks on buttons, links, inputs and popups opened from a cell are ignored. Delete is in a new first column menu, disabled on disabled rows. Archive / View are unchanged.
MuiTableEditable, MuiTableSortable, MuiTableSortableV2, BulkEditTable: Delete moves to the same front menu. Edit buttons stay.
RowActionsMenu: tooltip + aria-label ("More actions"), red styling for destructive items, trigger disabled when every action is disabled. New shared getDeleteAction() helper.
Removed the responsive "collapse actions into a menu" logic (options.responsive, getActionsMenuBreakpoint).
BulkEditTable rows no longer use hover; hover now only marks clickable rows.

Breaking changes

Column order: MuiTable has no Edit column. Extra rows passed as children (e.g. TotalRow colGap / trailing) need updating.
Test ids action-edit / action-delete are gone; use row-actions-menu-trigger + the "Delete" menu item.
options.responsive no longer has any effect.

summit-admin follow-up needed: sponsor-cart-tab/components/cart-view.js (TotalRow layout, test ids).

Testing

Updated table tests for the menu; added tests for row click, Enter key, clicks on in-cell controls / action columns, clicks inside popups opened from a cell, and BulkEditTable delete via menu.
yarn test and yarn build pass.

coderabbitai · 2026-10-29T18:22:52Z

Important

🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 11d23d2c-e0ad-41f9-ae3b-b1e01c91cd1c

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}

Copilot

🟡 Changes recommended

In-cell controls can still unintentionally trigger row editing, and removing the Edit button leaves no named edit control discoverable by assistive-technology users.

2 open issues

What changed in this PR

Standardizes Delete actions across the MUI table components and replaces MuiTable’s Edit column with row-click and Enter-key editing.

Changes:

Moves Delete into a leading row-actions menu with shared labels, destructive styling, and disabled-state support.
Removes responsive action collapsing while retaining existing Edit buttons in other table variants.
Updates tests for menu-based deletion and row-edit interactions.

File	Description
`src/i18n/en.json`	Adds the “More actions” label.
`src/components/mui/tables/sortable-table/index.js`	Moves Delete into a leading menu.
`src/components/mui/tables/sortable-table-v2/mui-table-sortable-v2.js`	Adopts the shared Delete menu.
`src/components/mui/tables/mui-table/index.js`	Adds row editing and reorganizes action columns.
`src/components/mui/tables/editable-table/index.js`	Moves Delete into the shared menu.
`src/components/mui/tables/components/table-styles.js`	Removes action-collapse breakpoint utilities.
`src/components/mui/tables/components/row-actions-menu.js`	Adds shared Delete configuration and menu styling.
`src/components/mui/BulkEditTable/components/Row.js`	Separates Delete from Edit and removes row hover.
`src/components/mui/BulkEditTable/BulkEditTable.js`	Updates headers and removes responsive action props.
`src/components/mui/BulkEditTable/__tests__/BulkEditTable.test.js`	Tests menu deletion with a custom row identifier.
`src/components/mui/__tests__/mui-table.test.js`	Tests row editing, disabled rows, and interaction guards.
`src/components/mui/__tests__/mui-table-sortable.test.js`	Updates deletion tests for the menu.
`src/components/mui/__tests__/mui-table-sortable-v2.test.js`	Updates menu deletion and custom-identifier tests.
`src/components/mui/__tests__/mui-table-editable.test.js`	Updates deletion tests and forwards the mocked button ref.

_{Review effort: Balanced}

+    onEdit && !(options.disableProp && row[options.disableProp])
+      ? {
+          hover: true,
+          tabIndex: 0,


+            // ignore clicks from popups (menus, dialogs) opened by a cell
+            if (!ev.currentTarget.contains(ev.target)) return;
+            // ignore clicks on controls rendered inside cells
+            if (!ev.target.closest("button, a, input, [role=button]")) onEdit(row);


…ow to edit

…bles

…better keyboard user experience

…func name

…lity

santipalenque

hey @ako3131 I like this idea but it needs some polishing, here are a couple of issues I found on top of what I commented inline:

1- On MuiTableEditable and MuiTableSortable the actions are not grouped in taco menu like in MuiTable, it should be consistent. These two versions of the table keep showing the Edit action on the left and just the Delete action inside taco menu while MuiTable shows all actions inside taco menu.
2- Extra actions like ARCHIVE are left on the right most column, is weird that some actions are inside the taco menu aligned left and others aligned right. I think this solution should also handle this scenario and allow adding custom actions to the menu.
3- Tables that have extra rows like TotalRow are now missaligned (check other extra rows too) , you should create a PR for summit-admin and sponsor-services with amends on these instances.
4- Removed buttons and test IDs will fail summit-admin tests on the version bump: cart-view.test.js, sponsor-forms-tab.test.js, sponsor-pages-tab.test.js, show-pages-list-page.test.js.
5- User cannot longer select a text from the table to copy. When trying to select a value from a table cell, the onClick triggers and you are taken to edit page.

santipalenque · 2026-10-30T13:13:40Z

              setAnchorEl(null);
              action.onClick();
            }}
+            sx={action.destructive ? { color: "error.main" } : undefined}


why not have a color prop on action ? defaulted to undefined, and allowing to set it to error.main if needed

santipalenque · 2026-10-30T13:17:30Z

+  destructive: true
+});
+
 const RowActionsMenu = ({ actions }) => {


if we separate onDelete and onEdit (which are the most common actions) and leave actions as extraActions separate, we then can simplify this a lot and avoid having getDeleteAction altogether

ako3131 requested a balanced review from Copilot October 29, 2026 18:22

ako3131 self-assigned this Oct 29, 2026

Copilot started reviewing on behalf of ako3131 October 29, 2026 18:23

View session

Copilot AI reviewed Oct 29, 2026

View reviewed changes

ako3131 added 13 commits October 29, 2026 15:29

refactor: for mui tables: move delete into row actions and click on r…

83e5c76

…ow to edit

refactor: move delete into a row actions menu

1dd5825

fix: move delete into a row actions menu for editable and sortable ta…

7314c43

…bles

fix: add tests for delete/edit button rearrangement

81380bc

fix: adjust the column actions on bulk edit table

7c0f24a

fix: a button click doesn't trigger an edit on mui table

f3c0965

fix: make row click editing keyboard accesible

a69ab2f

fix: share delete action across tables, actions disabled on archive, …

2bc98dc

…better keyboard user experience

fix: cleanup inconsistencies, unneccesary components, and misleading …

ccd613e

…func name

fix: guard row clicks from registering from a popup click

3993ffa

fix: move checkboxes to be the first column in a bulkedittable

042bd08

fix: expand edit click guard

523c368

fix: add an edit button into actions button on mui-table for accesibi…

83e8b09

…lity

ako3131 force-pushed the refactor/move-table-action-buttons branch from 80c3816 to 83e8b09 Compare October 29, 2026 20:29

ako3131 requested a review from santipalenque October 29, 2026 21:23

santipalenque requested changes Oct 30, 2026

View reviewed changes

ako3131 added 7 commits October 30, 2026 12:58

fix: reorganize action menu

7ecf6f6

fix: move edit into row actions for all tables and remove icon

7528812

fix: move action menu back to the right

8aa2d80

fix: add a divider between the edit and delete button

2b0e618

fix: remove row clicks to edit and add linkable cells

750f8b9

fix: adjust styling on linkable cells

9789b8d

fix: other actions can be passed into row actions menu

72e9289

Navigation Menu

Repository navigation

Refactor/move table action buttons - #377

Refactor/move table action buttons#377
ako3131 wants to merge 20 commits into
mainfrom
refactor/move-table-action-buttons

ako3131 commented Oct 29, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

santipalenque left a comment

Uh oh!

santipalenque Oct 30, 2026

Uh oh!

santipalenque Oct 30, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ako3131 commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Breaking changes

Testing

Uh oh!

coderabbitai Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

santipalenque left a comment

Choose a reason for hiding this comment

Uh oh!

santipalenque Oct 30, 2026

Choose a reason for hiding this comment

Uh oh!

santipalenque Oct 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ako3131 commented Oct 29, 2026 •

edited

Loading

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading