Ri-7334: icons titles and link handlers

pd-redis · web-flow · commit b8af7273319e · 2025-10-02T11:20:22.000+03:00
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-22.12.0
+22
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -26,8 +26,6 @@ module.exports = {
     'remark-rehype': '<rootDir>/redisinsight/__mocks__/remarkRehype.js',
     'rehype-stringify': '<rootDir>/redisinsight/__mocks__/rehypeStringify.js',
     'unist-util-visit': '<rootDir>/redisinsight/__mocks__/unistUtilsVisit.js',
-    'react-children-utilities':
-      '<rootDir>/redisinsight/__mocks__/react-children-utilities.js',
     d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
     '^uuid$': require.resolve('uuid'),
     msgpackr: require.resolve('msgpackr'),
diff --git a/package.json b/package.json
@@ -222,7 +222,7 @@
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^4.0.5",
     "url-loader": "^4.1.0",
-    "vite": "^5.4.19",
+    "vite": "^5.4.20",
     "vite-bundle-visualizer": "1.0.1",
     "vite-plugin-compression2": "^1.1.0",
     "vite-plugin-ejs": "^1.7.0",
@@ -241,10 +241,10 @@
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "34.6.0",
-    "@redis-ui/components": "^38.1.4",
-    "@redis-ui/icons": "^4.16.1",
-    "@redis-ui/styles": "^11.4.0",
-    "@redis-ui/table": "^2.4.0",
+    "@redis-ui/components": "^39.18.0",
+    "@redis-ui/icons": "^6.1.1",
+    "@redis-ui/styles": "^12.9.0",
+    "@redis-ui/table": "^2.18.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@stablelib/snappy": "^1.0.2",
     "@types/json-dup-key-validator": "^1.0.2",
@@ -276,6 +276,7 @@
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
+    "modern-normalize": "^3.0.1",
     "monaco-editor": "^0.48.0",
     "monaco-yaml": "^5.1.1",
     "msgpackr": "^1.10.1",
diff --git a/redisinsight/ui/index.html b/redisinsight/ui/index.html
@@ -26,6 +26,11 @@
     </script>
 
     <style>
+      #root {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
       #page-placeholder {
         display: flex;
         background-color: black;
diff --git a/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx b/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-import { EuiLinkProps } from '@elastic/eui/src/components/link/link'
-import { LinkButtonVariants } from '@redis-ui/components'
 import { IconProps } from 'uiSrc/components/base/icons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link } from 'uiSrc/components/base/link/Link'
+import { Link, type LinkProps } from 'uiSrc/components/base/link/Link'
 
-export type Props = EuiLinkProps & {
+export type Props = LinkProps & {
   href: string
   iconPosition?: 'left' | 'right'
   iconSize?: IconProps['size']
-  variant?: LinkButtonVariants
+  variant?: LinkProps['variant']
+  size?: LinkProps['size']
 }
 
 const ExternalLink = (props: Props) => {
diff --git a/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx
@@ -35,7 +35,7 @@ describe('Checkbox', () => {
 
       const checkbox = screen.getByRole('checkbox')
       expect(checkbox).toHaveValue('on')
-      expect(checkbox).toHaveTextContent('Minus')
+      expect(screen.getByLabelText('Minus')).toBeInTheDocument()
     })
   })
 
diff --git a/redisinsight/ui/src/components/base/link/Link.tsx b/redisinsight/ui/src/components/base/link/Link.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { LinkProps } from '@redis-ui/components'
+export { type LinkProps } from '@redis-ui/components'
 import { StyledLink } from 'uiSrc/components/base/link/link.styles'
 
 export const Link = ({ color, ...props }: LinkProps) => (
diff --git a/redisinsight/ui/src/components/base/utils/pluginsThemeContext.tsx b/redisinsight/ui/src/components/base/utils/pluginsThemeContext.tsx
@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useState } from 'react'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
-import { themeLight, themeDark } from '@redis-ui/styles'
+import { CommonStyles, themeLight, themeDark } from '@redis-ui/styles'
+import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
 
@@ -28,7 +29,10 @@ export const ThemeProvider = ({ children }: Props) => {
   }, [theme])
   return (
     <PluginsThemeContext.Provider value={{ theme }}>
-      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+      <StyledThemeProvider theme={theme}>
+        <CommonStyles />
+        {children}
+      </StyledThemeProvider>
     </PluginsThemeContext.Provider>
   )
 }
