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

* initial commit

* make changes

* more simplify

* remove code

* add prop

* remove unsued code

superset-frontend/src/views/CRUD/data/components/SyntaxHighlighterCopy/index.tsx

@@ -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);
@@ -49,6 +49,7 @@ const SyntaxHighlighterWrapper = styled.div`
     left: 512px;
     visibility: hidden;
     margin: -4px;
+    color: ${({ theme }) => theme.colors.grayscale.base};
   }
 `;
 
@@ -78,9 +79,8 @@ export default function SyntaxHighlighterCopy({
   }
   return (
     <SyntaxHighlighterWrapper>
-      <Icon
+      <Icons.Copy
         tabIndex={0}
-        name="copy"
         role="button"
         onClick={e => {
           e.preventDefault();

superset-frontend/src/views/CRUD/data/query/QueryList.tsx

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, ReactElement } from 'react';
-import { SupersetClient, t, styled } from '@superset-ui/core';
+import { SupersetClient, t, styled, useTheme } from '@superset-ui/core';
 import moment from 'moment';
 import {
   createFetchRelated,
@@ -35,7 +35,6 @@ 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';
@@ -43,6 +42,7 @@ 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;
@@ -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 },
@@ -109,6 +96,8 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
     setQueryCurrentlyPreviewing,
   ] = useState<QueryObject>();
 
+  const theme = useTheme();
+
   const handleQueryPreview = useCallback(
     (id: number) => {
       SupersetClient.get({
@@ -141,44 +130,48 @@ function QueryList({ addDangerToast, addSuccessToast }: QueryListProps) {
             original: { status },
           },
         }: any) => {
-          const statusConfig = {
+          const statusConfig: {
-            name: '',
+            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';
+          } else if (status === 'failed' || status === 'stopped') {
-          }
+            statusConfig.name = (
-          if (status === 'failed' || status === 'stopped') {
+              <Icons.XSmall
-            statusConfig.name = 'x-small';
+                iconColor={
+                  status === 'failed'
+                    ? theme.colors.error.base
+                    : theme.colors.grayscale.base
+                }
+              />
+            );
             statusConfig.label = t('Failed');
-            statusConfig.status = 'failed';
+          } else if (status === 'running') {
-          }
+            statusConfig.name = (
-          if (status === 'running') {
+              <Icons.Running iconColor={theme.colors.primary.base} />
-            statusConfig.name = 'running';
+            );
             statusConfig.label = t('Running');
-            statusConfig.status = 'running';
+          } else if (status === 'timed_out') {
-          }
+            statusConfig.name = (
-          if (status === 'timed_out') {
+              <Icons.Offline iconColor={theme.colors.grayscale.light1} />
-            statusConfig.name = 'offline';
+            );
             statusConfig.label = t('Offline');
-            statusConfig.status = 'offline';
+          } else if (status === 'scheduled' || status === 'pending') {
-          }
+            statusConfig.name = (
-          if (status === 'scheduled' || status === 'pending') {
+              <Icons.Queued iconColor={theme.colors.grayscale.base} />
-            statusConfig.name = 'queued';
+            );
             statusConfig.label = t('Scheduled');
-            statusConfig.status = 'queued';
           }
           return (
             <Tooltip title={statusConfig.label} placement="bottom">
-              <span>
+              <span>{statusConfig.name}</span>
-                <StatusIcon
-                  name={statusConfig.name as IconName}
-                  status={statusConfig.status}
-                />
-              </span>
             </Tooltip>
           );
         },
@@ -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>
         ),