From 79d3d06c8aeec09f0793f7854c552bc6a0a86ac3 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Mon, 12 Jul 2021 10:23:45 -0700 Subject: [PATCH] refactor: icon to icons for homepage and card compompents (#15624) * initial commit * add listviewcard * remove plural --- .../ListViewCard/ListViewCard.stories.tsx | 3 +-- .../src/components/ListViewCard/index.tsx | 7 +++---- .../src/views/CRUD/chart/ChartCard.tsx | 6 +++--- .../src/views/CRUD/welcome/ActivityTable.tsx | 14 ++++++++------ .../src/views/CRUD/welcome/SavedQueries.tsx | 10 +++++++--- 5 files changed, 22 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx index fdd3778d5..27857ce1f 100644 --- a/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx +++ b/superset-frontend/src/components/ListViewCard/ListViewCard.stories.tsx @@ -22,7 +22,6 @@ import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import DashboardImg from 'images/dashboard-card-fallback.svg'; import ChartImg from 'images/chart-card-fallback.svg'; import { Dropdown, Menu } from 'src/common/components'; -import Icon from 'src/components/Icon'; import Icons from 'src/components/Icons'; import FaveStar from 'src/components/FaveStar'; import ListViewCard from '.'; @@ -76,7 +75,7 @@ export const SupersetListViewCard = () => ( } > - + } diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx index a68974597..d7ebecfdd 100644 --- a/superset-frontend/src/components/ListViewCard/index.tsx +++ b/superset-frontend/src/components/ListViewCard/index.tsx @@ -18,7 +18,6 @@ */ import React from 'react'; import { styled, useTheme } from '@superset-ui/core'; -import Icon, { IconName } from 'src/components/Icon'; import { AntdCard, Skeleton, ThinSkeleton } from 'src/common/components'; import { Tooltip } from 'src/components/Tooltip'; import ImageLoader, { BackgroundPosition } from './ImageLoader'; @@ -137,7 +136,7 @@ interface LinkProps { } const AnchorLink: React.FC = ({ to, children }) => ( - {children} + {children} ); interface CardProps { @@ -154,7 +153,7 @@ interface CardProps { coverRight?: React.ReactNode; actions?: React.ReactNode | null; rows?: number | string; - avatar?: string; + avatar?: React.ReactElement | null; cover?: React.ReactNode | null; } @@ -254,7 +253,7 @@ function ListViewCard({ } description={description} - avatar={avatar ? : null} + avatar={avatar || null} /> )} diff --git a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx index 139b922a3..c9b2d20b6 100644 --- a/superset-frontend/src/views/CRUD/chart/ChartCard.tsx +++ b/superset-frontend/src/views/CRUD/chart/ChartCard.tsx @@ -17,10 +17,9 @@ * under the License. */ import React from 'react'; -import { t } from '@superset-ui/core'; +import { t, useTheme } from '@superset-ui/core'; import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags'; import ConfirmStatusChange from 'src/components/ConfirmStatusChange'; -import Icon from 'src/components/Icon'; import Icons from 'src/components/Icons'; import Chart from 'src/types/Chart'; @@ -68,6 +67,7 @@ export default function ChartCard({ const canDelete = hasPerm('can_write'); const canExport = hasPerm('can_read') && isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT); + const theme = useTheme(); const menu = ( @@ -168,7 +168,7 @@ export default function ChartCard({ isStarred={favoriteStatus} /> - + } diff --git a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx index 288488d2d..82d97aa95 100644 --- a/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx +++ b/superset-frontend/src/views/CRUD/welcome/ActivityTable.tsx @@ -29,6 +29,7 @@ import { HOMEPAGE_ACTIVITY_FILTER } from 'src/views/CRUD/storageKeys'; import { Chart } from 'src/types/Chart'; import { Dashboard, SavedQueryObject } from 'src/views/CRUD/types'; +import Icons from 'src/components/Icons'; import { ActivityData } from './Welcome'; import EmptyState from './EmptyState'; @@ -91,6 +92,7 @@ const ActivityContainer = styled.div` .ant-card-meta-avatar { margin-top: ${({ theme }) => theme.gridUnit * 3}px; margin-left: ${({ theme }) => theme.gridUnit * 2}px; + color: ${({ theme }) => theme.colors.grayscale.base}; } .ant-card-meta-title { font-weight: ${({ theme }) => theme.typography.weights.bold}; @@ -116,16 +118,16 @@ const getEntityTitle = (entity: ActivityObject) => { return entity.item_title || UNTITLED; }; -const getEntityIconName = (entity: ActivityObject) => { - if ('sql' in entity) return 'sql'; +const getEntityIcon = (entity: ActivityObject) => { + if ('sql' in entity) return ; const url = 'item_url' in entity ? entity.item_url : entity.url; if (url?.includes('dashboard')) { - return 'nav-dashboard'; + return ; } if (url?.includes('explore')) { - return 'nav-charts'; + return ; } - return ''; + return null; }; const getEntityUrl = (entity: ActivityObject) => { @@ -245,7 +247,7 @@ export default function ActivityTable({ url={url} title={getEntityTitle(entity)} description={lastActionOn} - avatar={getEntityIconName(entity)} + avatar={getEntityIcon(entity)} actions={null} /> diff --git a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx index 325bd1a1e..d1a2f58bf 100644 --- a/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx +++ b/superset-frontend/src/views/CRUD/welcome/SavedQueries.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState } from 'react'; -import { t, SupersetClient, styled } from '@superset-ui/core'; +import { t, SupersetClient, styled, useTheme } from '@superset-ui/core'; 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'; @@ -27,7 +27,7 @@ import { Dropdown, Menu } from 'src/common/components'; import { useListViewResource, copyQueryLink } from 'src/views/CRUD/hooks'; import ListViewCard from 'src/components/ListViewCard'; import DeleteModal from 'src/components/DeleteModal'; -import Icon from 'src/components/Icon'; +import Icons from 'src/components/Icons'; import SubMenu from 'src/components/Menu/SubMenu'; import EmptyState from './EmptyState'; import { CardContainer, createErrorHandler, shortenSQL } from '../utils'; @@ -136,6 +136,8 @@ const SavedQueries = ({ const canEdit = hasPerm('can_edit'); const canDelete = hasPerm('can_delete'); + const theme = useTheme(); + const handleQueryDelete = ({ id, label }: Query) => { SupersetClient.delete({ endpoint: `/api/v1/saved_query/${id}`, @@ -347,7 +349,9 @@ const SavedQueries = ({ }} > - +