codeant-ai-for-open-source[bot] commented on code in PR #41052:
URL: https://github.com/apache/superset/pull/41052#discussion_r3413931380
##########
superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx:
##########
@@ -131,96 +150,116 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor })
=> {
return statusColors[state] || theme.colorIcon;
};
return (
- <TabTitleWrapper>
- <MenuDotsDropdown
- trigger={['click']}
- overlay={
- <Menu
- items={[
- {
- className: 'close-btn',
- key: '1',
- onClick: () => actions.removeQueryEditor(qe),
- 'data-test': 'close-tab-menu-option',
- label: (
- <>
- <IconContainer>
- <Icons.CloseOutlined
- iconSize="l"
- css={css`
- verticalalign: middle;
- `}
- />
- </IconContainer>
- {t('Close tab')}
- </>
- ),
- } as MenuItemType,
- {
- key: '2',
- onClick: renameTab,
- 'data-test': 'rename-tab-menu-option',
- label: (
- <>
- <IconContainer>
- <Icons.EditOutlined
- css={css`
- verticalalign: middle;
- `}
- iconSize="l"
- />
- </IconContainer>
- {t('Rename tab')}
- </>
- ),
- } as MenuItemType,
- {
- key: '4',
- onClick: () => actions.removeAllOtherQueryEditors(qe),
- 'data-test': 'close-all-other-menu-option',
- label: (
- <>
- <IconContainer>
- <Icons.CloseOutlined
- iconSize="l"
- css={css`
- vertical-align: middle;
- `}
- />
- </IconContainer>
- {t('Close all other tabs')}
- </>
- ),
- } as MenuItemType,
- {
- key: '5',
- onClick: () => actions.cloneQueryToNewTab(qe, false),
- 'data-test': 'clone-tab-menu-option',
- label: (
- <>
- <IconContainer>
- <Icons.CopyOutlined
- iconSize="l"
- css={css`
- vertical-align: middle;
- `}
- />
- </IconContainer>
- {t('Duplicate tab')}
- </>
- ),
- } as MenuItemType,
- ]}
+ <>
+ <TabTitleWrapper>
+ <MenuDotsDropdown
+ trigger={['click']}
+ overlay={
+ <Menu
+ items={[
+ {
+ className: 'close-btn',
+ key: '1',
+ onClick: () => actions.removeQueryEditor(qe),
+ 'data-test': 'close-tab-menu-option',
+ label: (
+ <>
+ <IconContainer>
+ <Icons.CloseOutlined
+ iconSize="l"
+ css={css`
+ verticalalign: middle;
+ `}
+ />
+ </IconContainer>
+ {t('Close tab')}
+ </>
+ ),
+ } as MenuItemType,
+ {
+ key: '2',
+ onClick: openRenameModal,
+ 'data-test': 'rename-tab-menu-option',
+ label: (
+ <>
+ <IconContainer>
+ <Icons.EditOutlined
+ css={css`
+ verticalalign: middle;
+ `}
+ iconSize="l"
+ />
+ </IconContainer>
+ {t('Rename tab')}
+ </>
+ ),
+ } as MenuItemType,
+ {
+ key: '4',
+ onClick: () => actions.removeAllOtherQueryEditors(qe),
+ 'data-test': 'close-all-other-menu-option',
+ label: (
+ <>
+ <IconContainer>
+ <Icons.CloseOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: middle;
+ `}
+ />
+ </IconContainer>
+ {t('Close all other tabs')}
+ </>
+ ),
+ } as MenuItemType,
+ {
+ key: '5',
+ onClick: () => actions.cloneQueryToNewTab(qe, false),
+ 'data-test': 'clone-tab-menu-option',
+ label: (
+ <>
+ <IconContainer>
+ <Icons.CopyOutlined
+ iconSize="l"
+ css={css`
+ vertical-align: middle;
+ `}
+ />
+ </IconContainer>
+ {t('Duplicate tab')}
+ </>
+ ),
+ } as MenuItemType,
+ ]}
+ />
+ }
+ />
+ <TabTitle>{qe.name}</TabTitle>{' '}
+ <StatusIcon
+ className="status-icon"
+ iconSize="m"
+ iconColor={getStatusColor(queryState, theme)}
+ />{' '}
+ </TabTitleWrapper>
+ <StandardModal
+ show={isRenameModalOpen}
+ title={t('Rename tab')}
+ onHide={handleRenameCancel}
+ onSave={handleRenameConfirm}
+ saveDisabled={!newTitle.trim()}
+ destroyOnClose
+ >
+ <ModalInputWrapper>
+ <Input
+ value={newTitle}
+ onChange={e => setNewTitle(e.target.value)}
+ onPressEnter={handleRenameConfirm}
+ data-test="rename-tab-input"
+ autoFocus
/>
Review Comment:
**🎨 Design Review — MEDIUM**
Do you think the rename input should have an explicit accessible label (or
`aria-label`) so screen readers announce the field purpose clearly, instead of
relying only on modal context?
[Fix in
Cursor](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=05977e432c0e443db7d352f8861e4f4f&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
| [Fix in VSCode
Claude](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=05977e432c0e443db7d352f8861e4f4f&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a **Design Review** comment — a question about the UX/design of
frontend code. It is intentionally framed as a question, not a prescription.
The author may agree or disagree.
**Path:**
superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
**Line:** 253:259
**Comment:**
*MEDIUM: Do you think the rename input should have an explicit
accessible label (or `aria-label`) so screen readers announce the field purpose
clearly, instead of relying only on modal context?
- If you agree with the proposal, apply a small, localized change (swap a
color token, bump a font size, adjust spacing, add an aria-label, etc.).
- If you disagree, or the answer depends on a design decision a human should
make, explain your reasoning and ask the user how to proceed.
Do NOT refactor surrounding components or apply other design changes that
weren't asked about.
```
</details>
--
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]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
