mirror of https://github.com/apache/superset.git
refactor: icon to icons for syntaxhighlighter and querylist components (#15618)
* initial commit * make changes * more simplify * remove code * add prop * remove unsued code
This commit is contained in:
parent
257385e888
commit
34542db3b6
|
@ -26,7 +26,7 @@ import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
|
|||
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
|
||||
import { ToastProps } from 'src/messageToasts/enhancers/withToasts';
|
||||
import Icon from 'src/components/Icon';
|
||||
import Icons from 'src/components/Icons';
|
||||
import copyTextToClipboard from 'src/utils/copy';
|
||||
|
||||
SyntaxHighlighter.registerLanguage('sql', sqlSyntax);
|
||||
|
@ -49,6 +49,7 @@ const SyntaxHighlighterWrapper = styled.div`
|
|||
left: 512px;
|
||||
visibility: hidden;
|
||||
margin: -4px;
|
||||
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -78,9 +79,8 @@ export default function SyntaxHighlighterCopy({
|
|||
}
|
||||
return (
|
||||
<SyntaxHighlighterWrapper>
|
||||
<Icon
|
||||
<Icons.Copy
|
||||
tabIndex={0}
|
||||
name="copy"
|
||||
role="button"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
|
|
|
@ -16,8 +16,8 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, { useMemo, useState, useCallback } from 'react';
|
||||
import { SupersetClient, t, styled } from '@superset-ui/core';
|
||||
import React, { useMemo, useState, useCallback, ReactElement } from 'react';
|
||||
import { SupersetClient, t, styled, useTheme } from '@superset-ui/core';
|
||||
import moment from 'moment';
|
||||
import {
|
||||
createFetchRelated,
|
||||
|
@ -35,7 +35,6 @@ import ListView, {
|
|||
FilterOperator,
|
||||
ListViewProps,
|
||||
} from 'src/components/ListView';
|
||||
import Icon, { IconName } from 'src/components/Icon';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
|
||||
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
|
||||
|
@ -43,6 +42,7 @@ import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
|||
import { DATETIME_WITH_TIME_ZONE, TIME_WITH_MS } from 'src/constants';
|
||||
import { QueryObject, QueryObjectColumns } from 'src/views/CRUD/types';
|
||||
|
||||
import Icons from 'src/components/Icons';
|
||||
import QueryPreviewModal from './QueryPreviewModal';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
|
@ -80,19 +80,6 @@ const StyledPopoverItem = styled.div`
|
|||
color: ${({ theme }) => theme.colors.grayscale.dark2};
|
||||
`;
|
||||
|
||||
const StatusIcon = styled(Icon, {
|
||||
shouldForwardProp: prop => prop !== 'status',
|
||||
})<{ status: string }>`
|
||||
color: ${({ status, theme }) => {
|
||||
if (status === 'success') return theme.colors.success.base;
|
||||
if (status === 'failed') return theme.colors.error.base;
|
||||
if (status === 'running') return theme.colors.primary.base;
|
||||
if (status === 'offline') return theme.colors.grayscale.light1;
|
||||
|
||||
return theme.colors.grayscale.base;
|
||||
}};
|
||||
`;
|
||||
|
||||
function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
|
||||
const {
|
||||
state: { loading, resourceCount: queryCount, resourceCollection: queries },
|
||||
|
@ -109,6 +96,8 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
|
|||
setQueryCurrentlyPreviewing,
|
||||
] = useState<QueryObject>();
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const handleQueryPreview = useCallback(
|
||||
(id: number) => {
|
||||
SupersetClient.get({
|
||||
|
@ -141,44 +130,48 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
|
|||
original: { status },
|
||||
},
|
||||
}: any) => {
|
||||
const statusConfig = {
|
||||
name: '',
|
||||
const statusConfig: {
|
||||
name: ReactElement | null;
|
||||
label: string;
|
||||
} = {
|
||||
name: null,
|
||||
label: '',
|
||||
status: '',
|
||||
};
|
||||
if (status === 'success') {
|
||||
statusConfig.name = 'check';
|
||||
statusConfig.name = (
|
||||
<Icons.Check iconColor={theme.colors.success.base} />
|
||||
);
|
||||
statusConfig.label = t('Success');
|
||||
statusConfig.status = 'success';
|
||||
} else if (status === 'failed' || status === 'stopped') {
|
||||
statusConfig.name = (
|
||||
<Icons.XSmall
|
||||
iconColor={
|
||||
status === 'failed'
|
||||
? theme.colors.error.base
|
||||
: theme.colors.grayscale.base
|
||||
}
|
||||
if (status === 'failed' || status === 'stopped') {
|
||||
statusConfig.name = 'x-small';
|
||||
/>
|
||||
);
|
||||
statusConfig.label = t('Failed');
|
||||
statusConfig.status = 'failed';
|
||||
}
|
||||
if (status === 'running') {
|
||||
statusConfig.name = 'running';
|
||||
} else if (status === 'running') {
|
||||
statusConfig.name = (
|
||||
<Icons.Running iconColor={theme.colors.primary.base} />
|
||||
);
|
||||
statusConfig.label = t('Running');
|
||||
statusConfig.status = 'running';
|
||||
}
|
||||
if (status === 'timed_out') {
|
||||
statusConfig.name = 'offline';
|
||||
} else if (status === 'timed_out') {
|
||||
statusConfig.name = (
|
||||
<Icons.Offline iconColor={theme.colors.grayscale.light1} />
|
||||
);
|
||||
statusConfig.label = t('Offline');
|
||||
statusConfig.status = 'offline';
|
||||
}
|
||||
if (status === 'scheduled' || status === 'pending') {
|
||||
statusConfig.name = 'queued';
|
||||
} else if (status === 'scheduled' || status === 'pending') {
|
||||
statusConfig.name = (
|
||||
<Icons.Queued iconColor={theme.colors.grayscale.base} />
|
||||
);
|
||||
statusConfig.label = t('Scheduled');
|
||||
statusConfig.status = 'queued';
|
||||
}
|
||||
return (
|
||||
<Tooltip title={statusConfig.label} placement="bottom">
|
||||
<span>
|
||||
<StatusIcon
|
||||
name={statusConfig.name as IconName}
|
||||
status={statusConfig.status}
|
||||
/>
|
||||
</span>
|
||||
<span>{statusConfig.name}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
|
@ -325,7 +318,7 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
|
|||
}: any) => (
|
||||
<Tooltip title={t('Open query in SQL Lab')} placement="bottom">
|
||||
<a href={`/superset/sqllab?queryId=${id}`}>
|
||||
<Icon name="full" />
|
||||
<Icons.Full iconColor={theme.colors.grayscale.base} />
|
||||
</a>
|
||||
</Tooltip>
|
||||
),
|
||||
|
|
Loading…
Reference in New Issue