refactor(Menu): Use items prop instead of deprecated Menu.Item HOC (#32587)

This commit is contained in:
Mehmet Salih Yavuz
2025-06-16 22:51:27 +03:00
committed by GitHub
parent 527c8de773
commit d15b0e4f6d
23 changed files with 849 additions and 729 deletions

View File

@@ -38,6 +38,7 @@ import {
toggleLeftBar,
} from 'src/SqlLab/actions/sqlLab';
import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
import { MenuItemType } from 'antd-v5/es/menu/interface';
import { Icons, IconType } from 'src/components/Icons';
const TabTitleWrapper = styled.div`
@@ -132,84 +133,101 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
<MenuDotsDropdown
trigger={['click']}
overlay={
<Menu>
<Menu.Item
className="close-btn"
key="1"
onClick={() => actions.removeQueryEditor(qe)}
data-test="close-tab-menu-option"
>
<IconContainer>
<Icons.CloseOutlined
iconSize="l"
css={css`
verticalalign: middle;
`}
/>
</IconContainer>
{t('Close tab')}
</Menu.Item>
<Menu.Item
key="2"
onClick={renameTab}
data-test="rename-tab-menu-option"
>
<IconContainer>
<Icons.EditOutlined
css={css`
verticalalign: middle;
`}
iconSize="l"
/>
</IconContainer>
{t('Rename tab')}
</Menu.Item>
<Menu.Item
key="3"
onClick={() => actions.toggleLeftBar(qe)}
data-test="toggle-menu-option"
>
<IconContainer>
<Icons.VerticalAlignBottomOutlined
iconSize="l"
css={css`
rotate: ${qe.hideLeftBar ? '-90deg;' : '90deg;'};
`}
/>
</IconContainer>
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</Menu.Item>
<Menu.Item
key="4"
onClick={() => actions.removeAllOtherQueryEditors(qe)}
data-test="close-all-other-menu-option"
>
<IconContainer>
<Icons.CloseOutlined
iconSize="l"
css={css`
vertical-align: middle;
`}
/>
</IconContainer>
{t('Close all other tabs')}
</Menu.Item>
<Menu.Item
key="5"
onClick={() => actions.cloneQueryToNewTab(qe, false)}
data-test="clone-tab-menu-option"
>
<IconContainer>
<Icons.CopyOutlined
iconSize="l"
css={css`
vertical-align: middle;
`}
/>
</IconContainer>
{t('Duplicate tab')}
</Menu.Item>
</Menu>
<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: '3',
onClick: () => actions.toggleLeftBar(qe),
'data-test': 'toggle-menu-option',
label: (
<>
<IconContainer>
<Icons.VerticalAlignBottomOutlined
iconSize="l"
css={css`
rotate: ${qe.hideLeftBar ? '-90deg;' : '90deg;'};
`}
/>
</IconContainer>
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</>
),
} 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>{' '}