Fe/feature/ri 7231 replace eui unify components style

.nvmrc

@@ -1 +1 @@
-22.11.0
+22

jest.config.cjs

@@ -13,6 +13,7 @@ module.exports = {
     '\\.scss\\?inline$': '<rootDir>/redisinsight/__mocks__/scssRaw.js',
     'uiSrc/slices/store$': '<rootDir>/redisinsight/ui/src/utils/test-store.ts',
     'uiSrc/(.*)': '<rootDir>/redisinsight/ui/src/$1',
+    'uiBase/(.*)': '<rootDir>/redisinsight/ui/src/components/base/$1',
     'apiSrc/(.*)': '<rootDir>/redisinsight/api/src/$1',
     '@redislabsdev/redis-ui-components': '@redis-ui/components',
     '@redislabsdev/redis-ui-styles': '@redis-ui/styles',

redisinsight/desktop/vite.renderer.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
     alias: {
       uiSrc: path.resolve(__dirname, '../ui/src'),
       apiSrc: path.resolve(__dirname, '../api/src'),
+      uiBase: path.resolve(__dirname, '../ui/src/components/base'),
     },
   },
   optimizeDeps: {

redisinsight/ui/src/App.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement, useEffect } from 'react'
 import { Provider, useSelector } from 'react-redux'
 
 import { Route, Switch } from 'react-router-dom'
+import { RiPage, RiPageBody } from 'uiBase/layout'
 import { store } from 'uiSrc/slices/store'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { removePagePlaceholder } from 'uiSrc/utils'
 import MonacoLanguages from 'uiSrc/components/monaco-laguages'
 import AppInit from 'uiSrc/components/init/AppInit'
