Java123456com opened a new pull request, #72574: URL: https://github.com/apache/airflow/pull/72574
## Description State-bearing select filters (Last run state, Run state, Run type, Task state, HITL response) render their selected value as clipped garbage in the pill. The filter configs wrap the option labels in a `StateBadge` (or a `Box` with an icon for run types), and that node leaks into two places that must stay plain text: 1. **The collapsed pill** — `SelectFilter` passes the label node as `displayValue`, and `FilterPill` renders it inside a fixed-height (`h=9`) flex row, so the badge overflows and is cut off top and bottom. 2. **The select trigger in edit mode** — Chakra's `ValueText` renders the JSX label of the selected item as-is, inside the editor box that has `overflow="hidden"`, producing the clipped badge reported in #72283. This keeps the badge rendering where it was intended — inside the dropdown menu — and restores plain text everywhere else: - `FilterConfig.options` now types `label` as a `string` (the text shown in the pill and trigger) and adds an optional `menuItem` node used only for the dropdown. - `SelectFilter` renders `option.menuItem ?? option.label` in the menu; `displayValue` and the trigger value become plain text automatically. - `filterConfigs` passes `translate(option.label)` as `label` and moves the `StateBadge`/icon nodes to `menuItem`. Before (value clipped) and after (plain text) screenshots from a live run of the UI, with the menu still showing badges: | Before | After | | --- | --- | | pill shows a clipped red badge instead of the selected state | pill shows plain `Last run: Failed` | ## Related Issue Closes #72283 ## How was this patch tested? - New regression test in `DagsFilters.test.tsx`: selecting `failed` for `last_dag_run_state` renders a pill whose text content is the state label and contains no `state-badge`. - `vitest run src/components/FilterBar src/pages/DagsList/DagsFilters` — 33 tests pass (32 existing + 1 new). - `tsc -p tsconfig.app.json --noEmit` clean; verified visually by running the dev server and exercising the filter end-to-end. -- 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]
