+
-
+
);
diff --git a/superset-frontend/src/components/Icons/AntdEnhanced.tsx b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
index 90d7da612b8..42c9ad74639 100644
--- a/superset-frontend/src/components/Icons/AntdEnhanced.tsx
+++ b/superset-frontend/src/components/Icons/AntdEnhanced.tsx
@@ -24,16 +24,24 @@ import {
AlignLeftOutlined,
AlignRightOutlined,
ApartmentOutlined,
+ AppstoreOutlined,
+ AreaChartOutlined,
ArrowRightOutlined,
BarChartOutlined,
BellOutlined,
BookOutlined,
- CaretDownOutlined,
- CalendarOutlined,
CaretUpOutlined,
+ CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
+ CalendarOutlined,
CheckOutlined,
+ CheckCircleOutlined,
+ CheckCircleFilled,
CheckSquareOutlined,
CloseOutlined,
+ CloseCircleOutlined,
+ ClockCircleOutlined,
ColumnWidthOutlined,
CommentOutlined,
ConsoleSqlOutlined,
@@ -42,24 +50,37 @@ import {
DatabaseOutlined,
DeleteFilled,
DownSquareOutlined,
+ DeleteOutlined,
DownOutlined,
DownloadOutlined,
EditOutlined,
+ EllipsisOutlined,
ExclamationCircleOutlined,
+ ExclamationCircleFilled,
EyeOutlined,
EyeInvisibleOutlined,
FallOutlined,
+ FieldTimeOutlined,
FileImageOutlined,
FileOutlined,
+ FileTextOutlined,
FireOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
FundProjectionScreenOutlined,
+ FunctionOutlined,
InfoCircleOutlined,
+ InfoCircleFilled,
+ InsertRowAboveOutlined,
InsertRowBelowOutlined,
LineChartOutlined,
+ LinkOutlined,
+ MailOutlined,
+ MinusCircleOutlined,
LoadingOutlined,
MonitorOutlined,
+ MoreOutlined,
+ PieChartOutlined,
PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
@@ -68,33 +89,54 @@ import {
SaveOutlined,
SearchOutlined,
SettingOutlined,
+ StarOutlined,
+ StarFilled,
StopOutlined,
SyncOutlined,
+ TagOutlined,
TagsOutlined,
+ TableOutlined,
+ LockOutlined,
UnlockOutlined,
+ UploadOutlined,
UpOutlined,
UserOutlined,
+ VerticalAlignBottomOutlined,
+ VerticalAlignTopOutlined,
VerticalLeftOutlined,
VerticalRightOutlined,
+ NumberOutlined,
+ ThunderboltOutlined,
+ FilterOutlined,
+ UnorderedListOutlined,
+ WarningOutlined,
} from '@ant-design/icons';
-import { StyledIcon } from './Icon';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
const AntdIcons = {
AlignCenterOutlined,
AlignLeftOutlined,
AlignRightOutlined,
ApartmentOutlined,
+ AppstoreOutlined,
+ AreaChartOutlined,
ArrowRightOutlined,
BarChartOutlined,
BellOutlined,
BookOutlined,
- CaretDownOutlined,
- CalendarOutlined,
CaretUpOutlined,
+ CaretDownOutlined,
+ CaretLeftOutlined,
+ CaretRightOutlined,
+ CalendarOutlined,
CheckOutlined,
+ CheckCircleOutlined,
+ CheckCircleFilled,
CheckSquareOutlined,
CloseOutlined,
+ CloseCircleOutlined,
+ ClockCircleOutlined,
ColumnWidthOutlined,
CommentOutlined,
ConsoleSqlOutlined,
@@ -103,24 +145,37 @@ const AntdIcons = {
DatabaseOutlined,
DeleteFilled,
DownSquareOutlined,
+ DeleteOutlined,
DownOutlined,
DownloadOutlined,
EditOutlined,
+ EllipsisOutlined,
ExclamationCircleOutlined,
+ ExclamationCircleFilled,
EyeOutlined,
EyeInvisibleOutlined,
FallOutlined,
+ FieldTimeOutlined,
FileImageOutlined,
FileOutlined,
+ FileTextOutlined,
FireOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
FundProjectionScreenOutlined,
+ FunctionOutlined,
InfoCircleOutlined,
+ InfoCircleFilled,
+ InsertRowAboveOutlined,
InsertRowBelowOutlined,
LineChartOutlined,
+ LinkOutlined,
LoadingOutlined,
+ MailOutlined,
+ MinusCircleOutlined,
MonitorOutlined,
+ MoreOutlined,
+ PieChartOutlined,
PicCenterOutlined,
PlusCircleOutlined,
PlusOutlined,
@@ -129,25 +184,39 @@ const AntdIcons = {
SaveOutlined,
SearchOutlined,
SettingOutlined,
+ StarOutlined,
+ StarFilled,
StopOutlined,
SyncOutlined,
+ TagOutlined,
TagsOutlined,
+ TableOutlined,
+ LockOutlined,
+ UploadOutlined,
UnlockOutlined,
UpOutlined,
UserOutlined,
+ VerticalAlignBottomOutlined,
+ VerticalAlignTopOutlined,
VerticalLeftOutlined,
VerticalRightOutlined,
+ NumberOutlined,
+ ThunderboltOutlined,
+ FilterOutlined,
+ UnorderedListOutlined,
+ WarningOutlined,
};
const AntdEnhancedIcons = Object.keys(AntdIcons)
.filter(k => !k.includes('TwoTone'))
.map(k => ({
- [k]: (props: IconType) => {
- const whatRole = props?.onClick ? 'button' : 'img';
- // @ts-ignore TODO(hainenber): fix the type compatiblity between
- // StyledIcon component prop and AntdIcon values
- return
;
- },
+ [k]: (props: IconType) => (
+
+ ),
}))
.reduce((l, r) => ({ ...l, ...r }));
diff --git a/superset-frontend/src/components/Icons/BaseIcon.tsx b/superset-frontend/src/components/Icons/BaseIcon.tsx
new file mode 100644
index 00000000000..68167d3cd00
--- /dev/null
+++ b/superset-frontend/src/components/Icons/BaseIcon.tsx
@@ -0,0 +1,97 @@
+/**
+ * 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 { css, useTheme } from '@superset-ui/core';
+import { AntdIconType, BaseIconProps, CustomIconType, IconType } from './types';
+
+const genAriaLabel = (fileName: string) => {
+ const name = fileName.replace(/_/g, '-'); // Replace underscores with dashes
+ const words = name.split(/(?=[A-Z])/); // Split at uppercase letters
+
+ if (words.length === 2) {
+ return words[0].toLowerCase();
+ }
+
+ if (words.length >= 3) {
+ return `${words[0].toLowerCase()}-${words[1].toLowerCase()}`;
+ }
+
+ return name.toLowerCase();
+};
+
+export const BaseIconComponent: React.FC<
+ BaseIconProps & Omit
+> = ({
+ component: Component,
+ iconColor,
+ iconSize,
+ viewBox,
+ customIcons,
+ ...rest
+}) => {
+ const theme = useTheme();
+ const iconCss = css`
+ color: ${iconColor || theme.colors.grayscale.base};
+ font-size: ${iconSize
+ ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
+ : '24px'};
+ `;
+ const whatRole = rest?.onClick ? 'button' : 'img';
+ const ariaLabel = genAriaLabel(rest.fileName || '');
+
+ return customIcons ? (
+
+
+
+ ) : (
+
+ );
+};
diff --git a/superset-frontend/src/components/Icons/Icon.tsx b/superset-frontend/src/components/Icons/Icon.tsx
index 7e299cc5206..3c27ca64707 100644
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/superset-frontend/src/components/Icons/Icon.tsx
@@ -18,44 +18,14 @@
*/
import { FC, SVGProps, useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import AntdIcon from '@ant-design/icons';
-import { styled } from '@superset-ui/core';
import TransparentIcon from 'src/assets/images/icons/transparent.svg';
-import IconType from './IconType';
+import { IconType } from './types';
+import { BaseIconComponent } from './BaseIcon';
-const AntdIconComponent = ({
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- iconColor,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- iconSize,
- viewBox,
- ...rest
-}: Omit) => (
-
-);
-
-export const StyledIcon = styled(AntdIconComponent)`
- ${({ iconColor }) => iconColor && `color: ${iconColor};`};
- span {
- // Fixing alignement on some of the icons
- line-height: 0px;
- }
- font-size: ${({ iconSize, theme }) =>
- iconSize
- ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
- : '24px'};
-`;
-
-export interface IconProps extends IconType {
- fileName: string;
-}
-
-export const Icon = (props: IconProps) => {
- const { fileName, ...iconProps } = props;
+export const Icon = (props: IconType) => {
const [, setLoaded] = useState(false);
const ImportedSVG = useRef>>();
- const name = fileName.replace('_', '-');
+ const { fileName } = props;
useEffect(() => {
let cancelled = false;
@@ -73,14 +43,10 @@ export const Icon = (props: IconProps) => {
};
}, [fileName, ImportedSVG]);
- const whatRole = props?.onClick ? 'button' : 'img';
-
return (
-
);
};
diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx
index 280b2e768ad..017be295213 100644
--- a/superset-frontend/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/src/components/Icons/Icons.stories.tsx
@@ -20,7 +20,7 @@ import { useState } from 'react';
import { styled, supersetTheme } from '@superset-ui/core';
import { Input } from 'antd-v5';
import Icons from '.';
-import IconType from './IconType';
+import IconType from './types';
import Icon from './Icon';
export default {
@@ -106,7 +106,7 @@ InteractiveIcons.argTypes = {
iconSize: {
defaultValue: 'xl',
control: { type: 'inline-radio' },
- options: ['s', 'l', 'm', 'xl', 'xxl'],
+ options: ['s', 'm', 'l', 'xl', 'xxl'],
},
iconColor: {
defaultValue: null,
diff --git a/superset-frontend/src/components/Icons/index.tsx b/superset-frontend/src/components/Icons/index.tsx
index ee09aceb10c..eb3fa51605b 100644
--- a/superset-frontend/src/components/Icons/index.tsx
+++ b/superset-frontend/src/components/Icons/index.tsx
@@ -21,156 +21,42 @@ import { FC } from 'react';
import { startCase } from 'lodash';
import AntdEnhancedIcons from './AntdEnhanced';
import Icon from './Icon';
-import IconType from './IconType';
+import IconType from './types';
const IconFileNames = [
- 'alert',
- 'alert_solid',
- 'alert_solid_small',
- 'area-chart-tile',
- 'bar-chart-tile',
+ // to keep custom
+ 'ballot',
'big-number-chart-tile',
'binoculars',
- 'bolt',
- 'bolt_small',
- 'bolt_small_run',
- 'calendar',
- 'cancel',
- 'cancel_solid',
- 'cancel-x',
- 'card_view',
- 'cards',
- 'cards_locked',
- 'caret_down',
- 'caret_left',
- 'caret_right',
- 'caret_up',
+ 'category',
'certified',
- 'check',
'checkbox-half',
'checkbox-off',
'checkbox-on',
- 'circle_check',
- 'circle_check_solid',
- 'circle',
- 'clock',
- 'close',
- 'code',
- 'cog',
- 'collapse',
- 'color_palette',
- 'current-rendered-tile',
- 'components',
- 'copy',
- 'cursor_target',
- 'database',
- 'dataset_physical',
- 'dataset_virtual_greyscale',
- 'dataset_virtual',
- 'download',
+ 'circle_solid',
'drag',
- 'edit_alt',
- 'edit',
- 'email',
+ 'error_solid_small_red',
'error',
- 'error_solid',
- 'error_solid_small',
- 'exclamation',
- 'expand',
- 'eye',
- 'eye_slash',
- 'favorite-selected',
- 'favorite_small_selected',
- 'favorite-unselected',
- 'field_abc',
- 'field_boolean',
- 'field_date',
- 'field_derived',
- 'field_num',
- 'field_struct',
- 'file',
- 'filter',
- 'filter_small',
- 'folder',
'full',
- 'function_x',
- 'gear',
- 'grid',
- 'image',
- 'import',
- 'info',
- 'info-solid',
- 'info_solid_small',
- 'join',
- 'keyboard',
'layers',
- 'lightbulb',
- 'line-chart-tile',
- 'link',
- 'list',
- 'list_view',
- 'location',
- 'lock_locked',
- 'lock_unlocked',
- 'map',
- 'message',
- 'minus',
- 'minus_solid',
- 'more_horiz',
- 'more_vert',
- 'move',
- 'nav_charts',
- 'nav_dashboard',
- 'nav_data',
- 'nav_explore',
- 'nav_home',
- 'nav_lab',
- 'note',
- 'offline',
- 'paperclip',
- 'pie-chart-tile',
- 'placeholder',
- 'plus',
- 'plus_large',
- 'plus_small',
- 'plus_solid',
'queued',
- 'refresh',
+ 'redo',
'running',
- 'save',
- 'sql',
- 'search',
- 'server',
- 'share',
'slack',
+ 'square',
'sort_asc',
'sort_desc',
'sort',
- 'table',
- 'table-chart-tile',
- 'tag',
- 'trash',
- 'triangle_change',
+ 'transparent',
'triangle_down',
- 'triangle_up',
- 'up-level',
- 'user',
- 'warning',
- 'warning_solid',
- 'x-large',
- 'x-small',
- 'tags',
- 'ballot',
- 'category',
'undo',
- 'redo',
];
const iconOverrides: Record> = {};
IconFileNames.forEach(fileName => {
const keyName = startCase(fileName).replace(/ /g, '');
iconOverrides[keyName] = (props: IconType) => (
-
+
);
});
diff --git a/superset-frontend/src/components/Icons/IconType.ts b/superset-frontend/src/components/Icons/types.ts
similarity index 66%
rename from superset-frontend/src/components/Icons/IconType.ts
rename to superset-frontend/src/components/Icons/types.ts
index b055cb06bc1..4d6a4255720 100644
--- a/superset-frontend/src/components/Icons/IconType.ts
+++ b/superset-frontend/src/components/Icons/types.ts
@@ -16,13 +16,24 @@
* specific language governing permissions and limitations
* under the License.
*/
-// eslint-disable-next-line no-restricted-imports
-import { IconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import Icon, {
+ IconComponentProps,
+} from '@ant-design/icons/lib/components/Icon';
+import { ComponentType, SVGProps } from 'react';
-type AntdIconType = IconComponentProps;
-type IconType = AntdIconType & {
+export type AntdIconProps = IconComponentProps;
+export type IconType = AntdIconProps & {
iconColor?: string;
iconSize?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+ fileName?: string;
+ customIcons?: boolean;
};
+export type CustomIconType = ComponentType>;
+export type AntdIconType = typeof Icon;
+
+export interface BaseIconProps {
+ component: CustomIconType | AntdIconType;
+}
+
export default IconType;
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index 8437251de37..3ade7f0efa0 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { styled, useTheme } from '@superset-ui/core';
+import { styled, useTheme, css } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import { ActionType } from 'src/types/Action';
@@ -61,7 +61,15 @@ const defaultOverlayStyle = {
fontSize: '12px',
lineHeight: '16px',
};
-
+const InfoIconContainer = styled.div`
+ ${({ theme }) => css`
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin-left: ${theme.gridUnit}px;
+ `}
+`;
const defaultColor = 'rgba(0,0,0,0.9)';
export default function InfoTooltip({
@@ -86,7 +94,15 @@ export default function InfoTooltip({
overlayStyle={overlayStyle}
color={bgColor}
>
-
+
+
+
);
}
diff --git a/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx b/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
index 7379665583c..e1f7fe75c7c 100644
--- a/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
+++ b/superset-frontend/src/components/Label/reusable/DatasetTypeLabel.tsx
@@ -18,7 +18,7 @@
*/
import Icons from 'src/components/Icons';
import Label from 'src/components/Label';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
// Define the prop types for DatasetTypeLabel
interface DatasetTypeLabelProps {
@@ -28,11 +28,15 @@ interface DatasetTypeLabelProps {
const SIZE = 's'; // Define the size as a constant
const DatasetTypeLabel: React.FC = ({ datasetType }) => {
+ const theme = useTheme();
const label: string =
datasetType === 'physical' ? t('Physical') : t('Virtual');
const icon =
datasetType === 'physical' ? (
-
+
) : (
);
diff --git a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
index a73be8609e6..ddff92e0107 100644
--- a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
+++ b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
@@ -18,7 +18,7 @@
*/
import Icons from 'src/components/Icons';
import Label from 'src/components/Label';
-import { t } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
// Define props for the PublishedLabel component
interface PublishedLabelProps {
@@ -30,11 +30,15 @@ const PublishedLabel: React.FC = ({
isPublished,
onClick,
}) => {
+ const theme = useTheme();
const label = isPublished ? t('Published') : t('Draft');
const icon = isPublished ? (
-
+
) : (
-
+
);
const labelType = isPublished ? 'primary' : 'secondary';
diff --git a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
index f020a47448c..3e54656f123 100644
--- a/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
+++ b/superset-frontend/src/components/LastUpdated/LastUpdated.test.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { fireEvent, render } from 'spec/helpers/testing-library';
+import { fireEvent, render, screen } from 'spec/helpers/testing-library';
import LastUpdated from '.';
@@ -27,11 +27,13 @@ test('renders the base component (no refresh)', () => {
expect(getByText(/^Last Updated .+$/)).toBeInTheDocument();
});
-test('renders a refresh action', async () => {
+test('renders a refresh action', () => {
const mockAction = jest.fn();
- const { getByLabelText } = render(
- ,
- );
- fireEvent.click(getByLabelText('refresh'));
+ render();
+
+ const button = screen.getByRole('button');
+ expect(button).toBeInTheDocument();
+
+ fireEvent.click(button);
expect(mockAction).toHaveBeenCalled();
});
diff --git a/superset-frontend/src/components/LastUpdated/index.tsx b/superset-frontend/src/components/LastUpdated/index.tsx
index db7618dcf8e..f108d336805 100644
--- a/superset-frontend/src/components/LastUpdated/index.tsx
+++ b/superset-frontend/src/components/LastUpdated/index.tsx
@@ -24,7 +24,7 @@ import {
} from 'react';
import { extendedDayjs } from 'src/utils/dates';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, css } from '@superset-ui/core';
import Icons from 'src/components/Icons';
import dayjs from 'dayjs';
@@ -49,14 +49,15 @@ const TextStyles = styled.span`
color: ${({ theme }) => theme.colors.grayscale.base};
`;
-const Refresh = styled(Icons.Refresh)`
- color: ${({ theme }) => theme.colors.primary.base};
+const RefreshIcon = styled(Icons.SyncOutlined)`
+ ${({ theme }) => `
width: auto;
- height: ${({ theme }) => theme.gridUnit * 5}px;
+ height: ${theme.gridUnit * 5}px;
position: relative;
- top: ${({ theme }) => theme.gridUnit}px;
- left: ${({ theme }) => theme.gridUnit}px;
+ top: ${theme.gridUnit}px;
+ left: ${theme.gridUnit}px;
cursor: pointer;
+`};
`;
export const LastUpdated: FunctionComponent = ({
@@ -81,7 +82,15 @@ export const LastUpdated: FunctionComponent = ({
return (
{t('Last Updated %s', timeSince.isValid() ? timeSince.calendar() : '--')}
- {update && }
+ {update && (
+
+ )}
);
};
diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx b/superset-frontend/src/components/ListView/ActionsBar.tsx
index 2fd04d5cb55..d9d61701335 100644
--- a/superset-frontend/src/components/ListView/ActionsBar.tsx
+++ b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -72,7 +72,7 @@ export default function ActionsBar({ actions }: ActionsBarProps) {
data-test={action.label}
onClick={action.onClick}
>
-
+
);
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
index 85f099f16d6..da0243310af 100644
--- a/superset-frontend/src/components/ListView/Filters/Search.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -24,9 +24,9 @@ import {
ChangeEvent,
} from 'react';
-import { t, styled } from '@superset-ui/core';
+import { t, styled, useTheme, css } from '@superset-ui/core';
import Icons from 'src/components/Icons';
-import { Input } from 'src/components/Input';
+import { Input as AntdInput } from 'src/components/Input';
import { SELECT_WIDTH } from 'src/components/ListView/utils';
import { FormLabel } from 'src/components/Form';
import InfoTooltip from 'src/components/InfoTooltip';
@@ -43,8 +43,8 @@ const Container = styled.div`
width: ${SELECT_WIDTH}px;
`;
-const SearchIcon = styled(Icons.Search)`
- color: ${({ theme }) => theme.colors.grayscale.light1};
+const StyledInput = styled(AntdInput)`
+ border-radius: ${({ theme }) => theme.gridUnit}px;
`;
function SearchFilter(
@@ -57,6 +57,7 @@ function SearchFilter(
}: SearchHeaderProps,
ref: RefObject,
) {
+ const theme = useTheme();
const [value, setValue] = useState(initialValue || '');
const handleSubmit = () => {
if (value) {
@@ -79,11 +80,18 @@ function SearchFilter(
return (
- {Header}
- {toolTipDescription && (
-
- )}
-
+ {Header}
+ {toolTipDescription && (
+
+ )}
+