From 18747be34f13f98a7787accbe2500f21c4ad35e2 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 10 Jun 2025 11:30:42 +0300 Subject: [PATCH 01/24] replace EuiIcon in ExternalLink.tsx --- .../components/base/external-link/ExternalLink.tsx | 11 ++++------- redisinsight/ui/src/components/base/icons/Icon.tsx | 5 ++++- .../database-not-opened/DatabaseNotOpened.tsx | 4 ++-- .../ModuleNotLoadedMinimalized.tsx | 2 +- .../CreateTutorialLink/CreateTutorialLink.tsx | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx b/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx index 68328284da..eb12965114 100644 --- a/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx +++ b/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx @@ -1,22 +1,19 @@ import React from 'react' -import { EuiIcon } from '@elastic/eui' import { EuiLinkProps } from '@elastic/eui/src/components/link/link' - -import { IconSize } from '@elastic/eui/src/components/icon/icon' +import { Icon, ArrowDiagonalIcon, IconProps } from 'uiSrc/components/base/icons' import { Link } from 'uiSrc/components/base/link/Link' -import styles from './styles.module.scss' export type Props = EuiLinkProps & { href: string iconPosition?: 'left' | 'right' - iconSize?: IconSize + iconSize?: IconProps['size'] } const ExternalLink = (props: Props) => { - const { iconPosition = 'right', iconSize = 'm', children, ...rest } = props + const { iconPosition = 'right', iconSize = 'M', children, ...rest } = props const ArrowIcon = () => ( - + ) return ( diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index 574d4df4e1..f29e7237a0 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -4,6 +4,7 @@ import { MonochromeIconProps } from 'uiSrc/components/base/icons' type BaseIconProps = MonochromeIconProps & { icon: React.ComponentType + color?: keyof ReturnType['semantic']['color']['icon'] } const sizesMap = { XS: 8, @@ -41,8 +42,10 @@ export const Icon = ({ if (!colorValue && isValidIconColor(theme, color)) { colorValue = theme.semantic.color.icon[color] } + console.log({ theme, colorValue }) + const props = { - color: colorValue, + customColor: colorValue, width: sizeValue, height: sizeValue, ...rest, diff --git a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx index 3ea7ff9ca2..0297b7dfa6 100644 --- a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx +++ b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx @@ -34,7 +34,7 @@ const DatabaseNotOpened = (props: Props) => { {(ssoCloudHandlerClick) => ( { { {(ssoCloudHandlerClick) => ( { return ( Date: Tue, 10 Jun 2025 11:31:35 +0300 Subject: [PATCH 02/24] remove console.log --- redisinsight/ui/src/components/base/icons/Icon.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index f29e7237a0..b4767d2162 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -42,7 +42,6 @@ export const Icon = ({ if (!colorValue && isValidIconColor(theme, color)) { colorValue = theme.semantic.color.icon[color] } - console.log({ theme, colorValue }) const props = { customColor: colorValue, From 15fc6e8a162c40e03ae902bbf4c3ba55f00e0acd Mon Sep 17 00:00:00 2001 From: pd-redis Date: Tue, 10 Jun 2025 15:05:23 +0300 Subject: [PATCH 03/24] temp --- package.json | 4 ++-- .../components/auto-refresh/AutoRefresh.tsx | 4 ++-- .../ui/src/components/base/icons/Icon.tsx | 6 +++++- .../ui/src/components/base/icons/RiIcon.tsx | 18 ++++++++++++++++++ .../src/components/base/layout/list/Item.tsx | 5 +++-- yarn.lock | 10 +++++----- 6 files changed, 35 insertions(+), 12 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/RiIcon.tsx diff --git a/package.json b/package.json index 340811cc57..9c2c68d43c 100644 --- a/package.json +++ b/package.json @@ -234,9 +234,9 @@ "dependencies": { "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", - "@redis-ui/components": "^38.1.3", + "@redis-ui/components": "^38.1.4", "@redis-ui/icons": "^4.16.1", - "@redis-ui/styles": "^11.0.2", + "@redis-ui/styles": "^11.4.0", "@redis-ui/table": "^2.4.0", "@reduxjs/toolkit": "^1.6.2", "@stablelib/snappy": "^1.0.2", diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx index 47131b2418..831c79545b 100644 --- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx +++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react' -import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons' import { @@ -13,6 +12,7 @@ import { localStorageService } from 'uiSrc/services' import { BrowserStorageItem } from 'uiSrc/constants' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { ColorText } from 'uiSrc/components/base/text' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { SwitchInput } from 'uiSrc/components/base/inputs' import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { @@ -284,7 +284,7 @@ const AutoRefresh = ({ > {`${refreshRate} s`}
- +
)} diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index b4767d2162..37b19ade0f 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -4,7 +4,9 @@ import { MonochromeIconProps } from 'uiSrc/components/base/icons' type BaseIconProps = MonochromeIconProps & { icon: React.ComponentType - color?: keyof ReturnType['semantic']['color']['icon'] + color?: + | keyof ReturnType['semantic']['color']['icon'] + | 'currentColor' } const sizesMap = { XS: 8, @@ -41,6 +43,8 @@ export const Icon = ({ let colorValue = customColor if (!colorValue && isValidIconColor(theme, color)) { colorValue = theme.semantic.color.icon[color] + } else if (color === 'currentColor') { + colorValue = 'currentColor' } const props = { diff --git a/redisinsight/ui/src/components/base/icons/RiIcon.tsx b/redisinsight/ui/src/components/base/icons/RiIcon.tsx new file mode 100644 index 0000000000..33fcd7b7f4 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/RiIcon.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Icon, IconProps } from './Icon' +import * as Icons from './index' + +export type IconComponentProps = Omit & { + type: keyof typeof Icons +} + +export const RiIcon = ({ type, ...props }: IconComponentProps) => { + const IconType = Icons[type] + + if (!IconType) { + console.warn(`Icon type "${type}" not found`) + return null + } + + return +} diff --git a/redisinsight/ui/src/components/base/layout/list/Item.tsx b/redisinsight/ui/src/components/base/layout/list/Item.tsx index dff5a9d921..ebd00103e6 100644 --- a/redisinsight/ui/src/components/base/layout/list/Item.tsx +++ b/redisinsight/ui/src/components/base/layout/list/Item.tsx @@ -2,6 +2,7 @@ import React, { ButtonHTMLAttributes, ReactElement } from 'react' // todo replace with redis-ui icon import { EuiIcon } from '@elastic/eui' import cx from 'classnames' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { ListClassNames, ListGroupItemProps, @@ -34,8 +35,8 @@ const Item = ({ if (iconType) { // todo replace with redis-ui icon iconNode = ( - Date: Wed, 11 Jun 2025 10:45:36 +0300 Subject: [PATCH 04/24] update Icon.tsx, RiIcon.tsx --- .../ui/src/components/base/icons/Icon.tsx | 30 ++++++------------- .../ui/src/components/base/icons/RiIcon.tsx | 14 ++++++++- .../src/components/base/icons/SurveyIcon.tsx | 7 +++++ .../ui/src/components/base/icons/index.ts | 1 + 4 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/SurveyIcon.tsx diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index 37b19ade0f..e66fc9e4c4 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -2,18 +2,12 @@ import React from 'react' import { useTheme } from '@redis-ui/styles' import { MonochromeIconProps } from 'uiSrc/components/base/icons' -type BaseIconProps = MonochromeIconProps & { +type BaseIconProps = Omit & { icon: React.ComponentType color?: | keyof ReturnType['semantic']['color']['icon'] | 'currentColor' -} -const sizesMap = { - XS: 8, - S: 12, - M: 16, - L: 20, - XL: 24, + | (string & {}) } /** @@ -31,28 +25,22 @@ function isValidIconColor( export const Icon = ({ icon: IconComponent, - customSize, customColor, - title: titleProp, color = 'primary600', - size = 'L', ...rest }: BaseIconProps) => { - const sizeValue = customSize || sizesMap[size] const theme = useTheme() - let colorValue = customColor - if (!colorValue && isValidIconColor(theme, color)) { - colorValue = theme.semantic.color.icon[color] - } else if (color === 'currentColor') { - colorValue = 'currentColor' - } + const colorValue = customColor - const props = { + const props: IconProps = { customColor: colorValue, - width: sizeValue, - height: sizeValue, ...rest, } + if (!colorValue && isValidIconColor(theme, color)) { + props.color = theme.semantic.color.icon[color] + } else if (color === 'currentColor' && !customColor) { + props.customColor = 'currentColor' + } return } diff --git a/redisinsight/ui/src/components/base/icons/RiIcon.tsx b/redisinsight/ui/src/components/base/icons/RiIcon.tsx index 33fcd7b7f4..3cb4aadb0b 100644 --- a/redisinsight/ui/src/components/base/icons/RiIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RiIcon.tsx @@ -2,8 +2,20 @@ import React from 'react' import { Icon, IconProps } from './Icon' import * as Icons from './index' +// Create a type that excludes the IconProps type +export type AllIconsType = Exclude< + keyof typeof Icons, + | 'IconProps' + | 'Icon' + | 'IconSizeType' + | 'IconColorType' + | 'ColorIconProps' + | 'MonochromeIconProps' + | 'IconType' +> + export type IconComponentProps = Omit & { - type: keyof typeof Icons + type: AllIconsType } export const RiIcon = ({ type, ...props }: IconComponentProps) => { diff --git a/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx b/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx new file mode 100644 index 0000000000..5ecfddb1e1 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import SurveySvg from 'uiSrc/assets/img/survey_icon.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SurveyIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index c079bf109c..c5f69dbb4c 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -22,6 +22,7 @@ export { RiStopIcon } from './RIStopIcon' export { ShrinkIcon } from './ShrinkIcon' export { SnoozeIcon } from './SnoozeIcon' export { StarsIcon } from './StarsIcon' +export { SurveyIcon } from './SurveyIcon' export { ThreeDotsIcon } from './ThreeDotsIcon' export { Trigger } from './Trigger' export { UserInCircle } from './UserInCircle' From 1c5254bb6efc0cf95a87e12ffb042a3defd8248e Mon Sep 17 00:00:00 2001 From: pd-redis Date: Wed, 11 Jun 2025 11:30:02 +0300 Subject: [PATCH 05/24] add isSvg prop --- .../src/components/base/icons/BannedIcon.tsx | 2 +- .../src/components/base/icons/BulkActions.tsx | 2 +- .../ui/src/components/base/icons/Cloud.tsx | 2 +- .../ui/src/components/base/icons/Copilot.tsx | 2 +- .../src/components/base/icons/DislikeIcon.tsx | 2 +- .../src/components/base/icons/ExtendIcon.tsx | 2 +- .../ui/src/components/base/icons/Group.tsx | 2 +- .../ui/src/components/base/icons/Icon.tsx | 35 ++++++++++++++----- .../ui/src/components/base/icons/LikeIcon.tsx | 2 +- .../components/base/icons/MinusInCircle.tsx | 2 +- .../ui/src/components/base/icons/Play.tsx | 2 +- .../src/components/base/icons/PlayFilled.tsx | 2 +- .../components/base/icons/PlusInCircle.tsx | 2 +- .../components/base/icons/ProfilerIcon.tsx | 2 +- .../src/components/base/icons/RIResetIcon.tsx | 2 +- .../components/base/icons/RIRocketIcon.tsx | 2 +- .../src/components/base/icons/RIStopIcon.tsx | 2 +- .../ui/src/components/base/icons/RawMode.tsx | 2 +- .../src/components/base/icons/RedisLogo.tsx | 2 +- .../base/icons/RedisLogoFullIcon.tsx | 2 +- .../ui/src/components/base/icons/RiIcon.tsx | 15 ++++++-- .../src/components/base/icons/ShrinkIcon.tsx | 2 +- .../src/components/base/icons/SnoozeIcon.tsx | 2 +- .../src/components/base/icons/StarsIcon.tsx | 2 +- .../src/components/base/icons/SurveyIcon.tsx | 2 +- .../components/base/icons/ThreeDotsIcon.tsx | 2 +- .../ui/src/components/base/icons/Trigger.tsx | 2 +- .../components/base/icons/UserInCircle.tsx | 2 +- .../base/icons/modules/RedisAIDarkIcon.tsx | 2 +- .../base/icons/modules/RedisAILightIcon.tsx | 2 +- .../base/icons/modules/RedisBloomDarkIcon.tsx | 2 +- .../icons/modules/RedisBloomLightIcon.tsx | 2 +- .../icons/modules/RedisGears2DarkIcon.tsx | 2 +- .../icons/modules/RedisGears2LightIcon.tsx | 2 +- .../base/icons/modules/RedisGearsDarkIcon.tsx | 2 +- .../icons/modules/RedisGearsLightIcon.tsx | 2 +- .../base/icons/modules/RedisGraphDarkIcon.tsx | 2 +- .../icons/modules/RedisGraphLightIcon.tsx | 2 +- .../base/icons/modules/RedisJSONDarkIcon.tsx | 2 +- .../base/icons/modules/RedisJSONLightIcon.tsx | 2 +- .../icons/modules/RedisSearchDarkIcon.tsx | 2 +- .../icons/modules/RedisSearchLightIcon.tsx | 2 +- .../icons/modules/RedisTimeSeriesDarkIcon.tsx | 2 +- .../modules/RedisTimeSeriesLightIcon.tsx | 2 +- .../base/icons/modules/UnknownDarkIcon.tsx | 2 +- .../base/icons/modules/UnknownLightIcon.tsx | 2 +- .../icons/options/ActiveActiveDarkIcon.tsx | 2 +- .../icons/options/ActiveActiveLightIcon.tsx | 2 +- .../icons/options/RedisOnFlashDarkIcon.tsx | 2 +- .../icons/options/RedisOnFlashLightIcon.tsx | 2 +- .../base/icons/sidebar/BrowserActiveIcon.tsx | 0 .../base/icons/sidebar/BrowserIcon.tsx | 2 +- .../base/icons/sidebar/GithubIcon.tsx | 2 +- .../sidebar/PipelineManagementActiveIcon.tsx | 0 .../icons/sidebar/PipelineManagementIcon.tsx | 2 +- .../sidebar/PipelineStatisticsActiveIcon.tsx | 0 .../icons/sidebar/PipelineStatisticsIcon.tsx | 2 +- .../base/icons/sidebar/PubSubActiveIcon.tsx | 0 .../base/icons/sidebar/PubSubIcon.tsx | 2 +- .../base/icons/sidebar/SettingsActiveIcon.tsx | 0 .../base/icons/sidebar/SettingsIcon.tsx | 2 +- .../base/icons/sidebar/SlowLogActiveIcon.tsx | 0 .../base/icons/sidebar/SlowLogIcon.tsx | 2 +- .../icons/sidebar/WorkbenchActiveIcon.tsx | 0 .../base/icons/sidebar/WorkbenchIcon.tsx | 2 +- .../CommandHelperHeader.tsx | 4 +-- .../navigation-menu/NavigationMenu.tsx | 1 + 67 files changed, 98 insertions(+), 69 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx diff --git a/redisinsight/ui/src/components/base/icons/BannedIcon.tsx b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx index 9b225ce3a7..18627979a9 100644 --- a/redisinsight/ui/src/components/base/icons/BannedIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/BannedIcon.tsx @@ -3,5 +3,5 @@ import { Icon, IconProps } from 'uiSrc/components/base/icons' import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react' export const BannedIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/BulkActions.tsx b/redisinsight/ui/src/components/base/icons/BulkActions.tsx index 4fba451f1e..1b461c2f5d 100644 --- a/redisinsight/ui/src/components/base/icons/BulkActions.tsx +++ b/redisinsight/ui/src/components/base/icons/BulkActions.tsx @@ -3,5 +3,5 @@ import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const BulkActions = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/Cloud.tsx b/redisinsight/ui/src/components/base/icons/Cloud.tsx index 57bb64c742..bd506d29ae 100644 --- a/redisinsight/ui/src/components/base/icons/Cloud.tsx +++ b/redisinsight/ui/src/components/base/icons/Cloud.tsx @@ -2,4 +2,4 @@ import React from 'react' import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' -export const Cloud = (props: IconProps) => +export const Cloud = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/Copilot.tsx b/redisinsight/ui/src/components/base/icons/Copilot.tsx index 4bacd530c6..9f41a73934 100644 --- a/redisinsight/ui/src/components/base/icons/Copilot.tsx +++ b/redisinsight/ui/src/components/base/icons/Copilot.tsx @@ -3,5 +3,5 @@ import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const CopilotIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx b/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx index 6d9593d532..e0f15cd8a1 100644 --- a/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/DislikeIcon.tsx @@ -4,5 +4,5 @@ import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const DislikeIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx index 8f744603d1..a7f6805c42 100644 --- a/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ExtendIcon.tsx @@ -3,5 +3,5 @@ import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ExtendIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/Group.tsx b/redisinsight/ui/src/components/base/icons/Group.tsx index 9543dd8c20..edef3b4cc6 100644 --- a/redisinsight/ui/src/components/base/icons/Group.tsx +++ b/redisinsight/ui/src/components/base/icons/Group.tsx @@ -3,5 +3,5 @@ import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Group = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index e66fc9e4c4..57f3bd1347 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -8,6 +8,15 @@ type BaseIconProps = Omit & { | keyof ReturnType['semantic']['color']['icon'] | 'currentColor' | (string & {}) + isSvg?: boolean +} + +const sizesMap = { + XS: 8, + S: 12, + M: 16, + L: 20, + XL: 24, } /** @@ -25,22 +34,32 @@ function isValidIconColor( export const Icon = ({ icon: IconComponent, + isSvg = false, + customSize, customColor, color = 'primary600', + size = 'L', ...rest }: BaseIconProps) => { + const sizeValue = customSize || sizesMap[size] const theme = useTheme() - const colorValue = customColor + let colorValue = customColor + if (!colorValue && isValidIconColor(theme, color)) { + colorValue = theme.semantic.color.icon[color] + } else if (color === 'currentColor') { + colorValue = 'currentColor' + } - const props: IconProps = { - customColor: colorValue, + const svgProps = { + color: colorValue, + width: sizeValue, + height: sizeValue, ...rest, } - if (!colorValue && isValidIconColor(theme, color)) { - props.color = theme.semantic.color.icon[color] - } else if (color === 'currentColor' && !customColor) { - props.customColor = 'currentColor' - } + + const props = isSvg + ? svgProps + : { color, customColor, size, customSize, ...rest } return } diff --git a/redisinsight/ui/src/components/base/icons/LikeIcon.tsx b/redisinsight/ui/src/components/base/icons/LikeIcon.tsx index e155111278..bba4511409 100644 --- a/redisinsight/ui/src/components/base/icons/LikeIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/LikeIcon.tsx @@ -3,4 +3,4 @@ import React from 'react' import LikeSvg from 'uiSrc/assets/img/icons/like.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' -export const LikeIcon = (props: IconProps) => +export const LikeIcon = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx index 1899f2b836..5fa055fdca 100644 --- a/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/MinusInCircle.tsx @@ -3,5 +3,5 @@ import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const MinusInCircleIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/Play.tsx b/redisinsight/ui/src/components/base/icons/Play.tsx index e185f19ed9..a40ba8a552 100644 --- a/redisinsight/ui/src/components/base/icons/Play.tsx +++ b/redisinsight/ui/src/components/base/icons/Play.tsx @@ -2,4 +2,4 @@ import React from 'react' import PlayIcon from 'uiSrc/assets/img/icons/play.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' -export const Play = (props: IconProps) => +export const Play = (props: IconProps) => diff --git a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx index b7ada37fe2..9261d989ba 100644 --- a/redisinsight/ui/src/components/base/icons/PlayFilled.tsx +++ b/redisinsight/ui/src/components/base/icons/PlayFilled.tsx @@ -3,5 +3,5 @@ import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PlayFilledIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx index 3e55fa4899..0dcea413be 100644 --- a/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/PlusInCircle.tsx @@ -3,5 +3,5 @@ import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PlusInCircle = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx b/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx index 209de16a4e..3bd197b9f0 100644 --- a/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ProfilerIcon.tsx @@ -3,5 +3,5 @@ import ProfilerSvg from 'uiSrc/assets/img/icons/profiler.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ProfilerIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx index fe7f8f1a46..6fecc84f1c 100644 --- a/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIResetIcon.tsx @@ -3,5 +3,5 @@ import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiResetIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx index 046c07fd0f..9d55ccba7e 100644 --- a/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx @@ -3,5 +3,5 @@ import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiRocketIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx index 65598cd0e3..5166741fea 100644 --- a/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RIStopIcon.tsx @@ -3,5 +3,5 @@ import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RiStopIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RawMode.tsx b/redisinsight/ui/src/components/base/icons/RawMode.tsx index 23333b28e4..a443f4b47f 100644 --- a/redisinsight/ui/src/components/base/icons/RawMode.tsx +++ b/redisinsight/ui/src/components/base/icons/RawMode.tsx @@ -3,5 +3,5 @@ import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RawMode = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RedisLogo.tsx b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx index 302e8b45f6..94ab50e190 100644 --- a/redisinsight/ui/src/components/base/icons/RedisLogo.tsx +++ b/redisinsight/ui/src/components/base/icons/RedisLogo.tsx @@ -3,5 +3,5 @@ import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisLogo = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx b/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx index 7bd408eee1..461c00f162 100644 --- a/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx @@ -3,5 +3,5 @@ import RedisLogoSvg from 'uiSrc/assets/img/logo.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisLogoFullIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/RiIcon.tsx b/redisinsight/ui/src/components/base/icons/RiIcon.tsx index 3cb4aadb0b..5a8a1703f9 100644 --- a/redisinsight/ui/src/components/base/icons/RiIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RiIcon.tsx @@ -14,17 +14,26 @@ export type AllIconsType = Exclude< | 'IconType' > -export type IconComponentProps = Omit & { +export type IconComponentProps = Omit & { type: AllIconsType + size?: IconProps['size'] | 'm' | 's' | 'xs' } -export const RiIcon = ({ type, ...props }: IconComponentProps) => { +export const RiIcon = ({ type, size, ...props }: IconComponentProps) => { const IconType = Icons[type] if (!IconType) { console.warn(`Icon type "${type}" not found`) return null } + let iconSize: IconProps['size'] = 'L' + if (size === 'm') { + iconSize = 'M' + } else if (size === 's') { + iconSize = 'S' + } else if (size === 'xs') { + iconSize = 'XS' + } - return + return } diff --git a/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx index f9e2c47e7e..4cd642c3cf 100644 --- a/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx @@ -3,5 +3,5 @@ import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ShrinkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx index b5a51ebe1c..f2b6ba1be3 100644 --- a/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/SnoozeIcon.tsx @@ -3,5 +3,5 @@ import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const SnoozeIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/StarsIcon.tsx b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx index 37ad20c783..6d7a1ccd2d 100644 --- a/redisinsight/ui/src/components/base/icons/StarsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/StarsIcon.tsx @@ -3,5 +3,5 @@ import StarsSvg from 'uiSrc/assets/img/icons/stars.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const StarsIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx b/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx index 5ecfddb1e1..fc466878f8 100644 --- a/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/SurveyIcon.tsx @@ -3,5 +3,5 @@ import SurveySvg from 'uiSrc/assets/img/survey_icon.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const SurveyIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx index d6054ce78c..77593c8381 100644 --- a/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/ThreeDotsIcon.tsx @@ -4,5 +4,5 @@ import ThreeDotsSvg from 'uiSrc/assets/img/icons/three_dots.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ThreeDotsIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/Trigger.tsx b/redisinsight/ui/src/components/base/icons/Trigger.tsx index 78bbb8111f..ba23963d92 100644 --- a/redisinsight/ui/src/components/base/icons/Trigger.tsx +++ b/redisinsight/ui/src/components/base/icons/Trigger.tsx @@ -3,5 +3,5 @@ import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const Trigger = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/UserInCircle.tsx b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx index 6cda700320..ab95c226e9 100644 --- a/redisinsight/ui/src/components/base/icons/UserInCircle.tsx +++ b/redisinsight/ui/src/components/base/icons/UserInCircle.tsx @@ -3,5 +3,5 @@ import UserInCircleSvg from 'uiSrc/assets/img/icons/user_in_circle.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const UserInCircle = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx index e8b2b2ec3f..d450327463 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisAIDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisAIDark from 'uiSrc/assets/img/modules/RedisAIDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisAIDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx index a0e1d2baac..b2cdaf28d2 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisAILightIcon.tsx @@ -3,5 +3,5 @@ import RedisAILight from 'uiSrc/assets/img/modules/RedisAILight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisAILightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx index 5ffb7357f5..9be62acbca 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisBloomDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisBloomDark from 'uiSrc/assets/img/modules/RedisBloomDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisBloomDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx index 33c84e78f7..bc360670eb 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisBloomLightIcon.tsx @@ -3,5 +3,5 @@ import RedisBloomLight from 'uiSrc/assets/img/modules/RedisBloomLight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisBloomLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx index 4bd6288acb..807eacc2e1 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGears2DarkIcon.tsx @@ -3,5 +3,5 @@ import RedisGears2Dark from 'uiSrc/assets/img/modules/RedisGears2Dark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGears2DarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx index 91a0145fb1..b7ab7b08b1 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGears2LightIcon.tsx @@ -3,5 +3,5 @@ import RedisGears2Light from 'uiSrc/assets/img/modules/RedisGears2Light.svg?reac import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGears2LightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx index 100cb50ebd..54099a0891 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGearsDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisGearsDark from 'uiSrc/assets/img/modules/RedisGearsDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGearsDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx index 3540eacc18..48f51116fe 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGearsLightIcon.tsx @@ -3,5 +3,5 @@ import RedisGearsLight from 'uiSrc/assets/img/modules/RedisGearsLight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGearsLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx index 8af0561709..7baf4758a1 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGraphDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisGraphDark from 'uiSrc/assets/img/modules/RedisGraphDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGraphDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx index 1f40802b16..cac7b9d285 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisGraphLightIcon.tsx @@ -3,5 +3,5 @@ import RedisGraphLight from 'uiSrc/assets/img/modules/RedisGraphLight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisGraphLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx index 1fdbbcfcb8..52ff943ad9 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisJSONDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisJSONDark from 'uiSrc/assets/img/modules/RedisJSONDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisJSONDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx index 9607e71d94..2dfe66ab22 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisJSONLightIcon.tsx @@ -3,5 +3,5 @@ import RedisJSONLight from 'uiSrc/assets/img/modules/RedisJSONLight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisJSONLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx index 5a6b89d923..63d04f54ef 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisSearchDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisSearchDark from 'uiSrc/assets/img/modules/RedisSearchDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisSearchDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx index 5a37c19f7f..bd37877e67 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisSearchLightIcon.tsx @@ -3,5 +3,5 @@ import RedisSearchLight from 'uiSrc/assets/img/modules/RedisSearchLight.svg?reac import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisSearchLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx index 6ad82f31f7..a8e25ce828 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisTimeSeriesDark from 'uiSrc/assets/img/modules/RedisTimeSeriesDark.sv import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisTimeSeriesDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx index 02bc37669f..9123196ff2 100644 --- a/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/RedisTimeSeriesLightIcon.tsx @@ -3,5 +3,5 @@ import RedisTimeSeriesLight from 'uiSrc/assets/img/modules/RedisTimeSeriesLight. import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisTimeSeriesLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx index 1f94a12641..b9cb5a81a2 100644 --- a/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/UnknownDarkIcon.tsx @@ -3,5 +3,5 @@ import UnknownDark from 'uiSrc/assets/img/modules/UnknownDark.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const UnknownDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx index 207e963547..74163d2eb0 100644 --- a/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/modules/UnknownLightIcon.tsx @@ -3,5 +3,5 @@ import UnknownLight from 'uiSrc/assets/img/modules/UnknownLight.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const UnknownLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx index ae2c04fbef..df3d982144 100644 --- a/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/options/ActiveActiveDarkIcon.tsx @@ -3,5 +3,5 @@ import ActiveActiveDark from 'uiSrc/assets/img/options/Active-ActiveDark.svg?rea import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ActiveActiveDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx b/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx index 69364b0fbf..7912ef743e 100644 --- a/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/options/ActiveActiveLightIcon.tsx @@ -3,5 +3,5 @@ import ActiveActiveLight from 'uiSrc/assets/img/options/Active-ActiveLight.svg?r import { Icon, IconProps } from 'uiSrc/components/base/icons' export const ActiveActiveLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx index 4a80756851..e496475597 100644 --- a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashDarkIcon.tsx @@ -3,5 +3,5 @@ import RedisOnFlashDark from 'uiSrc/assets/img/options/RedisOnFlashDark.svg?reac import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisOnFlashDarkIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx index 63e23fe4c9..d506ffbec2 100644 --- a/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/options/RedisOnFlashLightIcon.tsx @@ -3,5 +3,5 @@ import RedisOnFlashLight from 'uiSrc/assets/img/options/RedisOnFlashLight.svg?re import { Icon, IconProps } from 'uiSrc/components/base/icons' export const RedisOnFlashLightIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/BrowserActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx index 5101626e37..af036108bc 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/BrowserIcon.tsx @@ -3,5 +3,5 @@ import BrowserSvg from 'uiSrc/assets/img/sidebar/browser.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const BrowserIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx index 0838fcbc36..a437374f84 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/GithubIcon.tsx @@ -3,5 +3,5 @@ import GithubSvg from 'uiSrc/assets/img/sidebar/github.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const GithubIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx index 3f89138b4f..331f1b4155 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineManagementIcon.tsx @@ -3,5 +3,5 @@ import PipelineManagementSvg from 'uiSrc/assets/img/sidebar/pipeline.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PipelineManagementIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx index 2bcfc589aa..ff0ec33ff1 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/PipelineStatisticsIcon.tsx @@ -3,5 +3,5 @@ import PipelineStatisticsSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics. import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PipelineStatisticsIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PubSubActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx index 2112bb59ed..c6cf622eae 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/PubSubIcon.tsx @@ -3,5 +3,5 @@ import PubSubSvg from 'uiSrc/assets/img/sidebar/pubsub.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const PubSubIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SettingsActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx index 5a7e13960a..860b04e58b 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/SettingsIcon.tsx @@ -3,5 +3,5 @@ import SettingsSvg from 'uiSrc/assets/img/sidebar/settings.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const SettingsIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx index 01ffbeab79..16e01ce1b7 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/SlowLogIcon.tsx @@ -3,5 +3,5 @@ import SlowLogSvg from 'uiSrc/assets/img/sidebar/slowlog.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const SlowLogIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchActiveIcon.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx index c68518868f..1f170d86fe 100644 --- a/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/sidebar/WorkbenchIcon.tsx @@ -3,5 +3,5 @@ import WorkbenchSvg from 'uiSrc/assets/img/sidebar/workbench.svg?react' import { Icon, IconProps } from 'uiSrc/components/base/icons' export const WorkbenchIcon = (props: IconProps) => ( - + ) diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index 8d0fab8cbe..554e757ee7 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx @@ -2,7 +2,6 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiIcon } from '@elastic/eui' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { resetCliHelperSettings, @@ -15,6 +14,7 @@ import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Text } from 'uiSrc/components/base/text' import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const CommandHelperHeader = () => { @@ -46,7 +46,7 @@ const CommandHelperHeader = () => {
- + Date: Wed, 11 Jun 2025 13:53:12 +0300 Subject: [PATCH 06/24] replace EuiIcon --- .../components/base/icons/CloudLinkIcon.tsx | 8 ++ .../ui/src/components/base/icons/RiIcon.tsx | 5 +- .../ui/src/components/base/icons/index.ts | 1 + .../icons/modules/RediStackDarkLogoIcon.tsx | 7 ++ .../icons/modules/RediStackDarkMinIcon.tsx | 7 ++ .../icons/modules/RediStackLightLogoIcon.tsx | 7 ++ .../icons/modules/RediStackLightMinIcon.tsx | 7 ++ .../components/base/icons/modules/index.ts | 5 +- .../src/components/base/layout/list/Item.tsx | 7 -- .../base/layout/list/list.styles.ts | 10 +-- .../BottomGroupMinimized.tsx | 5 +- .../cli/components/cli-header/CliHeader.tsx | 4 +- .../CommandHelperHeader.tsx | 2 +- .../ConsentsSettingsPopup.tsx | 9 +-- .../consents-settings/styles.module.scss | 2 +- .../DatabaseListModules.tsx | 17 ++--- redisinsight/ui/src/constants/modules.ts | 74 +++++++++---------- .../DatabasesListWrapper.tsx | 26 +++---- .../ui/src/slices/interfaces/instances.ts | 13 ++-- 19 files changed, 115 insertions(+), 101 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/CloudLinkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RediStackDarkLogoIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RediStackDarkMinIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RediStackLightLogoIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/modules/RediStackLightMinIcon.tsx diff --git a/redisinsight/ui/src/components/base/icons/CloudLinkIcon.tsx b/redisinsight/ui/src/components/base/icons/CloudLinkIcon.tsx new file mode 100644 index 0000000000..967c2f7053 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/CloudLinkIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import { Icon, IconProps } from 'uiSrc/components/base/icons' +import CloudLinkSvg from 'uiSrc/assets/img/oauth/cloud_link.svg?react' + +export const CloudLinkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/RiIcon.tsx b/redisinsight/ui/src/components/base/icons/RiIcon.tsx index 5a8a1703f9..079f7dcda2 100644 --- a/redisinsight/ui/src/components/base/icons/RiIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RiIcon.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { SVGProps } from 'react' import { Icon, IconProps } from './Icon' import * as Icons from './index' @@ -14,7 +14,8 @@ export type AllIconsType = Exclude< | 'IconType' > -export type IconComponentProps = Omit & { +export type IconComponentProps = Omit & + Omit, 'color' | 'size'> & { type: AllIconsType size?: IconProps['size'] | 'm' | 's' | 'xs' } diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index c5f69dbb4c..ec68db510a 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -2,6 +2,7 @@ export type { IconProps } from './Icon' export { BannedIcon } from './BannedIcon' export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' +export { CloudLinkIcon } from './CloudLinkIcon' export { CopilotIcon } from './Copilot' export { DislikeIcon } from './DislikeIcon' export { ExtendIcon } from './ExtendIcon' diff --git a/redisinsight/ui/src/components/base/icons/modules/RediStackDarkLogoIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RediStackDarkLogoIcon.tsx new file mode 100644 index 0000000000..6104939479 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RediStackDarkLogoIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' +import RediStackDarkLogoSvg from 'uiSrc/assets/img/modules/redistack/RedisStackLogoDark.svg?react' + +export const RediStackDarkLogoIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RediStackDarkMinIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RediStackDarkMinIcon.tsx new file mode 100644 index 0000000000..720c828487 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RediStackDarkMinIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' +import RediStackDarkMinSvg from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg?react' + +export const RediStackDarkMinIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RediStackLightLogoIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RediStackLightLogoIcon.tsx new file mode 100644 index 0000000000..20b0e8b952 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RediStackLightLogoIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' +import RediStackLightLogoSvg from 'uiSrc/assets/img/modules/redistack/RedisStackLogoLight.svg?react' + +export const RediStackLightLogoIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/RediStackLightMinIcon.tsx b/redisinsight/ui/src/components/base/icons/modules/RediStackLightMinIcon.tsx new file mode 100644 index 0000000000..04d176490a --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/modules/RediStackLightMinIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import RediStackLightMinLight from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const RediStackLightMinIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/index.ts b/redisinsight/ui/src/components/base/icons/modules/index.ts index 503e944130..1ac7eaa4f1 100644 --- a/redisinsight/ui/src/components/base/icons/modules/index.ts +++ b/redisinsight/ui/src/components/base/icons/modules/index.ts @@ -13,6 +13,9 @@ export { RedisJSONLightIcon } from './RedisJSONLightIcon' export { RedisSearchDarkIcon } from './RedisSearchDarkIcon' export { RedisSearchLightIcon } from './RedisSearchLightIcon' export { RedisTimeSeriesDarkIcon } from './RedisTimeSeriesDarkIcon' -export { RedisTimeSeriesLightIcon } from './RedisTimeSeriesLightIcon' +export { RediStackDarkMinIcon } from './RediStackDarkMinIcon' +export { RediStackLightMinIcon } from './RediStackLightMinIcon' +export { RediStackDarkLogoIcon } from './RediStackDarkLogoIcon' +export { RediStackLightLogoIcon } from './RediStackLightLogoIcon' export { UnknownDarkIcon } from './UnknownDarkIcon' export { UnknownLightIcon } from './UnknownLightIcon' diff --git a/redisinsight/ui/src/components/base/layout/list/Item.tsx b/redisinsight/ui/src/components/base/layout/list/Item.tsx index ebd00103e6..7683a17da7 100644 --- a/redisinsight/ui/src/components/base/layout/list/Item.tsx +++ b/redisinsight/ui/src/components/base/layout/list/Item.tsx @@ -1,6 +1,5 @@ import React, { ButtonHTMLAttributes, ReactElement } from 'react' // todo replace with redis-ui icon -import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { @@ -40,12 +39,6 @@ const Item = ({ {...iconProps} type={iconType} className={cx('euiListGroupItem__icon', iconProps?.className)} - style={{ - ...iconProps?.style, - marginRight: 'var(--size-m)', - flexGrow: 0, - flexShrink: 0, - }} /> ) diff --git a/redisinsight/ui/src/components/base/layout/list/list.styles.ts b/redisinsight/ui/src/components/base/layout/list/list.styles.ts index 0e61a3fd5f..89c351123e 100644 --- a/redisinsight/ui/src/components/base/layout/list/list.styles.ts +++ b/redisinsight/ui/src/components/base/layout/list/list.styles.ts @@ -13,7 +13,8 @@ import { useEffect, } from 'react' // todo replace with redis-ui icon -import { EuiIconProps, IconType } from '@elastic/eui/src/components/icon/icon' +import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' +import { IconProps } from 'uiSrc/components/base/icons' export const ListClassNames = { listItem: 'RI-list-group-item', @@ -90,7 +91,6 @@ export const StyledGroup = styled.ul< ${({ $flush = false }) => $flush && listStyles.flush}; ` -type IconProps = Omit export const SIZES = ['xs', 's', 'm', 'l'] as const export type ListGroupItemSize = (typeof SIZES)[number] @@ -124,14 +124,14 @@ export type ListGroupItemProps = HTMLAttributes & { isDisabled?: boolean /** - * Adds `EuiIcon` of `EuiIcon.type` + * Adds `RiIcon` of `RiIcon.type` */ - iconType?: IconType + iconType?: AllIconsType /** * Further extend the props applied to EuiIcon */ - iconProps?: Omit + iconProps?: IconProps /** * Custom node to pass as the icon. Cannot be used in conjunction diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx index 25c58bad0e..6cd567692b 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx +++ b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx @@ -1,6 +1,5 @@ import React, { useEffect } from 'react' import cx from 'classnames' -import { EuiIcon } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' @@ -19,7 +18,6 @@ import { toggleHideMonitor, toggleMonitor, } from 'uiSrc/slices/cli/monitor' -import SurveyIcon from 'uiSrc/assets/img/survey_icon.svg' import FeatureFlagComponent from 'uiSrc/components/feature-flag-component' import { FeatureFlags } from 'uiSrc/constants' @@ -31,6 +29,7 @@ import { DocumentationIcon, ProfilerIcon, } from 'uiSrc/components/base/icons' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from '../../styles.module.scss' const BottomGroupMinimized = () => { @@ -149,7 +148,7 @@ const BottomGroupMinimized = () => { onClick={onClickSurvey} data-testid="user-survey-link" > - + Let us know what you think diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx index 6f7b91a072..1042d96cc3 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiIcon } from '@elastic/eui' import { toggleCli, @@ -18,6 +17,7 @@ import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Text } from 'uiSrc/components/base/text' import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const CliHeader = () => { @@ -65,7 +65,7 @@ const CliHeader = () => {
- + {
- + { - + diff --git a/redisinsight/ui/src/components/consents-settings/styles.module.scss b/redisinsight/ui/src/components/consents-settings/styles.module.scss index 04e88b2b37..2b5f76f262 100644 --- a/redisinsight/ui/src/components/consents-settings/styles.module.scss +++ b/redisinsight/ui/src/components/consents-settings/styles.module.scss @@ -1,6 +1,6 @@ .redisIcon { width: 128px; - height: 100%; + height: 34px; } .consentsPopup.consentsPopup { diff --git a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx index aabbdc507b..139a98cc37 100644 --- a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx +++ b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx @@ -1,6 +1,5 @@ /* eslint-disable sonarjs/no-nested-template-literals */ import React, { useContext } from 'react' -import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { Theme } from 'uiSrc/constants' @@ -8,10 +7,10 @@ import { getModule, truncateText } from 'uiSrc/utils' import { IDatabaseModule, sortModules } from 'uiSrc/utils/modules' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules' +import { DEFAULT_MODULES_INFO, ModuleInfo } from 'uiSrc/constants/modules' import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons' import { ColorText } from 'uiSrc/components/base/text' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { RiTooltip } from 'uiSrc/components' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' @@ -47,20 +46,18 @@ const DatabaseListModules = React.memo((props: Props) => { const newModules: IDatabaseModule[] = sortModules( modules?.map(({ name: propName, semanticVersion = '', version = '' }) => { - const moduleName = DEFAULT_MODULES_INFO[propName]?.text || propName + const module: ModuleInfo = DEFAULT_MODULES_INFO[propName] + const moduleName = module?.text || propName const { abbreviation = '', name = moduleName } = getModule(moduleName) const moduleAlias = truncateText(name, 50) // eslint-disable-next-line sonarjs/no-nested-template-literals - let icon = - DEFAULT_MODULES_INFO[propName]?.[ - theme === Theme.Dark ? 'iconDark' : 'iconLight' - ] + let icon = module?.[theme === Theme.Dark ? 'iconDark' : 'iconLight'] const content = `${moduleAlias}${semanticVersion || version ? ` v. ${semanticVersion || version}` : ''}` if (!icon && !abbreviation) { - icon = theme === Theme.Dark ? UnknownDarkIcon : UnknownLightIcon + icon = theme === Theme.Dark ? 'UnknownDarkIcon' : 'UnknownLightIcon' } mainContent.push({ icon, content, abbreviation, moduleName }) @@ -88,7 +85,7 @@ const DatabaseListModules = React.memo((props: Props) => { const Content = sortModules(mainContent).map( ({ icon, content, abbreviation = '' }) => (
- {!!icon && } + {!!icon && } {!icon && ( { @@ -514,11 +509,11 @@ const DatabasesListWrapper = (props: Props) => { tooltipTitle={ isRediStack ? ( <> - { onClick={handleClickGoToCloud} data-testid={`cloud-link-${instance.id}`} > - + )} diff --git a/redisinsight/ui/src/slices/interfaces/instances.ts b/redisinsight/ui/src/slices/interfaces/instances.ts index 9d90aaa0de..fab13a7bb4 100644 --- a/redisinsight/ui/src/slices/interfaces/instances.ts +++ b/redisinsight/ui/src/slices/interfaces/instances.ts @@ -1,6 +1,7 @@ import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces/app' import { Maybe, Nullable } from 'uiSrc/utils' import { OAuthSocialAction } from 'uiSrc/slices/interfaces/cloud' +import { DatabaseListColumn } from 'uiSrc/constants' import { GetHashFieldsResponse } from 'apiSrc/modules/browser/hash/dto' import { GetSetMembersResponse } from 'apiSrc/modules/browser/set/dto' import { @@ -199,11 +200,6 @@ export const COMMAND_MODULES = { [RedisDefaultModules.Bloom]: [RedisDefaultModules.Bloom], } -const RediSearchModulesText = [...REDISEARCH_MODULES].reduce( - (prev, next) => ({ ...prev, [next]: 'Redis Query Engine' }), - {}, -) - // Enums don't allow to use dynamic key export const DATABASE_LIST_MODULES_TEXT = Object.freeze({ [RedisDefaultModules.AI]: 'AI', @@ -216,7 +212,10 @@ export const DATABASE_LIST_MODULES_TEXT = Object.freeze({ [RedisDefaultModules.TimeSeries]: 'Time Series', [RedisCustomModulesName.Proto]: 'redis-protobuf', [RedisCustomModulesName.IpTables]: 'RedisPushIpTables', - ...RediSearchModulesText, + [RedisDefaultModules.Search]: 'Redis Query Engine', + [RedisDefaultModules.SearchLight]: 'Redis Query Engine', + [RedisDefaultModules.FT]: 'Redis Query Engine', + [RedisDefaultModules.FTL]: 'Redis Query Engine', }) export enum AddRedisClusterDatabaseOptions { @@ -525,4 +524,4 @@ export enum InstanceType { RedisEnterpriseCluster = 'Enterprise Software', AWSElasticache = 'AWS Elasticache', Sentinel = 'Sentinel', -} \ No newline at end of file +} From 6304a559e43aa532ed573ff271481595396c231f Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 16 Jun 2025 10:28:46 +0300 Subject: [PATCH 07/24] add some icons --- .../src/components/base/icons/DefaultPluginDarkIcon.tsx | 8 ++++++++ .../src/components/base/icons/DefaultPluginLightIcon.tsx | 8 ++++++++ .../ui/src/components/base/icons/ExecutionTimeIcon.tsx | 8 ++++++++ redisinsight/ui/src/components/base/icons/Group.tsx | 7 ------- .../ui/src/components/base/icons/GroupModeIcon.tsx | 7 +++++++ .../ui/src/components/base/icons/SilentModeIcon.tsx | 8 ++++++++ redisinsight/ui/src/components/base/icons/index.ts | 6 +++++- 7 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/DefaultPluginDarkIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/DefaultPluginLightIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/ExecutionTimeIcon.tsx delete mode 100644 redisinsight/ui/src/components/base/icons/Group.tsx create mode 100644 redisinsight/ui/src/components/base/icons/GroupModeIcon.tsx create mode 100644 redisinsight/ui/src/components/base/icons/SilentModeIcon.tsx diff --git a/redisinsight/ui/src/components/base/icons/DefaultPluginDarkIcon.tsx b/redisinsight/ui/src/components/base/icons/DefaultPluginDarkIcon.tsx new file mode 100644 index 0000000000..7345db93c0 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/DefaultPluginDarkIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import DefaultPluginDarkSvg from 'uiSrc/assets/img/workbench/default_view_dark.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const DefaultPluginDarkIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/DefaultPluginLightIcon.tsx b/redisinsight/ui/src/components/base/icons/DefaultPluginLightIcon.tsx new file mode 100644 index 0000000000..73853f2113 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/DefaultPluginLightIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import DefaultPluginLightSvg from 'uiSrc/assets/img/workbench/default_view_light.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const DefaultPluginLightIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/ExecutionTimeIcon.tsx b/redisinsight/ui/src/components/base/icons/ExecutionTimeIcon.tsx new file mode 100644 index 0000000000..77645c4f56 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/ExecutionTimeIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import ExecutionTimeSvg from 'uiSrc/assets/img/workbench/execution_time.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const ExecutionTimeIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/Group.tsx b/redisinsight/ui/src/components/base/icons/Group.tsx deleted file mode 100644 index edef3b4cc6..0000000000 --- a/redisinsight/ui/src/components/base/icons/Group.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' -import { Icon, IconProps } from 'uiSrc/components/base/icons' - -export const Group = (props: IconProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/icons/GroupModeIcon.tsx b/redisinsight/ui/src/components/base/icons/GroupModeIcon.tsx new file mode 100644 index 0000000000..bd365dd6cf --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/GroupModeIcon.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import GroupModeSvg from 'uiSrc/assets/img/icons/group_mode.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const GroupModeIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/SilentModeIcon.tsx b/redisinsight/ui/src/components/base/icons/SilentModeIcon.tsx new file mode 100644 index 0000000000..eb33826373 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/SilentModeIcon.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +import SilentModeSvg from 'uiSrc/assets/img/icons/silent_mode.svg?react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +export const SilentModeIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index ec68db510a..d54366c2a5 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -4,9 +4,12 @@ export { BulkActions } from './BulkActions' export { Cloud } from './Cloud' export { CloudLinkIcon } from './CloudLinkIcon' export { CopilotIcon } from './Copilot' +export { DefaultPluginDarkIcon } from './DefaultPluginDarkIcon' +export { DefaultPluginLightIcon } from './DefaultPluginLightIcon' export { DislikeIcon } from './DislikeIcon' +export { ExecutionTimeIcon } from './ExecutionTimeIcon' export { ExtendIcon } from './ExtendIcon' -export { Group as GroupModeIcon } from './Group' +export { GroupModeIcon } from './GroupModeIcon' export { Icon } from './Icon' export { LikeIcon } from './LikeIcon' export { MinusInCircleIcon } from './MinusInCircle' @@ -21,6 +24,7 @@ export { RiResetIcon } from './RIResetIcon' export { RiRocketIcon } from './RIRocketIcon' export { RiStopIcon } from './RIStopIcon' export { ShrinkIcon } from './ShrinkIcon' +export { SilentModeIcon } from './SilentModeIcon' export { SnoozeIcon } from './SnoozeIcon' export { StarsIcon } from './StarsIcon' export { SurveyIcon } from './SurveyIcon' From 5cc163ddcbc89052d7cac75c80416fb83d6fc4d6 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 16 Jun 2025 17:43:17 +0300 Subject: [PATCH 08/24] refactor icons --- .../ui/src/assets/img/overview/time_tip.svg | 11 +- .../assets/img/workbench/vis_tag_cloud.svg | 2 +- .../ui/src/components/base/icons/Icon.tsx | 5 +- .../ui/src/components/base/icons/RiIcon.tsx | 38 ++-- .../components/base/icons/common/index.tsx | 185 ++++++++++++++++++ .../components/base/icons/guides/index.tsx | 18 ++ .../ui/src/components/base/icons/index.ts | 33 +--- .../components/base/icons/metrics/index.tsx | 155 +++++++++++++++ .../components/base/icons/modules/index.ts | 1 + .../hooks/useDatabaseOverview.ts | 1 - .../BrowserSearchPanel.tsx | 2 +- 11 files changed, 398 insertions(+), 53 deletions(-) create mode 100644 redisinsight/ui/src/components/base/icons/common/index.tsx create mode 100644 redisinsight/ui/src/components/base/icons/guides/index.tsx create mode 100644 redisinsight/ui/src/components/base/icons/metrics/index.tsx diff --git a/redisinsight/ui/src/assets/img/overview/time_tip.svg b/redisinsight/ui/src/assets/img/overview/time_tip.svg index 6f65f3f34d..11c69c3027 100644 --- a/redisinsight/ui/src/assets/img/overview/time_tip.svg +++ b/redisinsight/ui/src/assets/img/overview/time_tip.svg @@ -1,14 +1,15 @@ - - + - - + diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index 57f3bd1347..a1769e3d7e 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -1,5 +1,6 @@ import React from 'react' import { useTheme } from '@redis-ui/styles' +import cx from 'classnames' import { MonochromeIconProps } from 'uiSrc/components/base/icons' type BaseIconProps = Omit & { @@ -39,6 +40,7 @@ export const Icon = ({ customColor, color = 'primary600', size = 'L', + className, ...rest }: BaseIconProps) => { const sizeValue = customSize || sizesMap[size] @@ -52,6 +54,7 @@ export const Icon = ({ const svgProps = { color: colorValue, + fill: colorValue, width: sizeValue, height: sizeValue, ...rest, @@ -61,7 +64,7 @@ export const Icon = ({ ? svgProps : { color, customColor, size, customSize, ...rest } - return + return } export type IconProps = Omit diff --git a/redisinsight/ui/src/components/base/icons/RiIcon.tsx b/redisinsight/ui/src/components/base/icons/RiIcon.tsx index 079f7dcda2..0e6394b470 100644 --- a/redisinsight/ui/src/components/base/icons/RiIcon.tsx +++ b/redisinsight/ui/src/components/base/icons/RiIcon.tsx @@ -1,5 +1,5 @@ import React, { SVGProps } from 'react' -import { Icon, IconProps } from './Icon' +import { IconProps } from './Icon' import * as Icons from './index' // Create a type that excludes the IconProps type @@ -14,11 +14,11 @@ export type AllIconsType = Exclude< | 'IconType' > -export type IconComponentProps = Omit & +export type IconComponentProps = Omit & Omit, 'color' | 'size'> & { - type: AllIconsType - size?: IconProps['size'] | 'm' | 's' | 'xs' -} + type: AllIconsType + size?: IconProps['size'] | 'm' | 's' | 'xs' | 'l' | 'xl' | 'xxl' + } export const RiIcon = ({ type, size, ...props }: IconComponentProps) => { const IconType = Icons[type] @@ -27,14 +27,26 @@ export const RiIcon = ({ type, size, ...props }: IconComponentProps) => { console.warn(`Icon type "${type}" not found`) return null } - let iconSize: IconProps['size'] = 'L' - if (size === 'm') { - iconSize = 'M' - } else if (size === 's') { - iconSize = 'S' - } else if (size === 'xs') { - iconSize = 'XS' + let iconSize: IconProps['size'] + + switch (size) { + case 'm': + iconSize = 'M' + break + case 's': + iconSize = 'S' + break + case 'xs': + iconSize = 'XS' + break + case 'xl': + case 'xxl': + iconSize = 'XL' + break + case 'l': + default: + iconSize = 'L' } - return + return } diff --git a/redisinsight/ui/src/components/base/icons/common/index.tsx b/redisinsight/ui/src/components/base/icons/common/index.tsx new file mode 100644 index 0000000000..e4606ab7ad --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/common/index.tsx @@ -0,0 +1,185 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +// Import all SVG components +import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react' +import BulkActionsSvg from 'uiSrc/assets/img/icons/bulk_actions.svg?react' +import CloudSvg from 'uiSrc/assets/img/oauth/cloud.svg?react' +import CloudLinkSvg from 'uiSrc/assets/img/oauth/cloud_link.svg?react' +import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react' +import ConnectionSvg from 'uiSrc/assets/img/icons/connection.svg?react' +import DefaultPluginDarkSvg from 'uiSrc/assets/img/workbench/default_view_dark.svg?react' +import DefaultPluginLightSvg from 'uiSrc/assets/img/workbench/default_view_light.svg?react' +import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react' +import ExecutionTimeSvg from 'uiSrc/assets/img/workbench/execution_time.svg?react' +import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' +import GroupModeSvg from 'uiSrc/assets/img/icons/group_mode.svg?react' +import LikeSvg from 'uiSrc/assets/img/icons/like.svg?react' +import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react' +import MessageInfoSvg from 'uiSrc/assets/img/icons/help_illus.svg?react' +import PlaySvg from 'uiSrc/assets/img/icons/play.svg?react' +import ProfilerSvg from 'uiSrc/assets/img/icons/profiler.svg?react' +import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react' +import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react' +import RawModeSvg from 'uiSrc/assets/img/icons/raw_mode.svg?react' +import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react' +import RedisLogoFullSvg from 'uiSrc/assets/img/logo.svg?react' +import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react' +import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react' +import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react' +import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react' +import SilentModeSvg from 'uiSrc/assets/img/icons/silent_mode.svg?react' +import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react' +import StarsSvg from 'uiSrc/assets/img/icons/stars.svg?react' +import SurveySvg from 'uiSrc/assets/img/survey_icon.svg?react' +import ThreeDotsSvg from 'uiSrc/assets/img/icons/three_dots.svg?react' +import TriggerIcon from 'uiSrc/assets/img/bulb.svg?react' +import UserInCircleSvg from 'uiSrc/assets/img/icons/user_in_circle.svg?react' +import UserSvg from 'uiSrc/assets/img/icons/user.svg?react' +import VisTagCloudSvg from 'uiSrc/assets/img/workbench/vis_tag_cloud.svg?react' +import VersionSvg from 'uiSrc/assets/img/icons/version.svg?react' + +// Define icon components +export const BannedIcon = (props: IconProps) => ( + +) + +export const BulkActionsIcon = (props: IconProps) => ( + +) + +export const CloudIcon = (props: IconProps) => ( + +) + +export const CloudLinkIcon = (props: IconProps) => ( + +) + +export const CopilotIcon = (props: IconProps) => ( + +) + +export const ConnectionIcon = (props: IconProps) => ( + +) + +export const DefaultPluginDarkIcon = (props: IconProps) => ( + +) + +export const DefaultPluginLightIcon = (props: IconProps) => ( + +) + +export const DislikeIcon = (props: IconProps) => ( + +) + +export const ExecutionTimeIcon = (props: IconProps) => ( + +) + +export const ExtendIcon = (props: IconProps) => ( + +) + +export const GroupModeIcon = (props: IconProps) => ( + +) + +export const LikeIcon = (props: IconProps) => ( + +) + +export const MinusInCircleIcon = (props: IconProps) => ( + +) + +export const MessageInfoIcon = (props: IconProps) => ( + +) + +export const PlayIcon = (props: IconProps) => ( + +) + +export const ProfilerIcon = (props: IconProps) => ( + +) + +export const PlayFilledIcon = (props: IconProps) => ( + +) + +export const PlusInCircleIcon = (props: IconProps) => ( + +) + +export const RawModeIcon = (props: IconProps) => ( + +) + +export const RedisLogo = (props: IconProps) => ( + +) + +export const RedisLogoFullIcon = (props: IconProps) => ( + +) + +export const RiResetIcon = (props: IconProps) => ( + +) + +export const RiRocketIcon = (props: IconProps) => ( + +) + +export const RiStopIcon = (props: IconProps) => ( + +) + +export const ShrinkIcon = (props: IconProps) => ( + +) + +export const SilentModeIcon = (props: IconProps) => ( + +) + +export const SnoozeIcon = (props: IconProps) => ( + +) + +export const RiStarsIcon = (props: IconProps) => ( + +) + +export const SurveyIcon = (props: IconProps) => ( + +) + +export const ThreeDotsIcon = (props: IconProps) => ( + +) + +export const Trigger = (props: IconProps) => ( + +) + +export const UserInCircle = (props: IconProps) => ( + +) + +export const RiUserIcon = (props: IconProps) => ( + +) + +export const VisTagCloudIcon = (props: IconProps) => ( + +) + +export const VersionIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/guides/index.tsx b/redisinsight/ui/src/components/base/icons/guides/index.tsx new file mode 100644 index 0000000000..3611dc1106 --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/guides/index.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +import ProbabilisticDataSvg from 'uiSrc/assets/img/guides/probabilistic-data.svg?react' +import JSONSvg from 'uiSrc/assets/img/guides/json.svg?react' +import VectorSimilaritySvg from 'uiSrc/assets/img/guides/vector-similarity.svg?react' + +export const ProbabilisticDataIcon = (props: IconProps) => ( + +) + +export const JSONIcon = (props: IconProps) => ( + +) + +export const VectorSimilarityIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index d54366c2a5..e40a7c0c69 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -1,37 +1,8 @@ export type { IconProps } from './Icon' -export { BannedIcon } from './BannedIcon' -export { BulkActions } from './BulkActions' -export { Cloud } from './Cloud' -export { CloudLinkIcon } from './CloudLinkIcon' -export { CopilotIcon } from './Copilot' -export { DefaultPluginDarkIcon } from './DefaultPluginDarkIcon' -export { DefaultPluginLightIcon } from './DefaultPluginLightIcon' -export { DislikeIcon } from './DislikeIcon' -export { ExecutionTimeIcon } from './ExecutionTimeIcon' -export { ExtendIcon } from './ExtendIcon' -export { GroupModeIcon } from './GroupModeIcon' export { Icon } from './Icon' -export { LikeIcon } from './LikeIcon' -export { MinusInCircleIcon } from './MinusInCircle' -export { Play as PlayIcon } from './Play' -export { ProfilerIcon } from './ProfilerIcon' -export { PlayFilledIcon } from './PlayFilled' -export { PlusInCircle as PlusInCircleIcon } from './PlusInCircle' -export { RawMode as RawModeIcon } from './RawMode' -export { RedisLogo } from './RedisLogo' -export { RedisLogoFullIcon } from './RedisLogoFullIcon' -export { RiResetIcon } from './RIResetIcon' -export { RiRocketIcon } from './RIRocketIcon' -export { RiStopIcon } from './RIStopIcon' -export { ShrinkIcon } from './ShrinkIcon' -export { SilentModeIcon } from './SilentModeIcon' -export { SnoozeIcon } from './SnoozeIcon' -export { StarsIcon } from './StarsIcon' -export { SurveyIcon } from './SurveyIcon' -export { ThreeDotsIcon } from './ThreeDotsIcon' -export { Trigger } from './Trigger' -export { UserInCircle } from './UserInCircle' +export * from './common' +export * from './guides' export * from './modules' export * from './options' export * from './sidebar' diff --git a/redisinsight/ui/src/components/base/icons/metrics/index.tsx b/redisinsight/ui/src/components/base/icons/metrics/index.tsx new file mode 100644 index 0000000000..db7629b53f --- /dev/null +++ b/redisinsight/ui/src/components/base/icons/metrics/index.tsx @@ -0,0 +1,155 @@ +import React from 'react' +import { Icon, IconProps } from 'uiSrc/components/base/icons' + +import KeyDarkSvg from 'uiSrc/assets/img/overview/key_dark.svg?react' +import KeyTipSvg from 'uiSrc/assets/img/overview/key_tip.svg?react' +import KeyLightSvg from 'uiSrc/assets/img/overview/key_light.svg?react' +import KeyIconSvg from 'uiSrc/assets/img/overview/key.svg?react' + +import MemoryDarkSvg from 'uiSrc/assets/img/overview/memory_dark.svg?react' +import MemoryLightSvg from 'uiSrc/assets/img/overview/memory_light.svg?react' +import MemoryTipSvg from 'uiSrc/assets/img/overview/memory_tip.svg?react' +import MemoryIconSvg from 'uiSrc/assets/img/overview/memory.svg?react' + +import MeasureLightSvg from 'uiSrc/assets/img/overview/measure_light.svg?react' +import MeasureDarkSvg from 'uiSrc/assets/img/overview/measure_dark.svg?react' +import MeasureTipSvg from 'uiSrc/assets/img/overview/measure_tip.svg?react' +import MeasureIconSvg from 'uiSrc/assets/img/overview/measure.svg?react' + +import TimeLightSvg from 'uiSrc/assets/img/overview/time_light.svg?react' +import TimeDarkSvg from 'uiSrc/assets/img/overview/time_dark.svg?react' +import TimeTipSvg from 'uiSrc/assets/img/overview/time_tip.svg?react' +import TimeIconSvg from 'uiSrc/assets/img/overview/time.svg?react' + +import UserDarkSvg from 'uiSrc/assets/img/overview/user_dark.svg?react' +import UserLightSvg from 'uiSrc/assets/img/overview/user_light.svg?react' +import UserTipSvg from 'uiSrc/assets/img/overview/user_tip.svg?react' +import UserIconSvg from 'uiSrc/assets/img/overview/user.svg?react' + +import InputTipSvg from 'uiSrc/assets/img/overview/input_tip.svg?react' +import InputLightSvg from 'uiSrc/assets/img/overview/input_light.svg?react' +import InputDarkSvg from 'uiSrc/assets/img/overview/input_dark.svg?react' +import InputIconSvg from 'uiSrc/assets/img/overview/input.svg?react' + +import OutputTipSvg from 'uiSrc/assets/img/overview/output_tip.svg?react' +import OutputLightSvg from 'uiSrc/assets/img/overview/output_light.svg?react' +import OutputDarkSvg from 'uiSrc/assets/img/overview/output_dark.svg?react' +import OutputIconSvg from 'uiSrc/assets/img/overview/output.svg?react' + +export const KeyDarkIcon = (props: IconProps) => ( + +) + +export const KeyTipIcon = (props: IconProps) => ( + +) + +export const KeyLightIcon = (props: IconProps) => ( + +) + +export const KeyIconIcon = (props: IconProps) => ( + +) + +// Memory Icons +export const MemoryDarkIcon = (props: IconProps) => ( + +) + +export const MemoryLightIcon = (props: IconProps) => ( + +) + +export const MemoryTipIcon = (props: IconProps) => ( + +) + +export const MemoryIconIcon = (props: IconProps) => ( + +) + +// Measure Icons +export const MeasureLightIcon = (props: IconProps) => ( + +) + +export const MeasureDarkIcon = (props: IconProps) => ( + +) + +export const MeasureTipIcon = (props: IconProps) => ( + +) + +export const MeasureIconIcon = (props: IconProps) => ( + +) + +// Time Icons +export const TimeLightIcon = (props: IconProps) => ( + +) + +export const TimeDarkIcon = (props: IconProps) => ( + +) + +export const TimeTipIcon = (props: IconProps) => ( + +) + +export const TimeIconIcon = (props: IconProps) => ( + +) + +// User Icons +export const UserDarkIcon = (props: IconProps) => ( + +) + +export const UserLightIcon = (props: IconProps) => ( + +) + +export const UserTipIcon = (props: IconProps) => ( + +) + +export const UserIconIcon = (props: IconProps) => ( + +) + +// Input Icons +export const InputTipIcon = (props: IconProps) => ( + +) + +export const InputLightIcon = (props: IconProps) => ( + +) + +export const InputDarkIcon = (props: IconProps) => ( + +) + +export const InputIconIcon = (props: IconProps) => ( + +) + +// Output Icons +export const OutputTipIcon = (props: IconProps) => ( + +) + +export const OutputLightIcon = (props: IconProps) => ( + +) + +export const OutputDarkIcon = (props: IconProps) => ( + +) + +export const OutputIconIcon = (props: IconProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/icons/modules/index.ts b/redisinsight/ui/src/components/base/icons/modules/index.ts index 1ac7eaa4f1..67a0334a95 100644 --- a/redisinsight/ui/src/components/base/icons/modules/index.ts +++ b/redisinsight/ui/src/components/base/icons/modules/index.ts @@ -13,6 +13,7 @@ export { RedisJSONLightIcon } from './RedisJSONLightIcon' export { RedisSearchDarkIcon } from './RedisSearchDarkIcon' export { RedisSearchLightIcon } from './RedisSearchLightIcon' export { RedisTimeSeriesDarkIcon } from './RedisTimeSeriesDarkIcon' +export { RedisTimeSeriesLightIcon } from './RedisTimeSeriesLightIcon' export { RediStackDarkMinIcon } from './RediStackDarkMinIcon' export { RediStackLightMinIcon } from './RediStackLightMinIcon' export { RediStackDarkLogoIcon } from './RediStackDarkLogoIcon' diff --git a/redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.ts b/redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.ts index 8c190f1188..5462b70601 100644 --- a/redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.ts +++ b/redisinsight/ui/src/components/database-overview/hooks/useDatabaseOverview.ts @@ -99,7 +99,6 @@ export const useDatabaseOverview = () => { db, }) }, [theme, overview, db, usedMemoryPercent]) - return { metrics, connectivityError, diff --git a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx index c368045fc4..c5f978bdf5 100644 --- a/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx +++ b/redisinsight/ui/src/pages/browser/components/browser-search-panel/BrowserSearchPanel.tsx @@ -6,7 +6,7 @@ import cx from 'classnames' import { EuiModal, EuiModalBody } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { - BulkActions as BulkActionsIcon, + BulkActionsIcon, FilterTableIcon, QuerySearchIcon, IconType, From 2a1984dc359b6dcaa2910556736b7388eb2b2fc3 Mon Sep 17 00:00:00 2001 From: pd-redis Date: Mon, 16 Jun 2025 17:45:54 +0300 Subject: [PATCH 09/24] replace icons --- .../ui/src/components/base/icons/index.ts | 1 + .../CHSearchFilter/CHSearchFilter.tsx | 6 +- .../database-overview/DatabaseOverview.tsx | 11 ++-- .../components/OverviewMetrics/MetricItem.tsx | 6 +- .../OverviewMetrics/OverviewMetrics.tsx | 63 ++++++++----------- .../explore-guides/ExploreGuides.tsx | 4 +- .../ui/src/components/explore-guides/icons.ts | 18 +++--- .../components/field-message/FieldMessage.tsx | 6 +- .../import-file-modal/ImportFileModal.tsx | 8 +-- .../InputFieldSentinel.tsx | 12 ++-- .../instance-header/InstanceHeader.tsx | 9 ++- .../components/ShortInstanceInfo.tsx | 24 +++---- .../QueryCardHeader/QueryCardHeader.tsx | 30 ++++----- .../components/add-item/AddItem.tsx | 2 +- .../EditEntireItemAction.tsx | 10 +-- .../rejson-scalar/RejsonScalar.tsx | 2 +- 16 files changed, 89 insertions(+), 123 deletions(-) diff --git a/redisinsight/ui/src/components/base/icons/index.ts b/redisinsight/ui/src/components/base/icons/index.ts index e40a7c0c69..d1a89e73cf 100644 --- a/redisinsight/ui/src/components/base/icons/index.ts +++ b/redisinsight/ui/src/components/base/icons/index.ts @@ -3,6 +3,7 @@ export { Icon } from './Icon' export * from './common' export * from './guides' +export * from './metrics' export * from './modules' export * from './options' export * from './sidebar' diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx index 165a44b5bb..c6be824fe1 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import cx from 'classnames' -import { EuiIcon } from '@elastic/eui' import { useSelector } from 'react-redux' import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants' @@ -9,6 +8,7 @@ import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' import { Text } from 'uiSrc/components/base/text' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export interface Props { @@ -80,8 +80,8 @@ const CHSearchFilter = ({ submitFilter, isLoading }: Props) => { allowReset placeholder={
- diff --git a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx index aa3e8f1362..d5df14f6a8 100644 --- a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx +++ b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx @@ -1,6 +1,5 @@ import React from 'react' import cx from 'classnames' -import { EuiIcon } from '@elastic/eui' import { getConfig } from 'uiSrc/config' import { @@ -8,7 +7,6 @@ import { DATABASE_OVERVIEW_REFRESH_INTERVAL, } from 'uiSrc/constants/browser' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import WarningIcon from 'uiSrc/assets/img/warning.svg?react' import MetricItem, { OverviewItem, } from 'uiSrc/components/database-overview/components/OverviewMetrics/MetricItem' @@ -16,6 +14,7 @@ import { useDatabaseOverview } from 'uiSrc/components/database-overview/hooks/us import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics' import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import AutoRefresh from '../auto-refresh' import styles from './styles.module.scss' @@ -46,7 +45,9 @@ const DatabaseOverview = () => { } + content={ + + } /> )} {metrics?.length! > 0 && ( @@ -134,14 +135,14 @@ const getTooltipContent = (metric: IMetric) => { > {tooltipItem.icon && ( - )} - + {tooltipItem.content} diff --git a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx index 01e053ef88..a45dabb2bd 100644 --- a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx +++ b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx @@ -1,8 +1,8 @@ -import cx from 'classnames' -import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui' import React, { CSSProperties, ReactNode } from 'react' +import cx from 'classnames' import styles from 'uiSrc/components/database-overview/styles.module.scss' import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics/OverviewMetrics' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { RiTooltip } from 'uiSrc/components' export interface OverviewItemProps { @@ -51,7 +51,7 @@ const MetricItem = ( > {icon && ( - + )} diff --git a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx index 82626aca5f..a4a47de86b 100644 --- a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx +++ b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, ReactNode } from 'react' +import React, { ReactNode } from 'react' import { isArray, isUndefined, toNumber } from 'lodash' import { @@ -10,22 +10,8 @@ import { } from 'uiSrc/utils' import { Theme } from 'uiSrc/constants' import { numberWithSpaces } from 'uiSrc/utils/numbers' -import { - InputDarkIcon, - InputLightIcon, - KeyDarkIcon, - KeyLightIcon, - MeasureDarkIcon, - MeasureLightIcon, - MemoryDarkIcon, - MemoryLightIcon, - OutputDarkIcon, - OutputLightIcon, - TimeDarkIcon, - TimeLightIcon, - UserDarkIcon, - UserLightIcon, -} from 'uiSrc/components/database-overview/components/icons' + +import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' import { Loader } from 'uiSrc/components/base/display' import styles from './styles.module.scss' @@ -62,17 +48,20 @@ export interface IMetric { title: string tooltip?: { title?: string - icon?: Nullable | FunctionComponent + icon?: Nullable content: ReactNode | string } loading?: boolean groupId?: string - icon?: Nullable | FunctionComponent + icon?: Nullable className?: string children?: Array } -function getCpuUsage(cpuUsagePercentage: number | null, theme: string) { +function getCpuUsage( + cpuUsagePercentage: number | null, + theme: string, +): IMetric { return { id: 'overview-cpu', title: 'CPU', @@ -81,7 +70,7 @@ function getCpuUsage(cpuUsagePercentage: number | null, theme: string) { unavailableText: 'CPU is not available', tooltip: { title: 'CPU', - icon: theme === Theme.Dark ? TimeDarkIcon : TimeLightIcon, + icon: theme === Theme.Dark ? 'TimeDarkIcon' : 'TimeLightIcon', content: cpuUsagePercentage === null ? ( 'Calculating in progress' @@ -96,8 +85,8 @@ function getCpuUsage(cpuUsagePercentage: number | null, theme: string) { icon: cpuUsagePercentage !== null ? theme === Theme.Dark - ? TimeDarkIcon - : TimeLightIcon + ? 'TimeDarkIcon' + : 'TimeLightIcon' : null, content: cpuUsagePercentage === null ? ( @@ -122,13 +111,13 @@ function getOpsPerSecondItem( // Ops per second with tooltip const opsPerSecItem: any = { id: 'overview-commands-sec', - icon: theme === Theme.Dark ? MeasureDarkIcon : MeasureLightIcon, + icon: theme === Theme.Dark ? 'MeasureDarkIcon' : 'MeasureLightIcon', content: opsPerSecond, value: opsPerSecond, unavailableText: 'Commands/s are not available', title: 'Commands/s', tooltip: { - icon: theme === Theme.Dark ? MeasureDarkIcon : MeasureLightIcon, + icon: theme === Theme.Dark ? 'MeasureDarkIcon' : 'MeasureLightIcon', content: opsPerSecond, }, className: styles.opsPerSecItem, @@ -156,7 +145,7 @@ function getOpsPerSecondItem( id: 'network-input', groupId: opsPerSecItem.id, title: 'Network Input', - icon: theme === Theme.Dark ? InputDarkIcon : InputLightIcon, + icon: theme === Theme.Dark ? 'InputDarkIcon' : 'InputLightIcon', value: networkIn, content: ( <> @@ -167,7 +156,7 @@ function getOpsPerSecondItem( unavailableText: 'Network Input is not available', tooltip: { title: 'Network Input', - icon: theme === Theme.Dark ? InputDarkIcon : InputLightIcon, + icon: theme === Theme.Dark ? 'InputDarkIcon' : 'InputLightIcon', content: ( <> {networkIn} @@ -181,7 +170,7 @@ function getOpsPerSecondItem( id: 'network-output-tip', groupId: opsPerSecItem.id, title: 'Network Output', - icon: theme === Theme.Dark ? OutputDarkIcon : OutputLightIcon, + icon: theme === Theme.Dark ? 'OutputDarkIcon' : 'OutputLightIcon', value: networkOut, content: ( <> @@ -192,7 +181,7 @@ function getOpsPerSecondItem( unavailableText: 'Network Output is not available', tooltip: { title: 'Network Output', - icon: theme === Theme.Dark ? OutputDarkIcon : OutputLightIcon, + icon: theme === Theme.Dark ? 'OutputDarkIcon' : 'OutputLightIcon', content: ( <> {networkOut} @@ -207,7 +196,7 @@ function getOpsPerSecondItem( { id: 'commands-per-sec-tip', title: 'Commands/s', - icon: theme === Theme.Dark ? MeasureDarkIcon : MeasureLightIcon, + icon: theme === Theme.Dark ? 'MeasureDarkIcon' : 'MeasureLightIcon', value: opsPerSecond, content: opsPerSecond, unavailableText: 'Commands/s are not available', @@ -225,7 +214,7 @@ function getUsedMemoryItem( planMemoryLimit: number, usedMemoryPercent: number, memoryLimitMeasurementUnit = 'MB', -) { +): IMetric { const memoryUsed = formatBytes(usedMemory, 0) const planMemory = planMemoryLimit ? formatBytes(toBytes(planMemoryLimit, memoryLimitMeasurementUnit) || 0, 1) @@ -250,7 +239,7 @@ function getUsedMemoryItem( title: 'Total Memory', tooltip: { title: 'Total Memory', - icon: theme === Theme.Dark ? MemoryDarkIcon : MemoryLightIcon, + icon: theme === Theme.Dark ? 'MemoryDarkIcon' : 'MemoryLightIcon', content: isArray(formattedUsedMemoryTooltip) ? ( <> {formattedUsedMemoryTooltip[0]} @@ -262,7 +251,7 @@ function getUsedMemoryItem( `${formattedUsedMemoryTooltip}${memoryUsedTooltip}` ), }, - icon: theme === Theme.Dark ? MemoryDarkIcon : MemoryLightIcon, + icon: theme === Theme.Dark ? 'MemoryDarkIcon' : 'MemoryLightIcon', content: memoryContent, } } @@ -281,9 +270,9 @@ function getTotalKeysItem( tooltip: { title: 'Total Keys', content: {numberWithSpaces(totalKeys)}, - icon: theme === Theme.Dark ? KeyDarkIcon : KeyLightIcon, + icon: theme === Theme.Dark ? 'KeyDarkIcon' : 'KeyLightIcon', }, - icon: theme === Theme.Dark ? KeyDarkIcon : KeyLightIcon, + icon: theme === Theme.Dark ? 'KeyDarkIcon' : 'KeyLightIcon', content: truncateNumberToRange(totalKeys), } @@ -329,9 +318,9 @@ const getConnectedClient = (connectedClients: number = 0) => ? connectedClients : `~${Math.round(connectedClients)}` -function getConnectedClientItem(theme: string, connectedClients = 0) { +function getConnectedClientItem(theme: string, connectedClients = 0): IMetric { const connectedClientsCount = getConnectedClient(connectedClients) - const icon = theme === Theme.Dark ? UserDarkIcon : UserLightIcon + const icon = theme === Theme.Dark ? 'UserDarkIcon' : 'UserLightIcon' return { id: 'overview-connected-clients', value: connectedClients, diff --git a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx index 60287034a7..c75c9986b4 100644 --- a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx +++ b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { EuiIcon } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import { guideLinksSelector } from 'uiSrc/slices/content/guide-links' @@ -13,6 +12,7 @@ import { findTutorialPath } from 'uiSrc/utils' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const ExploreGuides = () => { @@ -61,7 +61,7 @@ const ExploreGuides = () => { data-testid={`guide-button-${tutorialId}`} > {icon in GUIDE_ICONS && ( - = { - search: SearchIcon, - json: JSONIcon, - 'probabilistic-data-structures': ProbabilisticDataIcon, - 'time-series': TimeSeriesIcon, - 'vector-similarity-search': VectorSimilarity, +const GUIDE_ICONS: Record = { + search: 'QuerySearchIcon', + json: 'JSONIcon', + 'probabilistic-data-structures': 'ProbabilisticDataIcon', + 'time-series': 'TimeSeriesIcon', + 'vector-similarity-search': 'VectorSimilarityIcon', } export default GUIDE_ICONS diff --git a/redisinsight/ui/src/components/field-message/FieldMessage.tsx b/redisinsight/ui/src/components/field-message/FieldMessage.tsx index 4389be1ea4..27e5e86237 100644 --- a/redisinsight/ui/src/components/field-message/FieldMessage.tsx +++ b/redisinsight/ui/src/components/field-message/FieldMessage.tsx @@ -1,9 +1,9 @@ import React, { Ref, useEffect, useRef } from 'react' import cx from 'classnames' -import { EuiIcon } from '@elastic/eui' import { ColorText } from 'uiSrc/components/base/text' import { scrollIntoView } from 'uiSrc/utils' +import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' type Colors = @@ -18,7 +18,7 @@ export interface Props { children: React.ReactElement | string color?: Colors scrollViewOnAppear?: boolean - icon?: string + icon?: AllIconsType testID?: string } @@ -45,7 +45,7 @@ const FieldMessage = ({ return (
{icon && ( - { @@ -120,11 +120,7 @@ const ImportFileModal = ({ )} {error && (
- + {errorMessage} diff --git a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx index 9b885633f7..ccaaa181e9 100644 --- a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx +++ b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx @@ -1,13 +1,11 @@ -import { - EuiFieldText, - EuiIcon, -} from '@elastic/eui' +import { EuiFieldText } from '@elastic/eui' import { omit } from 'lodash' import React, { useState } from 'react' import cx from 'classnames' import { useDebouncedEffect } from 'uiSrc/services' import { NumericInput, PasswordInput } from 'uiSrc/components/base/inputs' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export enum SentinelInputFieldType { @@ -83,9 +81,9 @@ const InputFieldSentinel = (props: Props) => { /> )} {isInvalid && ( - )} diff --git a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx index 5f371da243..5d543c5149 100644 --- a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx +++ b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import cx from 'classnames' -import { EuiIcon } from '@elastic/eui' import { FeatureFlags, Pages } from 'uiSrc/constants' import { selectOnFocus } from 'uiSrc/utils' @@ -43,6 +42,7 @@ import { EmptyButton } from 'uiSrc/components/base/forms/buttons' import { EditIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' import { NumericInput } from 'uiSrc/components/base/inputs' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import InstancesNavigationPopover from './components/instances-navigation-popover' import styles from './styles.module.scss' @@ -97,8 +97,7 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { } const goToReturnUrl = () => { - const fullUrl = `${returnUrlBase}${returnUrl}` - document.location = fullUrl + document.location = `${returnUrlBase}${returnUrl}` } const handleChangeDbIndex = () => { @@ -284,9 +283,9 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { /> } > - { const { theme } = useContext(ThemeContext) const getIcon = (name: string) => { - const icon = + const icon: AllIconsType = DEFAULT_MODULES_INFO[name]?.[ theme === Theme.Dark ? 'iconDark' : 'iconLight' ] @@ -50,7 +44,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { return icon } - return theme === Theme.Dark ? UnknownDarkIcon : UnknownLightIcon + return theme === Theme.Dark ? 'UnknownDarkIcon' : 'UnknownLightIcon' } return ( @@ -66,10 +60,10 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { {databases > 1 && ( - @@ -83,7 +77,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { )} - + {connectionType ? CONNECTION_TYPE_DISPLAY[connectionType] @@ -91,11 +85,11 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { - + {version} - + {user || 'Default'} @@ -108,7 +102,7 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { className={cx(styles.mi_moduleName)} data-testid={`module_${name}`} > - + {truncateText( getModule(name)?.name || diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index fb2cf26fb1..8beb2a9a5d 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -2,7 +2,6 @@ import React, { useContext } from 'react' import styled from 'styled-components' import cx from 'classnames' import { useSelector } from 'react-redux' -import { EuiIcon } from '@elastic/eui' import { useParams } from 'react-router-dom' import { findIndex, isNumber } from 'lodash' import { ColorText } from 'uiSrc/components/base/text' @@ -13,6 +12,8 @@ import { ChevronDownIcon, ChevronUpIcon, DeleteIcon, + DefaultPluginDarkIcon, + DefaultPluginLightIcon, } from 'uiSrc/components/base/icons' import { Theme } from 'uiSrc/constants' import { @@ -47,14 +48,9 @@ import { import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' import { FormatedDate, FullScreen, RiTooltip } from 'uiSrc/components' -import DefaultPluginIconDark from 'uiSrc/assets/img/workbench/default_view_dark.svg' -import DefaultPluginIconLight from 'uiSrc/assets/img/workbench/default_view_light.svg' -import ExecutionTimeIcon from 'uiSrc/assets/img/workbench/execution_time.svg?react' -import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react' -import SilentModeIcon from 'uiSrc/assets/img/icons/silent_mode.svg?react' - import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' import QueryCardTooltip from '../QueryCardTooltip' @@ -232,11 +228,11 @@ const QueryCardHeader = (props: Props) => { iconDark: visualization.plugin.internal && visualization.iconDark ? urlForAsset(visualization.plugin.baseUrl, visualization.iconDark) - : DefaultPluginIconDark, + : DefaultPluginDarkIcon, iconLight: visualization.plugin.internal && visualization.iconLight ? urlForAsset(visualization.plugin.baseUrl, visualization.iconLight) - : DefaultPluginIconLight, + : DefaultPluginLightIcon, internal: visualization.plugin.internal, }), ) @@ -287,9 +283,9 @@ const QueryCardHeader = (props: Props) => { data-test-subj={`profile-type-option-${value}-${id}`} className={cx(styles.dropdownOption, styles.dropdownProfileOption)} > -
@@ -398,8 +394,8 @@ const QueryCardHeader = (props: Props) => { data-testid="execution-time-tooltip" > <> - @@ -523,7 +519,7 @@ const QueryCardHeader = (props: Props) => { className={cx(styles.mode)} data-testid="group-mode-tooltip" > - + )} {isSilentMode(resultsMode) && ( @@ -531,7 +527,7 @@ const QueryCardHeader = (props: Props) => { className={cx(styles.mode)} data-testid="silent-mode-tooltip" > - + )} {isRawMode(mode) && ( @@ -547,9 +543,9 @@ const QueryCardHeader = (props: Props) => { position="bottom" data-testid="parameters-tooltip" > - diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx index daf099c2d1..c08fd4bccb 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx @@ -153,7 +153,7 @@ const AddItem = (props: Props) => {
{error} diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx index 4456fd84c4..3ce71386d2 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx @@ -1,9 +1,5 @@ import React, { ChangeEvent, useState } from 'react' -import { - EuiForm, - keys, -} from '@elastic/eui' - +import { EuiForm, keys } from '@elastic/eui' import cx from 'classnames' import jsonValidator from 'json-dup-key-validator' @@ -78,7 +74,7 @@ const EditEntireItemAction = (props: Props) => { data-testid="json-entire-form" noValidate > - +