Skip to content

Commit

Permalink
refactor: icon to icons for syntaxhighlighter and querylist components (
Browse files Browse the repository at this point in the history 
apache#15618)

* initial commit

* make changes

* more simplify

* remove code

* add prop

* remove unsued code
  • Loading branch information
@pkdotson
pkdotson committed Jul 12, 2021
1 parent b2a92b9 commit 8425d9c
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 47 deletions.
6 changes: 3 additions & 3 deletions superset-frontend/src/views/CRUD/data/components/SyntaxHighlighterCopy/index.tsx
View file
Expand Up @@ -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);
Expand All @@ -49,6 +49,7 @@ const SyntaxHighlighterWrapper = styled.div`
left: 512px;
visibility: hidden;
margin: -4px;
color: ${({ theme }) => theme.colors.grayscale.base};
}
`;

Expand Down Expand Up @@ -78,9 +79,8 @@ export default function SyntaxHighlighterCopy({
}
return (
<SyntaxHighlighterWrapper>
<Icon
<Icons.Copy
tabIndex={0}
name="copy"
role="button"
onClick={e => {
e.preventDefault();
Expand Down
81 changes: 37 additions & 44 deletions superset-frontend/src/views/CRUD/data/query/QueryList.tsx
View file
Expand Up @@ -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,
Expand All @@ -35,14 +35,14 @@ 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';
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;
Expand Down Expand Up @@ -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 },
Expand All @@ -109,6 +96,8 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
setQueryCurrentlyPreviewing,
] = useState<QueryObject>();

const theme = useTheme();

const handleQueryPreview = useCallback(
(id: number) => {
SupersetClient.get({
Expand Down Expand Up @@ -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';
}
if (status === 'failed' || status === 'stopped') {
statusConfig.name = 'x-small';
} else if (status === 'failed' || status === 'stopped') {
statusConfig.name = (
<Icons.XSmall
iconColor={
status === 'failed'
? theme.colors.error.base
: theme.colors.grayscale.base
}
/>
);
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>
);
},
Expand Down Expand Up @@ -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>
),
Expand Down

0 comments on commit 8425d9c

Please sign in to comment.