Frun1na opened a new pull request, #6808:
URL: https://github.com/apache/rocketmq-dashboard/pull/6808
### Which Issue(s) This PR Fixes
- Fixes #6806
### Brief Description
The comparison dialog's table declares its width budget as
`tableScrollX(columns)` while it renders the row-expand column antd adds for
rows with differences (`web/src/components/TopicConfigComparisonModal.tsx:400`
and `:410`). That column is not part of `columns`, so the budget came out as
`240 + 120 + 130 = 490px` while the table renders `538px` of columns; under
`table-layout: fixed` the flexible Topic column is what absorbs the deficit, so
on a body narrower than 538px (a viewport under roughly 620px) it renders
`container - 298px` — below the `minWidth: 240` floor its own column declares —
and long topic names ellipsize earlier than that floor says. The fix passes `{
expandable: true }`, the option `utils/table.ts` reserves 48px for, so the
budget covers every rendered column and the table scrolls inside the modal body
instead of compressing the Topic column. No change at wide viewports: the
surplus still goes to the Topic column, and the two fixed columns keep
120/130px.
### How Did You Test This Change?
```
$ npx vitest run src/components/__tests__/TopicConfigComparisonModal.test.tsx
✓ src/components/__tests__/TopicConfigComparisonModal.test.tsx (12 tests)
Test Files 1 passed (1)
Tests 12 passed (12)
$ npx vitest run src/components/__tests__ # the whole
shared-component suite
Test Files 12 passed (12)
Tests 147 passed (147)
$ npx eslint src/components/TopicConfigComparisonModal.tsx
src/components/__tests__/TopicConfigComparisonModal.test.tsx # clean
$ npx prettier --check src/components/TopicConfigComparisonModal.tsx
src/components/__tests__/TopicConfigComparisonModal.test.tsx # clean
$ npx tsc -b # clean
```
The new test fails without the fix (only the component reverted, the test
kept):
```
$ npx vitest run src/components/__tests__/TopicConfigComparisonModal.test.tsx
FAIL src/components/__tests__/TopicConfigComparisonModal.test.tsx >
TopicConfigComparisonModal > declaresAScrollBudgetThatCoversItsExpandColumnTest
AssertionError: expected '490px' to be '538px' // Object.is equality
Expected: "538px"
Received: "490px"
❯ src/components/__tests__/TopicConfigComparisonModal.test.tsx:322:32
Test Files 1 failed (1)
Tests 1 failed | 11 passed (12)
```
The assertion reads the dialog's own table: `scroll.x` is what rc-table
writes as the table element's `width`, so the value it compares is the width
the browser is told to lay the table out with. Reverting the single changed
argument drops the 48px the expand column occupies and the value goes back to
490 — which is why the assertion, and not a neighbouring one, turns red.
### Other consumers
Every table in the app that renders expandable rows, and how it declares its
budget:
- `web/src/components/TopicConfigComparisonModal.tsx:400` — fixed here (`{
expandable: true }`).
- `web/src/pages/home/dashboard.tsx:408` — already correct:
`tableScrollX(clusterColumns, { expandable: true })`.
- `web/src/pages/instance/consumer.tsx:1651` — already correct:
`tableScrollX(columns, { selection: true, expandable: true })`.
- `web/src/pages/instance/dlq.tsx:1029` — carries the same omission: the
dead-letter detail table has both `rowSelection` (1008) and `expandable` (966)
but passes only `{ selection: true }`, so its budget is 180px short (132
selection + 48 expand). Not fixed here: it is a separate page-level file and a
separate change; left for a follow-up rather than folded in.
No other table in `web/src/components` renders an expand column.
### Checklist
- [x] One coherent change; unrelated modifications are not bundled in
- [x] Commit subject follows Conventional Commits (`feat:` / `fix:` /
`refactor:` / `chore:` / `docs:` / `perf:`)
- [x] Tests added or updated for non-trivial changes, test methods named
`...Test`
- [ ] New UI text has both Chinese and English entries under `web/src/i18n/`
- [ ] Architecture constraints stay green (`mvn test` runs the ArchUnit
checks)
- [ ] New source files carry the ASF license header
- [ ] Documentation touched where behaviour changed (README / `docs/` /
in-app help)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
