refactor: icon to icons for homepage and card compompents (#15624)

* initial commit

* add listviewcard

* remove plural

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 = () => (
             </Menu>
           }
         >
-          <Icon name="more-horiz" />
+          <Icons.MoreHoriz />
         </Dropdown>
       </ListViewCard.Actions>
     }

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<LinkProps> = ({ to, children }) => (
-  <a {...(to ? { href: to } : {})}>{children}</a>
+  <a href={to}>{children}</a>
 );
 
 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({
             </TitleContainer>
           }
           description={description}
-          avatar={avatar ? <Icon name={avatar as IconName} /> : null}
+          avatar={avatar || null}
         />
       )}
     </StyledCard>

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 = (
     <Menu>
@@ -168,7 +168,7 @@ export default function ChartCard({
               isStarred={favoriteStatus}
             />
             <Dropdown overlay={menu}>
-              <Icon name="more-horiz" />
+              <Icons.MoreHoriz iconColor={theme.colors.grayscale.base} />
             </Dropdown>
           </ListViewCard.Actions>
         }

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 <Icons.Sql />;
   const url = 'item_url' in entity ? entity.item_url : entity.url;
   if (url?.includes('dashboard')) {
-    return 'nav-dashboard';
+    return <Icons.NavDashboard />;
   }
   if (url?.includes('explore')) {
-    return 'nav-charts';
+    return <Icons.NavCharts />;
   }
-  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}
             />
           </CardStyles>

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 = ({
                       }}
                     >
                       <Dropdown overlay={renderMenu(q)}>
-                        <Icon name="more-horiz" />
+                        <Icons.MoreHoriz
+                          iconColor={theme.colors.grayscale.base}
+                        />
                       </Dropdown>
                     </ListViewCard.Actions>
                   </QueryData>