From 7da01396a95a296305ef7a655abc0489eaba51c6 Mon Sep 17 00:00:00 2001 From: Todor Todorov <98095+tptodorov@users.noreply.github.com> Date: Fri, 28 Nov 2025 11:03:01 +0200 Subject: [PATCH 1/3] replaced open book with open folder icon --- redisinsight/ui/src/assets/img/icons/folder_open.svg | 4 ++++ redisinsight/ui/src/components/base/icons/iconRegistry.tsx | 2 ++ .../enablement-area/EnablementArea/components/Group/Group.tsx | 2 +- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 redisinsight/ui/src/assets/img/icons/folder_open.svg diff --git a/redisinsight/ui/src/assets/img/icons/folder_open.svg b/redisinsight/ui/src/assets/img/icons/folder_open.svg new file mode 100644 index 0000000000..563e87807f --- /dev/null +++ b/redisinsight/ui/src/assets/img/icons/folder_open.svg @@ -0,0 +1,4 @@ + + + + diff --git a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx index f4ecba225d..7e57b246df 100644 --- a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx +++ b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx @@ -16,6 +16,7 @@ import DefaultPluginDarkSvg from 'uiSrc/assets/img/workbench/default_view_dark.s import DefaultPluginLightSvg from 'uiSrc/assets/img/workbench/default_view_light.svg?react' import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react' import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' +import FolderOpenSvg from 'uiSrc/assets/img/icons/folder_open.svg?react' import GithubHelpCenterSVG from 'uiSrc/assets/img/github.svg?react' import GroupModeSvg from 'uiSrc/assets/img/icons/group_mode.svg?react' import KeyboardShortcutsSvg from 'uiSrc/assets/img/icons/keyboard-shortcuts.svg?react' @@ -176,6 +177,7 @@ export const DefaultPluginDarkIcon = createIconComponent(DefaultPluginDarkSvg) export const DefaultPluginLightIcon = createIconComponent(DefaultPluginLightSvg) export const DislikeIcon = createIconComponent(DislikeSvg) export const ExtendIcon = createIconComponent(ExtendSvg) +export const FolderOpenIcon = createIconComponent(FolderOpenSvg) export const GithubHelpCenterIcon = createIconComponent(GithubHelpCenterSVG) export const GroupModeIcon = createIconComponent(GroupModeSvg) export const KeyboardShortcutsIcon = createIconComponent(KeyboardShortcutsSvg) diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx index dcaa82de88..4628196a0e 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx @@ -127,7 +127,7 @@ const Group = (props: Props) => { label={ {isShowFolder && ( - + )} From 1004367b48199a35ffdce80a4ee83088949e8caa Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 28 Nov 2025 14:41:32 +0200 Subject: [PATCH 2/3] fix(ui): replace custom FolderOpen icon with Redis UI library icon - Remove custom SVG file folder_open.svg - Remove FolderOpenIcon import/export from iconRegistry.tsx - Update @redis-ui/icons to version 6.3.17 which includes FolderOpenIcon - Fix icon logic in Group component to show FolderOpenIcon when open References: #RI-7832 --- package.json | 2 +- redisinsight/ui/src/assets/img/icons/folder_open.svg | 4 ---- .../ui/src/components/base/icons/iconRegistry.tsx | 2 -- yarn.lock | 8 ++++---- 4 files changed, 5 insertions(+), 11 deletions(-) delete mode 100644 redisinsight/ui/src/assets/img/icons/folder_open.svg diff --git a/package.json b/package.json index 1a189dc37c..c7258f7d97 100644 --- a/package.json +++ b/package.json @@ -252,7 +252,7 @@ "@elastic/datemath": "^5.0.3", "@elastic/eui": "34.6.0", "@redis-ui/components": "^39.18.0", - "@redis-ui/icons": "^6.1.1", + "@redis-ui/icons": "^6.3.17", "@redis-ui/styles": "^12.9.0", "@redis-ui/table": "^2.18.0", "@reduxjs/toolkit": "^1.6.2", diff --git a/redisinsight/ui/src/assets/img/icons/folder_open.svg b/redisinsight/ui/src/assets/img/icons/folder_open.svg deleted file mode 100644 index 563e87807f..0000000000 --- a/redisinsight/ui/src/assets/img/icons/folder_open.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx index 7e57b246df..f4ecba225d 100644 --- a/redisinsight/ui/src/components/base/icons/iconRegistry.tsx +++ b/redisinsight/ui/src/components/base/icons/iconRegistry.tsx @@ -16,7 +16,6 @@ import DefaultPluginDarkSvg from 'uiSrc/assets/img/workbench/default_view_dark.s import DefaultPluginLightSvg from 'uiSrc/assets/img/workbench/default_view_light.svg?react' import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react' import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react' -import FolderOpenSvg from 'uiSrc/assets/img/icons/folder_open.svg?react' import GithubHelpCenterSVG from 'uiSrc/assets/img/github.svg?react' import GroupModeSvg from 'uiSrc/assets/img/icons/group_mode.svg?react' import KeyboardShortcutsSvg from 'uiSrc/assets/img/icons/keyboard-shortcuts.svg?react' @@ -177,7 +176,6 @@ export const DefaultPluginDarkIcon = createIconComponent(DefaultPluginDarkSvg) export const DefaultPluginLightIcon = createIconComponent(DefaultPluginLightSvg) export const DislikeIcon = createIconComponent(DislikeSvg) export const ExtendIcon = createIconComponent(ExtendSvg) -export const FolderOpenIcon = createIconComponent(FolderOpenSvg) export const GithubHelpCenterIcon = createIconComponent(GithubHelpCenterSVG) export const GroupModeIcon = createIconComponent(GroupModeSvg) export const KeyboardShortcutsIcon = createIconComponent(KeyboardShortcutsSvg) diff --git a/yarn.lock b/yarn.lock index 731db44e28..1e2cfcde44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2558,10 +2558,10 @@ type-fest "^3.13.1" virtua "^0.36.3" -"@redis-ui/icons@^6.1.1": - version "6.1.1" - resolved "https://registry.yarnpkg.com/@redis-ui/icons/-/icons-6.1.1.tgz#100dfb7fdb4fa810ab85d9ddbd6ed75ed755f1fe" - integrity sha512-KzxU7cCcArOfE3cGX59Dd3FDDkQAp1QLupcj9nvXj+zOoPkaCdGELeAFL5l8glo7eY/6pyQl5VTR4XQ3d12mjQ== +"@redis-ui/icons@^6.1.1", "@redis-ui/icons@^6.3.17": + version "6.3.17" + resolved "https://registry.yarnpkg.com/@redis-ui/icons/-/icons-6.3.17.tgz#d444997b43b9c815dde33f23ed0bd0bfed601311" + integrity sha512-H5bXBZmUG3sNUWMcI7p/VPshiu1roRsiRuTCdY8Avw1ardfs7zAdJKBohmX4OCwSjsv/KKTP2UzXh3wOdCh6Ew== "@redis-ui/styles@^12.8.0", "@redis-ui/styles@^12.9.0": version "12.9.0" From 38ffec823f7d5d590d77e239c715e9a4e37faadb Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Fri, 28 Nov 2025 14:44:38 +0200 Subject: [PATCH 3/3] docs: update code quality and frontend rules for Vite cache management and icon usage - Added guidelines for clearing Vite cache after updating npm packages - Emphasized the use of Redis UI icons and provided instructions for icon usage and exceptions for custom icons --- .ai/rules/code-quality.md | 16 ++++++++++++++++ .ai/rules/frontend.md | 18 ++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/.ai/rules/code-quality.md b/.ai/rules/code-quality.md index 6b4058f766..0fcd32589c 100644 --- a/.ai/rules/code-quality.md +++ b/.ai/rules/code-quality.md @@ -64,6 +64,21 @@ alwaysApply: true - Clean up subscriptions and timers - Use constants instead of magic numbers +## Vite Cache Management + +When updating npm packages (especially `@redis-ui/*` packages): + +1. **Clear Vite cache** after `yarn install`: + + ```bash + rm -rf node_modules/.vite + rm -rf redisinsight/ui/node_modules/.vite + ``` + +2. **Restart dev server** to rebuild dependencies + +3. This ensures new package versions are properly loaded + ## Pre-Commit Checklist - [ ] `yarn lint` passes @@ -75,3 +90,4 @@ alwaysApply: true - [ ] Descriptive variable names - [ ] Low cognitive complexity - [ ] No duplicate code +- [ ] Vite cache cleared (if updated dependencies) diff --git a/.ai/rules/frontend.md b/.ai/rules/frontend.md index 609ab45040..138a79b031 100644 --- a/.ai/rules/frontend.md +++ b/.ai/rules/frontend.md @@ -270,6 +270,24 @@ import { EuiButton } from '@elastic/eui'; - ❌ Do not import directly from `@redis-ui/*` - ❌ Do not add new Elastic UI imports +## Icons + +**⚠️ IMPORTANT**: Always use icons from Redis UI library instead of custom SVGs. + +### Icon Usage + +- **Use Redis UI icons** from `@redis-ui/icons` via `iconRegistry.tsx` +- Icons are automatically exported via `export * from '@redis-ui/icons'` in `iconRegistry.tsx` +- Use `RiIcon` component with icon type: `` +- **DO NOT create custom SVG icons** - check if the icon exists in Redis UI library first + +### Custom Icons (Exception) + +Only create custom SVG icons if: + +- The icon doesn't exist in Redis UI library +- It's a project-specific icon that won't be added to the library + ## Testing Components ### Always Use Shared `renderComponent` Helper