-import { Page, PageBody } from 'uiSrc/components/base/layout/page'
 import { Pages, Theme } from './constants'
 import { themeService } from './services'
 import {
@@ -59,14 +59,14 @@ const App = ({ children }: { children?: ReactElement[] }) => {
           path="*"
           render={() => (
             <>
-              <Page className="main">
+              <RiPage className="main">
                 <GlobalDialogs />
                 <GlobalSubscriptions />
                 <NavigationMenu />
-                <PageBody component="main">
+                <RiPageBody component="main">
                   <MainComponent />
-                </PageBody>
-              </Page>
+                </RiPageBody>
+              </RiPage>
               <Notifications />
               <Config />
               <ShortcutsFlyout />

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
 
+import { RiTabs, TabInfo } from 'uiBase/layout'
+import { RiText } from 'uiBase/text'
 import { Pages } from 'uiSrc/constants'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import {
@@ -18,8 +20,6 @@ import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { OnboardingSteps } from 'uiSrc/constants/onboarding'
 import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
-import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
-import { Text } from 'uiSrc/components/base/text'
 
 const AnalyticsTabs = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
@@ -46,7 +46,7 @@ const AnalyticsTabs = () => {
         value: AnalyticsViewTab.DatabaseAnalysis,
         content: null,
         label: renderOnboardingTourWithChild(
-          <Text>Database Analysis</Text>,
+          <RiText>Database Analysis</RiText>,
           {
             options: ONBOARDING_FEATURES?.ANALYTICS_DATABASE_ANALYSIS,
             anchorPosition: 'downLeft',
@@ -59,7 +59,7 @@ const AnalyticsTabs = () => {
         value: AnalyticsViewTab.SlowLog,
         content: null,
         label: renderOnboardingTourWithChild(
-          <Text>Slow Log</Text>,
+          <RiText>Slow Log</RiText>,
           {
             options: ONBOARDING_FEATURES?.ANALYTICS_SLOW_LOG,
             anchorPosition: 'downLeft',
@@ -75,7 +75,7 @@ const AnalyticsTabs = () => {
         value: AnalyticsViewTab.ClusterDetails,
         content: null,
         label: renderOnboardingTourWithChild(
-          <Text>Overview</Text>,
+          <RiText>Overview</RiText>,
           {
             options: ONBOARDING_FEATURES?.ANALYTICS_OVERVIEW,
             anchorPosition: 'downLeft',
@@ -105,7 +105,7 @@ const AnalyticsTabs = () => {
   }
 
   return (
-    <Tabs
+    <RiTabs
       tabs={tabs}
       value={viewTab}
       onChange={handleTabChange}

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
+import { ChevronDownIcon, RefreshIcon, RiIcon } from 'uiBase/icons'
+import { RiIconButton } from 'uiBase/forms'
+import { RiColorText } from 'uiBase/text'
+import { RiSwitchInput } from 'uiBase/inputs'
+import { RiPopover, RiTooltip } from 'uiBase/index'
 import {
   errorValidateRefreshRateNumber,
   MIN_REFRESH_RATE,
@@ -10,11 +14,6 @@ import {
 import InlineItemEditor from 'uiSrc/components/inline-item-editor'
 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 {
   DEFAULT_REFRESH_RATE,
   DURATION_FIRST_REFRESH_TIME,
@@ -206,7 +205,7 @@ const AutoRefresh = ({
       })}
       data-testid={getDataTestid('auto-refresh-container')}
     >
-      <ColorText className={styles.summary}>
+      <RiColorText className={styles.summary}>
         {displayText && (
           <span data-testid={getDataTestid('refresh-message-label')}>
             {enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'}
@@ -222,7 +221,7 @@ const AutoRefresh = ({
             {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`}
           </span>
         )}
-      </ColorText>
+      </RiColorText>
 
       <RiTooltip
         title={!disabled && 'Last Refresh'}
@@ -231,7 +230,7 @@ const AutoRefresh = ({
         content={disabled ? disabledRefreshButtonMessage : refreshMessage}
         data-testid={getDataTestid('refresh-tooltip')}
       >
-        <IconButton
+        <RiIconButton
           size={iconSize}
           icon={RefreshIcon}
           disabled={loading || disabled}
@@ -255,7 +254,7 @@ const AutoRefresh = ({
         })}
         closePopover={closePopover}
         button={
-          <IconButton
+          <RiIconButton
             disabled={disabled}
             size="S"
             icon={ChevronDownIcon}
@@ -268,7 +267,7 @@ const AutoRefresh = ({
           />
         }
       >
-        <SwitchInput
+        <RiSwitchInput
           title="Auto Refresh"
           checked={enableAutoRefresh}
           onCheckedChange={onChangeEnableAutoRefresh}
@@ -278,7 +277,7 @@ const AutoRefresh = ({
         <div className={styles.inputContainer}>
           <div className={styles.inputLabel}>Refresh rate:</div>
           {!editingRate && (
-            <ColorText
+            <RiColorText
               color="subdued"
               className={styles.refreshRateText}
               onClick={() => setEditingRate(true)}
@@ -288,7 +287,7 @@ const AutoRefresh = ({
               <div className={styles.refreshRatePencil}>
                 <RiIcon type="EditIcon" />
               </div>
-            </ColorText>
+            </RiColorText>
           )}
           {editingRate && (
             <>
@@ -307,7 +306,7 @@ const AutoRefresh = ({
                   onApply={(value) => handleApplyAutoRefreshRate(value)}
                 />
               </div>
-              <ColorText color="subdued">{' s'}</ColorText>
+              <RiColorText color="subdued">{' s'}</RiColorText>
             </>
           )}
         </div>

redisinsight/ui/src/components/base/display/call-out/RiCallOut.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Banner } from '@redis-ui/components'
+
+export type CallOutProps = Omit<React.ComponentProps<typeof Banner>, 'show'> & {
+  children: React.ReactNode
+}
+
+export const RiCallOut = ({ children, ...rest }: CallOutProps) => (
+  <Banner
+    {...rest}
+    show
+    showIcon={false}
+    layoutVariant="banner"
+    message={children}
+  />
+)

redisinsight/ui/src/components/base/display/collapsible-nav-group/RICollapsibleNavGroup.tsx → redisinsight/ui/src/components/base/display/collapsible-nav-group/RiCollapsibleNavGroup.tsx

@@ -1,11 +1,8 @@
 import React, { ReactNode } from 'react'
 import cx from 'classnames'
-import {
-  RiAccordion,
-  RiAccordionProps,
-} from 'uiSrc/components/base/display/accordion/RiAccordion'
+import { RiAccordion, RiAccordionProps } from 'uiBase/display'
 
-export type RICollapsibleNavGroupProps = Omit<
+export type RiCollapsibleNavGroupProps = Omit<
   RiAccordionProps,
   'collapsible' | 'content' | 'defaultOpen' | 'title' | 'label'
 > & {
@@ -17,7 +14,7 @@ export type RICollapsibleNavGroupProps = Omit<
   onToggle?: (isOpen: boolean) => void
   forceState?: 'open' | 'closed'
 }
-export const RICollapsibleNavGroup = ({
+export const RiCollapsibleNavGroup = ({
   children,
   title,
   isCollapsible = true,
@@ -27,7 +24,7 @@ export const RICollapsibleNavGroup = ({
   forceState,
   open,
   ...rest
-}: RICollapsibleNavGroupProps) => (
+}: RiCollapsibleNavGroupProps) => (
   <RiAccordion
     {...rest}
     collapsible={isCollapsible}

redisinsight/ui/src/components/base/display/image/RiImage.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { RiImageProps, StyledImage } from './image.styles'
 
-const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => (
+export const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => (
   <StyledImage src={src} alt={alt} $size={$size} {...rest} />
 )
-
-export default RiImage

redisinsight/ui/src/components/base/display/index.ts

@@ -1,11 +1,19 @@
-import Loader from './loader/Loader'
-import ProgressBarLoader from './progress-bar/ProgressBarLoader'
-import RiImage from './image/RiImage'
-import RiLoadingLogo from './loading-logo/RiLoadingLogo'
-import { Modal } from './modal'
+export { RiAccordion } from './accordion/RiAccordion'
+export type { RiAccordionProps } from './accordion/RiAccordion'
+export { RiBadge } from './badge/RiBadge'
+export { RiCallOut } from './call-out/RiCallOut'
+export { RiCollapsibleNavGroup } from './collapsible-nav-group/RiCollapsibleNavGroup'
+export { RiImage } from './image/RiImage'
+export { RiLoader } from './loader/RiLoader'
+export { RiLoadingLogo } from './loading-logo/RiLoadingLogo'
+export { RiModal } from './modal'
+export { RiProgressBarLoader } from './progress-bar/RiProgressBarLoader'
+export { RiToast, riToast } from './toast/RiToast'
+export { RiToaster } from './toast/RiToaster'
+export { RiTourStep } from './tour/RiTourStep'
+export { RiLink } from './link/RiLink'
+export { UserProfileLink } from './link/UserProfileLink'
+export * from './popover'
+export * from './tooltip'
 
-export { Loader, ProgressBarLoader, RiImage, RiLoadingLogo, Modal }
-
-export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
-
-export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'
+export type { RiCollapsibleNavGroupProps } from './collapsible-nav-group/RiCollapsibleNavGroup'

redisinsight/ui/src/components/base/display/link/RiLink.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { LinkProps } from '@redis-ui/components'
+import { StyledLink } from './link.styles'
+
+export const RiLink = ({ color, ...props }: LinkProps) => (
+  <StyledLink {...props} $color={color} />
+)

redisinsight/ui/src/components/base/link/UserProfileLink.tsx → redisinsight/ui/src/components/base/display/link/UserProfileLink.tsx

@@ -1,8 +1,8 @@
-import styled from "styled-components"
-import { useTheme } from "@redis-ui/styles"
-import { Link } from "./Link"
+import styled from 'styled-components'
+import { useTheme } from '@redis-ui/styles'
+import { RiLink } from './RiLink'
 
-export const UserProfileLink = styled(Link)`
+export const UserProfileLink = styled(RiLink)`
   padding: 8px 12px !important;
   width: 100%;
   color: ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
@@ -12,7 +12,7 @@ export const UserProfileLink = styled(Link)`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme }: { theme: ReturnType<typeof useTheme> }) =>
-    theme.color.gray400};
+        theme.color.gray400};
   }
 
   span {

redisinsight/ui/src/components/base/display/loader/RiLoader.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentProps } from 'react'
+
+import { Loader as RedisLoader } from '@redis-ui/components'
+import { useTheme, theme } from '@redis-ui/styles'
+
+type Space = typeof theme.core.space
+
+export type RedisLoaderProps = ComponentProps<typeof RedisLoader>
+
+const convertSizeToPx = (tShirtSize: string, space: Space) => {
+  switch (tShirtSize.toLowerCase()) {
+    case 's':
+      return space.space050
+    case 'm':
+      return space.space100
+    case 'l':
+      return space.space250
+    case 'xl':
+      return space.space300
+    default:
+      return space.space100
+  }
+}
+
+export const RiLoader = ({ size, ...rest }: RedisLoaderProps) => {
+  const theme = useTheme()
+  const { space } = theme.core
+  const sizeInPx = size ? convertSizeToPx(size, space) : space.space100
+  return <RedisLoader size={sizeInPx} {...rest} />
+}

redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx

@@ -35,7 +35,7 @@ const BouncingLogo = styled.img<RiLoadingLogoProps>`
     infinite;
 `
 
-const RiLoadingLogo = ({
+export const RiLoadingLogo = ({
   src,
   $size = 'XL',
   $bounceSpeed = 1,
@@ -50,5 +50,3 @@ const RiLoadingLogo = ({
     />
   </Wrapper>
 )
-
-export default RiLoadingLogo

redisinsight/ui/src/components/base/display/modal/index.ts

@@ -1 +1 @@
-export { Modal } from '@redis-ui/components'
+export { Modal as RiModal } from '@redis-ui/components'