From 70f78ce0662a04914ed6be41e454e78b6c76a6df Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Wed, 26 Nov 2025 15:22:46 +0200 Subject: [PATCH 1/5] refactor(ui): migrate CopilotTrigger from SCSS modules to styled-components Migrated CopilotTrigger component from SCSS modules to styled-components following the project's migration guidelines. Replaced styles.module.scss with CopilotTrigger.styles.ts using FlexGroup and IconButton styled components. Removed classnames dependency and improved type safety. References: #RI-7774 --- .../copilot-trigger/CopilotTrigger.styles.ts | 29 ++++++++++++++ .../copilot-trigger/CopilotTrigger.tsx | 22 +++++------ .../copilot-trigger/styles.module.scss | 38 ------------------- 3 files changed, 38 insertions(+), 51 deletions(-) create mode 100644 redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts delete mode 100644 redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts new file mode 100644 index 0000000000..11994de524 --- /dev/null +++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts @@ -0,0 +1,29 @@ +import styled, { css } from 'styled-components' + +import { FlexGroup } from 'uiSrc/components/base/layout/flex' +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton' + +export const CopilotWrapper = styled(FlexGroup)` + user-select: none; +` + +export const CopilotIconButton = styled(IconButton)< + { isOpen: boolean } & IconButtonProps +>` + padding: ${({ theme }) => theme.core.space.space200}; + + // TODO: Remove this once size property is enabled for IconButton + svg { + width: 21px; + height: 21px; + color: var(--triggerIconActiveColor); + } + + ${({ isOpen }) => + isOpen && + css` + background-color: ${({ theme }) => + theme.semantic.color.background.primary200}; + `} +` diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx index 566bee3bd0..fec74accf7 100644 --- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx +++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.tsx @@ -1,6 +1,4 @@ import React from 'react' -import cx from 'classnames' - import { useDispatch, useSelector } from 'react-redux' import { sidePanelsSelector, @@ -10,34 +8,32 @@ import { import { RiTooltip } from 'uiSrc/components' import { CopilotIcon } from 'uiSrc/components/base/icons' import { SidePanels } from 'uiSrc/slices/interfaces/insights' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import styles from './styles.module.scss' +import { CopilotWrapper, CopilotIconButton } from './CopilotTrigger.styles' const CopilotTrigger = () => { const { openedPanel } = useSelector(sidePanelsSelector) - const dispatch = useDispatch() const handleClickTrigger = () => { dispatch(toggleSidePanel(SidePanels.AiAssistant)) } + const isCopilotOpen = openedPanel === SidePanels.AiAssistant + return ( -
+ - -
+ ) } diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss b/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss deleted file mode 100644 index e3f7ba2bf1..0000000000 --- a/redisinsight/ui/src/components/triggers/copilot-trigger/styles.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -.container { - display: flex; - align-items: center; - justify-content: flex-end; - user-select: none; - - &.isOpen { - .btn { - outline: 0 !important; - border-color: var(--euiColorPrimary) !important; - background-color: var(--insightsTriggerBgColor) !important; - border-radius: 4px; - } - } - - .btn { - display: flex; - align-items: center; - color: var(--recommendationColor); - background: transparent !important; - border-color: transparent !important; - position: relative; - height: 36px !important; - width: 36px !important; - min-width: 36px !important; - box-shadow: none !important; - - :global(.euiButton__text) { - display: none; - } - - svg { - width: 21px; - height: 21px; - color: var(--triggerIconActiveColor) !important; - } - } -} From e66da3ee123b1bbbf58aabba2280c4bfee4ddb3e Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Wed, 26 Nov 2025 17:19:28 +0200 Subject: [PATCH 2/5] fix(ui): update CopilotTrigger icon color to use theme variable Changed the icon color in CopilotTrigger.styles.ts to utilize the theme's attention color for better consistency with the overall design system. --- .../triggers/copilot-trigger/CopilotTrigger.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts index 11994de524..0fab065dcc 100644 --- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts +++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts @@ -17,7 +17,7 @@ export const CopilotIconButton = styled(IconButton)< svg { width: 21px; height: 21px; - color: var(--triggerIconActiveColor); + color: ${({ theme }) => theme.semantic.color.text.attention600}; } ${({ isOpen }) => From 3c26fa929fed4fc5c9209c05f33bba1bc421eba0 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Wed, 26 Nov 2025 17:23:04 +0200 Subject: [PATCH 3/5] refactor(ui): simplify styled-components usage in triggers Removed unnecessary imports of 'css' from styled-components in CopilotTrigger and insights-trigger styles. Updated the conditional styling for the background color to use a more concise syntax, enhancing readability and maintainability. --- .../copilot-trigger/CopilotTrigger.styles.ts | 12 +++++------- .../insights-trigger.styles.ts | 18 ++++++++---------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts index 0fab065dcc..bd53713166 100644 --- a/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts +++ b/redisinsight/ui/src/components/triggers/copilot-trigger/CopilotTrigger.styles.ts @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled from 'styled-components' import { FlexGroup } from 'uiSrc/components/base/layout/flex' import { IconButton } from 'uiSrc/components/base/forms/buttons' @@ -20,10 +20,8 @@ export const CopilotIconButton = styled(IconButton)< color: ${({ theme }) => theme.semantic.color.text.attention600}; } - ${({ isOpen }) => - isOpen && - css` - background-color: ${({ theme }) => - theme.semantic.color.background.primary200}; - `} + ${({ isOpen, theme }) => + isOpen + ? `background-color: ${theme.semantic.color.background.primary200};` + : ''} ` diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts b/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts index 9de8a0a1b7..3ecf7c6864 100644 --- a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts +++ b/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts @@ -1,14 +1,14 @@ -import styled, { css } from "styled-components" +import styled from 'styled-components' -import { IconButton } from "uiSrc/components/base/forms/buttons" -import { IconButtonProps } from "uiSrc/components/base/forms/buttons/IconButton" +import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { IconButtonProps } from 'uiSrc/components/base/forms/buttons/IconButton' export const BulbWrapper = styled.div` position: relative; ` export const BulbHighlighting = styled.span` - // TODO: Using the background color from the previous value until there is an appropriate color + // TODO: Using the background color from the previous value until there is an appropriate color // from the pallete to use for both light and dark themes. background-color: #ffaf2b; position: absolute; @@ -31,10 +31,8 @@ export const BulbIconButton = styled(IconButton)< height: 21px; } - ${({ isOpen }) => - isOpen && - css` - background-color: ${({ theme }) => - theme.semantic.color.background.primary200} !important; - `} + ${({ isOpen, theme }) => + isOpen + ? `background-color: ${theme.semantic.color.background.primary200} !important;` + : ''} ` From f85973ab21eee3c136a4f4c937d774cdf611a729 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Wed, 26 Nov 2025 17:23:55 +0200 Subject: [PATCH 4/5] fix(ui): update background color in insights-trigger to use theme variable Changed the background color in insights-trigger.styles.ts to utilize the theme's attention color for improved consistency with the design system. --- .../triggers/insights-trigger/insights-trigger.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts b/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts index 3ecf7c6864..cb5d0ba7e3 100644 --- a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts +++ b/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts @@ -10,7 +10,7 @@ export const BulbWrapper = styled.div` export const BulbHighlighting = styled.span` // TODO: Using the background color from the previous value until there is an appropriate color // from the pallete to use for both light and dark themes. - background-color: #ffaf2b; + background-color: ${({ theme }) => theme.semantic.color.text.attention600}; position: absolute; left: 5px; top: 5px; From 2ba4069fb22acfa6361b22de2e7083e0817d7640 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Wed, 26 Nov 2025 17:25:02 +0200 Subject: [PATCH 5/5] refactor(ui): rename styled components file according to conventions --- .../{insights-trigger.styles.ts => InsightsTrigger.styles.ts} | 0 .../components/triggers/insights-trigger/InsightsTrigger.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename redisinsight/ui/src/components/triggers/insights-trigger/{insights-trigger.styles.ts => InsightsTrigger.styles.ts} (100%) diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts similarity index 100% rename from redisinsight/ui/src/components/triggers/insights-trigger/insights-trigger.styles.ts rename to redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.styles.ts diff --git a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx index 2530803b04..bdcfac1bbd 100644 --- a/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx +++ b/redisinsight/ui/src/components/triggers/insights-trigger/InsightsTrigger.tsx @@ -29,7 +29,7 @@ import { BulbHighlighting, BulbIconButton, BulbWrapper, -} from './insights-trigger.styles' +} from './InsightsTrigger.styles' export interface Props { source?: string