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