chore: Removes the ChartIcon component (#17216)

superset-frontend/src/components/ChartIcon/index.tsx

@@ -1,44 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-
-const ChartIcon = () => (
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      x="0.5"
-      y="0.5"
-      width="17"
-      height="17"
-      rx="2.5"
-      fill="#EFF9F9"
-      stroke="#B3DADC"
-    />
-    <rect x="8" y="4" width="2" height="10" rx="1" fill="#B3DADC" />
-    <rect x="12" y="10" width="2" height="4" rx="1" fill="#B3DADC" />
-    <rect x="4" y="6" width="2" height="8" rx="1" fill="#B3DADC" />
-  </svg>
-);
-
-export default ChartIcon;

superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx

@@ -18,10 +18,19 @@
  */
 import React from 'react';
 import cx from 'classnames';
-
-import ChartIcon from 'src/components/ChartIcon';
+import { styled } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
 import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
 
+const ChartIcon = styled(Icons.BarChartOutlined)`
+  ${({ theme }) => `
+    position: relative;
+    top: ${theme.gridUnit - 1}px;
+    color: ${theme.colors.primary.base};
+    margin-right: ${theme.gridUnit * 2}px;
+  `}
+`;
+
 function traverse({ currentNode = {}, selectedChartId }) {
   if (!currentNode) {
     return null;
@@ -40,11 +49,7 @@ function traverse({ currentNode = {}, selectedChartId }) {
             'selected-filter': selectedChartId === value,
           })}
         >
-          {type === CHART_TYPE && (
-            <span className="type-indicator">
-              <ChartIcon />
-            </span>
-          )}
+          {type === CHART_TYPE && <ChartIcon />}
           {label}
         </span>
       ),

superset-frontend/src/dashboard/stylesheets/filter-scope-selector.less

@@ -154,13 +154,8 @@
 
     .filter-scope-type {
       padding: 8px 0;
-      display: block;
-
-      .type-indicator {
-        position: relative;
-        top: 3px;
-        margin-right: 8px;
-      }
+      display: flex;
+      align-items: center;
 
       &.chart {
         font-weight: @font-weight-normal;