You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "yjaw (via GitHub)" <gi...@apache.org> on 2026/02/23 12:29:16 UTC
[PR] fix(ui): unique keys for pagination ellipses [airflow]
yjaw opened a new pull request, #62352:
URL: https://github.com/apache/airflow/pull/62352
The current ellipses share the same key ("ellipsis"), which may cause rendering bugs. Added the page value to each ellipsis key to ensure they are unique.
before:
https://github.com/user-attachments/assets/2a27167f-f923-4973-8710-18bfcfd8615b
after:
https://github.com/user-attachments/assets/053b20d1-b676-4b98-bbc3-25658106250a
closes: #62350
<!-- SPDX-License-Identifier: Apache-2.0
https://www.apache.org/licenses/LICENSE-2.0 -->
<!--
Thank you for contributing!
Please provide above a brief description of the changes made in this pull request.
Write a good git commit message following this guide: http://chris.beams.io/posts/git-commit/
Please make sure that your code changes are covered with tests.
And in case of new features or big changes remember to adjust the documentation.
Feel free to ping (in general) for the review if you do not see reaction for a few days
(72 Hours is the minimum reaction time you can expect from volunteers) - we sometimes miss notifications.
In case of an existing issue, reference it using one of the following:
* closes: #ISSUE
* related: #ISSUE
-->
---
##### Was generative AI tooling used to co-author this PR?
<!--
If generative AI tooling has been used in the process of authoring this PR, please
change below checkbox to `[X]` followed by the name of the tool, uncomment the "Generated-by".
-->
- [x] Yes (please specify the tool below)
Generated-by: [Gemini and Antigravity] following [the guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
---
* Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)** for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
* For fundamental code changes, an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals)) is needed.
* When adding dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
* For significant user-facing changes create newsfragment: `{pr_number}.significant.rst` or `{issue_number}.significant.rst`, in [airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments).
* *
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840705821
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
Review Comment:
```suggestion
return <Ellipsis index={index} key={`ellipsis-${index}`} {...props} />;
```
Could we try to uses index as the key discriminator? Keeping the original ternary style and avoiding the unsafe type cast.
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming merged PR #62352:
URL: https://github.com/apache/airflow/pull/62352
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840890016
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
Review Comment:
use `// eslint-disable-next-line react/no-array-index-key`
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "yjaw (via GitHub)" <gi...@apache.org>.
yjaw commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840777916
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
Review Comment:
I also think that using an index is more elegant and eliminates the concern of an array out-of-range error. However, it appears that the linter does not allow us to use an index as a key. I agree that we cloud try other way to make key unique.
here is error message:
error Do not use Array index in keys react/no-array-index-key
✖ 1 problem (1 error, 0 warnings)
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "yjaw (via GitHub)" <gi...@apache.org>.
yjaw commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840853396
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
Review Comment:
I think using index won't be a problem in this scenario. How can I bypass linter?
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840809378
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
Review Comment:
Since the ellipsis items genuinely have no stable identifier, I think we use index but suppress the lint rule for this specific line. What do you think?
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #62352:
URL: https://github.com/apache/airflow/pull/62352#issuecomment-3945676737
### Backport successfully created: v3-1-test
Note: As of [Merging PRs targeted for Airflow 3.X](https://github.com/apache/airflow/blob/main/dev/README_AIRFLOW3_DEV.md#merging-prs-targeted-for-airflow-3x)
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.
In matter of doubt please ask in [#release-management](https://apache-airflow.slack.com/archives/C03G9H97MM2) Slack channel.
<table>
<tr>
<th>Status</th>
<th>Branch</th>
<th>Result</th>
</tr>
<tr>
<td>✅</td>
<td>v3-1-test</td>
<td><a href="https://github.com/apache/airflow/pull/62366"><img src="https://img.shields.io/badge/PR-62366-blue" alt="PR Link"></a></td>
</tr>
</table>
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(ui): unique keys for pagination ellipses [airflow]
Posted by "guan404ming (via GitHub)" <gi...@apache.org>.
guan404ming commented on PR #62352:
URL: https://github.com/apache/airflow/pull/62352#issuecomment-3945667266
Thanks for the update.
--
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: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org