From a7029d3481e4c72e1adee3a319fce2463a255c54 Mon Sep 17 00:00:00 2001
From: Krum Tyukenov <krum.tyukenov@redis.com>
Date: Tue, 18 Nov 2025 18:07:10 +0200
Subject: [PATCH 1/2] RI-7740: update Link to support underline

---
 redisinsight/ui/src/components/base/link/Link.tsx       | 4 ++--
 redisinsight/ui/src/components/base/link/link.styles.ts | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/redisinsight/ui/src/components/base/link/Link.tsx b/redisinsight/ui/src/components/base/link/Link.tsx
index 2af006d289..e5ffbbc710 100644
--- a/redisinsight/ui/src/components/base/link/Link.tsx
+++ b/redisinsight/ui/src/components/base/link/Link.tsx
@@ -6,6 +6,6 @@ import {
 } from 'uiSrc/components/base/link/link.styles'
 export { type RiLinkProps }
 
-export const Link = ({ color, ...props }: RiLinkProps) => (
-  <StyledLink {...props} $color={color} />
+export const Link = ({ color, underline, ...props }: RiLinkProps) => (
+  <StyledLink {...props} $color={color} $underline={underline} />
 )
diff --git a/redisinsight/ui/src/components/base/link/link.styles.ts b/redisinsight/ui/src/components/base/link/link.styles.ts
index 95d879723f..6551e38f66 100644
--- a/redisinsight/ui/src/components/base/link/link.styles.ts
+++ b/redisinsight/ui/src/components/base/link/link.styles.ts
@@ -19,10 +19,12 @@ export type ColorType = LinkProps['color'] | EuiColorNames | (string & {})
 
 export type RiLinkProps = Omit<LinkProps, 'color'> & {
   color?: ColorType
+  underline?: boolean
 }
 
 type MapProps = RiLinkProps & {
   $color?: ColorType
+  $underline?: boolean
 }
 
 export const useColorTextStyles = ({ $color }: MapProps = {}) => {
@@ -65,9 +67,11 @@ export const useColorTextStyles = ({ $color }: MapProps = {}) => {
 
 export const StyledLink = styled(RedisUiLink)<MapProps>`
   ${useColorTextStyles};
-  text-decoration: none !important;
+  text-decoration: ${({ $underline }) =>
+    $underline ? 'underline' : 'none'} !important;
   & > span {
-    text-decoration: none !important;
+    text-decoration: ${({ $underline }) =>
+      $underline ? 'underline' : 'none'} !important;
   }
   &:hover {
     text-decoration: underline !important;

From 928d5465410f2c4a061dcdd6cac72008b1ac5146 Mon Sep 17 00:00:00 2001
From: Krum Tyukenov <krum.tyukenov@redis.com>
Date: Tue, 18 Nov 2025 18:07:50 +0200
Subject: [PATCH 2/2] RI-7740: update instances navigation styles

---
 .../instance-header/InstanceHeader.tsx           | 10 ++++++----
 .../InstancesNavigationPopover.styles.ts         |  7 +++++++
 .../InstancesNavigationPopover.tsx               | 16 ++++++++--------
 .../styles.module.scss                           |  8 --------
 .../rdi-instance-header/RdiInstanceHeader.tsx    | 14 ++++++++------
 .../rdi-instance-header/styles.module.scss       | 13 -------------
 6 files changed, 29 insertions(+), 39 deletions(-)
 create mode 100644 redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.styles.ts

diff --git a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx
index f15b64ac8a..96a5e62136 100644
--- a/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx
+++ b/redisinsight/ui/src/components/instance-header/InstanceHeader.tsx
@@ -44,6 +44,7 @@ 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 { Link } from 'uiSrc/components/base/link/Link'
 import InstancesNavigationPopover from './components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -159,8 +160,10 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                       : 'Redis Databases'
                   }
                 >
-                  <Text
-                    className={styles.breadCrumbLink}
+                  <Link
+                    color="subdued"
+                    underline
+                    variant="inline"
                     aria-label={
                       server?.buildType === BuildType.RedisStack
                         ? 'Edit database'
@@ -168,10 +171,9 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
                     }
                     data-testid="my-redis-db-btn"
                     onClick={goHome}
-                    onKeyDown={goHome}
                   >
                     Databases
-                  </Text>
+                  </Link>
                 </RiTooltip>
               </FeatureFlagComponent>
             </div>
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.styles.ts b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.styles.ts
new file mode 100644
index 0000000000..15a23d7d4c
--- /dev/null
+++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+import { Row } from 'uiSrc/components/base/layout/flex'
+
+export const ButtonWrapper = styled(Row)`
+  cursor: pointer;
+`
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx
index 14eb3f03eb..59d8c6873f 100644
--- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx
+++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx
@@ -13,10 +13,11 @@ import { localStorageService } from 'uiSrc/services'
 import { filterAndSort } from 'uiSrc/utils'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Text } from 'uiSrc/components/base/text'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
 import { RiPopover } from 'uiSrc/components/base'
 import InstancesList from './components/instances-list'
+import { ChevronDownIcon } from 'uiSrc/components/base/icons'
+import { ButtonWrapper } from './InstancesNavigationPopover.styles'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -117,16 +118,15 @@ const InstancesNavigationPopover = ({ name }: Props) => {
       isOpen={isPopoverOpen}
       closePopover={() => showPopover()}
       button={
-        <Text
-          className={styles.showPopoverBtn}
+        <ButtonWrapper
+          align="center"
+          gap="s"
           onClick={() => showPopover()}
           data-testid="nav-instance-popover-btn"
         >
-          <b className={styles.breadCrumbLink}>{name}</b>
-          <span>
-            <RiIcon color="primary500" type="CaretDownIcon" />
-          </span>
-        </Text>
+          <Text color="primary">{name}</Text>
+          <ChevronDownIcon size="S" />
+        </ButtonWrapper>
       }
     >
       <div className={styles.wrapper}>
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss
index ceb0b9b91c..e495efd38c 100644
--- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss
+++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/styles.module.scss
@@ -1,11 +1,3 @@
-.showPopoverBtn {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-}
-
 .breadCrumbLink {
   cursor: pointer;
   text-decoration: underline;
diff --git a/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx b/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx
index ac4728df1a..a23e7c1b86 100644
--- a/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx
+++ b/redisinsight/ui/src/components/rdi-instance-header/RdiInstanceHeader.tsx
@@ -15,6 +15,7 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { isAnyFeatureEnabled } from 'uiSrc/utils/features'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
+import { Link } from 'uiSrc/components/base/link/Link'
 import InstancesNavigationPopover from '../instance-header/components/instances-navigation-popover'
 import styles from './styles.module.scss'
 
@@ -43,22 +44,23 @@ const RdiInstanceHeader = () => {
         >
           <div>
             <RiTooltip position="bottom" content="My RDI instances">
-              <Text
-                className={styles.breadCrumbLink}
+              <Link
+                color="subdued"
+                underline
+                variant="inline"
                 aria-label="My RDI instances"
                 data-testid="my-rdi-instances-btn"
                 onClick={goHome}
-                onKeyDown={goHome}
               >
-                RDI instances
-              </Text>
+                Data integration
+              </Link>
             </RiTooltip>
           </div>
           <div style={{ flex: 1, overflow: 'hidden' }}>
             <div style={{ maxWidth: '100%' }}>
               <Row align="center">
                 <FlexItem>
-                  <Text className={styles.divider}>&#62;</Text>
+                  <Text className={styles.divider}>/</Text>
                 </FlexItem>
                 <FlexItem grow style={{ overflow: 'hidden' }}>
                   <InstancesNavigationPopover name={name} />
diff --git a/redisinsight/ui/src/components/rdi-instance-header/styles.module.scss b/redisinsight/ui/src/components/rdi-instance-header/styles.module.scss
index cf240e0b91..f99ba4ef49 100644
--- a/redisinsight/ui/src/components/rdi-instance-header/styles.module.scss
+++ b/redisinsight/ui/src/components/rdi-instance-header/styles.module.scss
@@ -10,19 +10,6 @@
   & > div {
     display: flex;
   }
-
-  .breadCrumbLink {
-    color: var(--euiColorPrimary) !important;
-    font-size: 14px !important;
-    line-height: 20px;
-    font-weight: 400;
-    cursor: pointer;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
 }
 
 .rdiName {