Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: icon to icons for syntaxhighlighter and querylist components #15618

Merged
merged 6 commits into from Jul 12, 2021
Merged

refactor: icon to icons for syntaxhighlighter and querylist components #15618

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
17c327c
initial commit
pkdotson Jul 9, 2021
8aa731a
make changes
pkdotson Jul 12, 2021
b4a54a0
more simplify
pkdotson Jul 12, 2021
5cb717c
remove code
pkdotson Jul 12, 2021
fc85bb4
add prop
pkdotson Jul 12, 2021
8a0bc6b
remove unsued code
pkdotson Jul 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions superset-frontend/src/views/CRUD/data/components/SyntaxHighlighterCopy/index.tsx
View file
Open in desktop
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
94 changes: 50 additions & 44 deletions superset-frontend/src/views/CRUD/data/query/QueryList.tsx
View file
Open in desktop
Expand Up @@ -16,8 +16,15 @@
* 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,
css,
SupersetTheme,
useTheme,
} from '@superset-ui/core';
import moment from 'moment';
import {
createFetchRelated,
Expand All @@ -35,14 +42,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 +87,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 +103,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 +137,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 +325,13 @@ 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
pkdotson marked this conversation as resolved.
Show resolved Hide resolved
css={theme =>
css`
color: ${theme.colors.grayscale.base};
`
}
/>
</a>
</Tooltip>
),
Expand Down