From 1483e0438194e03bded526972aa9e9423c2a6370 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Tue, 13 Jul 2021 14:24:59 -0700 Subject: [PATCH] refactor: icon to icons for Querytable, datasource test, and copyclipboard story (#15665) * initial commit * fix theme * Update superset-frontend/src/SqlLab/components/QueryTable/index.jsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> --- .../datasource/DatasourceEditor_spec.jsx | 3 +- .../SqlLab/components/QueryTable/index.jsx | 150 +++++++----------- .../CopyToClipboard.stories.tsx | 6 +- 3 files changed, 65 insertions(+), 94 deletions(-) diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx index e430b9223..f0e89220b 100644 --- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx +++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx @@ -26,7 +26,6 @@ import { render, screen } from 'spec/helpers/testing-library'; import { Radio } from 'src/components/Radio'; -import Icon from 'src/components/Icon'; import Icons from 'src/components/Icons'; import Tabs from 'src/components/Tabs'; import DatasourceEditor from 'src/datasource/DatasourceEditor'; @@ -211,7 +210,7 @@ describe('DatasourceEditor', () => { expect(sourceTab.find(Radio).length).toBe(2); expect(sourceTab.find(Radio).first().prop('disabled')).toBe(true); - const icon = sourceTab.find(Icon); + const icon = sourceTab.find(Icons.LockLocked); expect(icon).toHaveLength(0); isFeatureEnabledMock.mockRestore(); diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.jsx b/superset-frontend/src/SqlLab/components/QueryTable/index.jsx index d53c9cff2..596cbe257 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/index.jsx +++ b/superset-frontend/src/SqlLab/components/QueryTable/index.jsx @@ -22,13 +22,12 @@ import moment from 'moment'; import Card from 'src/components/Card'; import ProgressBar from 'src/components/ProgressBar'; import Label from 'src/components/Label'; -import { t, styled } from '@superset-ui/core'; +import { t, useTheme } from '@superset-ui/core'; import { useSelector } from 'react-redux'; import TableView from 'src/components/TableView'; import Button from 'src/components/Button'; import { fDuration } from 'src/modules/dates'; import Icons from 'src/components/Icons'; -import Icon from 'src/components/Icon'; import { Tooltip } from 'src/components/Tooltip'; import ResultSet from '../ResultSet'; import ModalTrigger from '../../../components/ModalTrigger'; @@ -55,89 +54,65 @@ const openQuery = id => { window.open(url); }; -const statusAttributes = { - success: { - color: ({ theme }) => theme.colors.success.base, - config: { - name: 'check', - label: t('Success'), - status: 'success', - }, - }, - failed: { - color: ({ theme }) => theme.colors.error.base, - config: { - name: 'x-small', - label: t('Failed'), - status: 'failed', - }, - }, - stopped: { - color: ({ theme }) => theme.colors.error.base, - config: { - name: 'x-small', - label: t('Failed'), - status: 'failed', - }, - }, - running: { - color: ({ theme }) => theme.colors.primary.base, - config: { - name: 'running', - label: t('Running'), - status: 'running', - }, - }, - fetching: { - color: ({ theme }) => theme.colors.primary.base, - config: { - name: 'queued', - label: t('fetching'), - status: 'fetching', - }, - }, - timed_out: { - color: ({ theme }) => theme.colors.grayscale.light1, - config: { - name: 'offline', - label: t('Offline'), - status: 'offline', - }, - }, - scheduled: { - color: ({ theme }) => theme.colors.greyscale.base, - config: { - name: 'queued', - label: t('Scheduled'), - status: 'queued', - }, - }, - pending: { - color: ({ theme }) => theme.colors.greyscale.base, - config: { - name: 'queued', - label: t('Scheduled'), - status: 'queued', - }, - }, - error: { - color: ({ theme }) => theme.colors.error.base, - config: { - name: 'error', - label: t('Unknown Status'), - status: 'unknown status!', - }, - }, -}; - -const StatusIcon = styled(Icon, { - shouldForwardProp: prop => prop !== 'status', -})` - color: ${({ status, theme }) => - statusAttributes[status]?.color || theme.colors.grayscale.base}; -`; - const QueryTable = props => { + const theme = useTheme(); + const statusAttributes = { + success: { + config: { + icon: , + label: t('Success'), + }, + }, + failed: { + config: { + icon: , + label: t('Failed'), + }, + }, + stopped: { + config: { + icon: , + label: t('Failed'), + }, + }, + running: { + config: { + icon: , + label: t('Running'), + }, + }, + fetching: { + config: { + icon: , + label: t('fetching'), + }, + }, + timed_out: { + config: { + icon: , + label: t('Offline'), + }, + }, + scheduled: { + config: { + icon: , + label: t('Scheduled'), + }, + }, + pending: { + config: { + icon: , + label: t('Scheduled'), + }, + }, + error: { + config: { + icon: , + label: t('Unknown Status'), + }, + }, + }; + const setHeaders = column => { if (column === 'sql') { return column.toUpperCase(); @@ -279,12 +254,7 @@ const QueryTable = props => { ); q.state = ( - - - + {status.config.icon} ); q.actions = ( diff --git a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx index e932b4593..875d5f734 100644 --- a/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx +++ b/superset-frontend/src/components/CopyToClipboard/CopyToClipboard.stories.tsx @@ -17,8 +17,9 @@ * under the License. */ import React from 'react'; +import { useTheme } from '@superset-ui/core'; import Button from 'src/components/Button'; -import Icon from 'src/components/Icon'; +import Icons from 'src/components/Icons'; import ToastPresenter from 'src/messageToasts/containers/ToastPresenter'; import CopyToClipboard from '.'; @@ -28,9 +29,10 @@ export default { }; export const InteractiveCopyToClipboard = ({ copyNode, ...rest }: any) => { + const theme = useTheme(); let node = ; if (copyNode === 'Icon') { - node = ; + node = ; } else if (copyNode === 'Text') { node = Copy; }