QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-23 01:55:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Icons): Replaces custom icons with Ant Design 5 icons (#32112)

Browse Source 
Replace custom icons with Ant Design 5 icons to standardize the icon
This commit is contained in:
Enzo Martellucci
2025-03-18 22:22:41 +01:00
committed by GitHub
parent 9e3052968b
commit ce6d5f5551
341 changed files with 2222 additions and 3999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx
View File

@@ -22,7 +22,14 @@ import { bindActionCreators } from 'redux';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { MenuDotsDropdown } from 'src/components/Dropdown';
import { Menu } from 'src/components/Menu';
import { styled, t, QueryState } from '@superset-ui/core';
import {
styled,
css,
t,
QueryState,
SupersetTheme,
useTheme,
} from '@superset-ui/core';
import {
removeQueryEditor,
removeAllOtherQueryEditors,
@@ -31,11 +38,16 @@ import {
toggleLeftBar,
} from 'src/SqlLab/actions/sqlLab';
import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
import TabStatusIcon from '../TabStatusIcon';
import Icons, { IconType } from 'src/components/Icons';
const TabTitleWrapper = styled.div`
display: flex;
align-items: center;
[aria-label='check-circle'],
.status-icon {
margin: 0px;
}
`;
const TabTitle = styled.span`
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
@@ -43,16 +55,29 @@ const TabTitle = styled.span`
`;
const IconContainer = styled.div`
display: inline-block;
width: ${({ theme }) => theme.gridUnit * 8}px;
text-align: center;
${({ theme }) => css`
display: inline-block;
margin: 0 ${theme.gridUnit * 2}px 0 0px;
`}
`;
interface Props {
queryEditor: QueryEditor;
}
const STATE_ICONS: Record<string, FC<IconType>> = {
started: Icons.CircleSolid,
stopped: Icons.StopOutlined,
pending: Icons.CircleSolid,
scheduled: Icons.CalendarOutlined,
fetching: Icons.CircleSolid,
timedOut: Icons.FieldTimeOutlined,
running: Icons.CircleSolid,
success: Icons.CheckCircleOutlined,
failed: Icons.CloseCircleOutlined,
};
const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
const theme = useTheme();
const qe = useSelector<SqlLabRootState, QueryEditor>(
({ sqlLab: { unsavedQueryEditor } }) => ({
...queryEditor,
@@ -63,6 +88,8 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
const queryState = useSelector<SqlLabRootState, QueryState>(
({ sqlLab }) => sqlLab.queries[qe.latestQueryId || '']?.state || '',
);
const StatusIcon = queryState ? STATE_ICONS[queryState] : STATE_ICONS.running;
const dispatch = useDispatch();
const actions = useMemo(
() =>
@@ -85,7 +112,21 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
actions.queryEditorSetTitle(qe, newTitle, qe.id);
}
}
const getStatusColor = (state: QueryState, theme: SupersetTheme): string => {
const statusColors: Record<QueryState, string> = {
[QueryState.Running]: theme.colors.info.base,
[QueryState.Success]: theme.colors.success.base,
[QueryState.Failed]: theme.colors.error.base,
[QueryState.Started]: theme.colors.primary.base,
[QueryState.Stopped]: theme.colors.warning.base,
[QueryState.Pending]: theme.colors.grayscale.light1,
[QueryState.Scheduled]: theme.colors.grayscale.light2,
[QueryState.Fetching]: theme.colors.secondary.base,
[QueryState.TimedOut]: theme.colors.error.dark1,
};
return statusColors[state] || theme.colors.grayscale.light2;
};
return (
<TabTitleWrapper>
<MenuDotsDropdown
@@ -99,9 +140,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="close-tab-menu-option"
>
<IconContainer>
{/* TODO: Remove fa-icon */}
{/* eslint-disable-next-line icons/no-fa-icons-usage */}
<i className="fa fa-close" />
<Icons.CloseOutlined
iconSize="l"
css={css`
verticalalign: middle;
`}
/>
</IconContainer>
{t('Close tab')}
</Menu.Item>
@@ -111,9 +155,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="rename-tab-menu-option"
>
<IconContainer>
{/* TODO: Remove fa-icon */}
{/* eslint-disable-next-line icons/no-fa-icons-usage */}
<i className="fa fa-i-cursor" />
<Icons.EditOutlined
css={css`
verticalalign: middle;
`}
iconSize="l"
/>
</IconContainer>
{t('Rename tab')}
</Menu.Item>
@@ -123,9 +170,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="toggle-menu-option"
>
<IconContainer>
{/* TODO: Remove fa-icon */}
{/* eslint-disable-next-line icons/no-fa-icons-usage */}
<i className="fa fa-cogs" />
<Icons.VerticalAlignBottomOutlined
iconSize="l"
css={css`
rotate: ${qe.hideLeftBar ? '-90deg;' : '90deg;'};
`}
/>
</IconContainer>
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</Menu.Item>
@@ -135,9 +185,12 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="close-all-other-menu-option"
>
<IconContainer>
{/* TODO: Remove fa-icon */}
{/* eslint-disable-next-line icons/no-fa-icons-usage */}
<i className="fa fa-times-circle-o" />
<Icons.CloseOutlined
iconSize="l"
css={css`
vertical-align: middle;
`}
/>
</IconContainer>
{t('Close all other tabs')}
</Menu.Item>
@@ -147,17 +200,24 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
data-test="clone-tab-menu-option"
>
<IconContainer>
{/* TODO: Remove fa-icon */}
{/* eslint-disable-next-line icons/no-fa-icons-usage */}
<i className="fa fa-files-o" />
<Icons.CopyOutlined
iconSize="l"
css={css`
vertical-align: middle;
`}
/>
</IconContainer>
{t('Duplicate tab')}
</Menu.Item>
</Menu>
}
/>
<TabTitle>{qe.name}</TabTitle>{' '}
<TabStatusIcon tabState={queryState} />{' '}
<TabTitle>{qe.name}</TabTitle>
<StatusIcon
className="status-icon"
iconSize="xs"
iconColor={getStatusColor(queryState, theme)}
/>
</TabTitleWrapper>
);
};