Frun1na opened a new pull request, #6813:
URL: https://github.com/apache/rocketmq-dashboard/pull/6813
### Which Issue(s) This PR Fixes
- Fixes #6812
### Brief Description
#6808 budgeted the topic comparison table for its expand column; the
dead-letter detail table has the same omission. Its table
(`web/src/pages/instance/dlq.tsx:1029`) declares `tableScrollX(detailColumns, {
selection: true })`, which is `1130` (the eight declared column widths) `+ 32`
(the selection column), while the table also renders the 48px row-expand column
antd adds for `expandable` (line 966). No column here is left flexible, so
under `table-layout: fixed` the missing 48px is taken out of every declared
width - the columns render at `1162/1210` of their declared size (the 240px
Message ID column at 230px) - and the table only starts scrolling inside its
own wrapper at a container of 1162px instead of the 1210px it actually needs.
Passing `{ expandable: true }` makes the declared budget cover every rendered
column, so the columns render at their declared widths and the wrapper scrolls
when the container is narrower than them.
### How Did You Test This Change?
```
$ npx vitest run src/pages/instance/__tests__/DLQPage.test.tsx
✓ src/pages/instance/__tests__/DLQPage.test.tsx (35 tests)
Test Files 1 passed (1)
Tests 35 passed (35)
$ npx eslint src/pages/instance/__tests__/DLQPage.test.tsx
src/pages/instance/dlq.tsx # clean
$ npx prettier --check src/pages/instance/__tests__/DLQPage.test.tsx
src/pages/instance/dlq.tsx # clean
$ npx tsc -b # clean
```
The new test fails without the fix (only the product line reverted, the test
kept):
```
$ npx vitest run src/pages/instance/__tests__/DLQPage.test.tsx
FAIL src/pages/instance/__tests__/DLQPage.test.tsx > DLQ page >
declaresAScrollBudgetThatCoversItsExpandColumnTest
AssertionError: expected '1162px' to be '1210px' // Object.is equality
Expected: "1210px"
Received: "1162px"
❯ src/pages/instance/__tests__/DLQPage.test.tsx:1136:32
Test Files 1 failed (1)
Tests 1 failed | 34 passed (35)
```
The assertion reads the width of the table in the opened detail dialog:
`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.
Removing the `expandable: true` option takes the 48px the expand column
occupies back out of that number, which is why this 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/pages/instance/dlq.tsx:1029` - fixed here (`{ selection: true,
expandable: true }`).
- `web/src/components/TopicConfigComparisonModal.tsx:400` - fixed in #6808.
- `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 })`.
### 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]