diff --git a/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx b/redisinsight/ui/src/components/command-helper/CommandHelper/CommandHelper.tsx
@@ -49,7 +49,8 @@ const CommandHelper = (props: Props) => {
         href={docUrl}
         target="_blank"
         data-testid="read-more"
-        variant="small-inline"
+        size="S"
+        variant="inline"
         color="primary"
       >
         Read more
diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search-output/CHSearchOutput.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search-output/CHSearchOutput.tsx
@@ -90,7 +90,7 @@ const CHSearchOutput = ({ searchedCommands }: Props) => {
                     handleClickCommand(e, command)
                   }}
                 >
-                  <UnderlineReverseLink color="text" variant="regular">
+                  <UnderlineReverseLink color="text" variant="button">
                     {command}
                   </UnderlineReverseLink>
                 </Text>
diff --git a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx
@@ -35,7 +35,8 @@ const DatabaseNotOpened = (props: Props) => {
           <OAuthSsoHandlerDialog>
             {(ssoCloudHandlerClick) => (
               <ExternalLink
-                variant="small-inline"
+                variant="inline"
+                size="S"
                 iconSize="S"
                 href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, {
                   campaign: UTM_CAMPAINGS[source] ?? source,
@@ -55,7 +56,8 @@ const DatabaseNotOpened = (props: Props) => {
           </OAuthSsoHandlerDialog>
           <Spacer size="xs" />
           <ExternalLink
-            variant="small-inline"
+            size="S"
+            variant="inline"
             iconSize="S"
             href={getUtmExternalLink(EXTERNAL_LINKS.docker, {
               campaign: UTM_CAMPAINGS[source] ?? source,
diff --git a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx
@@ -144,7 +144,8 @@ export const INFINITE_MESSAGES: Record<
               <ExternalLink
                 href={MANAGE_DB_LINK}
                 iconSize="XS"
-                variant="small-inline"
+                size="S"
+                variant="inline"
               >
                 Manage DB
               </ExternalLink>
@@ -184,7 +185,8 @@ export const INFINITE_MESSAGES: Record<
         Log in to{' '}
         <ExternalLink
           target="_blank"
-          variant="small-inline"
+          variant="inline"
+          size="S"
           iconSize={'XS'}
           tabIndex={-1}
           href={getUtmExternalLink(EXTERNAL_LINKS.cloudConsole, {
diff --git a/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/rdi-deploy-error-content/RdiDeployErrorContent.tsx
@@ -33,8 +33,8 @@ const RdiDeployErrorContent = (props: Props) => {
           <FlexItem>
             <div>Review the error log for details.</div>
             <Link
-              variant="small"
-              isExternalLink
+              variant="inline"
+              size="S"
               href={fileUrl}
               download="error-log.txt"
               data-testid="donwload-log-file-btn"
diff --git a/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx b/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx
@@ -203,7 +203,7 @@ describe('OAuthUserProfile', () => {
 
     fireEvent.click(screen.getByTestId('cloud-console-link'))
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.CLOUD_CONSOLE_CLICKED,
     })
     ;(sendEventTelemetry as jest.Mock).mockRestore()
diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx
@@ -47,7 +47,8 @@ const OAuthAgreement = (props: Props) => {
         <li className={styles.listItem}>
           {'to our '}
           <Link
-            variant="small-inline"
+            variant="inline"
+            size="S"
             color="subdued"
             href="https://redis.io/legal/cloud-tos/?utm_source=redisinsight&utm_medium=main&utm_campaign=main"
             className={styles.link}
@@ -58,7 +59,8 @@ const OAuthAgreement = (props: Props) => {
           </Link>
           {' and '}
           <Link
-            variant="small-inline"
+            variant="inline"
+            size="S"
             color="subdued"
             href="https://redis.io/legal/privacy-policy/?utm_source=redisinsight&utm_medium=main&utm_campaign=main"
             className={styles.link}
diff --git a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.spec.tsx b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.spec.tsx
@@ -227,6 +227,6 @@ describe('ContentElement', () => {
 
     fireEvent.click(queryByTestId(`link-${mockTelemetryName}-0`) as HTMLElement)
 
-    expect(onClickMock).toBeCalled()
+    expect(onClickMock).toHaveBeenCalled()
   })
 })
diff --git a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx
@@ -81,7 +81,8 @@ const ContentElement = (props: Props) => {
           key={`${telemetryName}-${idx}`}
           data-testid={`link-${telemetryName}-${idx}`}
           target="_blank"
-          variant="small-inline"
+          variant="inline"
+          size="S"
           href={getUtmExternalLink(value.href, {
             medium: UTM_MEDIUMS.Recommendation,
             campaign: telemetryName,
@@ -99,7 +100,8 @@ const ContentElement = (props: Props) => {
               key={`${telemetryName}-${idx}`}
               data-testid={`link-sso-${telemetryName}-${idx}`}
               target="_blank"
-              variant="small-inline"
+              variant="inline"
+              size="S"
               onClick={(e) => {
                 ssoCloudHandlerClick?.(e, {
                   source: telemetryName as OAuthSocialSource,
@@ -124,7 +126,8 @@ const ContentElement = (props: Props) => {
           key={`${telemetryName}-${idx}`}
           data-testid={`code-link-${telemetryName}-${idx}`}
           target="_blank"
-          variant="small-inline"
+          variant="inline"
+          size="S"
           href={getUtmExternalLink(value.href, {
             medium: UTM_MEDIUMS.Recommendation,
             campaign: telemetryName,
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/NoIndexesInitialMessage.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/NoIndexesInitialMessage.tsx
@@ -32,7 +32,8 @@ const NoIndexesInitialMessage = (props: Props) => {
       <Text size="xs">
         Would you like to load the sample data and indexes (from this{' '}
         <Link
-          variant="small-inline"
+          size="S"
+          variant="inline"
           color="subdued"
           onClick={onClickTutorial}
           data-testid="tutorial-initial-message-link"
diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx
@@ -19,7 +19,8 @@ export const ASSISTANCE_CHAT_AGREEMENTS = (
       By accessing and/or using Redis Copilot, you acknowledge that you agree to
       the{' '}
       <Link
-        variant="small-inline"
+        variant="inline"
+        size="S"
         color="subdued"
         target="_blank"
         href="https://redis.io/legal/redis-copilot-terms-of-use/"
@@ -28,7 +29,8 @@ export const ASSISTANCE_CHAT_AGREEMENTS = (
       </Link>{' '}
       and{' '}
       <Link
-        variant="small-inline"
+        variant="inline"
+        size="S"
         color="subdued"
         target="_blank"
         href="https://redis.com/legal/privacy-policy/"
@@ -57,7 +59,8 @@ export const EXPERT_CHAT_AGREEMENTS = (
       By accepting these terms, you consent to the processing of any information
       included in your database, and you agree to the{' '}
       <Link
-        variant="small-inline"
+        variant="inline"
+        size="S"
         color="subdued"
         target="_blank"
         href="https://redis.io/legal/redis-copilot-terms-of-use/"
@@ -66,7 +69,8 @@ export const EXPERT_CHAT_AGREEMENTS = (
       </Link>{' '}
       and{' '}
       <Link
-        variant="small-inline"
+        variant="inline"
+        size="S"
         color="subdued"
         target="_blank"
         href="https://redis.com/legal/privacy-policy/"
diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.spec.tsx
@@ -10,7 +10,7 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
-describe('CreateTutoralLink', () => {
+describe('CreateTutorialLink', () => {
   it('should render', () => {
     expect(render(<CreateTutorailLink />)).toBeTruthy()
   })
@@ -25,7 +25,7 @@ describe('CreateTutoralLink', () => {
 
     fireEvent.click(screen.getByTestId('read-more-link'))
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
       eventData: {
         databaseId: INSTANCE_ID_MOCK,
diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx
@@ -2,9 +2,11 @@ import React from 'react'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import {
   theme as redisUiOldTheme,
+  CommonStyles,
   themeLight,
   themeDark,
 } from '@redis-ui/styles'
+import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
 
@@ -94,7 +96,10 @@ export class ThemeProvider extends React.Component<Props> {
           changeTheme: this.changeTheme,
         }}
       >
-        <StyledThemeProvider theme={uiTheme}>{children}</StyledThemeProvider>
+        <StyledThemeProvider theme={uiTheme}>
+          <CommonStyles />
+          {children}
+        </StyledThemeProvider>
       </ThemeContext.Provider>
     )
   }
diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx
@@ -196,7 +196,8 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
     >
       <>
         <Link
-          variant="small-inline"
+          variant="inline"
+          size="S"
           href={getUtmExternalLink(
             'https://redis.io/commands/ft.create/#SCHEMA',
             {
diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndexWrapper.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndexWrapper.tsx
@@ -61,7 +61,8 @@ const CreateRedisearchIndexWrapper = ({
           Use CLI or Workbench to create more advanced indexes. See more details
           in the{' '}
           <Link
-            variant="small-inline"
+            variant="inline"
+            size="S"
             href={getUtmExternalLink('https://redis.io/commands/ft.create/', {
               campaign: 'browser_search',
             })}
diff --git a/redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.spec.tsx b/redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.spec.tsx
@@ -111,7 +111,7 @@ describe('ResultsLog', () => {
       within(screen.getByTestId('success-results-closed')).getByRole('button'),
     )
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.CONFIG_DATABASES_REDIS_IMPORT_LOG_VIEWED,
       eventData: {
         length: 1,
@@ -121,9 +121,11 @@ describe('ResultsLog', () => {
     ;(sendEventTelemetry as jest.Mock).mockRestore()
 
     fireEvent.click(
-      within(screen.getByTestId('success-results-open')).getByRole('button'),
+      within(screen.getByTestId('success-results-open')).getByTestId(
+        'ri-accordion-header-success-results-open',
+      ),
     )
 
-    expect(sendEventTelemetry).not.toBeCalled()
+    expect(sendEventTelemetry).not.toHaveBeenCalled()
   })
 })
diff --git a/redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.tsx b/redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.tsx
@@ -73,6 +73,7 @@ const ResultsLog = ({ data }: Props) => {
         }
         forceState={getNavGroupState(ResultsStatus.Success)}
         data-testid={`success-results-${getNavGroupState(ResultsStatus.Success)}`}
+        id={`success-results-${getNavGroupState(ResultsStatus.Success)}`}
       >
         <TableResult data={data?.success ?? []} />
       </RICollapsibleNavGroup>
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx
diff --git a/redisinsight/ui/src/styles/base/_typography.scss b/redisinsight/ui/src/styles/base/_typography.scss
diff --git a/redisinsight/ui/src/utils/formatters/markdown/remarkLink.ts b/redisinsight/ui/src/utils/formatters/markdown/remarkLink.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,7 @@ const CHSearchOutput = ({ searchedCommands }: Props) => {`
`90`	`90`	`handleClickCommand(e, command)`
`91`	`91`	`}}`
`92`	`92`	`>`
`93`		`- <UnderlineReverseLink color="text" variant="regular">`
	`93`	`+ <UnderlineReverseLink color="text" variant="button">`
`94`	`94`	`{command}`
`95`	`95`	`</UnderlineReverseLink>`
`96`	`96`	`</Text>`