diff --git a/.nvmrc b/.nvmrc index fdb2eaaff0..2bd5a0a98a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -22.11.0 \ No newline at end of file +22 diff --git a/jest.config.cjs b/jest.config.cjs index e2b2decde8..ce76e73784 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -13,6 +13,7 @@ module.exports = { '\\.scss\\?inline$': '/redisinsight/__mocks__/scssRaw.js', 'uiSrc/slices/store$': '/redisinsight/ui/src/utils/test-store.ts', 'uiSrc/(.*)': '/redisinsight/ui/src/$1', + 'uiBase/(.*)': '/redisinsight/ui/src/components/base/$1', 'apiSrc/(.*)': '/redisinsight/api/src/$1', '@redislabsdev/redis-ui-components': '@redis-ui/components', '@redislabsdev/redis-ui-styles': '@redis-ui/styles', diff --git a/redisinsight/desktop/vite.renderer.config.ts b/redisinsight/desktop/vite.renderer.config.ts index e5b0d1603e..470eb08b15 100644 --- a/redisinsight/desktop/vite.renderer.config.ts +++ b/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: { diff --git a/redisinsight/ui/src/App.tsx b/redisinsight/ui/src/App.tsx index 8f4a787b2a..302ab187d6 100644 --- a/redisinsight/ui/src/App.tsx +++ b/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={() => ( <> - + - + - - + + diff --git a/redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx b/redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx index 3e16ffc3d2..ccab0aef97 100644 --- a/redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx +++ b/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( - Database Analysis, + Database Analysis, { options: ONBOARDING_FEATURES?.ANALYTICS_DATABASE_ANALYSIS, anchorPosition: 'downLeft', @@ -59,7 +59,7 @@ const AnalyticsTabs = () => { value: AnalyticsViewTab.SlowLog, content: null, label: renderOnboardingTourWithChild( - Slow Log, + Slow Log, { options: ONBOARDING_FEATURES?.ANALYTICS_SLOW_LOG, anchorPosition: 'downLeft', @@ -75,7 +75,7 @@ const AnalyticsTabs = () => { value: AnalyticsViewTab.ClusterDetails, content: null, label: renderOnboardingTourWithChild( - Overview, + Overview, { options: ONBOARDING_FEATURES?.ANALYTICS_OVERVIEW, anchorPosition: 'downLeft', @@ -105,7 +105,7 @@ const AnalyticsTabs = () => { } return ( - - + {displayText && ( {enableAutoRefresh ? 'Auto refresh:' : 'Last refresh:'} @@ -222,7 +221,7 @@ const AutoRefresh = ({ {` ${enableAutoRefresh ? refreshRateMessage : refreshMessage}`} )} - + - } > -
Refresh rate:
{!editingRate && ( - setEditingRate(true)} @@ -288,7 +287,7 @@ const AutoRefresh = ({
- + )} {editingRate && ( <> @@ -307,7 +306,7 @@ const AutoRefresh = ({ onApply={(value) => handleApplyAutoRefreshRate(value)} /> - {' s'} + {' s'} )} diff --git a/redisinsight/ui/src/components/base/display/call-out/RiCallOut.tsx b/redisinsight/ui/src/components/base/display/call-out/RiCallOut.tsx new file mode 100644 index 0000000000..a79ad7f54e --- /dev/null +++ b/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, 'show'> & { + children: React.ReactNode +} + +export const RiCallOut = ({ children, ...rest }: CallOutProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/display/collapsible-nav-group/RICollapsibleNavGroup.tsx b/redisinsight/ui/src/components/base/display/collapsible-nav-group/RiCollapsibleNavGroup.tsx similarity index 77% rename from redisinsight/ui/src/components/base/display/collapsible-nav-group/RICollapsibleNavGroup.tsx rename to redisinsight/ui/src/components/base/display/collapsible-nav-group/RiCollapsibleNavGroup.tsx index e709e2815e..0d366ff69f 100644 --- a/redisinsight/ui/src/components/base/display/collapsible-nav-group/RICollapsibleNavGroup.tsx +++ b/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) => ( ( +export const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => ( ) - -export default RiImage diff --git a/redisinsight/ui/src/components/base/display/index.ts b/redisinsight/ui/src/components/base/display/index.ts index fa2655349b..5cdbc12b02 100644 --- a/redisinsight/ui/src/components/base/display/index.ts +++ b/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' diff --git a/redisinsight/ui/src/components/base/display/link/RiLink.tsx b/redisinsight/ui/src/components/base/display/link/RiLink.tsx new file mode 100644 index 0000000000..7c62ccf4a8 --- /dev/null +++ b/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) => ( + +) diff --git a/redisinsight/ui/src/components/base/link/UserProfileLink.tsx b/redisinsight/ui/src/components/base/display/link/UserProfileLink.tsx similarity index 72% rename from redisinsight/ui/src/components/base/link/UserProfileLink.tsx rename to redisinsight/ui/src/components/base/display/link/UserProfileLink.tsx index d66c4d6571..d12b98d418 100644 --- a/redisinsight/ui/src/components/base/link/UserProfileLink.tsx +++ b/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 }) => @@ -12,7 +12,7 @@ export const UserProfileLink = styled(Link)` &:not(:last-child) { border-bottom: 1px solid ${({ theme }: { theme: ReturnType }) => - theme.color.gray400}; + theme.color.gray400}; } span { diff --git a/redisinsight/ui/src/components/base/link/link.styles.ts b/redisinsight/ui/src/components/base/display/link/link.styles.ts similarity index 100% rename from redisinsight/ui/src/components/base/link/link.styles.ts rename to redisinsight/ui/src/components/base/display/link/link.styles.ts diff --git a/redisinsight/ui/src/components/base/display/loader/RiLoader.tsx b/redisinsight/ui/src/components/base/display/loader/RiLoader.tsx new file mode 100644 index 0000000000..c8fb6a0e25 --- /dev/null +++ b/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 + +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 +} diff --git a/redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx b/redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx index b19e0c5c54..68d98df0d8 100644 --- a/redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx +++ b/redisinsight/ui/src/components/base/display/loading-logo/RiLoadingLogo.tsx @@ -35,7 +35,7 @@ const BouncingLogo = styled.img` infinite; ` -const RiLoadingLogo = ({ +export const RiLoadingLogo = ({ src, $size = 'XL', $bounceSpeed = 1, @@ -50,5 +50,3 @@ const RiLoadingLogo = ({ /> ) - -export default RiLoadingLogo diff --git a/redisinsight/ui/src/components/base/display/modal/index.ts b/redisinsight/ui/src/components/base/display/modal/index.ts index 9dddb54111..cd5b3db6ef 100644 --- a/redisinsight/ui/src/components/base/display/modal/index.ts +++ b/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' diff --git a/redisinsight/ui/src/components/base/display/popover/RiPopover.tsx b/redisinsight/ui/src/components/base/display/popover/RiPopover.tsx new file mode 100644 index 0000000000..37bf118ba1 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/popover/RiPopover.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { Popover } from '@redis-ui/components' + +import { RiPopoverProps } from './types' +import { anchorPositionMap, panelPaddingSizeMap } from './config' + +export const RiPopover = ({ + isOpen, + closePopover, + children, + ownFocus, + button, + anchorPosition, + panelPaddingSize, + anchorClassName, + panelClassName, + maxWidth = '100%', + ...props +}: RiPopoverProps) => ( + + {button} + +) diff --git a/redisinsight/ui/src/components/base/display/popover/config.ts b/redisinsight/ui/src/components/base/display/popover/config.ts new file mode 100644 index 0000000000..90f54694bf --- /dev/null +++ b/redisinsight/ui/src/components/base/display/popover/config.ts @@ -0,0 +1,57 @@ +export const anchorPositionMap = { + upCenter: { + placement: 'top', + align: 'center', + }, + upLeft: { + placement: 'top', + align: 'start', + }, + upRight: { + placement: 'top', + align: 'end', + }, + downCenter: { + placement: 'bottom', + align: 'center', + }, + downLeft: { + placement: 'bottom', + align: 'start', + }, + downRight: { + placement: 'bottom', + align: 'end', + }, + leftCenter: { + placement: 'left', + align: 'center', + }, + leftUp: { + placement: 'left', + align: 'start', + }, + leftDown: { + placement: 'left', + align: 'end', + }, + rightCenter: { + placement: 'right', + align: 'center', + }, + rightUp: { + placement: 'right', + align: 'start', + }, + rightDown: { + placement: 'right', + align: 'end', + }, +} as const + +export const panelPaddingSizeMap = { + l: 24, + m: 18, + s: 8, + none: 0, +} as const diff --git a/redisinsight/ui/src/components/base/display/popover/index.tsx b/redisinsight/ui/src/components/base/display/popover/index.tsx new file mode 100644 index 0000000000..694e5ad24f --- /dev/null +++ b/redisinsight/ui/src/components/base/display/popover/index.tsx @@ -0,0 +1,2 @@ +export { RiPopover } from './RiPopover' +export type { RiPopoverProps } from './types' diff --git a/redisinsight/ui/src/components/base/display/popover/types.ts b/redisinsight/ui/src/components/base/display/popover/types.ts new file mode 100644 index 0000000000..f25792706f --- /dev/null +++ b/redisinsight/ui/src/components/base/display/popover/types.ts @@ -0,0 +1,28 @@ +import { type PopoverProps } from '@redis-ui/components' + +import { anchorPositionMap, panelPaddingSizeMap } from './config' + +type AnchorPosition = keyof typeof anchorPositionMap + +type PanelPaddingSize = keyof typeof panelPaddingSizeMap + +export type RiPopoverProps = Omit< + PopoverProps, + | 'open' + | 'onClickOutside' + | 'autoFocus' + | 'content' + | 'className' + | 'placement' + | 'align' +> & { + isOpen?: PopoverProps['open'] + closePopover?: PopoverProps['onClickOutside'] + ownFocus?: PopoverProps['autoFocus'] + button: PopoverProps['content'] + anchorPosition?: AnchorPosition + panelPaddingSize?: PanelPaddingSize + anchorClassName?: string + panelClassName?: string + 'data-testid'?: string +} diff --git a/redisinsight/ui/src/components/base/display/progress-bar/RiProgressBarLoader.tsx b/redisinsight/ui/src/components/base/display/progress-bar/RiProgressBarLoader.tsx new file mode 100644 index 0000000000..85083a8315 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/progress-bar/RiProgressBarLoader.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { + LoaderBar, + ProgressBarLoaderProps, + LoaderContainer, +} from './progress-bar-loader.styles' + +export const RiProgressBarLoader = ({ + className, + style, + color, + ...rest +}: ProgressBarLoaderProps) => ( + + + +) diff --git a/redisinsight/ui/src/components/base/display/toast/RiToast.tsx b/redisinsight/ui/src/components/base/display/toast/RiToast.tsx index 9d0f691b91..6d2b8e04ca 100644 --- a/redisinsight/ui/src/components/base/display/toast/RiToast.tsx +++ b/redisinsight/ui/src/components/base/display/toast/RiToast.tsx @@ -6,9 +6,9 @@ import { ToastOptions, } from '@redis-ui/components' import styled from 'styled-components' -import { CommonProps, Theme } from 'uiSrc/components/base/theme/types' -import { CancelIcon } from 'uiSrc/components/base/icons' -import { ColorText } from 'uiSrc/components/base/text' +import { CommonProps, Theme } from 'uiBase/theme/types' +import { CancelIcon } from 'uiBase/icons' +import { RiColorText } from 'uiBase/text' type RiToastProps = React.ComponentProps export const RiToast = (props: RiToastProps) => @@ -36,9 +36,9 @@ export const riToast = ( color = 'subdued' } toastContent.message = ( - + {message} - + ) } else { toastContent.message = message diff --git a/redisinsight/ui/src/components/base/display/tooltip/HoverContent.tsx b/redisinsight/ui/src/components/base/display/tooltip/HoverContent.tsx new file mode 100644 index 0000000000..4a61c5c20e --- /dev/null +++ b/redisinsight/ui/src/components/base/display/tooltip/HoverContent.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +import { RiCol } from 'uiBase/layout' +import { RiTitle } from 'uiBase/text' + +interface RiTooltipContentProps { + title?: React.ReactNode + content: React.ReactNode +} + +export const HoverContent = ({ title, content }: RiTooltipContentProps) => ( + + {title && {title}} + {content} + +) diff --git a/redisinsight/ui/src/components/base/display/tooltip/RITooltip.tsx b/redisinsight/ui/src/components/base/display/tooltip/RITooltip.tsx new file mode 100644 index 0000000000..1cab839e0c --- /dev/null +++ b/redisinsight/ui/src/components/base/display/tooltip/RITooltip.tsx @@ -0,0 +1,35 @@ +import React from 'react' + +import { TooltipProvider, Tooltip, TooltipProps } from '@redis-ui/components' +import { HoverContent } from './HoverContent' + +export interface RiTooltipProps + extends Omit { + title?: React.ReactNode + position?: TooltipProps['placement'] + delay?: TooltipProps['openDelayDuration'] + anchorClassName?: string +} + +export const RiTooltip = ({ + children, + title, + content, + position, + delay, + anchorClassName, + ...props +}: RiTooltipProps) => ( + + + } + placement={position} + openDelayDuration={delay} + > + {children} + + +) diff --git a/redisinsight/ui/src/components/base/display/tooltip/RiTooltip.spec.tsx b/redisinsight/ui/src/components/base/display/tooltip/RiTooltip.spec.tsx new file mode 100644 index 0000000000..75c4b9bc76 --- /dev/null +++ b/redisinsight/ui/src/components/base/display/tooltip/RiTooltip.spec.tsx @@ -0,0 +1,193 @@ +import React from 'react' +import { fireEvent, screen, act } from '@testing-library/react' +import { render, waitForRiTooltipVisible } from 'uiSrc/utils/test-utils' +import { RiTooltip, RiTooltipProps } from './RITooltip' + +const TestButton = () => ( + +) + +const defaultProps: RiTooltipProps = { + children: , + content: 'Test tooltip content', +} + +describe('RiTooltip', () => { + it('should render', () => { + expect(render()).toBeTruthy() + }) + + it('should render children', () => { + render() + + expect(screen.getByTestId('tooltip-trigger')).toBeInTheDocument() + }) + + it('should render tooltip content on focus', async () => { + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + expect(screen.getAllByText('Test tooltip content')[0]).toBeInTheDocument() + }) + + it('should render tooltip with title and content', async () => { + render( + , + ) + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + expect(screen.getAllByText('Test Title')[0]).toBeInTheDocument() + expect(screen.getAllByText('Test content')[0]).toBeInTheDocument() + }) + + it('should render tooltip with only content when title is not provided', async () => { + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + expect(screen.getAllByText('Only content')[0]).toBeInTheDocument() + expect(screen.queryByRole('heading')).not.toBeInTheDocument() + }) + + it('should not render tooltip when content and title are not provided', async () => { + render( + + + , + ) + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + + // Wait a bit to ensure tooltip doesn't appear + await new Promise((resolve) => setTimeout(resolve, 100)) + + expect(screen.queryByText('Test Title')).not.toBeInTheDocument() + }) + + it('should apply anchorClassName to the wrapper span', () => { + render( + , + ) + + const wrapper = screen.getAllByTestId('tooltip-trigger')[0].parentElement + expect(wrapper).toHaveClass('custom-anchor-class') + }) + + it('should render with React node as title', async () => { + const titleNode = Custom Title Node + + render( + , + ) + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + expect(screen.getAllByTestId('custom-title')[0]).toBeInTheDocument() + expect(screen.getAllByText('Test content')[0]).toBeInTheDocument() + }) + + it('should render with React node as content', async () => { + const contentNode = ( +
+

Custom content with HTML

+ +
+ ) + + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + expect( + screen.getAllByTestId('tooltip-custom-content')[0], + ).toBeInTheDocument() + expect( + screen.getAllByText('Custom content with HTML')[0], + ).toBeInTheDocument() + expect( + screen.getAllByRole('button', { name: 'Hover me' })[0], + ).toBeInTheDocument() + }) + + it('should pass through additional props to underlying Tooltip component', async () => { + render( + , + ) + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + await waitForRiTooltipVisible() + + // The tooltip should be rendered (testing that props are passed through) + expect(screen.getAllByText('Test tooltip content')[0]).toBeInTheDocument() + }) + + it('should handle empty string content', async () => { + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + + // Wait a bit to ensure tooltip doesn't appear + await new Promise((resolve) => setTimeout(resolve, 100)) + + // Should not render tooltip for empty content + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + }) + + it('should handle null content', async () => { + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + + // Wait a bit to ensure tooltip doesn't appear + await new Promise((resolve) => setTimeout(resolve, 100)) + + // Should not render tooltip for null content + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + }) + + it('should handle undefined content', async () => { + render() + + await act(async () => { + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + }) + + // Wait a bit to ensure tooltip doesn't appear + await new Promise((resolve) => setTimeout(resolve, 100)) + + // Should not render tooltip for undefined content + expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() + }) +}) diff --git a/redisinsight/ui/src/components/base/display/tooltip/index.tsx b/redisinsight/ui/src/components/base/display/tooltip/index.tsx new file mode 100644 index 0000000000..9713650d2c --- /dev/null +++ b/redisinsight/ui/src/components/base/display/tooltip/index.tsx @@ -0,0 +1 @@ +export * from './RITooltip' diff --git a/redisinsight/ui/src/components/base/display/tour/TourStep.tsx b/redisinsight/ui/src/components/base/display/tour/RiTourStep.tsx similarity index 89% rename from redisinsight/ui/src/components/base/display/tour/TourStep.tsx rename to redisinsight/ui/src/components/base/display/tour/RiTourStep.tsx index 0edea1b780..5767bd116f 100644 --- a/redisinsight/ui/src/components/base/display/tour/TourStep.tsx +++ b/redisinsight/ui/src/components/base/display/tour/RiTourStep.tsx @@ -1,10 +1,8 @@ import React, { useEffect, useState } from 'react' import { Popover } from '@redis-ui/components' -import { - PopoverPlacementMapType, - TourStepProps, -} from 'uiSrc/components/base/display/tour/types' -import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id' + +import { useGenerateId } from 'uiBase/utils' +import { PopoverPlacementMapType, TourStepProps } from './types' const popoverPlacementMap: PopoverPlacementMapType = { upCenter: { @@ -57,11 +55,10 @@ const popoverPlacementMap: PopoverPlacementMapType = { }, } -export const TourStep = ({ +export const RiTourStep = ({ open, content, title, - onClose, placement = 'rightUp', className = '', children, diff --git a/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx b/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx index 664407feef..7654db42cd 100644 --- a/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx +++ b/redisinsight/ui/src/components/base/external-link/ExternalLink.tsx @@ -1,8 +1,7 @@ import React from 'react' import { EuiLinkProps } from '@elastic/eui/src/components/link/link' -import { IconProps } from 'uiSrc/components/base/icons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { Link } from 'uiSrc/components/base/link/Link' +import { IconProps, RiIcon } from 'uiBase/icons' +import { RiLink } from 'uiBase/display' export type Props = EuiLinkProps & { href: string @@ -18,11 +17,11 @@ const ExternalLink = (props: Props) => { ) return ( - + {iconPosition === 'left' && } {children} {iconPosition === 'right' && } - + ) } diff --git a/redisinsight/ui/src/components/base/forms/RiFormField.tsx b/redisinsight/ui/src/components/base/forms/RiFormField.tsx new file mode 100644 index 0000000000..52245effea --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/RiFormField.tsx @@ -0,0 +1,21 @@ +import React, { ComponentProps } from 'react' +import { + FormField as RedisFormField, + TooltipProvider, +} from '@redis-ui/components' + +export type RedisFormFieldProps = ComponentProps & { + infoIconProps?: any +} + +export function RiFormField(props: RedisFormFieldProps) { + // eslint-disable-next-line react/destructuring-assignment + if (props.infoIconProps) { + return ( + + + + ) + } + return +} diff --git a/redisinsight/ui/src/components/base/forms/button-group/RiButtonGroup.tsx b/redisinsight/ui/src/components/base/forms/button-group/RiButtonGroup.tsx new file mode 100644 index 0000000000..c2c76d0896 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/button-group/RiButtonGroup.tsx @@ -0,0 +1,5 @@ +import { ButtonGroupProps } from '@redis-ui/components' + +export { ButtonGroup as RiButtonGroup } from '@redis-ui/components' + +export type { ButtonGroupProps } diff --git a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx index 357104278f..44990ba010 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/Button.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/Button.tsx @@ -1,7 +1,7 @@ -import { Button } from '@redis-ui/components' import React from 'react' -import { LoaderLargeIcon } from 'uiSrc/components/base/icons' -import { BaseButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' +import { Button } from '@redis-ui/components' +import { LoaderLargeIcon } from 'uiBase/icons' +import { BaseButtonProps } from './button.styles' type ButtonSize = 'small' | 'medium' | 'large' type SizeKey = 'small' | 's' | 'medium' | 'm' | 'large' | 'l' diff --git a/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx deleted file mode 100644 index 011181b531..0000000000 --- a/redisinsight/ui/src/components/base/forms/buttons/DestructiveButton.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { ButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' -import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' - -export const DestructiveButton = (props: ButtonProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx deleted file mode 100644 index 1caae3167d..0000000000 --- a/redisinsight/ui/src/components/base/forms/buttons/PrimaryButton.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' -import { ButtonProps } from 'uiSrc/components/base/forms/buttons/button.styles' - -export const PrimaryButton = (props: ButtonProps) => ( - -) diff --git a/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiActionIconButton.tsx similarity index 79% rename from redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx rename to redisinsight/ui/src/components/base/forms/buttons/RiActionIconButton.tsx index 06329b8c7c..162f990042 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/ActionIconButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/RiActionIconButton.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ActionIconButton as RedisUiActionIconButton } from '@redis-ui/components' export type ButtonProps = React.ComponentProps -export const ActionIconButton = (props: ButtonProps) => ( + +export const RiActionIconButton = (props: ButtonProps) => ( ) diff --git a/redisinsight/ui/src/components/base/forms/buttons/RiDestructiveButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiDestructiveButton.tsx new file mode 100644 index 0000000000..44b66ab8ca --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/RiDestructiveButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { ButtonProps } from './button.styles' +import { BaseButton } from './Button' + +export const RiDestructiveButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiEmptyButton.tsx similarity index 76% rename from redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx rename to redisinsight/ui/src/components/base/forms/buttons/RiEmptyButton.tsx index 4f04342dd3..f8c994dcc1 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/RiEmptyButton.tsx @@ -1,8 +1,9 @@ import React from 'react' import { TextButton } from '@redis-ui/components' -import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button' -import { IconType } from 'uiSrc/components/base/icons' -import { Row } from '../../layout/flex' +import { IconType } from 'uiBase/icons' + +import { RiRow } from 'uiBase/layout' +import { ButtonIcon } from './Button' import { FlexProps } from '../../layout/flex/flex.styles' export type ButtonProps = React.ComponentProps & { @@ -12,7 +13,7 @@ export type ButtonProps = React.ComponentProps & { size?: 'small' | 'large' | 'medium' justify?: FlexProps['justify'] } -export const EmptyButton = ({ +export const RiEmptyButton = ({ children, icon, iconSide = 'left', @@ -22,9 +23,7 @@ export const EmptyButton = ({ ...rest }: ButtonProps) => ( - + - + ) diff --git a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiIconButton.tsx similarity index 71% rename from redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx rename to redisinsight/ui/src/components/base/forms/buttons/RiIconButton.tsx index babf62f395..0d3d04b739 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/RiIconButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import { IconButton as RedisUiIconButton } from '@redis-ui/components' -import * as Icons from 'uiSrc/components/base/icons/iconRegistry' -import { AllIconsType } from 'uiSrc/components/base/icons' +import * as Icons from 'uiBase/icons/iconRegistry' +import { AllIconsType } from 'uiBase/icons' export type ButtonProps = React.ComponentProps @@ -9,7 +9,8 @@ export type IconType = ButtonProps['icon'] export type IconButtonProps = Omit & { icon: IconType | string } -export const IconButton = ({ icon, size, ...props }: IconButtonProps) => { + +export const RiIconButton = ({ icon, size, ...props }: IconButtonProps) => { let buttonIcon: IconType if (typeof icon === 'string') { buttonIcon = Icons[icon as AllIconsType] diff --git a/redisinsight/ui/src/components/base/forms/buttons/RiPrimaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiPrimaryButton.tsx new file mode 100644 index 0000000000..81108e906a --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/buttons/RiPrimaryButton.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { BaseButton } from './Button' +import { ButtonProps } from './button.styles' + +export const RiPrimaryButton = (props: ButtonProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/RiSecondaryButton.tsx similarity index 61% rename from redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx rename to redisinsight/ui/src/components/base/forms/buttons/RiSecondaryButton.tsx index 978dd46c9c..803e0ef0d2 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/SecondaryButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/RiSecondaryButton.tsx @@ -1,11 +1,8 @@ import React from 'react' -import { - BaseButtonProps, - SecondaryButtonProps, -} from 'uiSrc/components/base/forms/buttons/button.styles' -import { BaseButton } from 'uiSrc/components/base/forms/buttons/Button' +import { BaseButtonProps, SecondaryButtonProps } from './button.styles' +import { BaseButton } from './Button' -export const SecondaryButton = ({ +export const RiSecondaryButton = ({ filled = false, inverted, ...props diff --git a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts index 4890bbb51c..c2b10ecfcb 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts +++ b/redisinsight/ui/src/components/base/forms/buttons/button.styles.ts @@ -1,7 +1,7 @@ import React from 'react' import { Button } from '@redis-ui/components' import { buttonSizes } from '@redis-ui/components/dist/Button/Button.types' -import { IconType } from 'uiSrc/components/base/icons' +import { IconType } from 'uiBase/icons' export type BaseButtonProps = Omit< React.ComponentProps, diff --git a/redisinsight/ui/src/components/base/forms/buttons/index.ts b/redisinsight/ui/src/components/base/forms/buttons/index.ts index 6500e979e0..844dfef41d 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/index.ts +++ b/redisinsight/ui/src/components/base/forms/buttons/index.ts @@ -1,9 +1,9 @@ -export { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton' -export { BaseButton as Button } from 'uiSrc/components/base/forms/buttons/Button' -export { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton' -export { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton' -export { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' -export { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton' -export { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton' +export { RiActionIconButton } from './RiActionIconButton' +export { BaseButton as Button } from './Button' +export { RiDestructiveButton } from './RiDestructiveButton' +export { RiEmptyButton } from './RiEmptyButton' +export { RiIconButton } from './RiIconButton' +export { RiPrimaryButton } from './RiPrimaryButton' +export { RiSecondaryButton } from './RiSecondaryButton' -export type { IconType } from 'uiSrc/components/base/forms/buttons/IconButton' +export type { IconType } from './RiIconButton' diff --git a/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx index 7372f3e7c0..369b64cf94 100644 --- a/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx +++ b/redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx @@ -1,36 +1,36 @@ import React from 'react' import { fireEvent } from '@testing-library/react' import { render, screen } from 'uiSrc/utils/test-utils' -import { Checkbox } from './Checkbox' +import { RiCheckbox } from './RiCheckbox' describe('Checkbox', () => { it('Should render checkbox', () => { - render() + render() expect(screen.getByText('Checkbox Label')).toBeInTheDocument() }) describe('Checkbox states', () => { it('Should render disabled checkbox when disabled prop is passed', () => { - render() + render() expect(screen.getByRole('checkbox')).toBeDisabled() }) it('Should render un-checked checkbox when checked prop is passed as false', () => { - render() + render() const checkbox = screen.getByRole('checkbox') expect(checkbox).toHaveAttribute('aria-checked', 'false') }) it('Should render checked checkbox when checked prop is passed as true', () => { - render() + render() const checkbox = screen.getByRole('checkbox') expect(checkbox).toHaveAttribute('aria-checked', 'true') }) it('Should render indeterminate checkbox when checked prop is passed as indeterminate', () => { render( - , + , ) const checkbox = screen.getByRole('checkbox') @@ -44,7 +44,7 @@ describe('Checkbox', () => { const onChange = jest.fn() const onCheckedChange = jest.fn() render( - { const onChange = jest.fn() const onCheckedChange = jest.fn() render( - { expect(onCheckedChange).toHaveBeenCalledWith(false) }) it('Should change state when clicked', () => { - render() + render() const checkbox = screen.getByRole('checkbox') expect(checkbox).toHaveAttribute('aria-checked', 'true') fireEvent.click(checkbox) diff --git a/redisinsight/ui/src/components/base/forms/checkbox/RiCheckbox.tsx b/redisinsight/ui/src/components/base/forms/checkbox/RiCheckbox.tsx new file mode 100644 index 0000000000..fa60a42c51 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/checkbox/RiCheckbox.tsx @@ -0,0 +1,82 @@ +import React, { ChangeEvent } from 'react' +import { + Checkbox as RedisUiCheckbox, + CheckedType, + Typography, +} from '@redis-ui/components' +import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types' + +type Size = BodySizesType + +export type CheckboxProps = Omit< + React.ComponentProps, + 'onChange' +> & { + onCheckedChange?: (checked: CheckedType) => void + onChange?: (e: ChangeEvent) => void + name?: string + id?: string + labelSize?: Size +} + +type CheckboxLabelProps = Omit< + React.ComponentProps, + 'children' | 'component' +> & { + children: React.ReactNode +} + +const CheckboxLabel = ({ children, ...rest }: CheckboxLabelProps) => { + if (typeof children !== 'string') { + return <>{children} + } + return ( + + {children} + + ) +} + +export const RiCheckbox = ({ + onChange, + onCheckedChange, + id, + label, + labelSize = 'S', + ...rest +}: CheckboxProps) => { + /** + * Handles the change event for a checkbox input and notifies the relevant handlers. + * + * This is added to provide compatibility with the `onChange` handler expected by the Formik library. + * Constructs a synthetic event object designed to mimic a React checkbox change event. + * Updates the `checked` status and passes the constructed event to the `onChange` handler + * if provided. Additionally, invokes the `onCheckedChange` handler with the new `checked` state + * if it is defined. + * + * @param {CheckedType} checked - The new checked state of the checkbox. It is expected to + * be a boolean-like value where `true` indicates checked and any other value + * indicates unchecked. + */ + const handleCheckedChange = (checked: CheckedType) => { + const syntheticEvent = { + target: { + checked: checked === true, + type: 'checkbox', + name: rest.name, + id, + }, + } as React.ChangeEvent + onChange?.(syntheticEvent) + onCheckedChange?.(checked) + } + + return ( + {label}} + /> + ) +} diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx index e05c0df3aa..cb12730cf4 100644 --- a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx +++ b/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.spec.tsx @@ -1,7 +1,7 @@ -import { getTagFromValue } from 'uiSrc/components/base/forms/combo-box/AutoTag' +import { getTagFromValue } from './RiAutoTag' const defaultDelimiter = ' ' -describe('AutoTag', () => { +describe('RiAutoTag', () => { describe('getTagFromValue', () => { it('should return null on empty string', () => { const result = getTagFromValue('', defaultDelimiter) diff --git a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx b/redisinsight/ui/src/components/base/forms/combo-box/RiAutoTag.tsx similarity index 93% rename from redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx rename to redisinsight/ui/src/components/base/forms/combo-box/RiAutoTag.tsx index 7171552d9a..1ebcf8ac2c 100644 --- a/redisinsight/ui/src/components/base/forms/combo-box/AutoTag.tsx +++ b/redisinsight/ui/src/components/base/forms/combo-box/RiAutoTag.tsx @@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react' import { Chip, FormField, Input } from '@redis-ui/components' import cn from 'classnames' import styled from 'styled-components' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' -import { CommonProps } from 'uiSrc/components/base/theme/types' -import { Row } from 'uiSrc/components/base/layout/flex' -import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { CancelSlimIcon } from 'uiBase/icons' +import { CommonProps } from 'uiBase/theme/types' +import { RiRow } from 'uiBase/layout' +import { RiIconButton } from 'uiBase/forms' export type AutoTagOption = { label: string @@ -62,7 +62,7 @@ const ClearButton = ({ return null } return ( - - 0 || selection.length > 0) } /> - + ) } -const StyledWrapper = styled(Row)` +const StyledWrapper = styled(RiRow)` position: relative; border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral600}; border-radius: 0.4rem; diff --git a/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.spec.tsx b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.spec.tsx new file mode 100644 index 0000000000..9300573b92 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.spec.tsx @@ -0,0 +1,199 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import React from 'react' +import { render, screen } from 'uiSrc/utils/test-utils' +import { RiFormFieldset, RiFormFieldsetProps } from './RiFormFieldset' + +const defaultProps: RiFormFieldsetProps = { + children:
Test content
, +} + +describe('RiFormFieldset', () => { + it('should render', () => { + expect(render()).toBeTruthy() + }) + + it('should render children', () => { + render() + + expect(screen.getByTestId('fieldset-content')).toBeInTheDocument() + expect(screen.getByText('Test content')).toBeInTheDocument() + }) + + it('should render as fieldset element', () => { + render() + + const fieldset = screen.getByRole('group') + expect(fieldset.tagName).toBe('FIELDSET') + }) + + it('should render without legend when legend prop is not provided', () => { + render() + + expect(screen.queryByRole('legend')).not.toBeInTheDocument() + }) + + it('should render legend when legend prop is provided', () => { + render( + , + ) + + expect(screen.getByText('Test Legend')).toBeInTheDocument() + }) + + it('should render legend with custom content', () => { + const legendContent = ( + Custom Legend Content + ) + + render( + , + ) + + expect(screen.getByTestId('custom-legend')).toBeInTheDocument() + expect(screen.getByText('Custom Legend Content')).toBeInTheDocument() + }) + + it('should not render legend when display is hidden', () => { + render( + , + ) + + expect(screen.queryByText('Hidden Legend')).not.toBeInTheDocument() + }) + + it('should render legend when display is visible', () => { + render( + , + ) + + expect(screen.getByText('Visible Legend')).toBeInTheDocument() + }) + + it('should render legend when display is not specified (defaults to visible)', () => { + render( + , + ) + + expect(screen.getByText('Default Legend')).toBeInTheDocument() + }) + + it('should pass through HTML attributes to fieldset element', () => { + render( + , + ) + + const fieldset = screen.getByTestId('custom-fieldset') + expect(fieldset).toHaveClass('custom-class') + expect(fieldset).toHaveAttribute('id', 'custom-id') + }) + + it('should pass through HTML attributes to legend element', () => { + render( + , + ) + + const legend = screen.getByTestId('custom-legend') + expect(legend).toHaveClass('legend-class') + expect(legend).toHaveAttribute('id', 'legend-id') + }) + + it('should handle multiple children', () => { + render( + +
Child 1
+
Child 2
+ + , + ) + + expect(screen.getByTestId('child-1')).toBeInTheDocument() + expect(screen.getByTestId('child-2')).toBeInTheDocument() + expect(screen.getByTestId('input-field')).toBeInTheDocument() + }) + + it('should handle form elements as children', () => { + render( + + + + + + , + ) + + expect(screen.getByText('Form Fields')).toBeInTheDocument() + expect(screen.getByLabelText('Name:')).toBeInTheDocument() + expect(screen.getByLabelText('Email:')).toBeInTheDocument() + expect(screen.getByTestId('name-input')).toBeInTheDocument() + expect(screen.getByTestId('email-input')).toBeInTheDocument() + }) + + it('should handle empty children', () => { + render() + + const fieldset = screen.getByRole('group') + expect(fieldset).toBeInTheDocument() + expect(fieldset).toBeEmptyDOMElement() + }) + + it('should handle null children', () => { + render({null}) + + const fieldset = screen.getByRole('group') + expect(fieldset).toBeInTheDocument() + }) + + it('should handle undefined children', () => { + render({undefined}) + + const fieldset = screen.getByRole('group') + expect(fieldset).toBeInTheDocument() + }) + + it('should handle complex legend with multiple elements', () => { + const complexLegend = ( +
+ Important: + Please fill all required fields +
+ ) + + render( + , + ) + + expect(screen.getByText('Important:')).toBeInTheDocument() + expect( + screen.getByText('Please fill all required fields'), + ).toBeInTheDocument() + }) +}) diff --git a/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.styles.ts b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.styles.ts new file mode 100644 index 0000000000..9ab25c13a7 --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.styles.ts @@ -0,0 +1,24 @@ +/* eslint-disable sonarjs/no-nested-template-literals */ +import { HTMLAttributes } from 'react' +import styled, { css } from 'styled-components' +import { Theme } from '@redis-ui/styles' + +export type StyledFieldsetProps = HTMLAttributes + +export const StyledFieldset = styled.fieldset` + border: none; + margin: 0; + padding: 0; + min-width: 0; +` + +export interface StyledLegendProps extends HTMLAttributes { + display?: 'visible' | 'hidden' +} + +export const StyledLegend = styled.legend` + ${({ theme }: { theme: Theme } & StyledLegendProps) => css` + margin-bottom: ${theme.core.space.space100}; + `} + padding: 0; +` diff --git a/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.tsx b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.tsx new file mode 100644 index 0000000000..71067668be --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/fieldset/RiFormFieldset.tsx @@ -0,0 +1,23 @@ +import React from 'react' + +import { + StyledFieldset, + StyledFieldsetProps, + StyledLegend, + StyledLegendProps, +} from './RiFormFieldset.styles' + +export interface RiFormFieldsetProps extends StyledFieldsetProps { + legend?: StyledLegendProps +} + +export const RiFormFieldset = ({ + legend, + children, + ...props +}: RiFormFieldsetProps) => ( + + {legend && legend.display !== 'hidden' && } + {children} + +) diff --git a/redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx b/redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx index be06de5b17..557695f3d2 100644 --- a/redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx +++ b/redisinsight/ui/src/components/base/forms/file-picker/RiFilePicker.tsx @@ -1,19 +1,18 @@ import React, { InputHTMLAttributes, ReactNode, useRef, useState } from 'react' import cx from 'classnames' -import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id' -import { Loader } from 'uiSrc/components/base/display' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons' +import { useGenerateId } from 'uiBase/utils' +import { RiProgressBarLoader, RiLoader } from 'uiBase/display' +import { RiSecondaryButton } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' +import { CommonProps } from 'uiBase/theme/types' +import { RiColorText } from 'uiBase/text' import { FilePickerClearButton, FilePickerInput, FilePickerPrompt, FilePickerPromptText, FilePickerWrapper, -} from 'uiSrc/components/base/forms/file-picker/styles' -import { CommonProps } from 'uiSrc/components/base/theme/types' -import ProgressBarLoader from 'uiSrc/components/base/display/progress-bar/ProgressBarLoader' -import { ColorText } from 'uiSrc/components/base/text' +} from './styles' export type RiFilePickerProps = CommonProps & Omit, 'onChange'> & { @@ -118,7 +117,7 @@ export const RiFilePicker = ({ if (isLoading && normalFormControl) { // Override clear button with loading spinner if it is in loading state clearButton = ( - @@ -126,7 +125,7 @@ export const RiFilePicker = ({ } else if (isOverridingInitialPrompt && !disabled) { if (normalFormControl) { clearButton = ( - - Remove + Remove ) } @@ -150,7 +149,7 @@ export const RiFilePicker = ({ } const loader = !normalFormControl && isLoading && ( - + ) return ( diff --git a/redisinsight/ui/src/components/base/forms/file-picker/styles.tsx b/redisinsight/ui/src/components/base/forms/file-picker/styles.tsx index 6425ead651..6a22ef7994 100644 --- a/redisinsight/ui/src/components/base/forms/file-picker/styles.tsx +++ b/redisinsight/ui/src/components/base/forms/file-picker/styles.tsx @@ -1,13 +1,13 @@ /* eslint-disable sonarjs/no-nested-template-literals */ import styled, { css } from 'styled-components' import React, { forwardRef, InputHTMLAttributes } from 'react' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { Text } from 'uiSrc/components/base/text' +import { RiEmptyButton } from 'uiBase/forms' +import { RiText } from 'uiBase/text' type FilePickerWrapperProps = InputHTMLAttributes & { $large?: boolean } -export const FilePickerPromptText = styled(Text)`` +export const FilePickerPromptText = styled(RiText)`` const largeWrapper = css` border-radius: 0; @@ -81,6 +81,6 @@ export const FilePickerPrompt = styled.div` ${({ $large }) => ($large ? promptLarge : promptDefault)} ` -export const FilePickerClearButton = styled(EmptyButton)` +export const FilePickerClearButton = styled(RiEmptyButton)` pointer-events: auto; /* Undo the pointer-events: none applied to the enclosing prompt */ ` diff --git a/redisinsight/ui/src/components/base/forms/index.ts b/redisinsight/ui/src/components/base/forms/index.ts new file mode 100644 index 0000000000..d4ac1b1e1d --- /dev/null +++ b/redisinsight/ui/src/components/base/forms/index.ts @@ -0,0 +1,13 @@ +export { RiFormField } from './RiFormField' +export { RiButtonGroup } from './button-group/RiButtonGroup' +export type { ButtonGroupProps } from './button-group/RiButtonGroup' +export * from './buttons' +export * from './radio-group/RadioGroup' +export * from './select/RiSelect' + +export { RiCheckbox } from './checkbox/RiCheckbox' +export { RiAutoTag } from './combo-box/RiAutoTag' +export type { AutoTagOption } from './combo-box/RiAutoTag' +export { RiFormFieldset } from './fieldset/RiFormFieldset' +export type { RiFormFieldsetProps } from './fieldset/RiFormFieldset' +export { RiFilePicker } from './file-picker/RiFilePicker' diff --git a/redisinsight/ui/src/components/base/forms/select/RiSelect.tsx b/redisinsight/ui/src/components/base/forms/select/RiSelect.tsx index 468d2723b3..7d6a298812 100644 --- a/redisinsight/ui/src/components/base/forms/select/RiSelect.tsx +++ b/redisinsight/ui/src/components/base/forms/select/RiSelect.tsx @@ -1,6 +1,6 @@ +import React from 'react' // Import the original type but don't re-export it import type { SelectOption, SelectValueRender } from '@redis-ui/components' -import React from 'react' export { Select as RiSelect } from '@redis-ui/components' export type { SelectOption, SelectValueRender } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/icons/Icon.tsx b/redisinsight/ui/src/components/base/icons/Icon.tsx index b5016359d4..07feb79750 100644 --- a/redisinsight/ui/src/components/base/icons/Icon.tsx +++ b/redisinsight/ui/src/components/base/icons/Icon.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useTheme } from '@redis-ui/styles' import cx from 'classnames' import { IconSizeType } from '@redis-ui/icons' -import { MonochromeIconProps } from 'uiSrc/components/base/icons' +import { MonochromeIconProps } from 'uiBase/icons' type BaseIconProps = Omit & { icon: React.ComponentType diff --git a/redisinsight/ui/src/components/base/index.ts b/redisinsight/ui/src/components/base/index.ts index 0fde7a919f..b34d233b58 100644 --- a/redisinsight/ui/src/components/base/index.ts +++ b/redisinsight/ui/src/components/base/index.ts @@ -1,9 +1,9 @@ import ExternalLink from './external-link' -import { HorizontalRule, LoadingContent } from './layout' -export { ExternalLink, HorizontalRule, LoadingContent } +export { ExternalLink } -export * from './tooltip' -export * from './popover' - -export { RiFilePicker } from './forms/file-picker/RiFilePicker' +export * from './layout' +export * from './display' +export * from './forms' +export * from './text' +export * from './shared/WindowControlGroup' diff --git a/redisinsight/ui/src/components/base/inputs/RiNumericInput.ts b/redisinsight/ui/src/components/base/inputs/RiNumericInput.ts new file mode 100644 index 0000000000..5c8e062571 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiNumericInput.ts @@ -0,0 +1 @@ +export { NumericInput as RiNumericInput } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/inputs/RiPasswordInput.tsx b/redisinsight/ui/src/components/base/inputs/RiPasswordInput.tsx new file mode 100644 index 0000000000..5863b8c915 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiPasswordInput.tsx @@ -0,0 +1,9 @@ +import React, { ComponentProps } from 'react' + +import { PasswordInput as RedisPasswordInput } from '@redis-ui/components' + +export type RedisPasswordInputProps = ComponentProps + +export function RiPasswordInput(props: RedisPasswordInputProps) { + return +} diff --git a/redisinsight/ui/src/components/base/inputs/RiSearchInput.ts b/redisinsight/ui/src/components/base/inputs/RiSearchInput.ts new file mode 100644 index 0000000000..f4911cec6f --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiSearchInput.ts @@ -0,0 +1 @@ +export { SearchInput as RiSearchInput } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/inputs/RiSwitchInput.tsx b/redisinsight/ui/src/components/base/inputs/RiSwitchInput.tsx new file mode 100644 index 0000000000..b7917fc10c --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiSwitchInput.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +import { Switch } from '@redis-ui/components' + +type SwitchInputProps = Omit, 'titleOn'> + +export const RiSwitchInput = ({ + style, + title, + titleOff, + ...props +}: SwitchInputProps) => ( + +) diff --git a/redisinsight/ui/src/components/base/inputs/RiTextArea.ts b/redisinsight/ui/src/components/base/inputs/RiTextArea.ts new file mode 100644 index 0000000000..27a871dc50 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiTextArea.ts @@ -0,0 +1 @@ +export { TextArea as RiTextArea } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/inputs/RiTextInput.tsx b/redisinsight/ui/src/components/base/inputs/RiTextInput.tsx new file mode 100644 index 0000000000..b6b2f9a0d2 --- /dev/null +++ b/redisinsight/ui/src/components/base/inputs/RiTextInput.tsx @@ -0,0 +1,17 @@ +import React, { ComponentProps } from 'react' + +import { Input as RedisInput, TooltipProvider } from '@redis-ui/components' + +export type RedisInputProps = ComponentProps + +export function RiTextInput(props: RedisInputProps) { + // eslint-disable-next-line react/destructuring-assignment + if (props.error) { + return ( + + + + ) + } + return +} diff --git a/redisinsight/ui/src/components/base/inputs/SwitchInput.spec.tsx b/redisinsight/ui/src/components/base/inputs/SwitchInput.spec.tsx index b6102160e3..44cc4454f8 100644 --- a/redisinsight/ui/src/components/base/inputs/SwitchInput.spec.tsx +++ b/redisinsight/ui/src/components/base/inputs/SwitchInput.spec.tsx @@ -2,25 +2,25 @@ import React from 'react' import userEvent from '@testing-library/user-event' import { render } from '@testing-library/react' -import SwitchInput from './SwitchInput' +import { RiSwitchInput } from './RiSwitchInput' describe('SwitchInput', () => { it('should render with default props', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveTextContent('On') }) it('should render with titleOff when provided', () => { const { container } = render( - , + , ) expect(container.firstChild).toHaveTextContent('Off') }) it('should fall back to title when titleOff is not provided', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveTextContent('On') }) @@ -28,7 +28,7 @@ describe('SwitchInput', () => { it('should call onCheckedChange when toggled', async () => { const onCheckedChange = jest.fn() const { getByRole, container } = render( - , + , ) expect(container.firstChild).toHaveTextContent('On') @@ -42,7 +42,7 @@ describe('SwitchInput', () => { it('should apply custom styles', () => { const { container } = render( - , + , ) expect(container.firstChild).toHaveStyle('background-color: red') }) diff --git a/redisinsight/ui/src/components/base/inputs/index.ts b/redisinsight/ui/src/components/base/inputs/index.ts index 863828ae91..5e9c528bda 100644 --- a/redisinsight/ui/src/components/base/inputs/index.ts +++ b/redisinsight/ui/src/components/base/inputs/index.ts @@ -1,6 +1,6 @@ -export { default as PasswordInput } from './PasswordInput' -export { default as SearchInput } from './SearchInput' -export { default as NumericInput } from './NumericInput' -export { default as SwitchInput } from './SwitchInput' -export { default as TextArea } from './TextArea' -export { default as TextInput } from './TextInput' +export { RiPasswordInput } from './RiPasswordInput' +export { RiSearchInput } from './RiSearchInput' +export { RiNumericInput } from './RiNumericInput' +export { RiSwitchInput } from './RiSwitchInput' +export { RiTextArea } from './RiTextArea' +export { RiTextInput } from './RiTextInput' diff --git a/redisinsight/ui/src/components/base/layout/card/index.ts b/redisinsight/ui/src/components/base/layout/card/index.ts new file mode 100644 index 0000000000..b6c0fe0006 --- /dev/null +++ b/redisinsight/ui/src/components/base/layout/card/index.ts @@ -0,0 +1 @@ +export { Card as RiCard } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/layout/drawer/index.ts b/redisinsight/ui/src/components/base/layout/drawer/index.ts index d0636763b6..8189e8c8b4 100644 --- a/redisinsight/ui/src/components/base/layout/drawer/index.ts +++ b/redisinsight/ui/src/components/base/layout/drawer/index.ts @@ -1,7 +1,7 @@ -import { Drawer } from '@redis-ui/components' +import { Drawer as RiDrawer } from '@redis-ui/components' -const DrawerHeader = Drawer.Header -const DrawerBody = Drawer.Body -const DrawerFooter = Drawer.Footer +const RiDrawerHeader = RiDrawer.Header +const RiDrawerBody = RiDrawer.Body +const RiDrawerFooter = RiDrawer.Footer -export { Drawer, DrawerHeader, DrawerBody, DrawerFooter } +export { RiDrawer, RiDrawerHeader, RiDrawerBody, RiDrawerFooter } diff --git a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx index 26205acc6b..4d7d1521af 100644 --- a/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx +++ b/redisinsight/ui/src/components/base/layout/empty-prompt/RiEmptyPrompt.tsx @@ -1,9 +1,10 @@ import React, { HTMLAttributes } from 'react' import styled from 'styled-components' import { useTheme } from '@redis-ui/styles' -import { Spacer } from '../spacer' +import { RiSpacer } from '../spacer' -interface RiEmptyPromptProps extends Omit, 'title'> { +interface RiEmptyPromptProps + extends Omit, 'title'> { body?: React.ReactNode title?: React.ReactNode icon?: React.ReactNode @@ -16,26 +17,32 @@ const StyledEmptyPrompt = styled.div` margin: auto; ` -const RiEmptyPrompt = ({ body, title, icon, ...rest }: RiEmptyPromptProps) => { +export const RiEmptyPrompt = ({ + body, + title, + icon, + ...rest +}: RiEmptyPromptProps) => { const theme = useTheme() - return ( - {icon} - {title && ( - <> - - {title} - - )} - {body && ( - <> - - {body} - - )} - + return ( + + {icon} + {title && ( + <> + + {title} + + )} + {body && ( + <> + + {body} + + )} + ) } - + export default RiEmptyPrompt diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx index 63b3f3a050..3d450e9cb7 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render } from 'uiSrc/utils/test-utils' import { alignValues, dirValues, gapSizes, justifyValues } from './flex.styles' -import { Col, FlexGroup as Flex, FlexItem, Grid, Row } from './flex' +import { RiCol, RiFlexGroup as Flex, RiFlexItem, RiGrid, RiRow } from './flex' const gapStyles = { none: '', @@ -14,7 +14,7 @@ const gapStyles = { } describe('Flex Components', () => { it('should render', () => { - expect(render()).toBeTruthy() + expect(render()).toBeTruthy() expect( render( @@ -24,23 +24,23 @@ describe('Flex Components', () => { ).toBeTruthy() expect( render( - + Child - , + , ), ).toBeTruthy() expect( render( - + Child - , + , ), ).toBeTruthy() expect( render( - + Child - , + , ), ).toBeTruthy() }) @@ -48,9 +48,9 @@ describe('Flex Components', () => { describe('Flex', () => { it('should render with default classes', () => { const { container } = render( - + Child - , + , ) expect(container).toBeTruthy() expect(container.firstChild).toHaveClass('RI-flex-row', 'RI-flex-group') @@ -60,9 +60,9 @@ describe('Flex Components', () => { describe('Col', () => { it('should render', () => { const { container } = render( - + Child - , + , ) expect(container.firstChild).toHaveClass('RI-flex-col', 'RI-flex-group') expect(container.firstChild).toHaveStyle('flex-direction: column') @@ -177,9 +177,9 @@ describe('Flex Components', () => { describe('inline', () => { it('should render div as default', () => { const { getByText, container } = render( - + Child - , + , ) expect(container.firstChild?.nodeName).toEqual('DIV') @@ -193,7 +193,7 @@ describe('Flex Components', () => { VALUES.forEach((value) => { it(`${value} should generate a flex-grow of 0`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveClass( 'RI-flex-item', // value ? flex['flex-responsive'] : '', @@ -208,7 +208,7 @@ describe('Flex Components', () => { VALUES.forEach((value) => { test(`${value} generates a flex-grow of 1`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveClass( 'RI-flex-item', // value ? flex['flex-responsive'] : '', @@ -223,7 +223,7 @@ describe('Flex Components', () => { VALUES.forEach((value) => { test(`${value} generates a flex-grow of ${value}`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveClass( 'RI-flex-item', // value ? flex['flex-responsive'] : '', @@ -239,9 +239,9 @@ describe('Flex Components', () => { it('should render', () => { expect( render( - +

My Child

- , + , ), ).toBeTruthy() }) @@ -250,9 +250,9 @@ describe('Flex Components', () => { gapSizes.forEach((value) => { it(`should render ${value} gap`, () => { const { getByText, container } = render( - +

My Child

- , + , ) const grid = container.firstChild expect(grid).toHaveClass('RI-flex-grid') @@ -270,9 +270,9 @@ describe('Flex Components', () => { ;([1, 2, 3, 4] as const).forEach((value) => { it(`should render ${value} columns`, () => { const { container } = render( - +

My Child

- , + , ) expect(container.firstChild).toHaveClass( 'RI-flex-grid', @@ -285,18 +285,18 @@ describe('Flex Components', () => { describe('responsive', () => { it('should render when responsive is false', () => { const { container } = render( - +

My Child

- , + , ) expect(container.firstChild).toHaveClass('RI-flex-grid') // expect(container.firstChild).not.toHaveClass(flex.gridResponsive) }) it('should have class grid-responsive when responsive is true', () => { const { container } = render( - +

My Child

- , + , ) expect(container.firstChild).toHaveClass( 'RI-flex-grid', @@ -308,18 +308,18 @@ describe('Flex Components', () => { describe('centered', () => { it('should render when centered is false', () => { const { container } = render( - +

My Child

- , + , ) expect(container.firstChild).toHaveClass('RI-flex-grid') // expect(container.firstChild).not.toHaveClass(flex.gridCentered) }) it('should have class grid-centered when responsive is true', () => { const { container } = render( - +

My Child

- , + , ) expect(container.firstChild).toHaveClass( 'RI-flex-grid', diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts index aa2c662454..59aa65539a 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts +++ b/redisinsight/ui/src/components/base/layout/flex/flex.styles.ts @@ -1,7 +1,7 @@ import React, { HTMLAttributes, PropsWithChildren, ReactNode } from 'react' import styled, { css } from 'styled-components' -import { CommonProps, Theme } from 'uiSrc/components/base/theme/types' +import { CommonProps, Theme } from 'uiBase/theme/types' export const gapSizes = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const export type GapSizeType = (typeof gapSizes)[number] diff --git a/redisinsight/ui/src/components/base/layout/flex/flex.tsx b/redisinsight/ui/src/components/base/layout/flex/flex.tsx index 9083099a59..03edb25679 100644 --- a/redisinsight/ui/src/components/base/layout/flex/flex.tsx +++ b/redisinsight/ui/src/components/base/layout/flex/flex.tsx @@ -9,9 +9,9 @@ import { StyledFlexItem, StyledGrid, VALID_PADDING_VALUES, -} from 'uiSrc/components/base/layout/flex/flex.styles' +} from './flex.styles' -export const Grid = ({ children, className, ...rest }: GridProps) => { +export const RiGrid = ({ children, className, ...rest }: GridProps) => { const classes = classNames('RI-flex-grid', className) return ( @@ -39,7 +39,7 @@ export const Grid = ({ children, className, ...rest }: GridProps) => { * * */ -export const FlexGroup = ({ +export const RiFlexGroup = ({ children, className, grow, @@ -92,7 +92,7 @@ export const FlexGroup = ({ * * */ -export const Col = ({ +export const RiCol = ({ className, reverse, contentCentered, @@ -105,7 +105,7 @@ export const Col = ({ }) => { const classes = classNames('RI-flex-col', className) return ( - { const classes = classNames('RI-flex-row', className) return ( - Content * */ -export const FlexItem = ({ +export const RiFlexItem = ({ children, className, grow = false, diff --git a/redisinsight/ui/src/components/base/layout/flex/index.ts b/redisinsight/ui/src/components/base/layout/flex/index.ts deleted file mode 100644 index 50b4f03106..0000000000 --- a/redisinsight/ui/src/components/base/layout/flex/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { FlexGroup, FlexGroup as Flex, FlexItem, Col, Row, Grid } from './flex' diff --git a/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.spec.tsx b/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.spec.tsx index c5738cdc4c..3a56b8dd96 100644 --- a/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.spec.tsx @@ -1,16 +1,16 @@ import React from 'react' import { render } from '@testing-library/react' -import HorizontalRule from './HorizontalRule' +import { RiHorizontalRule } from './RiHorizontalRule' -describe('HorizontalRule', () => { +describe('RiHorizontalRule', () => { it('should render with default props', () => { - const { container } = render() + const { container } = render() expect(container).toBeTruthy() expect(container.firstChild).toHaveStyle('width: 100%') }) it('should render with set size and margin', () => { - const { container } = render() + const { container } = render() expect(container).toBeTruthy() expect(container.firstChild).toHaveStyle('width: 50%') expect(container.firstChild).toHaveStyle('margin-inline: auto') diff --git a/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.tsx b/redisinsight/ui/src/components/base/layout/horizontal-rule/RiHorizontalRule.tsx similarity index 88% rename from redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.tsx rename to redisinsight/ui/src/components/base/layout/horizontal-rule/RiHorizontalRule.tsx index 69e72b775c..cecee6edd2 100644 --- a/redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.tsx +++ b/redisinsight/ui/src/components/base/layout/horizontal-rule/RiHorizontalRule.tsx @@ -1,12 +1,12 @@ -import classNames from 'classnames' import React from 'react' +import classNames from 'classnames' import { HorizontalRuleProps, StyledHorizontalRule, } from './horizontal-rule.styles' -const HorizontalRule = ({ +export const RiHorizontalRule = ({ className, size = 'full', margin = 'l', @@ -23,5 +23,3 @@ const HorizontalRule = ({ /> ) } - -export default HorizontalRule \ No newline at end of file diff --git a/redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx b/redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx index 813ac3a062..a2f45e99db 100644 --- a/redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/horizontal-spacer/HorizontalSpacer.spec.tsx @@ -1,15 +1,17 @@ import React from 'react' import { render } from 'uiSrc/utils/test-utils' -import { HorizontalSpacer } from './horizontal-spacer' +import { RiHorizontalSpacer } from './RiHorizontalSpacer' describe('HorizontalSpacer', () => { it('should render with different sizes correctly', () => { const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const - - sizes.forEach(size => { - const { container } = render() - const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement - + + sizes.forEach((size) => { + const { container } = render() + const spacer = container.querySelector( + '.RI-horizontal-spacer', + ) as HTMLElement + if (size === 'xl') { expect(spacer).toHaveStyle('width: calc(var(--base) * 2.25)') } else { @@ -20,9 +22,9 @@ describe('HorizontalSpacer', () => { it('should render children when provided', () => { const { getByText } = render( - + Test content - + , ) const content = getByText('Test content') expect(content).toBeInTheDocument() @@ -30,20 +32,26 @@ describe('HorizontalSpacer', () => { }) it('should apply custom className', () => { - const { container } = render() - const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement - + const { container } = render( + , + ) + const spacer = container.querySelector( + '.RI-horizontal-spacer', + ) as HTMLElement + expect(spacer).toHaveClass('RI-horizontal-spacer') expect(spacer).toHaveClass('custom-class') }) it('should pass through custom props', () => { const { container } = render( - + , ) - const spacer = container.querySelector('.RI-horizontal-spacer') as HTMLElement - + const spacer = container.querySelector( + '.RI-horizontal-spacer', + ) as HTMLElement + expect(spacer).toHaveAttribute('data-testid', 'my-spacer') expect(spacer).toHaveAttribute('id', 'spacer-id') }) -}) \ No newline at end of file +}) diff --git a/redisinsight/ui/src/components/base/layout/horizontal-spacer/RiHorizontalSpacer.tsx b/redisinsight/ui/src/components/base/layout/horizontal-spacer/RiHorizontalSpacer.tsx new file mode 100644 index 0000000000..3c3bb9945b --- /dev/null +++ b/redisinsight/ui/src/components/base/layout/horizontal-spacer/RiHorizontalSpacer.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import cx from 'classnames' +import { + HorizontalSpacerProps, + StyledHorizontalSpacer, +} from './horizontal-spacer.styles' + +export const RiHorizontalSpacer = ({ + className, + children, + ...rest +}: HorizontalSpacerProps) => ( + + {children} + +) diff --git a/redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts b/redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts index 8d2e2bffa6..85995fdc2c 100644 --- a/redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts +++ b/redisinsight/ui/src/components/base/layout/horizontal-spacer/horizontal-spacer.styles.ts @@ -1,6 +1,6 @@ import { HTMLAttributes, ReactNode } from 'react' import styled from 'styled-components' -import { CommonProps } from 'uiSrc/components/base/theme/types' +import { CommonProps } from 'uiBase/theme/types' export const HorizontalSpacerSizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const export type HorizontalSpacerSize = (typeof HorizontalSpacerSizes)[number] @@ -23,4 +23,4 @@ export const StyledHorizontalSpacer = styled.div` flex-shrink: 0; width: ${({ size = 'l' }) => horizontalSpacerStyles[size]}; display: inline-block; -` \ No newline at end of file +` diff --git a/redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts b/redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts index dd4048127b..b6af63a69c 100644 --- a/redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts +++ b/redisinsight/ui/src/components/base/layout/horizontal-spacer/index.ts @@ -1,2 +1,5 @@ -export { HorizontalSpacer } from './horizontal-spacer' -export type { HorizontalSpacerSize, HorizontalSpacerProps } from './horizontal-spacer.styles' \ No newline at end of file +export { RiHorizontalSpacer } from './RiHorizontalSpacer' +export type { + HorizontalSpacerSize, + HorizontalSpacerProps, +} from './horizontal-spacer.styles' diff --git a/redisinsight/ui/src/components/base/layout/index.ts b/redisinsight/ui/src/components/base/layout/index.ts index 2d630f0614..86744b445c 100644 --- a/redisinsight/ui/src/components/base/layout/index.ts +++ b/redisinsight/ui/src/components/base/layout/index.ts @@ -1,18 +1,20 @@ -import HorizontalRule from './horizontal-rule/HorizontalRule' -import LoadingContent from './loading-content/LoadingContent' -import ResizableContainer from './resize/container/ResizableContainer' -import ResizablePanel from './resize/panel/ResizablePanel' -import ResizablePanelHandle from './resize/handle/ResizablePanelHandle' -import RiEmptyPrompt from './empty-prompt/RiEmptyPrompt' +export { RiLoadingContent } from './loading-content/RiLoadingContent' -export * from './card' +export { RiHorizontalRule } from './horizontal-rule/RiHorizontalRule' + +export { RiEmptyPrompt } from './empty-prompt/RiEmptyPrompt' + +export { RiCard } from './card' export * from './horizontal-spacer' export * from './spacer' -export { - HorizontalRule, - LoadingContent, - ResizablePanel, - ResizableContainer, - ResizablePanelHandle, - RiEmptyPrompt, -} +export * from './drawer' +export * from './list' +export * from './menu' +export * from './page' +export * from './resize' +export * from './sidebar' +export * from './tabs' +export * from './flex/flex' + +export { RiTable } from './table' +export type { ColumnDefinition } from './table' diff --git a/redisinsight/ui/src/components/base/layout/list/Group.tsx b/redisinsight/ui/src/components/base/layout/list/RiListGroup.tsx similarity index 87% rename from redisinsight/ui/src/components/base/layout/list/Group.tsx rename to redisinsight/ui/src/components/base/layout/list/RiListGroup.tsx index 25d7406d1f..e2feeda2ab 100644 --- a/redisinsight/ui/src/components/base/layout/list/Group.tsx +++ b/redisinsight/ui/src/components/base/layout/list/RiListGroup.tsx @@ -5,9 +5,9 @@ import { ListGroupProps, MAX_FORM_WIDTH, StyledGroup, -} from 'uiSrc/components/base/layout/list/list.styles' +} from './list.styles' -const Group = ({ +export const RiListGroup = ({ children, className, style, @@ -37,5 +37,3 @@ const Group = ({ ) } - -export default Group diff --git a/redisinsight/ui/src/components/base/layout/list/Item.tsx b/redisinsight/ui/src/components/base/layout/list/RiListItem.tsx similarity index 94% rename from redisinsight/ui/src/components/base/layout/list/Item.tsx rename to redisinsight/ui/src/components/base/layout/list/RiListItem.tsx index 5d8140101f..a0baa55a5e 100644 --- a/redisinsight/ui/src/components/base/layout/list/Item.tsx +++ b/redisinsight/ui/src/components/base/layout/list/RiListItem.tsx @@ -1,8 +1,8 @@ import React, { ButtonHTMLAttributes, ReactElement } from 'react' import cx from 'classnames' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { useInnerText } from 'uiSrc/components/base/utils/hooks/inner-text' +import { RiIcon } from 'uiBase/icons' +import { useInnerText } from 'uiBase/utils' import { ListClassNames, ListGroupItemProps, @@ -12,7 +12,7 @@ import { StyledLabel, } from './list.styles' -const Item = ({ +export const RiListItem = ({ size, label, isActive, @@ -121,5 +121,3 @@ const Item = ({ ) } - -export default Item diff --git a/redisinsight/ui/src/components/base/layout/list/index.ts b/redisinsight/ui/src/components/base/layout/list/index.ts index 7335be4ca3..06b16c4362 100644 --- a/redisinsight/ui/src/components/base/layout/list/index.ts +++ b/redisinsight/ui/src/components/base/layout/list/index.ts @@ -1,4 +1,4 @@ -import Group from './Group' -import Item from './Item' +import { RiListGroup } from './RiListGroup' +import { RiListItem } from './RiListItem' -export { Group, Item } +export { RiListGroup, RiListItem } diff --git a/redisinsight/ui/src/components/base/layout/list/list.styles.ts b/redisinsight/ui/src/components/base/layout/list/list.styles.ts index 92fd2fb069..d80b5fc915 100644 --- a/redisinsight/ui/src/components/base/layout/list/list.styles.ts +++ b/redisinsight/ui/src/components/base/layout/list/list.styles.ts @@ -10,8 +10,7 @@ import { Ref, } from 'react' -import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' -import { IconProps } from 'uiSrc/components/base/icons' +import { AllIconsType, IconProps } from 'uiBase/icons' export const ListClassNames = { listItem: 'RI-list-group-item', @@ -171,41 +170,41 @@ const listItemStyles = { }, active: { primary: css` - background-color: var(--color-primary); + background-color: var(--color-text-primary); `, text: css` - background-color: var(--color-subdued); + background-color: var(--color-text-subdued); `, subdued: css` - background-color: var(--color-subdued); + background-color: var(--color-text-subdued); `, ghost: css` - background-color: var(--color-ghost); + background-color: var(--color-text-ghost); `, }, clickable: { primary: css` &:hover, &:focus-within { - background-color: var(--color-subdued); + background-color: var(--color-text-subdued); } `, text: css` &:hover, &:focus-within { - background-color: var(--color-subdued); + background-color: var(--color-text-subdued); } `, subdued: css` &:hover, &:focus-within { - background-color: var(--color-subdued); + background-color: var(--color-text-subdued); } `, ghost: css` &:hover, &:focus-within { - background-color: var(--color-ghost); + background-color: var(--color-text-ghost); } `, }, @@ -270,16 +269,16 @@ const listItemInnerStyles = { colors: { // Colors primary: css` - color: var(--color-primary-text); + color: var(--color-text-primary); `, text: css` - color: var(--color-text-text); + color: var(--color-text-default); `, subdued: css` - color: var(--euiTextSubduedColor); + color: var(--color-text-subdued); `, ghost: css` - color: var(--color-ghost-text); + color: var(--color-text-ghost); `, }, variants: { diff --git a/redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.spec.tsx b/redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.spec.tsx similarity index 67% rename from redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.spec.tsx rename to redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.spec.tsx index 4ef1dd4499..42860640a6 100644 --- a/redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.spec.tsx @@ -1,27 +1,27 @@ import React from 'react' import { render } from '@testing-library/react' -import LoadingContent from './LoadingContent' +import { RiLoadingContent } from 'uiSrc/components' -describe('LoadingContent', () => { +describe('RiLoadingContent', () => { it('should render the component', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveClass('RI-loading-content') }) it('should render the default number of lines (3)', () => { - const { container } = render() + const { container } = render() const lines = container.querySelectorAll('.RI-loading-content > span') expect(lines.length).toBe(3) }) it('should render the correct number of lines when "lines" prop is passed', () => { - const { container } = render() + const { container } = render() const lines = container.querySelectorAll('.RI-loading-content > span') expect(lines.length).toBe(5) }) it('should apply the custom className if provided', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveClass('custom-class') }) }) diff --git a/redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.tsx b/redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.tsx similarity index 91% rename from redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.tsx rename to redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.tsx index c3572708db..21d42654e3 100644 --- a/redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.tsx +++ b/redisinsight/ui/src/components/base/layout/loading-content/RiLoadingContent.tsx @@ -8,7 +8,7 @@ import { SingleLineBackground, } from './loading-content.styles' -const LoadingContent = ({ +export const RiLoadingContent = ({ className, lines = 3, ...rest @@ -30,5 +30,3 @@ const LoadingContent = ({ ) } - -export default LoadingContent diff --git a/redisinsight/ui/src/components/base/layout/menu/index.ts b/redisinsight/ui/src/components/base/layout/menu/index.ts index d055c6eece..1a9d18c762 100644 --- a/redisinsight/ui/src/components/base/layout/menu/index.ts +++ b/redisinsight/ui/src/components/base/layout/menu/index.ts @@ -1,8 +1,14 @@ import { Menu } from '@redis-ui/components' -const MenuContent = Menu.Content -const MenuTrigger = Menu.Trigger -const MenuItem = Menu.Content.Item -const MenuDropdownArrow = Menu.Content.DropdownArrow +const RiMenuContent = Menu.Content +const RiMenuTrigger = Menu.Trigger +const RiMenuItem = Menu.Content.Item +const RiMenuDropdownArrow = Menu.Content.DropdownArrow -export { Menu, MenuContent, MenuItem, MenuTrigger, MenuDropdownArrow } +export { + Menu as RiMenu, + RiMenuContent, + RiMenuItem, + RiMenuTrigger, + RiMenuDropdownArrow, +} diff --git a/redisinsight/ui/src/components/base/layout/page/Page.tsx b/redisinsight/ui/src/components/base/layout/page/RiPage.tsx similarity index 84% rename from redisinsight/ui/src/components/base/layout/page/Page.tsx rename to redisinsight/ui/src/components/base/layout/page/RiPage.tsx index 25803964d8..1e701aced7 100644 --- a/redisinsight/ui/src/components/base/layout/page/Page.tsx +++ b/redisinsight/ui/src/components/base/layout/page/RiPage.tsx @@ -5,9 +5,9 @@ import { PageProps, restrictWidthSize, StyledPage, -} from 'uiSrc/components/base/layout/page/page.styles' +} from './page.styles' -const Page = ({ +export const RiPage = ({ className, restrictWidth = false, paddingSize = 'm', @@ -26,5 +26,3 @@ const Page = ({ style={restrictWidthSize(style, restrictWidth)} /> ) - -export default Page diff --git a/redisinsight/ui/src/components/base/layout/page/PageBody.tsx b/redisinsight/ui/src/components/base/layout/page/RiPageBody.tsx similarity index 65% rename from redisinsight/ui/src/components/base/layout/page/PageBody.tsx rename to redisinsight/ui/src/components/base/layout/page/RiPageBody.tsx index 2a56e65baa..d3f79d3968 100644 --- a/redisinsight/ui/src/components/base/layout/page/PageBody.tsx +++ b/redisinsight/ui/src/components/base/layout/page/RiPageBody.tsx @@ -1,16 +1,13 @@ import React from 'react' import cx from 'classnames' -import { - PageClassNames, - restrictWidthSize, -} from 'uiSrc/components/base/layout/page/page.styles' +import { PageClassNames, restrictWidthSize } from './page.styles' import { ComponentTypes, PageBodyProps, StyledPageBody, -} from 'uiSrc/components/base/layout/page/page-body.styles' +} from './page-body.styles' -const PageBody = ({ +export const RiPageBody = ({ component = 'div' as T, className, restrictWidth, @@ -27,5 +24,3 @@ const PageBody = ({ className={cx(PageClassNames.body, className)} /> ) - -export default PageBody diff --git a/redisinsight/ui/src/components/base/layout/page/PageContentBody.tsx b/redisinsight/ui/src/components/base/layout/page/RiPageContentBody.tsx similarity index 82% rename from redisinsight/ui/src/components/base/layout/page/PageContentBody.tsx rename to redisinsight/ui/src/components/base/layout/page/RiPageContentBody.tsx index e29080aca8..3272f09bd8 100644 --- a/redisinsight/ui/src/components/base/layout/page/PageContentBody.tsx +++ b/redisinsight/ui/src/components/base/layout/page/RiPageContentBody.tsx @@ -5,9 +5,9 @@ import { PageContentBodyProps, restrictWidthSize, StyledPageContentBody, -} from 'uiSrc/components/base/layout/page/page.styles' +} from './page.styles' -const PageContentBody = ({ +export const RiPageContentBody = ({ restrictWidth = false, paddingSize = 'none', style, @@ -26,5 +26,3 @@ const PageContentBody = ({ /> ) } - -export default PageContentBody diff --git a/redisinsight/ui/src/components/base/layout/page/PageHeader.tsx b/redisinsight/ui/src/components/base/layout/page/RiPageHeader.tsx similarity index 82% rename from redisinsight/ui/src/components/base/layout/page/PageHeader.tsx rename to redisinsight/ui/src/components/base/layout/page/RiPageHeader.tsx index 509d8b1227..8242512f4c 100644 --- a/redisinsight/ui/src/components/base/layout/page/PageHeader.tsx +++ b/redisinsight/ui/src/components/base/layout/page/RiPageHeader.tsx @@ -1,13 +1,13 @@ import React from 'react' import cx from 'classnames' -import { restrictWidthSize } from 'uiSrc/components/base/layout/page/page.styles' +import { restrictWidthSize } from './page.styles' import { PageHeaderClassName, PageHeaderProps, StyledPageHeader, } from './page-heading.styles' -const PageHeader = ({ +export const RiPageHeader = ({ className, style, restrictWidth, @@ -30,5 +30,3 @@ const PageHeader = ({ $bottomBorder={bottomBorder} /> ) - -export default PageHeader diff --git a/redisinsight/ui/src/components/base/layout/page/index.ts b/redisinsight/ui/src/components/base/layout/page/index.ts index d9ae84716c..e58c5a6a16 100644 --- a/redisinsight/ui/src/components/base/layout/page/index.ts +++ b/redisinsight/ui/src/components/base/layout/page/index.ts @@ -1,6 +1,6 @@ -import Page from './Page' -import PageBody from './PageBody' -import PageHeader from './PageHeader' -import PageContentBody from './PageContentBody' +import { RiPage } from './RiPage' +import { RiPageBody } from './RiPageBody' +import { RiPageHeader } from './RiPageHeader' +import { RiPageContentBody } from './RiPageContentBody' -export { Page, PageBody, PageHeader, PageContentBody } +export { RiPage, RiPageBody, RiPageHeader, RiPageContentBody } diff --git a/redisinsight/ui/src/components/base/layout/page/page-body.spec.tsx b/redisinsight/ui/src/components/base/layout/page/page-body.spec.tsx index 24319f61bf..cd6979ec38 100644 --- a/redisinsight/ui/src/components/base/layout/page/page-body.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/page/page-body.spec.tsx @@ -2,11 +2,11 @@ import React from 'react' import { render } from 'uiSrc/utils/test-utils' import { PADDING_SIZES } from './page.styles' -import PageBody from './PageBody' +import { RiPageBody } from './RiPageBody' describe('PageBody', () => { test('is rendered', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toBeTruthy() }) @@ -20,7 +20,7 @@ describe('PageBody', () => { } PADDING_SIZES.forEach((size) => { it(`padding '${size}' is rendered`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`padding: ${sizes[size]}`) }) }) @@ -28,20 +28,20 @@ describe('PageBody', () => { describe('restrict width', () => { test('can be set to a default', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('max-width: 1200px') }) test('can be set to a custom number', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('max-width: 1024px') }) test('can be set to a custom value and measurement', () => { const { container } = render( - export type PageBodyProps = diff --git a/redisinsight/ui/src/components/base/layout/page/page-heading.styles.ts b/redisinsight/ui/src/components/base/layout/page/page-heading.styles.ts index c6d043149b..e9eabff686 100644 --- a/redisinsight/ui/src/components/base/layout/page/page-heading.styles.ts +++ b/redisinsight/ui/src/components/base/layout/page/page-heading.styles.ts @@ -1,6 +1,6 @@ import { HTMLAttributes } from 'react' import styled, { css } from 'styled-components' -import { PaddingSize } from 'uiSrc/components/base/layout/page/page.styles' +import { PaddingSize } from './page.styles' export const PageHeaderClassName = 'RI-page-header' export const ALIGN_ITEMS = ['top', 'bottom', 'center', 'stretch'] as const diff --git a/redisinsight/ui/src/components/base/layout/page/page.spec.tsx b/redisinsight/ui/src/components/base/layout/page/page.spec.tsx index 48e92af27d..aeed626779 100644 --- a/redisinsight/ui/src/components/base/layout/page/page.spec.tsx +++ b/redisinsight/ui/src/components/base/layout/page/page.spec.tsx @@ -1,11 +1,11 @@ import React from 'react' -import { PADDING_SIZES } from 'uiSrc/components/base/layout/page/page.styles' -import Page from 'uiSrc/components/base/layout/page/Page' import { render } from 'uiSrc/utils/test-utils' +import { PADDING_SIZES } from './page.styles' +import { RiPage } from './RiPage' describe('RIPage', () => { it('is rendered', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toBeTruthy() }) @@ -19,7 +19,7 @@ describe('RIPage', () => { } PADDING_SIZES.forEach((size) => { it(`padding '${size}' is rendered`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle(`padding: ${sizes[size]}`) }) }) @@ -27,12 +27,12 @@ describe('RIPage', () => { describe('grow', () => { it(`grow 'true' gives flex-grow: 1`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('flex-grow: 1') }) it(`grow 'false' does not render flex-grow`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).not.toHaveStyle('flex-grow: 1') }) @@ -41,13 +41,13 @@ describe('RIPage', () => { describe('direction', () => { it(`can be row`, () => { const { container } = render( - , + , ) expect(container.firstChild).toHaveStyle('flex-direction: column') }) it(`can be column`, () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('flex-direction: column') }) @@ -55,20 +55,20 @@ describe('RIPage', () => { describe('restrict width', () => { it('can be set to a default', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('max-width: 1200px') }) it('can be set to a custom number', () => { - const { container } = render() + const { container } = render() expect(container.firstChild).toHaveStyle('max-width: 1024px') }) it('can be set to a custom value and does not override custom style', () => { const { container } = render( - ((props, ref) => ) - -export default ResizableContainer diff --git a/redisinsight/ui/src/components/base/layout/resize/handle/ResizablePanelHandle.tsx b/redisinsight/ui/src/components/base/layout/resize/handle/RiResizablePanelHandle.tsx similarity index 87% rename from redisinsight/ui/src/components/base/layout/resize/handle/ResizablePanelHandle.tsx rename to redisinsight/ui/src/components/base/layout/resize/handle/RiResizablePanelHandle.tsx index 54c50f886e..88f3e7f820 100644 --- a/redisinsight/ui/src/components/base/layout/resize/handle/ResizablePanelHandle.tsx +++ b/redisinsight/ui/src/components/base/layout/resize/handle/RiResizablePanelHandle.tsx @@ -6,7 +6,7 @@ import { StyledPanelResizeHandle, } from './resizable-panel-handle.styles' -const ResizablePanelHandle = ({ +export const RiResizablePanelHandle = ({ className, direction = 'vertical', ...rest @@ -22,5 +22,3 @@ const ResizablePanelHandle = ({ ) - -export default ResizablePanelHandle diff --git a/redisinsight/ui/src/components/base/layout/resize/index.ts b/redisinsight/ui/src/components/base/layout/resize/index.ts index aca654afe9..4eba06bf4b 100644 --- a/redisinsight/ui/src/components/base/layout/resize/index.ts +++ b/redisinsight/ui/src/components/base/layout/resize/index.ts @@ -1 +1,4 @@ -export { ImperativePanelGroupHandle } from 'react-resizable-panels' +export type { ImperativePanelGroupHandle } from 'react-resizable-panels' +export { RiResizablePanel } from './panel/RiResizablePanel' +export { RiResizablePanelHandle } from './handle/RiResizablePanelHandle' +export { RiResizableContainer } from './container/RiResizableContainer' diff --git a/redisinsight/ui/src/components/base/layout/resize/panel/ResizablePanel.tsx b/redisinsight/ui/src/components/base/layout/resize/panel/ResizablePanel.tsx deleted file mode 100644 index 63e61f6413..0000000000 --- a/redisinsight/ui/src/components/base/layout/resize/panel/ResizablePanel.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -import { Panel, PanelProps } from 'react-resizable-panels' - -const ResizablePanel = (props: PanelProps) => - -export default ResizablePanel diff --git a/redisinsight/ui/src/components/base/layout/resize/panel/RiResizablePanel.tsx b/redisinsight/ui/src/components/base/layout/resize/panel/RiResizablePanel.tsx new file mode 100644 index 0000000000..d8fdce79f2 --- /dev/null +++ b/redisinsight/ui/src/components/base/layout/resize/panel/RiResizablePanel.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +import { Panel, PanelProps } from 'react-resizable-panels' + +export const RiResizablePanel = (props: PanelProps) => diff --git a/redisinsight/ui/src/components/base/layout/sidebar/index.ts b/redisinsight/ui/src/components/base/layout/sidebar/index.ts index c6e6c31792..d2e75fa8df 100644 --- a/redisinsight/ui/src/components/base/layout/sidebar/index.ts +++ b/redisinsight/ui/src/components/base/layout/sidebar/index.ts @@ -1,18 +1,18 @@ import { SideBar } from '@redis-ui/components' import { SideBarItemIcon } from './SideBarItemIcon' -const SideBarHeader = SideBar.Header -const SideBarContainer = SideBar.ItemsContainer -const SideBarItem = SideBar.Item -const SideBarDivider = SideBar.Divider -const SideBarFooter = SideBar.Footer +const RiSideBarHeader = SideBar.Header +const RiSideBarContainer = SideBar.ItemsContainer +const RiSideBarItem = SideBar.Item +const RiSideBarDivider = SideBar.Divider +const RiSideBarFooter = SideBar.Footer export { - SideBar, - SideBarHeader, - SideBarContainer, - SideBarItem, + SideBar as RiSideBar, + RiSideBarHeader, + RiSideBarContainer, + RiSideBarItem, SideBarItemIcon, - SideBarDivider, - SideBarFooter, + RiSideBarDivider, + RiSideBarFooter, } diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx b/redisinsight/ui/src/components/base/layout/spacer/RiSpacer.tsx similarity index 70% rename from redisinsight/ui/src/components/base/layout/spacer/spacer.tsx rename to redisinsight/ui/src/components/base/layout/spacer/RiSpacer.tsx index 0f820b3039..236962ef2a 100644 --- a/redisinsight/ui/src/components/base/layout/spacer/spacer.tsx +++ b/redisinsight/ui/src/components/base/layout/spacer/RiSpacer.tsx @@ -1,18 +1,15 @@ import React from 'react' import cx from 'classnames' import { useTheme } from '@redis-ui/styles' -import { - SpacerProps, - StyledSpacer, -} from 'uiSrc/components/base/layout/spacer/spacer.styles' +import { SpacerProps, StyledSpacer } from './spacer.styles' /** * A simple spacer component that can be used to add vertical spacing between * other components. The size of the spacer can be specified using the `size` * prop, which can be one of the following values: * - Legacy sizes: 'xs' = 4px, 's' = 8px, 'm' = 12px, 'l' = 16px, 'xl' = 24px, 'xxl' = 32px - * - Theme spacing sizes: Any key from theme.semantic.core.space (e.g., 'space000', 'space010', - * 'space025', 'space050', 'space100', 'space150', 'space200', 'space250', 'space300', + * - Theme spacing sizes: Any key from theme.semantic.core.space (e.g., 'space000', 'space010', + * 'space025', 'space050', 'space100', 'space150', 'space200', 'space250', 'space300', * 'space400', 'space500', 'space550', 'space600', 'space800', etc.) * * The theme spacing tokens are dynamically extracted from the theme, ensuring consistency @@ -20,11 +17,15 @@ import { * * The default value for `size` is 'l'. */ -export const Spacer = ({ className, children, ...rest }: SpacerProps) => { +export const RiSpacer = ({ className, children, ...rest }: SpacerProps) => { const theme = useTheme() return ( - - {children} - -) -} \ No newline at end of file + + {children} + + ) +} diff --git a/redisinsight/ui/src/components/base/layout/spacer/index.ts b/redisinsight/ui/src/components/base/layout/spacer/index.ts index 16adaabf1e..841f84a7ce 100644 --- a/redisinsight/ui/src/components/base/layout/spacer/index.ts +++ b/redisinsight/ui/src/components/base/layout/spacer/index.ts @@ -1,2 +1,2 @@ -export { Spacer } from './spacer' +export { RiSpacer } from './RiSpacer' export type { SpacerSize } from './spacer.styles' diff --git a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts index a36a1dad61..0d304c6c5c 100644 --- a/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts +++ b/redisinsight/ui/src/components/base/layout/spacer/spacer.styles.ts @@ -1,15 +1,14 @@ import { HTMLAttributes, ReactNode } from 'react' import styled from 'styled-components' -import { CommonProps } from 'uiSrc/components/base/theme/types' -import { theme } from 'uiSrc/components/base/theme' +import { CommonProps, Theme } from 'uiBase/theme/types' export const SpacerSizes = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const export type SpacerSize = (typeof SpacerSizes)[number] // Extract only the spaceXXX keys from the theme -export type ThemeSpacingKey = Extract -// Allow direct theme spacing values -export type ThemeSpacingValue = typeof theme.semantic.core.space[ThemeSpacingKey] +export type ThemeSpacingKey = keyof Theme['core']['space'] // Allow direct theme spacing keys + +export type ThemeSpacingValue = Theme['core']['space'][ThemeSpacingKey] export type SpacerProps = CommonProps & HTMLAttributes & { @@ -18,35 +17,37 @@ export type SpacerProps = CommonProps & } export const spacerStyles = { - xs: 'var(--size-xs)', - s: 'var(--size-s)', - m: 'var(--size-m)', - l: 'var(--size-l)', - // @see redisinsight/ui/src/styles/base/_base.scss:124 - xl: 'calc(var(--base) * 2.25)', - xxl: 'var(--size-xxl)', + xs: 'var(--size-xs)', // 5px + s: 'var(--size-s)', // 10px + m: 'var(--size-m)', // 15px + l: 'var(--size-l)', // 25px + xl: 'var(--size-xl)', // 30px + xxl: 'var(--size-xxl)', // 40px } const isThemeSpacingKey = ( - size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue -): size is ThemeSpacingKey => typeof size === 'string' && size in theme.semantic.core.space + size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue, + theme: Theme, +): size is ThemeSpacingKey => size in theme.core.space const getSpacingValue = ( - size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue, + size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue, + theme: Theme, ): string => { - const themeSpacingValues = Object.values(theme.semantic.core.space) - if (typeof size === 'string' && themeSpacingValues.includes(size)) { + const themeSpacingValues = Object.values(theme.core.space) + if (themeSpacingValues.includes(size)) { return size } - - if (isThemeSpacingKey(size)) { - return theme?.semantic?.core?.space?.[size] || '0' + + if (isThemeSpacingKey(size, theme)) { + return theme?.core?.space?.[size] || '0' } return spacerStyles[size as SpacerSize] } + export const StyledSpacer = styled.div` flex-shrink: 0; - height: ${({ size = 'l' }) => getSpacingValue(size)}; + height: ${({ size = 'l', theme }) => getSpacingValue(size, theme)}; ` diff --git a/redisinsight/ui/src/components/base/layout/table/index.ts b/redisinsight/ui/src/components/base/layout/table/index.ts index 8bb5e30087..d85b86d0e4 100644 --- a/redisinsight/ui/src/components/base/layout/table/index.ts +++ b/redisinsight/ui/src/components/base/layout/table/index.ts @@ -1 +1,2 @@ -export * from '@redis-ui/table' +export { Table as RiTable } from '@redis-ui/table' +export type { ColumnDefinition } from '@redis-ui/table' diff --git a/redisinsight/ui/src/components/base/layout/tabs/index.ts b/redisinsight/ui/src/components/base/layout/tabs/index.ts index 3ebdff5dbd..346882d932 100644 --- a/redisinsight/ui/src/components/base/layout/tabs/index.ts +++ b/redisinsight/ui/src/components/base/layout/tabs/index.ts @@ -1,4 +1,2 @@ -import { Tabs, TabInfo } from '@redis-ui/components' - -export default Tabs -export type { TabInfo } +export { Tabs as RiTabs } from '@redis-ui/components' +export type { TabInfo } from '@redis-ui/components' diff --git a/redisinsight/ui/src/components/base/link/Link.tsx b/redisinsight/ui/src/components/base/link/Link.tsx deleted file mode 100644 index 7879ca2426..0000000000 --- a/redisinsight/ui/src/components/base/link/Link.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' -import { 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/shared/WindowControlGroup.tsx b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx index a963281b97..e0b2adde19 100644 --- a/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx +++ b/redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon, MinusIcon } from 'uiSrc/components/base/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiIconButton } from 'uiBase/forms' +import { CancelSlimIcon, MinusIcon } from 'uiBase/icons' import { RiTooltip } from 'uiSrc/components' type Props = { @@ -20,14 +20,14 @@ export const WindowControlGroup = ({ closeContent = 'Close', hideContent = 'Minimize', }: Props) => ( - - + + - - - + + - - - + + ) diff --git a/redisinsight/ui/src/components/base/text/ColorText.tsx b/redisinsight/ui/src/components/base/text/RiColorText.tsx similarity index 71% rename from redisinsight/ui/src/components/base/text/ColorText.tsx rename to redisinsight/ui/src/components/base/text/RiColorText.tsx index 6fb3b49584..f0a97fe17f 100644 --- a/redisinsight/ui/src/components/base/text/ColorText.tsx +++ b/redisinsight/ui/src/components/base/text/RiColorText.tsx @@ -1,11 +1,8 @@ import React from 'react' import cn from 'classnames' -import { - ColorTextProps, - StyledColorText, -} from 'uiSrc/components/base/text/text.styles' +import { ColorTextProps, StyledColorText } from './text.styles' -export const ColorText = ({ +export const RiColorText = ({ color, component = 'span', className, diff --git a/redisinsight/ui/src/components/base/text/HealthText.tsx b/redisinsight/ui/src/components/base/text/RiHealthText.tsx similarity index 71% rename from redisinsight/ui/src/components/base/text/HealthText.tsx rename to redisinsight/ui/src/components/base/text/RiHealthText.tsx index 60d56454cb..d9f74180c3 100644 --- a/redisinsight/ui/src/components/base/text/HealthText.tsx +++ b/redisinsight/ui/src/components/base/text/RiHealthText.tsx @@ -1,21 +1,21 @@ import React from 'react' import { Typography } from '@redis-ui/components' import cn from 'classnames' -import { Row } from 'uiSrc/components/base/layout/flex' -import { BodyProps, Indicator } from 'uiSrc/components/base/text/text.styles' +import { RiRow } from 'uiBase/layout' +import { BodyProps, Indicator } from './text.styles' type ColorType = BodyProps['color'] | (string & {}) export type HealthProps = Omit & { color?: ColorType } -export const HealthText = ({ +export const RiHealthText = ({ color, size = 'S', className, ...rest }: HealthProps) => ( - + - + ) diff --git a/redisinsight/ui/src/components/base/text/Text.tsx b/redisinsight/ui/src/components/base/text/RiText.tsx similarity index 85% rename from redisinsight/ui/src/components/base/text/Text.tsx rename to redisinsight/ui/src/components/base/text/RiText.tsx index e69cd5d316..7f95c1df8b 100644 --- a/redisinsight/ui/src/components/base/text/Text.tsx +++ b/redisinsight/ui/src/components/base/text/RiText.tsx @@ -1,9 +1,9 @@ import React from 'react' import cn from 'classnames' import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types' -import { StyledText, TextProps } from 'uiSrc/components/base/text/text.styles' +import { StyledText, TextProps } from './text.styles' -export const Text = ({ +export const RiText = ({ className, color, size, diff --git a/redisinsight/ui/src/components/base/text/Title.tsx b/redisinsight/ui/src/components/base/text/RiTitle.tsx similarity index 71% rename from redisinsight/ui/src/components/base/text/Title.tsx rename to redisinsight/ui/src/components/base/text/RiTitle.tsx index c579ac2725..adbef99f93 100644 --- a/redisinsight/ui/src/components/base/text/Title.tsx +++ b/redisinsight/ui/src/components/base/text/RiTitle.tsx @@ -3,4 +3,4 @@ import { Typography } from '@redis-ui/components' export type TitleProps = React.ComponentProps & {} export type TitleSize = TitleProps['size'] -export const Title = (props: TitleProps) => +export const RiTitle = (props: TitleProps) => diff --git a/redisinsight/ui/src/components/base/text/index.ts b/redisinsight/ui/src/components/base/text/index.ts index 58adaf3725..574f79c596 100644 --- a/redisinsight/ui/src/components/base/text/index.ts +++ b/redisinsight/ui/src/components/base/text/index.ts @@ -1,4 +1,5 @@ -export { Text } from './Text' -export { ColorText } from './ColorText' -export { HealthText } from './HealthText' -export { Title } from './Title' +export { RiText } from './RiText' +export { RiColorText } from './RiColorText' +export { RiHealthText } from './RiHealthText' +export { RiTitle } from './RiTitle' +export type { TitleProps, TitleSize } from './RiTitle' diff --git a/redisinsight/ui/src/components/base/text/text.styles.ts b/redisinsight/ui/src/components/base/text/text.styles.ts index 8afc1c599f..d079884222 100644 --- a/redisinsight/ui/src/components/base/text/text.styles.ts +++ b/redisinsight/ui/src/components/base/text/text.styles.ts @@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react' import { useTheme } from '@redis-ui/styles' import { Typography } from '@redis-ui/components' import styled, { css } from 'styled-components' -import { CommonProps } from 'uiSrc/components/base/theme/types' +import { CommonProps } from 'uiBase/theme/types' export type BodyProps = React.ComponentProps @@ -104,8 +104,8 @@ export const Indicator = styled.div< $color: ColorType } & CommonProps >` - width: 0.8rem; - height: 0.8rem; + width: var(--size-s); + height: var(--size-s); border-radius: 50%; background-color: ${({ $color }) => $color || 'inherit'}; ` diff --git a/redisinsight/ui/src/components/base/theme/index.ts b/redisinsight/ui/src/components/base/theme/index.ts index 952ab1e072..e2d2424f9d 100644 --- a/redisinsight/ui/src/components/base/theme/index.ts +++ b/redisinsight/ui/src/components/base/theme/index.ts @@ -1,37 +1,75 @@ -// import { theme } from '@redis-ui/styles' -// todo: after integration with redis-ui, override the theme here +import { createGlobalStyle } from 'styled-components' +import { Theme } from 'uiBase/theme/types' -export const theme = { - light: 'light', - dark: 'dark', - semantic: { - core: { - space: { - base: 'var(--base)', // 16px - xxs: 'var(--size-xxs)', - xs: 'var(--size-xs)', - s: 'var(--size-s)', - m: 'var(--size-m)', - l: 'var(--size-l)', - xl: 'var(--size-xl)', - xxl: 'var(--size-xxl)', - xxxl: 'var(--size-xxxl)', - xxxxl: 'var(--size-xxxxl)', - space000: '0', - space010: '0.1rem', - space025: '0.2rem', - space050: '0.4rem', - space100: '0.8rem', - space150: '1.2rem', - space200: '1.6rem', - space250: '2rem', - space300: '2.4rem', - space400: '3.2rem', - space500: '4rem', - space550: '4.4rem', - space600: '4.8rem', - space800: '6.4rem', - }, - }, - }, -} +export const GlobalStyle = createGlobalStyle<{ theme: Theme }>` + :root { + // spacing + //2.5px/0.2rem + --size-xxs: ${({ theme }) => theme.core.space.space025}; + //5px/0.4rem + --size-xs: ${({ theme }) => theme.core.space.space050}; + //10px/0.8rem + --size-s: ${({ theme }) => theme.core.space.space100}; + //15px/1.2rem + --size-m: ${({ theme }) => theme.core.space.space150}; + //25px/2rem + --size-l: ${({ theme }) => theme.core.space.space250}; + //30px/2.4rem + --size-xl: ${({ theme }) => theme.core.space.space300}; + //40px/3.2rem + --size-xxl: ${({ theme }) => theme.core.space.space400}; + //50px/4rem + --size-xxxl: ${({ theme }) => theme.core.space.space500}; + //60px/4.8rem + --size-xxxxl: ${({ theme }) => theme.core.space.space600}; + //15px + --size-base: var(--size-m); + + --border-radius-small: var(--size-xs); + --border-radius-medium: var(--size-s); + + --gap-s: var(--size-s); + --gap-m: var(--size-m); + // breakpoints + // to 574px + --bp-xs: 0; + // to 767px + --bp-s: 575px; + // to 991px + --bp-m: 768px; + // to 1199px + --bp-l: 992px; + // above 1200px + --bp-xl: 1200px; + + // colors + --color-text-default: ${({ theme }) => theme.components.typography.colors.primary}; + --color-text-primary: ${({ theme }) => theme.components.typography.colors.primary}; + --color-text-secondary: ${({ theme }) => theme.components.typography.colors.secondary}; + --color-text-subdued: ${({ theme }) => theme.semantic.color.text.informative400}; + --color-text-informative: ${({ theme }) => theme.semantic.color.text.informative400}; + --color-text-danger: ${({ theme }) => theme.semantic.color.text.danger600}; + --color-text-ghost: ${({ theme }) => theme.semantic.color.text.neutral600}; + --color-text-accent: ${({ theme }) => theme.semantic.color.text.notice600}; + --color-text-warning: ${({ theme }) => theme.semantic.color.text.attention600}; + --color-text-success: ${({ theme }) => theme.semantic.color.text.success600}; + + --color-link-primary: ${({ theme }) => theme.semantic.color.text.primary500}; + --color-link-default: ${({ theme }) => theme.semantic.color.text.primary500}; + --color-link-text: ${({ theme }) => theme.semantic.color.text.neutral700}; + + --color-bg-default: ${({ theme }) => theme.semantic.color.background.neutral100}; + --color-bg-primary: ${({ theme }) => theme.semantic.color.background.neutral100}; + --color-bg-secondary: ${({ theme }) => theme.semantic.color.background.primary100}; + --color-bg-subdued: ${({ theme }) => theme.semantic.color.background.informative400}; + --color-bg-informative: ${({ theme }) => theme.semantic.color.background.informative400}; + --color-bg-danger: ${({ theme }) => theme.semantic.color.background.danger600}; + --color-bg-ghost: ${({ theme }) => theme.semantic.color.background.neutral600}; + --color-bg-accent: ${({ theme }) => theme.semantic.color.background.notice600}; + --color-bg-warning: ${({ theme }) => theme.semantic.color.background.attention600}; + --color-bg-success: ${({ theme }) => theme.semantic.color.background.success600}; + + --hrBackgroundColor: ${({ theme }) => theme.semantic.color.background.primary300}; + + } +` diff --git a/redisinsight/ui/src/components/base/theme/types.ts b/redisinsight/ui/src/components/base/theme/types.ts index cd84089e3f..1e1089aa88 100644 --- a/redisinsight/ui/src/components/base/theme/types.ts +++ b/redisinsight/ui/src/components/base/theme/types.ts @@ -7,3 +7,11 @@ export type CommonProps = { } export type Theme = ReturnType + +const ASC = 'asc' +const DESC = 'desc' +export type Direction = typeof ASC | typeof DESC +export interface PropertySort { + field: string + direction: Direction +} diff --git a/redisinsight/ui/src/components/base/tooltip/HoverContent.tsx b/redisinsight/ui/src/components/base/tooltip/HoverContent.tsx index a722cd5833..4a61c5c20e 100644 --- a/redisinsight/ui/src/components/base/tooltip/HoverContent.tsx +++ b/redisinsight/ui/src/components/base/tooltip/HoverContent.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { Col } from 'uiSrc/components/base/layout/flex' -import { Title } from 'uiSrc/components/base/text' +import { RiCol } from 'uiBase/layout' +import { RiTitle } from 'uiBase/text' interface RiTooltipContentProps { title?: React.ReactNode @@ -9,8 +9,8 @@ interface RiTooltipContentProps { } export const HoverContent = ({ title, content }: RiTooltipContentProps) => ( - - {title && {title}} + + {title && {title}} {content} - + ) diff --git a/redisinsight/ui/src/components/base/utils/FocusTrap.tsx b/redisinsight/ui/src/components/base/utils/RiFocusTrap.tsx similarity index 99% rename from redisinsight/ui/src/components/base/utils/FocusTrap.tsx rename to redisinsight/ui/src/components/base/utils/RiFocusTrap.tsx index d9ccd4bd99..1ad35b38b0 100644 --- a/redisinsight/ui/src/components/base/utils/FocusTrap.tsx +++ b/redisinsight/ui/src/components/base/utils/RiFocusTrap.tsx @@ -110,7 +110,7 @@ const defaultProps = { gapMode: 'padding', } as const -export const FocusTrap = ({ +export const RiFocusTrap = ({ children, clickOutsideDisables = defaultProps.clickOutsideDisables, closeOnMouseup, diff --git a/redisinsight/ui/src/components/base/utils/OutsideClickDetector.tsx b/redisinsight/ui/src/components/base/utils/RiOutsideClickDetector.tsx similarity index 97% rename from redisinsight/ui/src/components/base/utils/OutsideClickDetector.tsx rename to redisinsight/ui/src/components/base/utils/RiOutsideClickDetector.tsx index 56c23d6946..e6bdab2879 100644 --- a/redisinsight/ui/src/components/base/utils/OutsideClickDetector.tsx +++ b/redisinsight/ui/src/components/base/utils/RiOutsideClickDetector.tsx @@ -8,7 +8,7 @@ import { useEffect, useRef, } from 'react' -import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id' +import { useGenerateId } from 'uiBase/utils' export interface RIEvent extends Event { riGeneratedBy: string[] @@ -37,7 +37,7 @@ export interface OutsideClickDetectorProps { // We need the actual event targets to make the correct decisions // about user intention. So, consider the down/start and up/end // items below as the deconstruction of a click event. -export const OutsideClickDetector = ({ +export const RiOutsideClickDetector = ({ children, onOutsideClick, isDisabled, diff --git a/redisinsight/ui/src/components/base/utils/ShowHide.spec.tsx b/redisinsight/ui/src/components/base/utils/RiShowHide.spec.tsx similarity index 77% rename from redisinsight/ui/src/components/base/utils/ShowHide.spec.tsx rename to redisinsight/ui/src/components/base/utils/RiShowHide.spec.tsx index a15367516a..ad2938b4f4 100644 --- a/redisinsight/ui/src/components/base/utils/ShowHide.spec.tsx +++ b/redisinsight/ui/src/components/base/utils/RiShowHide.spec.tsx @@ -1,13 +1,9 @@ import React from 'react' import { render, screen } from 'uiSrc/utils/test-utils' -import { - Breakpoints, - HideFor, - ShowFor, -} from 'uiSrc/components/base/utils/ShowHide' +import { Breakpoints, RiHideFor, RiShowFor } from './RiShowHide' -describe('ShowHide', () => { +describe('RiShowHide', () => { beforeAll(() => { // @ts-ignore innerWidth might be read only, but we can still override it for the sake of testing window.innerWidth = 670 @@ -17,18 +13,18 @@ describe('ShowHide', () => { it('should render', () => { expect( render( - + Child - , + , ), ).toBeTruthy() }) it('hides for matching breakpoints', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).not.toBeInTheDocument() @@ -37,9 +33,9 @@ describe('ShowHide', () => { Breakpoints.forEach((size) => { it(`${size} is rendered`, () => { render( - + Child - , + , ) const child = screen.queryByText('Child') @@ -53,9 +49,9 @@ describe('ShowHide', () => { it('renders for multiple breakpoints', () => { render( - + Child - , + , ) expect(screen.getByText('Child')).toBeInTheDocument() @@ -63,9 +59,9 @@ describe('ShowHide', () => { it('renders for "none"', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).toBeInTheDocument() @@ -73,9 +69,9 @@ describe('ShowHide', () => { test('never renders for "all"', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).not.toBeInTheDocument() @@ -86,18 +82,18 @@ describe('ShowHide', () => { it('should render', () => { expect( render( - + Child - , + , ), ).toBeTruthy() }) it('shows for matching breakpoints', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).toBeInTheDocument() @@ -106,9 +102,9 @@ describe('ShowHide', () => { Breakpoints.forEach((size) => { it(`${size} is rendered`, () => { render( - + Child - , + , ) const child = screen.queryByText('Child') @@ -122,9 +118,9 @@ describe('ShowHide', () => { it('renders for multiple breakpoints', () => { render( - + Child - , + , ) expect(screen.getByText('Child')).toBeInTheDocument() @@ -132,9 +128,9 @@ describe('ShowHide', () => { it('never renders for "none"', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).not.toBeInTheDocument() @@ -142,9 +138,9 @@ describe('ShowHide', () => { test('renders for "all"', () => { render( - + Child - , + , ) expect(screen.queryByText('Child')).toBeInTheDocument() diff --git a/redisinsight/ui/src/components/base/utils/ShowHide.tsx b/redisinsight/ui/src/components/base/utils/RiShowHide.tsx similarity index 94% rename from redisinsight/ui/src/components/base/utils/ShowHide.tsx rename to redisinsight/ui/src/components/base/utils/RiShowHide.tsx index 038c347b5d..0fcc47a326 100644 --- a/redisinsight/ui/src/components/base/utils/ShowHide.tsx +++ b/redisinsight/ui/src/components/base/utils/RiShowHide.tsx @@ -29,7 +29,7 @@ export interface ShowHideForProps { sizes: BreakpointKey[] | 'all' | 'none' } -export const HideFor = ({ children, sizes }: ShowHideForProps) => { +export const RiHideFor = ({ children, sizes }: ShowHideForProps) => { const currentBreakpoint = useCurrentBreakpoint() const isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint) @@ -40,7 +40,7 @@ export const HideFor = ({ children, sizes }: ShowHideForProps) => { return <>{children} } -export const ShowFor = ({ children, sizes }: ShowHideForProps) => { +export const RiShowFor = ({ children, sizes }: ShowHideForProps) => { const currentBreakpoint = useCurrentBreakpoint() const isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint) diff --git a/redisinsight/ui/src/components/base/utils/WindowEvent.spec.tsx b/redisinsight/ui/src/components/base/utils/RiWindowEvent.spec.tsx similarity index 78% rename from redisinsight/ui/src/components/base/utils/WindowEvent.spec.tsx rename to redisinsight/ui/src/components/base/utils/RiWindowEvent.spec.tsx index 5edfc733c1..ca088bca4a 100644 --- a/redisinsight/ui/src/components/base/utils/WindowEvent.spec.tsx +++ b/redisinsight/ui/src/components/base/utils/RiWindowEvent.spec.tsx @@ -1,8 +1,8 @@ import React from 'react' import { render, fireEvent } from 'uiSrc/utils/test-utils' -import { WindowEvent } from './WindowEvent' +import { RiWindowEvent } from './RiWindowEvent' -describe('WindowEvent', () => { +describe('RiWindowEvent', () => { let windowAddCount = 0 let windowRemoveCount = 0 let windowAddEventListener: typeof window.addEventListener @@ -36,14 +36,16 @@ describe('WindowEvent', () => { it('should attach handler to window event on mount', () => { const handler = () => null - render() + render() expect(window.addEventListener).toHaveBeenCalledWith('click', handler) expect(windowAddCount).toEqual(1) }) it('should remove handler on unmount', () => { const handler = () => null - const { unmount } = render() + const { unmount } = render( + , + ) unmount() expect(window.removeEventListener).toHaveBeenCalledWith('click', handler) expect(windowRemoveCount).toEqual(1) @@ -53,12 +55,12 @@ describe('WindowEvent', () => { const handler1 = () => null const handler2 = () => null const { rerender } = render( - , + , ) expect(window.addEventListener).toHaveBeenCalledWith('click', handler1) - rerender() + rerender() expect(window.removeEventListener).toHaveBeenCalledWith('click', handler1) expect(window.addEventListener).toHaveBeenCalledWith('keydown', handler2) @@ -66,11 +68,17 @@ describe('WindowEvent', () => { it('should not remove or re-attach handler if update is irrelevant', () => { const handler = () => null - const { rerender } = render() + const { rerender } = render( + , + ) expect(windowAddCount).toEqual(1) rerender( - , + , ) expect(windowAddCount).toEqual(1) expect(windowRemoveCount).toEqual(0) @@ -80,7 +88,7 @@ describe('WindowEvent', () => { window.addEventListener = windowAddEventListener window.removeEventListener = windowRemoveEventListener const handler = jest.fn() - render() + render() fireEvent.click(window) expect(handler).toHaveBeenCalled() expect(handler).toHaveBeenCalledTimes(1) diff --git a/redisinsight/ui/src/components/base/utils/WindowEvent.tsx b/redisinsight/ui/src/components/base/utils/RiWindowEvent.tsx similarity index 94% rename from redisinsight/ui/src/components/base/utils/WindowEvent.tsx rename to redisinsight/ui/src/components/base/utils/RiWindowEvent.tsx index 7c9ce84ae4..35c93882a1 100644 --- a/redisinsight/ui/src/components/base/utils/WindowEvent.tsx +++ b/redisinsight/ui/src/components/base/utils/RiWindowEvent.tsx @@ -39,7 +39,7 @@ export function useWindowEvent( * * ``` */ -export function WindowEvent({ +export function RiWindowEvent({ event, handler, }: WindowEventProps) { diff --git a/redisinsight/ui/src/components/base/utils/index.ts b/redisinsight/ui/src/components/base/utils/index.ts index 1fe378c81b..198f905cca 100644 --- a/redisinsight/ui/src/components/base/utils/index.ts +++ b/redisinsight/ui/src/components/base/utils/index.ts @@ -1,2 +1,7 @@ -export { OutsideClickDetector } from './OutsideClickDetector' +export { RiOutsideClickDetector } from './RiOutsideClickDetector' +export { RiFocusTrap } from './RiFocusTrap' export { RIResizeObserver } from './resize-observer/ResizeObserver' +export { useGenerateId } from './hooks/generate-id' +export { useInnerText } from './hooks/inner-text' +export * from './RiShowHide' +export * from './RiWindowEvent' diff --git a/redisinsight/ui/src/components/base/utils/outsideClickDetector.spec.tsx b/redisinsight/ui/src/components/base/utils/outsideClickDetector.spec.tsx index 0e8afe65e5..727bd4edca 100644 --- a/redisinsight/ui/src/components/base/utils/outsideClickDetector.spec.tsx +++ b/redisinsight/ui/src/components/base/utils/outsideClickDetector.spec.tsx @@ -1,13 +1,13 @@ import React from 'react' import { fireEvent, render } from 'uiSrc/utils/test-utils' -import { OutsideClickDetector } from 'uiSrc/components/base/utils/OutsideClickDetector' +import { RiOutsideClickDetector } from './RiOutsideClickDetector' -describe('OutsideClickDetector', () => { +describe('RiOutsideClickDetector', () => { it('is rendered', () => { const { container } = render( - {}}> + {}}>
- , + , ) expect(container.firstChild).toBeTruthy() }) @@ -21,18 +21,18 @@ describe('OutsideClickDetector', () => { const { findByTestId } = render(
- +
- +
- +
- +
- +
- +
, ) const target2 = await findByTestId('target2') diff --git a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx index 6cd567692b..63350892e2 100644 --- a/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx +++ b/redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx @@ -2,6 +2,10 @@ import React, { useEffect } from 'react' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiHideFor, RiShowFor } from 'uiBase/utils' +import { RiBadge } from 'uiBase/display' +import { CliIcon, DocumentationIcon, ProfilerIcon, RiIcon } from 'uiBase/icons' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { @@ -21,15 +25,6 @@ import { import FeatureFlagComponent from 'uiSrc/components/feature-flag-component' import { FeatureFlags } from 'uiSrc/constants' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { HideFor, ShowFor } from 'uiSrc/components/base/utils/ShowHide' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' -import { - CliIcon, - DocumentationIcon, - ProfilerIcon, -} from 'uiSrc/components/base/icons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from '../../styles.module.scss' const BottomGroupMinimized = () => { @@ -91,8 +86,8 @@ const BottomGroupMinimized = () => { return (
- - + { [styles.active]: isShowCli || cliClientUuid, })} /> - + - { })} label="Command Helper" /> - + - { })} label="Profiler" /> - + - + { data-testid="user-survey-link" > - + Let us know what you think - - + + Survey - +
diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx index 192e5d328e..eeca65f885 100644 --- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx @@ -1,7 +1,7 @@ import { cloneDeep, last } from 'lodash' import React from 'react' -import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { instance, mock } from 'ts-mockito' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { cleanup, fireEvent, diff --git a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx index 8931594be4..a31849c5be 100644 --- a/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx @@ -1,6 +1,7 @@ import React, { Ref, useEffect, useRef, useState } from 'react' -import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { useDispatch, useSelector } from 'react-redux' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { KeyboardKeys as keys } from 'uiSrc/constants/keys' import { Nullable, scrollIntoView } from 'uiSrc/utils' import { isModifiedEvent } from 'uiSrc/services' @@ -11,7 +12,6 @@ import CliInputWrapper from 'uiSrc/components/cli/components/cli-input' import { clearOutput, updateCliHistoryStorage } from 'uiSrc/utils/cliHelper' import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import styles from './styles.module.scss' export interface Props { @@ -248,8 +248,8 @@ const CliBody = (props: Props) => { role="textbox" tabIndex={0} > - - + +
{data}
{!error && !(loading || settingsLoading) ? ( { !error && Executing command... )}
- - + +
) } diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx index 1042d96cc3..41af0aac7d 100644 --- a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx +++ b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx @@ -2,6 +2,10 @@ import React, { useEffect } from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { WindowControlGroup } from 'uiBase/index' +import { RiIcon } from 'uiBase/icons' import { toggleCli, resetCliSettings, @@ -14,10 +18,6 @@ import { resetOutputLoading } from 'uiSrc/slices/cli/cli-output' import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const CliHeader = () => { @@ -63,24 +63,24 @@ const CliHeader = () => { return (
- - + + - CLI + CLI - - + + - +
) } diff --git a/redisinsight/ui/src/components/code-block/CodeBlock.tsx b/redisinsight/ui/src/components/code-block/CodeBlock.tsx index f5d4c6b9b1..b3abb21092 100644 --- a/redisinsight/ui/src/components/code-block/CodeBlock.tsx +++ b/redisinsight/ui/src/components/code-block/CodeBlock.tsx @@ -1,9 +1,9 @@ import React, { HTMLAttributes, useMemo } from 'react' import cx from 'classnames' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CopyIcon } from 'uiSrc/components/base/icons' -import { useInnerText } from 'uiSrc/components/base/utils/hooks/inner-text' +import { RiIconButton } from 'uiBase/forms' +import { CopyIcon } from 'uiBase/icons' +import { useInnerText } from 'uiBase/utils' import styles from './styles.module.scss' export interface Props extends HTMLAttributes { @@ -31,7 +31,7 @@ const CodeBlock = (props: Props) => { {children} {isCopyable && ( - { const readMore = (commandName = '') => { const docUrl = getDocUrlForCommand(commandName) return ( - Read more - + ) } @@ -77,31 +77,31 @@ const CommandHelper = (props: Props) => { onBackClick={handleBackClick} /> {summary && ( - {summary}{' '} {readMore(commandLine)} - + )} {!!argList.length && (
- + Arguments: - + {argList}
)} {since && (
- + Since: - + {since}
)} @@ -110,23 +110,23 @@ const CommandHelper = (props: Props) => { className={styles.field} data-testid="cli-helper-complexity" > - + Complexity: - + {complexity}
)}
)} {!commandLine && ( - Enter any command in CLI or use search to see detailed information. - + )}
)} diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx index 0e59b765c4..a3086d46cb 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx @@ -2,6 +2,10 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { WindowControlGroup } from 'uiBase/index' +import { RiIcon } from 'uiBase/icons' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { resetCliHelperSettings, @@ -11,10 +15,6 @@ import { import { OnboardingTour } from 'uiSrc/components' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const CommandHelperHeader = () => { @@ -44,25 +44,25 @@ const CommandHelperHeader = () => { return (
- - + + - Command Helper + Command Helper - - + + - +
) } diff --git a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx index 033ea115b3..a0df013a51 100644 --- a/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx +++ b/redisinsight/ui/src/components/command-helper/CommandHelperWrapper.tsx @@ -3,6 +3,8 @@ import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import cn from 'classnames' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiBadge } from 'uiBase/display' import { CommandGroup, ICommand, ICommandArgGenerated } from 'uiSrc/constants' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' @@ -14,8 +16,6 @@ import { removeDeprecatedModuleCommands, checkDeprecatedModuleCommand, } from 'uiSrc/utils' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' import CommandHelper from './CommandHelper' import CommandHelperHeader from './CommandHelperHeader' @@ -98,16 +98,16 @@ const CommandHelperWrapper = () => { ? 'Optional' : 'Required' return ( - - + + - - {arg.generatedName} - + + {arg.generatedName} + ) } diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx index 885fb66944..cc3797b767 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-info/CHCommandInfo.tsx @@ -1,14 +1,12 @@ import React from 'react' - -import { GroupBadge } from 'uiSrc/components' +import { RiIconButton } from 'uiBase/forms' +import { ArrowLeftIcon } from 'uiBase/icons' +import { RiColorText } from 'uiBase/text' +import { RiBadge } from 'uiBase/display' +import { RiRow } from 'uiBase/layout' import { CommandGroup } from 'uiSrc/constants' - -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { ArrowLeftIcon } from 'uiSrc/components/base/icons' -import { ColorText } from 'uiSrc/components/base/text' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' -import { Row } from 'uiSrc/components/base/layout/flex' +import { GroupBadge } from 'uiSrc/components' import styles from './styles.module.scss' @@ -28,25 +26,25 @@ const CHCommandInfo = (props: Props) => { } = props return ( - - - {args} - + {complexity && ( { data-testid="cli-helper-complexity-short" /> )} - + ) } 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 index f94a1f01dd..eabde7cb33 100644 --- 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 @@ -3,14 +3,14 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiColorText, RiText } from 'uiBase/text' +import { RiLink } from 'uiBase/display' import { generateArgsNames } from 'uiSrc/utils' import { setSearchedCommand } from 'uiSrc/slices/cli/cli-settings' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { Link } from 'uiSrc/components/base/link/Link' import styles from './styles.module.scss' export interface Props { @@ -45,25 +45,25 @@ const CHSearchOutput = ({ searchedCommands }: Props) => { args, ).join(' ') return ( - {argString} - + ) } return ( - {ALL_REDIS_COMMANDS[command].summary} - + ) } @@ -72,9 +72,9 @@ const CHSearchOutput = ({ searchedCommands }: Props) => { {searchedCommands.length > 0 && (
{searchedCommands.map((command: string) => ( - - - + + { handleClickCommand(e, command) }} > - - {command} - - - - + {command} + + + {renderDescription(command)} - - + + ))}
)} {searchedCommands.length === 0 && (
- + No results found. - +
)} diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx index c6be824fe1..3e2104619a 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/CHSearchFilter.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react' import cx from 'classnames' import { useSelector } from 'react-redux' +import { RiText } from 'uiBase/text' +import { RiSelect } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants' import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' -import { Text } from 'uiSrc/components/base/text' -import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export interface Props { @@ -46,21 +46,21 @@ const CHSearchFilter = ({ submitFilter, isLoading }: Props) => { label: text, value, inputDisplay: ( - {text} - + ), dropdownDisplay: ( - {text} - + ), } }) diff --git a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx index 47f65c734f..3d10db0af4 100644 --- a/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx +++ b/redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx @@ -1,9 +1,9 @@ import React, { useEffect, useState } from 'react' import { useSelector } from 'react-redux' +import { RiSearchInput } from 'uiBase/inputs' import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings' -import { SearchInput } from 'uiSrc/components/base/inputs' import styles from './styles.module.scss' export interface Props { @@ -38,7 +38,7 @@ const CHSearchInput = ({ submitSearch, isLoading = false }: Props) => { return (
- void @@ -16,21 +15,23 @@ const ConnectivityError = ({ error, onRetry, }: ConnectivityErrorProps) => ( - - - + + + {isLoading && } - - {error} + + + {error} + {onRetry && ( - - Retry - + + Retry + )} - - - - + + + + ) export default ConnectivityError diff --git a/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx b/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx index d131bc3fa5..74843a0d33 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx @@ -1,11 +1,11 @@ import React from 'react' import parse from 'html-react-parser' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' -import { Text } from 'uiSrc/components/base/text' -import { SwitchInput } from 'uiSrc/components/base/inputs' +import { RiText } from 'uiBase/text' +import { RiSwitchInput } from 'uiBase/inputs' import { ItemDescription } from './components' import { IConsent } from '../ConsentsSettings' @@ -30,23 +30,26 @@ const ConsentOption = (props: Props) => { } = props return ( - + {isSettingsPage && consent.description && ( <> - - - - + + + )} - - - + + onChangeAgreement(checked, consent.agreementName) @@ -54,23 +57,26 @@ const ConsentOption = (props: Props) => { data-testid={`switch-option-${consent.agreementName}`} disabled={consent?.disabled} /> - - - {parse(consent.label)} + + + {parse(consent.label)} {!isSettingsPage && consent.description && ( - - - + + )} - - - {!withoutSpacer && } - + + + {!withoutSpacer && } + ) } diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx index d336434b61..1ff2c1d821 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx @@ -3,13 +3,13 @@ import { useDispatch, useSelector } from 'react-redux' import { useFormik } from 'formik' import { has } from 'lodash' +import { RiTitle } from 'uiBase/text' import { compareConsents } from 'uiSrc/utils' import { updateUserConfigSettingsAction, userSettingsSelector, } from 'uiSrc/slices/user/user-settings' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { Title } from 'uiSrc/components/base/text/Title' import ConsentOption from '../ConsentOption' import { IConsent, ConsentCategories } from '../ConsentsSettings' @@ -90,7 +90,7 @@ const ConsentsNotifications = () => { return (
- Notifications + Notifications {notificationConsents.map((consent: IConsent) => ( { return (
- + To optimize your experience, Redis Insight uses third-party tools. - - - Usage Data + + + Usage Data {privacyConsents.map((consent: IConsent) => ( { return (
- + {consents.length > 1 && ( <> - - - - + + + - - - Use recommended settings - + + + Use recommended settings + + Select to activate all listed options. - - - - - + + + + { )} {!!privacyConsents.length && ( <> - - + <RiSpacer /> + <RiTitle size="M" className={styles.title}> Privacy Settings - - - + + + To optimize your experience, Redis Insight uses third-party tools. - - + + )} {privacyConsents.map((consent: IConsent) => ( @@ -267,11 +268,11 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { ))} {!!notificationConsents.length && ( <> - - + <RiSpacer size="m" /> + <RiTitle size="M" className={styles.title}> Notifications - - + + )} {notificationConsents.map((consent: IConsent) => ( @@ -285,33 +286,33 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
{requiredConsents.length ? ( <> - - - + + + Use of Redis Insight is governed by your signed agreement with Redis, or, if none, by the{' '} - Redis Enterprise Software Subscription Agreement - + . If no agreement applies, use is subject to the{' '} - Server Side Public License - - - + + + ) : ( - + )} - - + + {requiredConsents.map((consent: IConsent) => ( { key={consent.agreementName} /> ))} - - + + { ) : null } > - {}} @@ -346,10 +347,10 @@ const ConsentsSettings = ({ onSubmitted }: Props) => { data-testid="btn-submit" > Submit - + - - + + ) } diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx index 226f9144cf..c7ce3a49d5 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx @@ -2,16 +2,16 @@ import React, { useEffect } from 'react' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiIcon } from 'uiBase/icons' +import { RiTitle } from 'uiBase/text' +import { RiModal } from 'uiBase/display' import { BuildType } from 'uiSrc/constants/env' import { appInfoSelector } from 'uiSrc/slices/app/info' import { Pages } from 'uiSrc/constants' import { ConsentsSettings } from 'uiSrc/components' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { Title } from 'uiSrc/components/base/text/Title' -import { Modal } from 'uiSrc/components/base/display' import styles from '../styles.module.scss' const ConsentsSettingsPopup = () => { @@ -35,23 +35,23 @@ const ConsentsSettingsPopup = () => { }, []) return ( - - - + <RiRow justify="between"> + <RiFlexItem> + <RiTitle size="L" className={styles.consentsPopupTitle}> EULA and Privacy Settings - - - + + + - - + + } content={} /> diff --git a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx index 2e1b1640d5..680a93480a 100644 --- a/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx +++ b/redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx @@ -2,17 +2,17 @@ import React, { useContext } from 'react' import cx from 'classnames' +import { RiIconButton } from 'uiBase/forms' +import { RiColorText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' +import { RiRow } from 'uiBase/layout' import { Theme } from 'uiSrc/constants' +import { RiTooltip } from 'uiBase/display' import { getModule, truncateText } from 'uiSrc/utils' import { IDatabaseModule, sortModules } from 'uiSrc/utils/modules' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { DEFAULT_MODULES_INFO, ModuleInfo } from 'uiSrc/constants/modules' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { ColorText } from 'uiSrc/components/base/text' -import { RiTooltip } from 'uiSrc/components' -import { RiIcon } from 'uiSrc/components/base/icons' -import { Row } from 'uiSrc/components/base/layout/flex' import { RedisDefaultModules } from 'uiSrc/slices/interfaces' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' @@ -93,7 +93,7 @@ const DatabaseListModules = React.memo((props: Props) => { const hasContent = !!content const hasAbbreviation = !!abbreviation return ( - { > {hasIcon && } {!hasIcon && hasAbbreviation && ( - {abbreviation} - + )} {hasContent && ( - + {content} - + )} - + ) }, ) @@ -126,7 +126,7 @@ const DatabaseListModules = React.memo((props: Props) => { ) => ( {icon ? ( - handleCopy(content)} @@ -134,7 +134,7 @@ const DatabaseListModules = React.memo((props: Props) => { aria-labelledby={`${content}_module`} /> ) : ( - { aria-labelledby={`${content}_module`} > {abbreviation} - + )} ) diff --git a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx index e7daeb3142..cb6d395750 100644 --- a/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx +++ b/redisinsight/ui/src/components/database-list-options/DatabaseListOptions.tsx @@ -1,6 +1,13 @@ import React, { useContext } from 'react' import { isString } from 'lodash' import { IconType } from '@elastic/eui' +import { + ActiveActiveDarkIcon, + ActiveActiveLightIcon, + RedisOnFlashDarkIcon, + RedisOnFlashLightIcon, +} from 'uiBase/icons' +import { RiIconButton } from 'uiBase/forms' import { RiTooltip } from 'uiSrc/components' import { @@ -12,13 +19,6 @@ import { import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import { - ActiveActiveDarkIcon, - ActiveActiveLightIcon, - RedisOnFlashDarkIcon, - RedisOnFlashLightIcon, -} from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons' import styles from './styles.module.scss' interface Props { @@ -99,7 +99,7 @@ const DatabaseListOptions = ({ options }: Props) => { anchorClassName={styles.tooltip} > {icon ? ( - handleCopy(contentProp)} aria-labelledby={`${contentProp}_module`} diff --git a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx index d5df14f6a8..8243f64268 100644 --- a/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx +++ b/redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx @@ -1,20 +1,20 @@ import React from 'react' import cx from 'classnames' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSecondaryButton } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' import { getConfig } from 'uiSrc/config' import { DATABASE_OVERVIEW_MINIMUM_REFRESH_INTERVAL, DATABASE_OVERVIEW_REFRESH_INTERVAL, } from 'uiSrc/constants/browser' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import MetricItem, { OverviewItem, } from 'uiSrc/components/database-overview/components/OverviewMetrics/MetricItem' import { useDatabaseOverview } from 'uiSrc/components/database-overview/hooks/useDatabaseOverview' import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import AutoRefresh from '../auto-refresh' import styles from './styles.module.scss' @@ -35,9 +35,9 @@ const DatabaseOverview = () => { } = useDatabaseOverview() return ( - - - + + @@ -58,7 +58,7 @@ const DatabaseOverview = () => { className={styles.upgradeBtnItem} style={{ borderRight: 'none' }} > - = 75} className={cx(styles.upgradeBtn)} style={{ fontWeight: '400' }} @@ -71,7 +71,7 @@ const DatabaseOverview = () => { data-testid="upgrade-ri-db-button" > Upgrade plan - + )} {metrics?.map((overviewItem) => ( @@ -86,7 +86,7 @@ const DatabaseOverview = () => { data-testid="overview-auto-refresh" id="overview-auto-refresh" > - + { onRefreshClicked={handleRefreshClick} onEnableAutoRefresh={handleEnableAutoRefresh} /> - + )} - - - + + + ) } @@ -128,27 +128,27 @@ const getTooltipContent = (metric: IMetric) => { return metric.children .filter((item) => item.value !== undefined) .map((tooltipItem) => ( - {tooltipItem.icon && ( - + - + )} - + {tooltipItem.content} - - + + {tooltipItem.title} - - + + )) } diff --git a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx index 829e0f95e1..01a140a697 100644 --- a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx +++ b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/MetricItem.tsx @@ -1,10 +1,10 @@ import React, { CSSProperties, ReactNode } from 'react' import cx from 'classnames' +import { RiIcon } from 'uiBase/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiTooltip } from 'uiBase/display' import styles from 'uiSrc/components/database-overview/styles.module.scss' import { IMetric } from 'uiSrc/components/database-overview/components/OverviewMetrics/OverviewMetrics' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { RiTooltip } from 'uiSrc/components' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' export interface OverviewItemProps { children: ReactNode @@ -18,7 +18,7 @@ export const OverviewItem = ({ id, style, }: OverviewItemProps) => ( - {children} - + ) const MetricItem = ( @@ -43,14 +43,16 @@ const MetricItem = ( className={styles.tooltip} content={tooltipContent} > - + {icon && ( - + - + )} - {content} - + + {content} + + ) diff --git a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx index a4a47de86b..8564f1e568 100644 --- a/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx +++ b/redisinsight/ui/src/components/database-overview/components/OverviewMetrics/OverviewMetrics.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from 'react' import { isArray, isUndefined, toNumber } from 'lodash' +import { AllIconsType } from 'uiBase/icons' +import { RiLoader } from 'uiBase/display' import { formatBytes, Nullable, @@ -11,9 +13,6 @@ import { import { Theme } from 'uiSrc/constants' import { numberWithSpaces } from 'uiSrc/utils/numbers' -import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' -import { Loader } from 'uiSrc/components/base/display' - import styles from './styles.module.scss' interface Props { @@ -92,7 +91,7 @@ function getCpuUsage( cpuUsagePercentage === null ? ( <>
- + Calculating...
diff --git a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx index c75c9986b4..aa6d2d3bc2 100644 --- a/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx +++ b/redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx @@ -1,6 +1,9 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiTitle, RiText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' import { guideLinksSelector } from 'uiSrc/slices/content/guide-links' import GUIDE_ICONS from 'uiSrc/components/explore-guides/icons' @@ -9,10 +12,6 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels' import { findTutorialPath } from 'uiSrc/utils' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const ExploreGuides = () => { @@ -41,13 +40,13 @@ const ExploreGuides = () => { return (
- + <RiTitle size="XS"> <span>Here's a good starting point</span> - - + + Explore the amazing world of Redis Stack with our interactive guides - - + + {!!data.length && (
{data.map(({ title, tutorialId, icon }) => ( diff --git a/redisinsight/ui/src/components/explore-guides/icons.ts b/redisinsight/ui/src/components/explore-guides/icons.ts index 9b45a88843..3b5ab44bfd 100644 --- a/redisinsight/ui/src/components/explore-guides/icons.ts +++ b/redisinsight/ui/src/components/explore-guides/icons.ts @@ -1,4 +1,4 @@ -import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' +import { AllIconsType } from 'uiBase/icons' const GUIDE_ICONS: Record = { search: 'QuerySearchIcon', diff --git a/redisinsight/ui/src/components/field-message/FieldMessage.tsx b/redisinsight/ui/src/components/field-message/FieldMessage.tsx index 27e5e86237..36e16a7712 100644 --- a/redisinsight/ui/src/components/field-message/FieldMessage.tsx +++ b/redisinsight/ui/src/components/field-message/FieldMessage.tsx @@ -1,9 +1,9 @@ import React, { Ref, useEffect, useRef } from 'react' import cx from 'classnames' -import { ColorText } from 'uiSrc/components/base/text' +import { RiColorText } from 'uiBase/text' +import { AllIconsType, RiIcon } from 'uiBase/icons' import { scrollIntoView } from 'uiSrc/utils' -import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' type Colors = @@ -51,13 +51,13 @@ const FieldMessage = ({ color={color || 'danger'} /> )} - {children} - +
) } diff --git a/redisinsight/ui/src/components/form-dialog/FormDialog.spec.tsx b/redisinsight/ui/src/components/form-dialog/FormDialog.spec.tsx index 1d95ead7bf..42d707ddda 100644 --- a/redisinsight/ui/src/components/form-dialog/FormDialog.spec.tsx +++ b/redisinsight/ui/src/components/form-dialog/FormDialog.spec.tsx @@ -1,24 +1,13 @@ import React from 'react' import { render, screen } from 'uiSrc/utils/test-utils' +import { mockModal } from 'uiSrc/mocks/components/modal' import FormDialog from './FormDialog' -jest.mock('uiSrc/components/base/display', () => { - const actual = jest.requireActual('uiSrc/components/base/display') +jest.mock('uiBase/display', () => { + const actual = jest.requireActual('uiBase/display') - return { - ...actual, - Modal: { - ...actual.Modal, - Content: { - ...actual.Modal.Content, - Header: { - ...actual.Modal.Content.Header, - Title: jest.fn().mockReturnValue(null), - }, - }, - }, - } + return mockModal(actual) }) describe('FormDialog', () => { @@ -33,7 +22,7 @@ describe('FormDialog', () => {
, ) - + // comment out until the modal header issue is fixed // expect(screen.getByTestId('header')).toBeInTheDocument() expect(screen.getByTestId('footer')).toBeInTheDocument() diff --git a/redisinsight/ui/src/components/form-dialog/FormDialog.tsx b/redisinsight/ui/src/components/form-dialog/FormDialog.tsx index b35fa38eb6..90383b6acc 100644 --- a/redisinsight/ui/src/components/form-dialog/FormDialog.tsx +++ b/redisinsight/ui/src/components/form-dialog/FormDialog.tsx @@ -1,9 +1,9 @@ import React from 'react' import cx from 'classnames' +import { CancelIcon } from 'uiBase/icons' +import { RiModal } from 'uiBase/display' import { Nullable } from 'uiSrc/utils' -import { CancelIcon } from 'uiSrc/components/base/icons' -import { Modal } from 'uiSrc/components/base/display' import styles from './styles.module.scss' export interface Props { @@ -21,18 +21,20 @@ const FormDialog = (props: Props) => { if (!isOpen) return null return ( - - + - - {header} - - {footer} - - + + {header} + + + {footer} + + + ) } diff --git a/redisinsight/ui/src/components/full-screen/FullScreen.tsx b/redisinsight/ui/src/components/full-screen/FullScreen.tsx index 1b2f23934a..5454295f78 100644 --- a/redisinsight/ui/src/components/full-screen/FullScreen.tsx +++ b/redisinsight/ui/src/components/full-screen/FullScreen.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { ExtendIcon, ShrinkIcon } from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { RiTooltip } from 'uiSrc/components' +import { ExtendIcon, ShrinkIcon } from 'uiBase/icons' +import { RiIconButton } from 'uiBase/forms' +import { RiTooltip } from 'uiBase/display' export interface Props { isFullScreen: boolean @@ -21,7 +21,7 @@ const FullScreen = ({ position="left" anchorClassName={anchorClassName} > - {!compressed && ( - {getGroupTypeDisplay(type)} - + )} {onDelete && ( - { @@ -37,7 +37,7 @@ const HomeTabs = () => { } return ( - = { @@ -18,22 +19,10 @@ const mockProps: Props = { isSubmitDisabled: false, } -jest.mock('uiSrc/components/base/display', () => { - const actual = jest.requireActual('uiSrc/components/base/display') - - return { - ...actual, - Modal: { - ...actual.Modal, - Content: { - ...actual.Modal.Content, - Header: { - ...actual.Modal.Content.Header, - Title: jest.fn().mockReturnValue(null), - }, - }, - }, - } +jest.mock('uiBase/display', () => { + const actual = jest.requireActual('uiBase/display') + + return mockModal(actual) }) describe('ImportFileModal', () => { diff --git a/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx b/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx index b0617ff4e6..7270ce85e7 100644 --- a/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx +++ b/redisinsight/ui/src/components/import-file-modal/ImportFileModal.tsx @@ -1,13 +1,13 @@ import React from 'react' +import { RiCol, RiFlexItem, RiRow } from 'uiBase/layout' +import { RiColorText, RiText } from 'uiBase/text' +import { RiLoader, RiModal } from 'uiBase/display' +import { RiIcon, CancelIcon } from 'uiBase/icons' +import { Button, RiFilePicker } from 'uiBase/forms' import { Nullable } from 'uiSrc/utils' -import { RiFilePicker, UploadWarning } from 'uiSrc/components' -import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { Loader, Modal } from 'uiSrc/components/base/display' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { CancelIcon } from 'uiSrc/components/base/icons' -import { Button } from 'uiSrc/components/base/forms/buttons' +import { UploadWarning } from 'uiSrc/components' + import styles from './styles.module.scss' export interface Props { @@ -49,19 +49,23 @@ const ImportFileModal = ({ }: Props) => { const isShowForm = !loading && !data && !error return ( - - - - + + + {!data && !error ? title : resultsTitle || 'Import Results'} - - - - {warning && {warning}} - + + + + {warning && {warning}} + {isShowForm && ( <> ({ aria-label="Select or drag and drop file" /> {isInvalid && ( - {invalidMessage} - + )} )} @@ -91,35 +95,35 @@ const ImportFileModal = ({ className={styles.loading} data-testid="file-loading-indicator" > - - + + Uploading... - + )} {error && (
- + {errorMessage} - - {error} + + {error}
)} {isShowForm && ( - + - + )} - - + + {data && ( - - {submitResults} - + + {submitResults} + )} - - + + {isShowForm && ( <> )} - - - + + + ) } diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx index a88d08b14c..4e72d5053a 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx @@ -1,11 +1,11 @@ import React from 'react' import styled, { css } from 'styled-components' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Theme } from 'uiSrc/components/base/theme/types' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { Theme } from 'uiBase/theme/types' +import { RiIconButton } from 'uiBase/forms' +import { RiTextInput } from 'uiBase/inputs' +import { CancelSlimIcon, CheckThinIcon } from 'uiBase/icons' import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' -import { TextInput } from '../base/inputs' interface ContainerProps { className?: string @@ -46,14 +46,14 @@ export const IIEContainer = React.forwardRef< )) -type ActionsContainerProps = React.ComponentProps & { +type ActionsContainerProps = React.ComponentProps & { $position?: Props['controlsPosition'] $design?: Props['controlsDesign'] $width?: string $height?: string } -export const DeclineButton = styled(IconButton).attrs({ +export const DeclineButton = styled(RiIconButton).attrs({ icon: CancelSlimIcon, 'aria-label': 'Cancel editing', })` @@ -63,7 +63,7 @@ export const DeclineButton = styled(IconButton).attrs({ } ` -export const ApplyButton = styled(IconButton).attrs({ +export const ApplyButton = styled(RiIconButton).attrs({ icon: CheckThinIcon, color: 'primary', 'aria-label': 'Apply', @@ -136,14 +136,14 @@ const designs = { `, } -export const ActionsWrapper = styled(FlexItem)<{ +export const ActionsWrapper = styled(RiFlexItem)<{ $size?: { width: string; height: string } }>` width: ${({ $size }) => $size?.width ?? '24px'} !important; height: ${({ $size }) => $size?.height ?? '24px'} !important; ` -export const ActionsContainer = styled(Row)` +export const ActionsContainer = styled(RiRow)` position: absolute; background-color: ${({ theme }: { theme: Theme }) => theme.semantic.color.background.primary200}; @@ -156,8 +156,7 @@ export const ActionsContainer = styled(Row)` ${({ $design }) => designs[$design || 'default']} ` - -export const StyledTextInput = styled(TextInput)<{ +export const StyledTextInput = styled(RiTextInput)<{ $width?: string $height?: string }>` @@ -171,4 +170,4 @@ export const StyledTextInput = styled(TextInput)<{ width: 100%; height: ${({ $height }) => $height || 'auto'}; } -` \ No newline at end of file +` diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index 91319921f7..d678c60aad 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -3,14 +3,16 @@ import cx from 'classnames' import { useTheme } from '@redis-ui/styles' +import { RiPopover, RiTooltip } from 'uiBase/index' +import { RiFlexItem } from 'uiBase/layout' +import { + RiWindowEvent, + RiOutsideClickDetector, + RiFocusTrap, +} from 'uiBase/utils' +import { RiDestructiveButton } from 'uiBase/forms' +import { RiText } from 'uiBase/text' import * as keys from 'uiSrc/constants/keys' -import { RiPopover, RiTooltip } from 'uiSrc/components/base' -import { FlexItem } from 'uiSrc/components/base/layout/flex' -import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent' -import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap' -import { OutsideClickDetector } from 'uiSrc/components/base/utils' -import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' -import { Text } from 'uiSrc/components/base/text' import { ActionsContainer, @@ -21,7 +23,6 @@ import { StyledTextInput, } from './InlineItemEditor.styles' - import styles from './styles.module.scss' type Positions = 'top' | 'bottom' | 'left' | 'right' | 'inside' @@ -61,12 +62,12 @@ export interface Props { textFiledClassName?: string styles?: { inputContainer?: { - width?: string, - height?: string, + width?: string + height?: string } input?: { - width?: string, - height?: string, + width?: string + height?: string } actionsContainer?: { width?: string @@ -214,20 +215,20 @@ const InlineItemEditor = (props: Props) => { {viewChildrenMode ? ( children ) : ( - + - - + +
handleFormSubmit(e as React.MouseEvent) } style={{ - ...customStyles?.inputContainer + ...customStyles?.inputContainer, }} > - + {children || ( <> { )} )} - + { className={styles.popover} data-testid="approve-popover" > - + {!!approveText?.title && (

{approveText?.title}

)} - {approveText?.text} - - + +
- { data-testid="save-btn" > Save - +
@@ -324,9 +325,9 @@ const InlineItemEditor = (props: Props) => { )} -
+ - + )} ) diff --git a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx index a151fe869a..c78f3f4ff8 100644 --- a/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx +++ b/redisinsight/ui/src/components/input-field-sentinel/InputFieldSentinel.tsx @@ -1,10 +1,10 @@ import { omit } from 'lodash' import React, { useState } from 'react' import cx from 'classnames' -import { useDebouncedEffect } from 'uiSrc/services' -import { NumericInput, PasswordInput, TextInput } from 'uiSrc/components/base/inputs' +import { RiNumericInput, RiPasswordInput, RiTextInput } from 'uiBase/inputs' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' +import { RiIcon } from 'uiBase/icons' +import { useDebouncedEffect } from 'uiSrc/services' import styles from './styles.module.scss' export enum SentinelInputFieldType { @@ -54,7 +54,7 @@ const InputFieldSentinel = (props: Props) => { return ( <> {inputType === SentinelInputFieldType.Text && ( - { /> )} {inputType === SentinelInputFieldType.Password && ( - handleChange(value)} @@ -70,7 +70,7 @@ const InputFieldSentinel = (props: Props) => { /> )} {inputType === SentinelInputFieldType.Number && ( - { borderBottom: theme.components.sideBar.collapsed.borderRight, }} > - - +
{ : 'Redis Databases' } > - { onKeyDown={goHome} > Databases - +
- + - - / - + + / + {returnUrlBase && returnUrl && ( @@ -195,28 +194,28 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { position="bottom" content={returnUrlTooltip || returnUrlLabel} > - < {returnUrlLabel} - + - + } /> )} - + {isRedisStack || !envDependentFeature?.flag ? ( {name} ) : ( )} - + {databases > 1 && ( - +
{ viewChildrenMode={false} controlsClassName={styles.controls} > - {
) : ( - setIsDbIndexEditing(true)} @@ -264,12 +263,12 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => { > db{db || 0} - + )}
- + )} - + { data-testid="db-info-icon" /> - - + +
- + - + - + - - + + {isAnyChatAvailable && ( - + - + )} - + - + - - - + + + ) } diff --git a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx index f60c7d28f7..57e55cdde3 100644 --- a/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx +++ b/redisinsight/ui/src/components/instance-header/components/ShortInstanceInfo.tsx @@ -2,6 +2,9 @@ import React, { useContext } from 'react' import { capitalize } from 'lodash' import cx from 'classnames' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { AllIconsType, RiIcon } from 'uiBase/icons' import { CONNECTION_TYPE_DISPLAY, ConnectionType, @@ -12,9 +15,6 @@ import { getModule, Nullable, truncateText } from 'uiSrc/utils' import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules' import { Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import styles from './styles.module.scss' @@ -58,41 +58,41 @@ const ShortInstanceInfo = ({ info, databases, modules }: Props) => { {databases > 1 && ( - - + + - - - Logical Databases - + + + Logical Databases + Select logical databases to work with in Browser, Workbench, and Database Analysis. - - - + + + )} - - + + {connectionType ? CONNECTION_TYPE_DISPLAY[connectionType] : capitalize(connectionType)} - - + + {version} - - + + {user || 'Default'} - - + + {!!modules?.length && (

Database Modules

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..2ce36160f3 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 @@ -1,9 +1,14 @@ import React, { useEffect, useState, useMemo } from 'react' import { useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' +import { RiTextInput } from 'uiBase/inputs' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' +import { RiTabs, TabInfo } from 'uiBase/layout' +import { RiPopover } from 'uiBase/index' import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances' import { instancesSelector as dbInstancesSelector } from 'uiSrc/slices/instances/instances' -import { TextInput } from 'uiSrc/components/base/inputs' import Divider from 'uiSrc/components/divider/Divider' import { BrowserStorageItem, DEFAULT_SORT, Pages } from 'uiSrc/constants' import Search from 'uiSrc/assets/img/Search.svg' @@ -11,11 +16,6 @@ import { Instance, RdiInstance } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' 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 styles from './styles.module.scss' @@ -117,7 +117,7 @@ const InstancesNavigationPopover = ({ name }: Props) => { isOpen={isPopoverOpen} closePopover={() => showPopover()} button={ - showPopover()} data-testid="nav-instance-popover-btn" @@ -126,12 +126,12 @@ const InstancesNavigationPopover = ({ name }: Props) => { - + } >
- {
- { data-testid="instances-tabs-testId" />
- + { onItemClick={showPopover} />
- +
- + {btnLabel} - +
diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx index e7c602c5d5..5268a1ab67 100644 --- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx +++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx @@ -1,6 +1,9 @@ import React, { useState } from 'react' import { useDispatch } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' +import { RiListGroup, RiListItem } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { RiLoader } from 'uiBase/display' import { checkConnectToRdiInstanceAction } from 'uiSrc/slices/rdi/instances' import { checkConnectToInstanceAction, @@ -15,12 +18,6 @@ import { getRedisInfoSummary, } from 'uiSrc/telemetry' import { getDbIndex } from 'uiSrc/utils' -import { - Group as ListGroup, - Item as ListGroupItem, -} from 'uiSrc/components/base/layout/list' -import { Text } from 'uiSrc/components/base/text' -import { Loader } from 'uiSrc/components/base/display' import { InstancesTabs } from '../../InstancesNavigationPopover' import styles from '../../styles.module.scss' @@ -130,24 +127,24 @@ const InstancesList = ({ return (
- + {instances?.map((instance) => ( - {loading && instance?.id === selected && ( - + )} {instance.name} {getDbIndex(instance.db)} - + } onClick={() => { setSelected(instance.id) @@ -156,7 +153,7 @@ const InstancesList = ({ data-testid={`instance-item-${instance.id}`} /> ))} - +
) } diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx index 039f983f58..51d4e7efa5 100644 --- a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx +++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfile.tsx @@ -1,10 +1,10 @@ import React from 'react' import { useSelector } from 'react-redux' +import { RiFlexItem } from 'uiBase/layout' import { FeatureFlags } from 'uiSrc/constants' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { OAuthUserProfile } from 'uiSrc/components' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' -import { FlexItem } from 'uiSrc/components/base/layout/flex' import { CloudUserProfile } from './CloudUserProfile' const UserProfile = () => { @@ -16,17 +16,17 @@ const UserProfile = () => { if (!envDependentFeature?.flag) { return ( - + - + ) } if (cloudAds?.flag && cloudSso?.flag) { return ( - + - + ) } diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx index 535f32c380..fa0fb2f183 100644 --- a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx +++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx @@ -2,6 +2,10 @@ import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useHistory } from 'react-router-dom' +import { RiPopover } from 'uiBase/index' +import { RiText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' +import { UserProfileLink, RiLoader } from 'uiBase/display' import { logoutUserAction } from 'uiSrc/slices/oauth/cloud' import { buildRedisInsightUrl, getUtmExternalLink } from 'uiSrc/utils/links' @@ -17,12 +21,7 @@ import { import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { FeatureFlags, Pages } from 'uiSrc/constants' import { FeatureFlagComponent } from 'uiSrc/components' -import { RiPopover } from 'uiSrc/components/base' import { getConfig } from 'uiSrc/config' -import { Text } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink' -import { Loader } from 'uiSrc/components/base/display' import { CloudUser } from 'apiSrc/modules/cloud/user/models' import styles from './styles.module.scss' @@ -135,17 +134,20 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => { Account - + } > - + Redis Cloud account - +
{ onClick={() => handleClickSelectAccount?.(id)} data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`} > - + {name} #{id} - + {id === currentAccountId && ( { /> )} {id === selectingAccountId && ( - { href={riDesktopLink} data-testid="open-ri-desktop-link" > - Open in Redis Insight Desktop version + Open in Redis Insight Desktop version - Back to Redis Cloud Admin console + Back to Redis Cloud Admin console { onClick={handleClickImport} data-testid="profile-import-cloud-databases" > - Import Cloud databases + + Import Cloud databases + {isImportLoading ? ( - + ) : ( )} @@ -234,13 +238,13 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => { data-testid="cloud-console-link" >
- Cloud Console - Cloud Console + {name} - +
{ onClick={handleClickLogout} data-testid="profile-logout" > - Logout + Logout
diff --git a/redisinsight/ui/src/components/item-list/components/action-bar/ActionBar.tsx b/redisinsight/ui/src/components/item-list/components/action-bar/ActionBar.tsx index f6cf84f07e..41f6f3a983 100644 --- a/redisinsight/ui/src/components/item-list/components/action-bar/ActionBar.tsx +++ b/redisinsight/ui/src/components/item-list/components/action-bar/ActionBar.tsx @@ -1,8 +1,8 @@ import React from 'react' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiIconButton } from 'uiBase/forms' +import { CancelSlimIcon } from 'uiBase/icons' import styles from './styles.module.scss' export interface Props { @@ -19,7 +19,7 @@ const ActionBar = ({ onCloseActionBar, }: Props) => (
- - + {`You selected: ${selectionCount} items`} - + {actions?.map((action, index) => ( - + {action} - + ))} - - + onCloseActionBar()} data-testid="cancel-selecting" /> - - + +
) diff --git a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx index 3a9e7cdde8..0e3de8199c 100644 --- a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx @@ -1,15 +1,11 @@ import React, { useState } from 'react' -import { formatLongName } from 'uiSrc/utils' -import { - DestructiveButton, - PrimaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { DeleteIcon } from 'uiSrc/components/base/icons' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { RiPopover } from 'uiSrc/components' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' +import { RiDestructiveButton, RiPrimaryButton } from 'uiBase/forms' +import { DeleteIcon, RiIcon } from 'uiBase/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiPopover } from 'uiBase/display' +import { RiText } from 'uiBase/text' +import { formatLongName } from 'uiSrc/utils' import styles from '../styles.module.scss' export interface Props { @@ -33,7 +29,7 @@ const DeleteAction = ( } const deleteBtn = ( - ( data-testid="delete-btn" > Delete - + ) return ( @@ -54,23 +50,23 @@ const DeleteAction = ( panelPaddingSize="l" data-testid="delete-popover" > - + {subTitle} - +
{selection.map((select) => ( - - + + - - + + {formatLongName(select.name)} - - + + ))}
- { @@ -81,7 +77,7 @@ const DeleteAction = ( data-testid="delete-selected-dbs" > Delete - +
) diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index daf1ebedc5..ec87a0c98d 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,16 +1,12 @@ import React, { useState } from 'react' -import { formatLongName } from 'uiSrc/utils' - -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { ExportIcon } from 'uiSrc/components/base/icons' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { RiPrimaryButton, RiFormField, RiCheckbox } from 'uiBase/forms' +import { ExportIcon, RiIcon } from 'uiBase/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' -import { Text } from 'uiSrc/components/base/text' -import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' -import { FormField } from 'uiSrc/components/base/forms/FormField' -import { RiPopover } from 'uiSrc/components/base' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' +import { RiText } from 'uiBase/text' +import { RiPopover } from 'uiBase/index' +import { formatLongName } from 'uiSrc/utils' import styles from '../styles.module.scss' export interface Props { @@ -27,7 +23,7 @@ const ExportAction = ( const [withSecrets, setWithSecrets] = useState(true) const exportBtn = ( - setIsPopoverOpen((prevState) => !prevState)} size="small" icon={ExportIcon} @@ -35,7 +31,7 @@ const ExportAction = ( data-testid="export-btn" > Export - + ) return ( @@ -48,23 +44,23 @@ const ExportAction = ( panelPaddingSize="l" data-testid="export-popover" > - + {subTitle} - +
{selection.map((select) => ( - - + + - - + + {formatLongName(select.name)} - - + + ))}
- - + ( onChange={(e) => setWithSecrets(e.target.checked)} data-testid="export-passwords" /> - +
- { @@ -84,7 +80,7 @@ const ExportAction = ( data-testid="export-selected-dbs" > Export - +
) diff --git a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx index ae66691768..8929d43595 100644 --- a/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx +++ b/redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx @@ -2,7 +2,7 @@ import React from 'react' import { isString } from 'lodash' import cx from 'classnames' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' +import { RiBadge } from 'uiBase/display' import styles from './styles.module.scss' diff --git a/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx b/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx index 9eed112fa5..b09b4194c9 100644 --- a/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx +++ b/redisinsight/ui/src/components/keys-summary/KeysSummary.tsx @@ -3,7 +3,7 @@ import cx from 'classnames' import { isNull } from 'lodash' import { useSelector } from 'react-redux' -import { Text, ColorText } from 'uiSrc/components/base/text' +import { RiText, RiColorText } from 'uiBase/text' import { numberWithSpaces, nullableNumberWithSpaces } from 'uiSrc/utils/numbers' import { KeyViewType } from 'uiSrc/slices/interfaces/keys' @@ -54,10 +54,10 @@ const KeysSummary = (props: Props) => { <> {(!!totalItemsCount || isNull(totalItemsCount)) && (
- + {!!scanned && ( <> - + {'Results: '} @@ -65,7 +65,7 @@ const KeysSummary = (props: Props) => { {'. '} - + {'Scanned '} {notAccurateScanned} @@ -81,8 +81,8 @@ const KeysSummary = (props: Props) => { { [styles.loadingShow]: loading }, ])} /> - - + + {showScanMore && ( { )} {!scanned && ( - + {'Total: '} {nullableNumberWithSpaces(totalItemsCount)} - + )} - + {viewType === KeyViewType.Tree && ( )}
)} {loading && !totalItemsCount && !isNull(totalItemsCount) && ( - + Scanning... - + )} ) diff --git a/redisinsight/ui/src/components/main-router/components/SuspenseLoader.tsx b/redisinsight/ui/src/components/main-router/components/SuspenseLoader.tsx index f14f4886fe..b25d35ab84 100644 --- a/redisinsight/ui/src/components/main-router/components/SuspenseLoader.tsx +++ b/redisinsight/ui/src/components/main-router/components/SuspenseLoader.tsx @@ -1,10 +1,10 @@ import React from 'react' -import { Loader } from 'uiSrc/components/base/display' +import { RiLoader } from 'uiBase/display' import styles from './loader.module.scss' const SuspenseLoader = () => (
- +
) diff --git a/redisinsight/ui/src/components/markdown/CloudLink/CloudLink.tsx b/redisinsight/ui/src/components/markdown/CloudLink/CloudLink.tsx index b4c9487eef..84946b249e 100644 --- a/redisinsight/ui/src/components/markdown/CloudLink/CloudLink.tsx +++ b/redisinsight/ui/src/components/markdown/CloudLink/CloudLink.tsx @@ -1,7 +1,7 @@ import React from 'react' +import { RiLink } from 'uiBase/display' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { OAuthSsoHandlerDialog } from 'uiSrc/components' -import { Link } from 'uiSrc/components/base/link/Link' export interface Props { url: string @@ -14,7 +14,7 @@ const CloudLink = (props: Props) => { return ( {(ssoCloudHandlerClick) => ( - { ssoCloudHandlerClick(e, { @@ -27,7 +27,7 @@ const CloudLink = (props: Props) => { data-testid="guide-free-database-link" > {text} - + )} ) diff --git a/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx b/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx index e07bffa040..3c6a158949 100644 --- a/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx +++ b/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx @@ -4,6 +4,12 @@ import { monaco } from 'react-monaco-editor' import parse from 'html-react-parser' import { useParams } from 'react-router-dom' import { find } from 'lodash' +import { RiPopover, RiTooltip } from 'uiBase/display' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiEmptyButton } from 'uiBase/forms' +import { PlayIcon, CheckBoldIcon, CopyIcon } from 'uiBase/icons' +import { RiTitle } from 'uiBase/text' import { getCommandsForExecution, getUnsupportedModulesFromQuery, @@ -16,7 +22,6 @@ import { } from 'uiSrc/constants' import { CodeBlock } from 'uiSrc/components' -import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { getDBConfigStorageField } from 'uiSrc/services' import { ConfigDBStorageItem } from 'uiSrc/constants/storage' import { @@ -25,11 +30,6 @@ import { } from 'uiSrc/components/messages' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { ButtonLang } from 'uiSrc/utils/formatters/markdown/remarkCode' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { PlayIcon, CheckBoldIcon, CopyIcon } from 'uiSrc/components/base/icons' -import { Title } from 'uiSrc/components/base/text/Title' import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module' import { RunConfirmationPopover } from './components' @@ -157,20 +157,20 @@ const CodeButtonBlock = (props: Props) => { return (
- - + + {!!label && ( - {truncateText(label, 86)} - + )} - - - + + { data-testid={`copy-btn-${label}`} > Copy - + {!isRunButtonHidden && ( { } data-testid="run-btn-open-workbench-tooltip" > - { data-testid={`run-btn-${label}`} > Run - + } > {getPopoverMessage()} )} - - + +
{highlightedContent ? parse(highlightedContent) : content}
- +
) } diff --git a/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx b/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx index 0fae201177..0cecd04282 100644 --- a/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx +++ b/redisinsight/ui/src/components/markdown/CodeButtonBlock/components/RunConfirmationPopover.tsx @@ -1,19 +1,14 @@ import React, { useState } from 'react' import { useHistory, useParams } from 'react-router-dom' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton, RiSecondaryButton, RiCheckbox } from 'uiBase/forms' +import { RiTitle, RiText } from 'uiBase/text' import { FeatureFlags, Pages } from 'uiSrc/constants' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { setDBConfigStorageField } from 'uiSrc/services' import { ConfigDBStorageItem } from 'uiSrc/constants/storage' import { FeatureFlagComponent } from 'uiSrc/components' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import styles from '../styles.module.scss' interface Props { @@ -49,14 +44,14 @@ const RunConfirmationPopover = ({ onApply }: Props) => { return ( <> - Run commands - - + Run commands + + This tutorial will change data in your database, are you sure you want to run commands in this database? - - - + + {
- Change Database - + - Run - +
diff --git a/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx b/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx index 2d57728ad8..3a412e980e 100644 --- a/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx +++ b/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx @@ -2,11 +2,10 @@ import React, { useState } from 'react' import { useHistory, useLocation, useParams } from 'react-router-dom' import cx from 'classnames' import { isNull } from 'lodash' +import { RiLink, RiPopover } from 'uiBase/display' import { getRedirectionPage } from 'uiSrc/utils/routing' import DatabaseNotOpened from 'uiSrc/components/messages/database-not-opened' -import { Link } from 'uiSrc/components/base/link/Link' -import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -46,7 +45,7 @@ const RedisInsightLink = (props: Props) => { panelPaddingSize="m" closePopover={() => setIsPopoverOpen(false)} button={ - { data-testid="redisinsight-link" > {text} - + } > diff --git a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx index 912a2603e2..bcd7a53458 100644 --- a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx +++ b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx @@ -3,6 +3,11 @@ import React, { useEffect, useState } from 'react' import cx from 'classnames' import { useParams } from 'react-router-dom' import { AxiosError } from 'axios' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton, RiSecondaryButton } from 'uiBase/forms' +import { PlayFilledIcon, ContractsIcon, RiIcon } from 'uiBase/icons' +import { RiText } from 'uiBase/text' +import { RiLink, RiPopover } from 'uiBase/display' import { truncateText } from 'uiSrc/utils' import { sendEventTelemetry, @@ -21,16 +26,6 @@ import { getPathToResource, } from 'uiSrc/services/resourcesService' import { addErrorNotification } from 'uiSrc/slices/app/notifications' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { PlayFilledIcon, ContractsIcon } from 'uiSrc/components/base/icons' -import { Text } from 'uiSrc/components/base/text' -import { RiPopover } from 'uiSrc/components/base' -import { Link } from 'uiSrc/components/base/link/Link' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export interface Props { @@ -118,7 +113,7 @@ const RedisUploadButton = ({ label, path }: Props) => { anchorClassName={styles.popoverAnchor} panelPaddingSize="none" button={ - { data-testid="upload-data-bulk-btn" > {truncateText(label, 86)} - + } > {instanceId ? ( - {
Execute commands in bulk
- +
All commands from the file in your tutorial will be automatically executed against your database. Avoid executing them in production databases.
- +
- Download file - - + { data-testid="upload-data-bulk-apply-btn" > Execute - +
- + ) : ( )} diff --git a/redisinsight/ui/src/components/message-bar/MessageBar.tsx b/redisinsight/ui/src/components/message-bar/MessageBar.tsx index 1f86cb1528..e5a104abfd 100644 --- a/redisinsight/ui/src/components/message-bar/MessageBar.tsx +++ b/redisinsight/ui/src/components/message-bar/MessageBar.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { CancelSlimIcon } from 'uiBase/icons' +import { RiIconButton } from 'uiBase/forms' import styles from './styles.module.scss' export interface Props { @@ -19,19 +19,19 @@ const MessageBar = ({ children, opened }: Props) => { return isOpen ? (
- - + + {children} - - - + + setIsOpen(false)} data-testid="close-button" /> - - + +
) : null diff --git a/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx b/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx index 5d066fa374..a22b1ff09b 100644 --- a/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx +++ b/redisinsight/ui/src/components/messages/cli-output/cliOutput.tsx @@ -1,11 +1,11 @@ import React, { Fragment } from 'react' +import { RiColorText } from 'uiBase/text' +import { RiLink } from 'uiBase/display' +import { RiEmptyButton } from 'uiBase/forms' import { getRouterLinkProps } from 'uiSrc/services' import { getDbIndex } from 'uiSrc/utils' import { FeatureFlagComponent } from 'uiSrc/components' -import { ColorText } from 'uiSrc/components/base/text' import { FeatureFlags } from 'uiSrc/constants/featureFlags' -import { Link } from 'uiSrc/components/base/link/Link' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' export const InitOutputText = ( host: string = '', @@ -14,31 +14,31 @@ export const InitOutputText = ( emptyOutput: boolean, onClick: () => void, ) => [ - - {emptyOutput && ( - - {'Try '} - - Workbench - - , our advanced CLI. Check out our Quick Guides to learn more about Redis - capabilities. - - )} - , - '\n\n', - 'Connecting...', - '\n\n', - 'Pinging Redis server on ', - - {`${host}:${port}${getDbIndex(dbIndex)}`} - , - ] + + {emptyOutput && ( + + {'Try '} + + Workbench + + , our advanced CLI. Check out our Quick Guides to learn more about Redis + capabilities. + + )} + , + '\n\n', + 'Connecting...', + '\n\n', + 'Pinging Redis server on ', + + {`${host}:${port}${getDbIndex(dbIndex)}`} + , +] export const ConnectionSuccessOutputText = [ '\n', @@ -71,17 +71,21 @@ export const cliTexts = {
), USE_PSUBSCRIBE_COMMAND: (path: string = '') => ( - + {'Use '} - Pub/Sub - + {' to see the messages published to all channels in your database.'} - + ), PSUBSCRIBE_COMMAND: (path: string = '') => ( ), USE_PROFILER_TOOL: (onClick: () => void) => ( - + {'Use '} - Profiler - + {' tool to see all the requests processed by the server.'} - + ), MONITOR_COMMAND: (onClick: () => void) => ( ), USE_PUB_SUB_TOOL: (path: string = '') => ( - + {'Use '} - Pub/Sub - + {' tool to subscribe to channels.'} - + ), SUBSCRIBE_COMMAND_CLI: (path: string = '') => ( ), HELLO3_COMMAND: () => ( - + {'Redis Insight does not support '} - RESP3 - + {' at the moment, but we are working on it.'} - + ), HELLO3_COMMAND_CLI: () => [cliTexts.HELLO3_COMMAND(), '\n'], CLI_ERROR_MESSAGE: (message: string) => [ '\n', - + {message} - , + , '\n\n', ], } diff --git a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx index 0297b7dfa6..6339b0be99 100644 --- a/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx +++ b/redisinsight/ui/src/components/messages/database-not-opened/DatabaseNotOpened.tsx @@ -1,14 +1,13 @@ import React from 'react' +import { RiSpacer } from 'uiBase/layout' +import { RiTitle, RiText } from 'uiBase/text' import { ExternalLink, OAuthSsoHandlerDialog } from 'uiSrc/components' import { getUtmExternalLink } from 'uiSrc/utils/links' import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links' import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' export interface Props { @@ -22,15 +21,15 @@ const DatabaseNotOpened = (props: Props) => { return (
- + <RiTitle size="S" className={styles.title}> Open a database - - + + <> - + Open your Redis database, or create a new database to get started. - - + + {(ssoCloudHandlerClick) => ( { )} - + void }) => { return (
- Upgrade your Redis database to version 6 or above - - Filtering by data type is supported in Redis 6 and above. - + + Filtering by data type is supported in Redis 6 and above. + {!!freeInstances.length && ( <> - + Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - - + + void }) => { )} {!freeInstances.length && ( - + Create a free trial Redis Stack database that supports filtering and extends the core capabilities of your Redis. - - + +
{(ssoCloudHandlerClick) => ( - { ssoCloudHandlerClick(e, { source: OAuthSocialSource.BrowserFiltering, @@ -82,11 +81,11 @@ const FilterNotAvailable = ({ onClose }: { onClose?: () => void }) => { size="s" > Get Started For Free - + )} - - + void }) => { data-testid="learn-more-link" > Learn More - +
)} diff --git a/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx b/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx index 1ba4368490..867044baf8 100644 --- a/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx +++ b/redisinsight/ui/src/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized.tsx @@ -2,6 +2,9 @@ import React from 'react' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton } from 'uiBase/forms' +import { RiTitle, RiText } from 'uiBase/text' import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg' import { OAuthSocialAction, @@ -25,10 +28,6 @@ import { import { useCapability } from 'uiSrc/services' import { FeatureFlags, Pages } from 'uiSrc/constants' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' import { MODULE_CAPABILITY_TEXT_NOT_AVAILABLE, MODULE_CAPABILITY_TEXT_NOT_AVAILABLE_ENTERPRISE, @@ -60,19 +59,19 @@ const ModuleNotLoadedMinimalized = (props: Props) => { return (
- + <RiTitle size="S" className={styles.title}> {moduleText?.title} - - + + - + {moduleText?.text} - - - + + { @@ -80,16 +79,16 @@ const ModuleNotLoadedMinimalized = (props: Props) => { }} > Redis Databases page - + } > {!freeDbWithModule ? ( <> - + {moduleText?.text} - - + + {(ssoCloudHandlerClick) => ( { ) : ( <> - + Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - - + + ( - + <RiTitle size="M" className={styles.title} data-testid="welcome-page-title"> {`${moduleName?.substring(0, 1).toUpperCase()}${moduleName?.substring(1)} ${[MODULE_TEXT_VIEW.redisgears, MODULE_TEXT_VIEW.bf].includes(moduleName) ? 'are' : 'is'} not available `} {width > MAX_ELEMENT_WIDTH && <br />} for this database - + ) const ListItem = ({ item }: { item: string }) => ( @@ -55,7 +54,7 @@ const ListItem = ({ item }: { item: string }) => (
- {item} + {item} ) @@ -92,24 +91,24 @@ const ModuleNotLoaded = ({ (moduleName?: string) => { if (!cloudAdsFeature?.flag) { return ( - + Open a database with {moduleName}. - + ) } return !freeDbWithModule ? ( - + Create a free trial Redis Stack database with {moduleName} which extends the core capabilities of your Redis. - + ) : ( - Use your free trial all-in-one Redis Cloud database to start exploring these capabilities. - + ) }, [freeDbWithModule], @@ -139,7 +138,7 @@ const ModuleNotLoaded = ({ data-testid="module-not-loaded-content" > {renderTitle(width, MODULE_TEXT_VIEW[moduleName])} - + {CONTENT[moduleName]?.text.map((item: string) => width > MIN_ELEMENT_WIDTH ? ( <> @@ -150,7 +149,7 @@ const ModuleNotLoaded = ({ item ), )} - +
    {!!CONTENT[moduleName]?.additionalText && ( - + )} {renderText(MODULE_TEXT_VIEW[moduleName])}
diff --git a/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx b/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx index 1a236e9504..38189b1dd2 100644 --- a/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx +++ b/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx @@ -2,6 +2,8 @@ import React from 'react' import { useSelector } from 'react-redux' import cx from 'classnames' import { useHistory } from 'react-router-dom' +import { RiPrimaryButton } from 'uiBase/forms' +import { RiLink } from 'uiBase/display' import { FeatureFlags, MODULE_NOT_LOADED_CONTENT as CONTENT, @@ -17,8 +19,6 @@ import { OAuthSocialSource, RedisDefaultModules, } from 'uiSrc/slices/interfaces' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { Link } from 'uiSrc/components/base/link/Link' export interface IProps { moduleName: RedisDefaultModules @@ -49,7 +49,7 @@ const ModuleNotLoadedButton = ({ return ( <> - Learn More - + - + Redis Databases page - - + + } > {(ssoCloudHandlerClick) => ( - - + Get Started For Free - - + + )} diff --git a/redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx b/redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx index 84144ebbc6..3a1af0879c 100644 --- a/redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx +++ b/redisinsight/ui/src/components/monaco-editor/MonacoEditor.tsx @@ -3,6 +3,8 @@ import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor' import cx from 'classnames' import { merge } from 'lodash' +import { EditIcon } from 'uiBase/icons' +import { RiActionIconButton } from 'uiBase/forms' import { MonacoThemes, darkTheme, lightTheme } from 'uiSrc/constants/monaco' import { Nullable } from 'uiSrc/utils' import { @@ -12,8 +14,6 @@ import { import { DSL, Theme } from 'uiSrc/constants' import { ThemeContext } from 'uiSrc/contexts/themeContext' import InlineItemEditor from 'uiSrc/components/inline-item-editor' -import { EditIcon } from 'uiSrc/components/base/icons' -import { ActionIconButton } from 'uiSrc/components/base/forms/buttons' import DedicatedEditor from './components/dedicated-editor' import styles from './styles.module.scss' @@ -297,7 +297,7 @@ const MonacoEditor = (props: Props) => { /> )} {isEditable && readOnly && !isEditing && ( - setIsEditing(true)} className={styles.editBtn} diff --git a/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx b/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx index ba644010db..7677b616f5 100644 --- a/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx +++ b/redisinsight/ui/src/components/monaco-editor/components/dedicated-editor/DedicatedEditor.tsx @@ -6,6 +6,8 @@ import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor' import { Rnd } from 'react-rnd' import cx from 'classnames' +import { RiIconButton, RiSelect } from 'uiBase/forms' +import { CancelSlimIcon, CheckThinIcon } from 'uiBase/icons' import { decoration, getMonacoAction, @@ -23,9 +25,6 @@ import { import { IEditorMount } from 'uiSrc/pages/workbench/interfaces' import { ThemeContext } from 'uiSrc/contexts/themeContext' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' -import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' import styles from './styles.module.scss' const LangSelect = styled(RiSelect)` @@ -313,14 +312,14 @@ const DedicatedEditor = (props: Props) => { /> )}
- onCancel(selectedLang.id as DSL)} data-testid="cancel-btn" /> - {
- handleRunMonitor(saveLogValue)} @@ -55,8 +53,8 @@ const Monitor = (props: Props) => { />
Start Profiler
- - + + { aria-label="alert icon" style={{ paddingTop: 2 }} /> - - - + + { > Running Profiler will decrease throughput, avoid running it in production databases. - - - + + +
{ The temporary log file will be automatically rewritten when the Profiler is reset." data-testid="save-log-tooltip" > - { const MonitorError = () => (
- - + + - - - + + {error} - - - + + +
) diff --git a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx index 76b5ba292a..67defe4510 100644 --- a/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorHeader/MonitorHeader.tsx @@ -3,6 +3,20 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { RiIconButton } from 'uiBase/forms' +import { + PlayIcon, + PauseIcon, + DeleteIcon, + BannedIcon, + RiIcon, +} from 'uiBase/icons' +import { WindowControlGroup } from 'uiBase/index' +import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' +import { OnboardingTour, RiTooltip } from 'uiSrc/components' +import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { monitorSelector, resetMonitorItems, @@ -10,21 +24,6 @@ import { toggleHideMonitor, toggleMonitor, } from 'uiSrc/slices/cli/monitor' -import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { OnboardingTour, RiTooltip } from 'uiSrc/components' -import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' - -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { - PlayIcon, - PauseIcon, - DeleteIcon, - BannedIcon, -} from 'uiSrc/components/base/icons' -import { WindowControlGroup } from 'uiSrc/components/base/shared/WindowControlGroup' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export interface Props { @@ -80,19 +79,19 @@ const MonitorHeader = ({ handleRunMonitor }: Props) => { return (
- - + + - Profiler + Profiler - + {isStarted && ( - + { } anchorClassName="inline-flex" > - { transparent: !isStarted || !items.length, })} > - - + )} - + - +
) } diff --git a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx index 5459313fce..1d10136c9c 100644 --- a/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorLog/MonitorLog.tsx @@ -3,6 +3,10 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import AutoSizer from 'react-virtualized-auto-sizer' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiPrimaryButton, RiSecondaryButton } from 'uiBase/forms' +import { RefreshIcon, DownloadIcon, RiIcon } from 'uiBase/icons' +import { RiText } from 'uiBase/text' import { monitorSelector, resetProfiler, @@ -12,14 +16,6 @@ import { cutDurationText } from 'uiSrc/utils' import { downloadFile } from 'uiSrc/utils/dom/downloadFile' import { fetchMonitorLog } from 'uiSrc/slices/cli/cli-output' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { RefreshIcon, DownloadIcon } from 'uiSrc/components/base/icons' -import { Text } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' const PADDINGS_OUTSIDE = 12 @@ -79,7 +75,7 @@ const MonitorLog = () => { }} data-testid="download-log-panel" > - {  ( {duration} {width > SMALL_SCREEN_RESOLUTION && ' Running time'}) - - - + + + {isSaveToFile && ( - { > {width > SMALL_SCREEN_RESOLUTION && ' Download '} Log - + )} - - - + + { > Reset {width > SMALL_SCREEN_RESOLUTION && ' Profiler'} - - - + + +
)} diff --git a/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx b/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx index 90e2df1a48..5ed010a3b8 100644 --- a/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx +++ b/redisinsight/ui/src/components/monitor/MonitorOutputList/MonitorOutputList.tsx @@ -6,7 +6,7 @@ import { VariableSizeList as List, } from 'react-window' -import { ColorText } from 'uiSrc/components/base/text' +import { RiColorText } from 'uiBase/text' import { DEFAULT_ERROR_MESSAGE, getFormatTime } from 'uiSrc/utils' import styles from 'uiSrc/components/monitor/Monitor/styles.module.scss' @@ -136,9 +136,9 @@ const MonitorOutputList = (props: Props) => {
)} {isError && ( - + {message ?? DEFAULT_ERROR_MESSAGE} - + )}
) diff --git a/redisinsight/ui/src/components/multi-search/MultiSearch.tsx b/redisinsight/ui/src/components/multi-search/MultiSearch.tsx index d7b1955e8b..f0af88fb1e 100644 --- a/redisinsight/ui/src/components/multi-search/MultiSearch.tsx +++ b/redisinsight/ui/src/components/multi-search/MultiSearch.tsx @@ -1,23 +1,15 @@ import React, { useEffect, useRef, useState } from 'react' import cx from 'classnames' -import * as keys from 'uiSrc/constants/keys' -import { TextInput } from 'uiSrc/components/base/inputs' -import { GroupBadge, RiTooltip } from 'uiSrc/components' -import { OutsideClickDetector } from 'uiSrc/components/base/utils' -import { Nullable } from 'uiSrc/utils' +import { RiTextInput } from 'uiBase/inputs' +import { RiOutsideClickDetector } from 'uiBase/utils' -import { - CancelSlimIcon, - SearchIcon, - SwitchIcon, -} from 'uiSrc/components/base/icons' -import { - ActionIconButton, - IconButton, -} from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { ProgressBarLoader } from 'uiSrc/components/base/display' +import { CancelSlimIcon, SearchIcon, SwitchIcon, RiIcon } from 'uiBase/icons' +import { RiActionIconButton, RiIconButton } from 'uiBase/forms' +import { RiProgressBarLoader } from 'uiBase/display' +import { Nullable } from 'uiSrc/utils' +import { GroupBadge, RiTooltip } from 'uiSrc/components' +import * as keys from 'uiSrc/constants/keys' import styles from './styles.module.scss' interface MultiSearchSuggestion { @@ -153,7 +145,7 @@ const MultiSearch = (props: Props) => { } const SubmitBtn = () => ( - { ) return ( - +
{ /> ))}
- setIsInputFocus(true)} onBlur={() => setIsInputFocus(false)} ref={inputRef} @@ -205,7 +196,7 @@ const MultiSearch = (props: Props) => { data-testid="suggestions" > {suggestions?.loading && ( - @@ -236,7 +227,7 @@ const MultiSearch = (props: Props) => { > {value} - { )} {(value || !!options.length) && ( - { content={suggestions?.buttonTooltipTitle} position="bottom" > - { {!disableSubmit && SubmitBtn()}
- + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx index bb65d3d227..c998ee33dd 100644 --- a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx @@ -1,22 +1,22 @@ /* eslint-disable react/no-this-in-sfc */ import React from 'react' +import { RiBadge } from 'uiBase/display' +import { + RiSideBar, + RiSideBarContainer, + RiSideBarDivider, + RiSideBarFooter, + RiSideBarItem, + SideBarItemIcon, +} from 'uiBase/layout' +import { GithubIcon } from 'uiBase/icons' import { FeatureFlags } from 'uiSrc/constants' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding' import { FeatureFlagComponent } from 'uiSrc/components' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' -import { - SideBar, - SideBarContainer, - SideBarDivider, - SideBarFooter, - SideBarItem, - SideBarItemIcon, -} from 'uiSrc/components/base/layout/sidebar' -import { GithubIcon } from 'uiSrc/components/base/icons' import { INavigations } from './navigation.types' import CreateCloud from './components/create-cloud' import HelpMenu from './components/help-menu/HelpMenu' @@ -50,7 +50,7 @@ const NavigationMenu = () => { transformOnHover >
- { aria-label={nav.ariaLabel} data-testid={nav.dataTestId} /> - + {nav.isBeta && ( )} @@ -94,7 +94,7 @@ const NavigationMenu = () => { dotClassName={styles.highlightDot} transformOnHover > - { aria-label={nav.ariaLabel} data-testid={nav.dataTestId} /> - + ) @@ -123,19 +123,19 @@ const NavigationMenu = () => { } return ( - - + {connectedRdiInstanceId && isRdiWorkspace && privateRdiRoutes.map(renderNavItem)} - - + + @@ -147,13 +147,13 @@ const NavigationMenu = () => { {publicRoutes.map(renderPublicNavItem)} - - + - { aria-label="github-repo-icon" data-testid="github-repo-icon" /> - - + + - - + + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.styles.ts b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.styles.ts index 9775fef1c8..bc3ec9ea03 100644 --- a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.styles.ts +++ b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.styles.ts @@ -1,6 +1,5 @@ import styled from 'styled-components' -import { Row } from 'uiSrc/components/base/layout/flex' -import Tabs from 'uiSrc/components/base/layout/tabs' +import { RiRow, RiTabs } from 'uiBase/layout' export const StyledAppNavigation = styled.div` display: grid; @@ -14,12 +13,13 @@ export const StyledAppNavigation = styled.div` box-sizing: border-box; align-items: center; ` -type NavContainerProps = React.ComponentProps & { +type NavContainerProps = React.ComponentProps & { $borderLess?: boolean } -export const StyledAppNavigationContainer = styled(Row)` +export const StyledAppNavigationContainer = styled(RiRow)` height: 100%; width: auto; + max-width: 50%; &:first-child { padding-inline-start: ${({ theme }) => theme.components.appBar.group.gap}; } @@ -33,6 +33,6 @@ export const StyledAppNavigationContainer = styled(Row)` ${({ theme }) => theme.components.tabs.variants.default.tabsLine.color}; ` -export const StyledAppNavTab = styled(Tabs.TabBar.Trigger.Tab)` +export const StyledAppNavTab = styled(RiTabs.TabBar.Trigger.Tab)` padding-bottom: ${({ theme }) => theme.core.space.space200} !important; ` diff --git a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx index ee7e942ce1..d32ea5cdb6 100644 --- a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx +++ b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx @@ -1,6 +1,5 @@ import React, { ReactNode } from 'react' -import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs' -import { Row } from 'uiSrc/components/base/layout/flex' +import { RiTabs, TabInfo, RiRow } from 'uiBase/layout' import { StyledAppNavigation, StyledAppNavigationContainer, @@ -12,7 +11,7 @@ type AppNavigationContainerProps = { children?: ReactNode borderLess?: boolean } & Pick< - React.ComponentProps, + React.ComponentProps, 'gap' | 'justify' | 'align' | 'grow' | 'style' > const AppNavigationContainer = ({ @@ -54,8 +53,13 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => { return ( - - + { const tabNavItem = privateRoutes.find( @@ -67,22 +71,22 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => { } }} > - + {navTabs.map(({ value, label, disabled }, index) => { const key = `${value}-${index}` return ( - {label ?? value} - - + + ) })} - - + + {actions} diff --git a/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx b/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx index 4e8997d22b..40de81cd92 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.spec.tsx @@ -1,5 +1,6 @@ import React from 'react' import { cloneDeep } from 'lodash' +import { RiSideBar } from 'uiBase/layout' import { cleanup, mockedStore, render, fireEvent } from 'uiSrc/utils/test-utils' import { setSSOFlow } from 'uiSrc/slices/instances/cloud' @@ -9,7 +10,6 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { sendEventTelemetry } from 'uiSrc/telemetry' import { HELP_LINKS } from 'uiSrc/pages/home/constants' import * as appFeaturesSlice from 'uiSrc/slices/app/features' -import { SideBar } from 'uiSrc/components/base/layout/sidebar' import CreateCloud from './CreateCloud' jest.mock('uiSrc/telemetry', () => ({ @@ -38,7 +38,11 @@ beforeEach(() => { store.clearActions() }) -const sideBarWithCreateCloud = +const sideBarWithCreateCloud = ( + + + +) describe('CreateCloud', () => { it('should render', () => { diff --git a/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx b/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx index 0c0e6f55db..8019516e92 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/create-cloud/CreateCloud.tsx @@ -1,5 +1,7 @@ import React from 'react' +import { RiSideBarItem, SideBarItemIcon } from 'uiBase/layout' +import { RiLink } from 'uiBase/display' import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' @@ -9,9 +11,6 @@ import { getUtmExternalLink } from 'uiSrc/utils/links' import { sendEventTelemetry } from 'uiSrc/telemetry' import { HELP_LINKS } from 'uiSrc/pages/home/constants' import { FeatureFlags } from 'uiSrc/constants' -import { SideBarItem } from 'uiSrc/components/base/layout/sidebar' -import { SideBarItemIcon } from 'uiSrc/components/base/layout/sidebar/SideBarItemIcon' -import { Link } from 'uiSrc/components/base/link/Link' const CreateCloud = () => { const onCLickLink = (isSSOEnabled: boolean) => { @@ -29,14 +28,14 @@ const CreateCloud = () => { {(ssoCloudHandlerClick, isSSOEnabled) => ( - - { aria-label="cloud-db-icon" data-testid="cloud-db-icon" /> - - + + )} diff --git a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.spec.tsx b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.spec.tsx index 8c854292ff..e09d68da46 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.spec.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.spec.tsx @@ -1,5 +1,6 @@ import React from 'react' import { cloneDeep, set } from 'lodash' +import { RiSideBar } from 'uiBase/layout' import { render, screen, @@ -19,7 +20,6 @@ import { } from 'uiSrc/slices/app/info' import { FeatureFlags } from 'uiSrc/constants' -import { SideBar } from 'uiSrc/components/base/layout/sidebar' import HelpMenu from './HelpMenu' jest.mock('uiSrc/telemetry', () => ({ @@ -41,7 +41,11 @@ beforeEach(() => { store.clearActions() }) -const sideBarWithHelpMenu = +const sideBarWithHelpMenu = ( + + + +) describe('HelpMenu', () => { it('should render', () => { diff --git a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx index 6e1ea95498..9fe8d3a6eb 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx @@ -2,6 +2,13 @@ import cx from 'classnames' import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { RiPopover } from 'uiBase/index' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiTitle, RiText } from 'uiBase/text' +import { SupportIcon, RiIcon } from 'uiBase/icons' +import { RiLink } from 'uiBase/display' +import { RiSideBarItem, SideBarItemIcon } from 'uiBase/layout/sidebar' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { ReleaseNotesSource } from 'uiSrc/constants/telemetry' import { @@ -16,18 +23,6 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { FeatureFlags } from 'uiSrc/constants' import { FeatureFlagComponent } from 'uiSrc/components' -import { RiPopover } from 'uiSrc/components/base' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Title } from 'uiSrc/components/base/text/Title' -import { SupportIcon } from 'uiSrc/components/base/icons' -import { Text } from 'uiSrc/components/base/text' -import { Link } from 'uiSrc/components/base/link/Link' -import { - SideBarItem, - SideBarItemIcon, -} from 'uiSrc/components/base/layout/sidebar' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import navStyles from '../../styles.module.scss' import styles from './styles.module.scss' @@ -70,7 +65,7 @@ const HelpMenu = () => { } const HelpMenuButton = ( - { aria-label="Help Menu" data-testid="help-menu-button" /> - + ) return ( @@ -96,47 +91,47 @@ const HelpMenu = () => { button={HelpMenuButton} >
- + <RiTitle size="XS" className={styles.helpMenuTitle}> Help Center - - - + + - - + - - + Provide
Feedback - - - + + + - +
- onKeyboardShortcutClick()} data-testid="shortcuts-btn" > Keyboard Shortcuts - +
@@ -148,33 +143,33 @@ const HelpMenu = () => { >
- - + Release Notes - - + +
- onResetOnboardingClick()} data-testid="reset-onboarding-btn" > Reset Onboarding - +
- - + +
) diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx index 06af7291da..f806cd368c 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/Notification/Notification.tsx @@ -3,15 +3,13 @@ import cx from 'classnames' import { format } from 'date-fns' import parse from 'html-react-parser' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { TitleSize, RiTitle, RiText } from 'uiBase/text' +import { RiBadge } from 'uiBase/display' import { NOTIFICATION_DATE_FORMAT } from 'uiSrc/constants/notifications' import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { truncateText } from 'uiSrc/utils' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { TitleSize, Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge' - import styles from '../styles.module.scss' export interface Props { @@ -24,31 +22,35 @@ const Notification = (props: Props) => { return ( <> - {notification.title} - + - {parse(notification.body)} - + - - - + + + {format(notification.timestamp * 1000, NOTIFICATION_DATE_FORMAT)} - - + + {notification.category && ( - + { data-testid="notification-category" label={truncateText(notification.category, 32)} /> - + )} - + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx index 59148bcedf..3be14b4fa9 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx @@ -1,6 +1,8 @@ import cx from 'classnames' import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { RiTitle, RiText } from 'uiBase/text' +import { RiPopover } from 'uiBase/display' import { fetchNotificationsAction, notificationCenterSelector, @@ -8,9 +10,6 @@ import { unreadNotificationsAction, } from 'uiSrc/slices/app/notifications' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { RiPopover } from 'uiSrc/components/base' import Notification from './Notification' import styles from './styles.module.scss' @@ -55,14 +54,14 @@ const NotificationCenter = () => { className={styles.popoverNotificationCenter} data-testid="notification-center" > - + <RiTitle size="S" className={styles.title}> Notification Center - + {!hasNotifications && (
- + No notifications to display. - +
)} {hasNotifications && ( diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.spec.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.spec.tsx index 36e094cfa3..f014880fc1 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.spec.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.spec.tsx @@ -1,12 +1,12 @@ +import React from 'react' import { fireEvent } from '@testing-library/react' import { cloneDeep } from 'lodash' -import React from 'react' +import { RiSideBar } from 'uiBase/layout' import { notificationCenterSelector, setIsCenterOpen, } from 'uiSrc/slices/app/notifications' import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils' -import { SideBar } from 'uiSrc/components/base/layout/sidebar' import NotificationMenu from './NotificationMenu' jest.mock('uiSrc/slices/app/notifications', () => ({ @@ -25,7 +25,11 @@ beforeEach(() => { store.clearActions() }) -const sideBarWithNotificationMenu = +const sideBarWithNotificationMenu = ( + + + +) describe('NotificationMenu', () => { it('should render', () => { diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx index cc43489f58..6673ea435f 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx @@ -1,15 +1,12 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' +import { NotificationsIcon } from 'uiBase/icons' +import { RiSideBarItem, SideBarItemIcon } from 'uiBase/layout/sidebar' import { notificationCenterSelector, setIsCenterOpen, } from 'uiSrc/slices/app/notifications' -import { NotificationsIcon } from 'uiSrc/components/base/icons' -import { - SideBarItem, - SideBarItemIcon, -} from 'uiSrc/components/base/layout/sidebar' import NotificationCenter from './NotificationCenter' import PopoverNotification from './PopoverNotification' @@ -25,7 +22,7 @@ const NavButton = () => { } const Btn = ( - { aria-label="Notification Menu" data-testid="notification-menu-button" /> - + ) return ( diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx index 84203da6f8..f99b11e3fa 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx @@ -1,6 +1,9 @@ import cx from 'classnames' import React, { useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { RiIconButton } from 'uiBase/forms' +import { CancelSlimIcon } from 'uiBase/icons' +import { RiPopover } from 'uiBase/display' import { notificationCenterSelector, setIsCenterOpen, @@ -9,9 +12,6 @@ import { } from 'uiSrc/slices/app/notifications' import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' -import { RiPopover } from 'uiSrc/components/base' import Notification from '../Notification' import styles from '../styles.module.scss' @@ -106,7 +106,7 @@ const PopoverNotification = () => { className={styles.popoverNotification} data-testid="notification-popover" > - { @@ -23,9 +23,14 @@ describe('RedisLogo', () => { `app.features.featureFlags.features.${FeatureFlags.envDependent}`, { flag: true }, ) - render(, { - store: mockStore(initialStoreState), - }) + render( + + + , + { + store: mockStore(initialStoreState), + }, + ) expect(screen.getByTestId('redis-logo-link')).toBeInTheDocument() }) @@ -36,9 +41,14 @@ describe('RedisLogo', () => { `app.features.featureFlags.features.${FeatureFlags.envDependent}`, { flag: false }, ) - render(, { - store: mockStore(initialStoreState), - }) + render( + + + , + { + store: mockStore(initialStoreState), + }, + ) expect(screen.queryByTestId('redis-logo-link')).not.toBeInTheDocument() }) diff --git a/redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx b/redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx index 1d3164d5b8..562c82c3b8 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx @@ -2,16 +2,13 @@ import cx from 'classnames' import React from 'react' import { useSelector } from 'react-redux' +import { RiSideBarItem, SideBarItemIcon } from 'uiBase/layout' +import { RiLink } from 'uiBase/display' import { BuildType } from 'uiSrc/constants/env' import { appInfoSelector } from 'uiSrc/slices/app/info' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' -import { - SideBarItem, - SideBarItemIcon, -} from 'uiSrc/components/base/layout/sidebar' import { getRouterLinkProps } from 'uiSrc/services' import { Pages } from 'uiSrc/constants' -import { Link } from 'uiSrc/components/base/link/Link' import LogoSVG from 'uiSrc/assets/img/logo_small.svg?react' import styles from '../../styles.module.scss' @@ -32,12 +29,12 @@ export const RedisLogo = ({ isRdiWorkspace }: Props) => { } return ( - - { style={{ marginBlock: '2rem', marginInline: 'auto' }} > - - + + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/hooks/useNavigation.ts b/redisinsight/ui/src/components/navigation-menu/hooks/useNavigation.ts index 62e4968bf7..51b084dbed 100644 --- a/redisinsight/ui/src/components/navigation-menu/hooks/useNavigation.ts +++ b/redisinsight/ui/src/components/navigation-menu/hooks/useNavigation.ts @@ -3,6 +3,15 @@ import { last } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import { useEffect, useState } from 'react' +import { + BrowserIcon, + PipelineManagementIcon, + PipelineStatisticsIcon, + PubSubIcon, + SlowLogIcon, + WorkbenchIcon, + SettingsIcon, +} from 'uiBase/icons' import { Props as HighlightedFeatureProps } from 'uiSrc/components/hightlighted-feature/HighlightedFeature' import { ANALYTICS_ROUTES } from 'uiSrc/components/main-router/constants/sub-routes' import { @@ -18,15 +27,6 @@ import { Pages, FeatureFlags, PageNames } from 'uiSrc/constants' import { appContextSelector } from 'uiSrc/slices/app/context' import { AppWorkspace } from 'uiSrc/slices/interfaces' -import { - BrowserIcon, - PipelineManagementIcon, - PipelineStatisticsIcon, - PubSubIcon, - SlowLogIcon, - WorkbenchIcon, - SettingsIcon, -} from 'uiSrc/components/base/icons' import { INavigations } from '../navigation.types' const pubSubPath = `/${PageNames.pubSub}` diff --git a/redisinsight/ui/src/components/navigation-menu/navigation.types.ts b/redisinsight/ui/src/components/navigation-menu/navigation.types.ts index b403d8f398..a975c53411 100644 --- a/redisinsight/ui/src/components/navigation-menu/navigation.types.ts +++ b/redisinsight/ui/src/components/navigation-menu/navigation.types.ts @@ -1,4 +1,4 @@ -import { IconType } from 'uiSrc/components/base/forms/buttons' +import { IconType } from 'uiBase/forms' import { FeatureFlags } from 'uiSrc/constants' export interface INavigations { diff --git a/redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.tsx b/redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.tsx index 08c016229e..6ce4a3b458 100644 --- a/redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.tsx +++ b/redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.tsx @@ -1,14 +1,14 @@ import React from 'react' +// TODO - 18.08.25 - Replace this with local implementations import { BoxSelectionGroup, BoxSelectionGroupItemComposeProps, Checkbox, } from '@redis-ui/components' -import { EditIcon } from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton' -import { Text } from 'uiSrc/components/base/text' - +import { RiIconButton } from 'uiBase/forms' +import { EditIcon } from 'uiBase/icons' +import { RiText } from 'uiBase/text' import { BoxContent, BoxHeader, @@ -34,18 +34,18 @@ export const FieldBox = ({ box, ...rest }: FieldBoxProps) => { - + - + {label} - + {text && ( - + {text} - + )} diff --git a/redisinsight/ui/src/components/new-index/selection-box/SelectionBox.styles.tsx b/redisinsight/ui/src/components/new-index/selection-box/SelectionBox.styles.tsx index f3fb32f8cb..bbb2bdbc61 100644 --- a/redisinsight/ui/src/components/new-index/selection-box/SelectionBox.styles.tsx +++ b/redisinsight/ui/src/components/new-index/selection-box/SelectionBox.styles.tsx @@ -1,17 +1,17 @@ import React from 'react' import styled from 'styled-components' -import { Text, Title } from 'uiSrc/components/base/text' +import { RiText, RiTitle } from 'uiBase/text' export const StyledBoxContent = styled.div` padding: ${({ theme }) => theme.core.space.space200}; text-align: left; ` -export const StyledTitle = styled(Title)` +export const StyledTitle = styled(RiTitle)` margin-top: ${({ theme }) => theme.core.space.space050}; ` -export const StyledText = styled(Text)` +export const StyledText = styled(RiText)` margin-top: ${({ theme }) => theme.core.space.space050}; white-space: normal; overflow-wrap: break-word; @@ -31,6 +31,6 @@ export const StyledDisabledBar = styled.div` export const DisabledBar = () => ( - Coming soon + Coming soon ) diff --git a/redisinsight/ui/src/components/notifications/Notifications.tsx b/redisinsight/ui/src/components/notifications/Notifications.tsx index c097565f59..876fe36a0f 100644 --- a/redisinsight/ui/src/components/notifications/Notifications.tsx +++ b/redisinsight/ui/src/components/notifications/Notifications.tsx @@ -1,6 +1,9 @@ import React, { useEffect, useRef } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { RiColorText } from 'uiBase/text' +import { InfoIcon } from 'uiBase/icons' +import { riToast, RiToaster } from 'uiBase/display' import { errorsSelector, infiniteNotificationsSelector, @@ -15,9 +18,6 @@ import { DEFAULT_ERROR_MESSAGE } from 'uiSrc/utils' import { showOAuthProgress } from 'uiSrc/slices/oauth/cloud' import { CustomErrorCodes } from 'uiSrc/constants' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { ColorText } from 'uiSrc/components/base/text' -import { InfoIcon } from 'uiSrc/components/base/icons' -import { riToast, RiToaster } from 'uiSrc/components/base/display/toast' import errorMessages from './error-messages' import { InfiniteMessagesIds } from './components' @@ -51,7 +51,7 @@ const Notifications = () => { } const getSuccessText = (text: string | JSX.Element | JSX.Element[]) => ( - {text} + {text} ) const showSuccessToasts = (data: IMessage[]) => diff --git a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx index cb3176a386..9e34d92257 100644 --- a/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/cloud-capi-unauthorized/CloudCapiUnAuthorizedErrorContent.tsx @@ -1,17 +1,14 @@ import React from 'react' import { useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' -import { ColorText } from 'uiSrc/components/base/text' +import { RiColorText } from 'uiBase/text' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiDestructiveButton, RiEmptyButton } from 'uiBase/forms' import { removeCapiKeyAction } from 'uiSrc/slices/oauth/cloud' import { Pages } from 'uiSrc/constants' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - DestructiveButton, - EmptyButton, -} from 'uiSrc/components/base/forms/buttons' export interface Props { resourceId: string @@ -48,12 +45,11 @@ const CloudCapiUnAuthorizedErrorContent = ({ return ( <> - - {text} - - - - {text} + + + + Go to Settings - - - - + + + Remove API key - - - + + + ) } diff --git a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx index 76ea835662..66949aa0fc 100644 --- a/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/default-error-content/DefaultErrorContent.tsx @@ -1,15 +1,13 @@ import React from 'react' -import { ColorText } from 'uiSrc/components/base/text' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiColorText } from 'uiBase/text' export interface Props { text: string | JSX.Element | JSX.Element[] } // TODO: use i18n file for texts const DefaultErrorContent = ({ text }: Props) => ( - {text} + {text} ) export default DefaultErrorContent diff --git a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx index 599b242f10..f9cf33a85e 100644 --- a/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx +++ b/redisinsight/ui/src/components/notifications/components/encryption-error-content/EncryptionErrorContent.tsx @@ -1,15 +1,12 @@ import React from 'react' import { matchPath, useHistory, useLocation } from 'react-router-dom' import { useDispatch } from 'react-redux' -import { Pages } from 'uiSrc/constants' -import { ColorText } from 'uiSrc/components/base/text' +import { RiColorText } from 'uiBase/text' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiDestructiveButton, RiEmptyButton } from 'uiBase/forms' import { updateUserConfigSettingsAction } from 'uiSrc/slices/user/user-settings' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - DestructiveButton, - EmptyButton, -} from 'uiSrc/components/base/forms/buttons' +import { Pages } from 'uiSrc/constants' export interface Props { onClose?: () => void @@ -44,39 +41,39 @@ const EncryptionErrorContent = (props: Props) => { } return ( <> - + Check the system keychain or disable encryption to proceed. - - - + + + Disabling encryption will result in storing sensitive information locally in plain text. Re-enter database connection information to work with databases. - - - - + + + +
- Disable Encryption - +
- - - + + Cancel - - - + + + ) } diff --git a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx index fd18257a64..5021024ac4 100644 --- a/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx +++ b/redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx @@ -1,6 +1,12 @@ import React from 'react' import { find } from 'lodash' import cx from 'classnames' +import { RiText, RiTitle } from 'uiBase/text' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton, RiSecondaryButton } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' +import { RiLink, RiLoader } from 'uiBase/display' import { CloudJobName, CloudJobStep } from 'uiSrc/electron/constants' import ExternalLink from 'uiSrc/components/base/external-link' import Divider from 'uiSrc/components/divider/Divider' @@ -10,22 +16,11 @@ import { CloudSuccessResult } from 'uiSrc/slices/interfaces' import { Maybe } from 'uiSrc/utils' import { getUtmExternalLink } from 'uiSrc/utils/links' -import { Text } from 'uiSrc/components/base/text' import { EXTERNAL_LINKS, UTM_CAMPAINGS, UTM_MEDIUMS, } from 'uiSrc/constants/links' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { Title } from 'uiSrc/components/base/text/Title' -import { Link } from 'uiSrc/components/base/link/Link' -import { Loader } from 'uiSrc/components/base/display' import styles from './styles.module.scss' export enum InfiniteMessagesIds { @@ -49,19 +44,19 @@ export const INFINITE_MESSAGES = { id: InfiniteMessagesIds.oAuthProgress, Inner: (
- - - - - - Authenticating… - + + + + + + + Authenticating… + + This may take several seconds, but it is totally worth it! - - - + + +
), }), @@ -69,14 +64,12 @@ export const INFINITE_MESSAGES = { id: InfiniteMessagesIds.oAuthProgress, Inner: (
- - - - - - + <RiRow justify="end"> + <RiFlexItem grow={false}> + <RiLoader className={cx('infiniteMessage__icon', styles.loading)} /> + </RiFlexItem> + <RiFlexItem grow> + <RiTitle className="infiniteMessage__title"> <span> {(step === CloudJobStep.Credentials || !step) && 'Processing Cloud API keys…'} @@ -87,17 +80,17 @@ export const INFINITE_MESSAGES = { {step === CloudJobStep.Import && 'Importing a free trial Cloud database…'} </span> - - + + This may take several minutes, but it is totally worth it! - - - + + + You can continue working in Redis Insight, and we will notify you once done. - - - + + +
), }), @@ -128,70 +121,72 @@ export const INFINITE_MESSAGES = { }} data-testid="success-create-db-notification" > - - + + - - - Congratulations! - + + + + Congratulations! + + {text} - + Notice: the database will be deleted after 15 days of inactivity. - + {!!details && ( <> - + - - - - Plan - - - Free - - - - - Cloud Vendor - - + + + Plan + + + Free + + + + + Cloud Vendor + + {!!vendor?.icon && } - {vendor?.label} - - - - - Region - - - {details.region} - - + {vendor?.label} + + + + + Region + + + {details.region} + + )} - - - + + + Manage DB - - - + + onSuccess()} data-testid="notification-connect-db" > Connect - - - - - + + + + +
), } @@ -209,34 +204,34 @@ export const INFINITE_MESSAGES = { }} data-testid="database-exists-notification" > - + <RiTitle className="infiniteMessage__title"> You already have a free trial Redis Cloud subscription. - - + + Do you want to import your existing database into Redis Insight? - - - - - + + + + onSuccess?.()} data-testid="import-db-sso-btn" > Import - - - - + + + onClose?.()} data-testid="cancel-import-db-sso-btn" > Cancel - - - + + +
), }), @@ -253,36 +248,36 @@ export const INFINITE_MESSAGES = { }} data-testid="database-import-forbidden-notification" > - + <RiTitle className="infiniteMessage__title"> Unable to import Cloud database. - - + + Adding your Redis Cloud database to Redis Insight is disabled due to a setting restricting database connection management. - + Log in to{' '} - Redis Cloud - {' '} + {' '} to check your database. - - - - - + + + + onClose?.()} data-testid="database-import-forbidden-notification-ok-btn" > Ok - - - + + +
), }), @@ -299,35 +294,35 @@ export const INFINITE_MESSAGES = { }} data-testid="subscription-exists-notification" > - + <RiTitle className="infiniteMessage__title"> Your subscription does not have a free trial Redis Cloud database. - - + + Do you want to create a free trial database in your existing subscription? - - - - - + + + + onSuccess?.()} data-testid="create-subscription-sso-btn" > Create - - - - + + + onClose?.()} data-testid="cancel-create-subscription-sso-btn" > Cancel - - - + + + ), }), @@ -335,21 +330,19 @@ export const INFINITE_MESSAGES = { id: InfiniteMessagesIds.autoCreateDb, Inner: (
- - - - - - + <RiRow justify="end"> + <RiFlexItem> + <RiLoader className={cx('infiniteMessage__icon', styles.loading)} /> + </RiFlexItem> + <RiFlexItem grow> + <RiTitle className="infiniteMessage__title"> Connecting to your database - - + + This may take several minutes, but it is totally worth it! - - - + + +
), }), @@ -366,10 +359,10 @@ export const INFINITE_MESSAGES = { }} data-testid="app-update-available-notification" > - + <RiTitle className="infiniteMessage__title"> New version is now available - - + + <> With Redis Insight {` ${version} `} @@ -377,15 +370,15 @@ export const INFINITE_MESSAGES = {
Restart Redis Insight to install updates. - +
- onSuccess?.()} data-testid="app-restart-btn" > Restart - + ), }), @@ -403,32 +396,34 @@ export const INFINITE_MESSAGES = { }} data-testid="success-deploy-pipeline-notification" > - - + + - - - Congratulations! - + + + + Congratulations! + + Deployment completed successfully!
Check out the pipeline statistics page. - - + + {/* // TODO remove display none when statistics page will be available */} - - - + + { }} + onClick={() => {}} data-testid="notification-connect-db" > Statistics - - - - - + + + + + ), }), 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 index ef14c85247..142f9d2259 100644 --- 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 @@ -1,9 +1,8 @@ import React, { useEffect, useMemo } from 'react' -import { Link } from 'uiSrc/components/base/link/Link' -import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' -import { ColorText } from 'uiSrc/components/base/text' +import { RiLink } from 'uiBase/display' +import { RiSpacer, RiCol, RiFlexItem, RiRow } from 'uiBase/layout' +import { RiDestructiveButton } from 'uiBase/forms' +import { RiColorText } from 'uiBase/text' export interface Props { message: string @@ -28,11 +27,11 @@ const RdiDeployErrorContent = (props: Props) => { return ( <> - - - + + +
Review the error log for details.
- { style={{ marginTop: '10px', paddingLeft: 0 }} > Download Error Log File - - - - + + + + - + {/* // TODO remove display none when logs column will be available */} - - - + + {}} className="toast-danger-btn" data-testid="see-errors-btn" > Remove API key - - - + + + ) } diff --git a/redisinsight/ui/src/components/notifications/error-messages.tsx b/redisinsight/ui/src/components/notifications/error-messages.tsx index 4fc04f92cd..9debd56181 100644 --- a/redisinsight/ui/src/components/notifications/error-messages.tsx +++ b/redisinsight/ui/src/components/notifications/error-messages.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { riToast } from 'uiSrc/components/base/display/toast' -import { InfoIcon, ToastDangerIcon } from 'uiSrc/components/base/icons' +import { riToast } from 'uiBase/display' +import { InfoIcon, ToastDangerIcon } from 'uiBase/icons' import RdiDeployErrorContent from './components/rdi-deploy-error-content' import { EncryptionErrorContent, DefaultErrorContent } from './components' diff --git a/redisinsight/ui/src/components/notifications/success-messages.tsx b/redisinsight/ui/src/components/notifications/success-messages.tsx index 0b86481c91..e490865b59 100644 --- a/redisinsight/ui/src/components/notifications/success-messages.tsx +++ b/redisinsight/ui/src/components/notifications/success-messages.tsx @@ -1,4 +1,6 @@ import React from 'react' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { IBulkActionOverview, @@ -12,8 +14,6 @@ import { millisecondsFormat, } from 'uiSrc/utils' import { numberWithSpaces } from 'uiSrc/utils/numbers' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' // TODO: use i18n file for texts @@ -216,47 +216,47 @@ export default { {fileName ? ( <>
- Commands executed from file: - {formatLongName(fileName, 34, 5)} + Commands executed from file: + {formatLongName(fileName, 34, 5)} ) : null} ), message: ( - - - + + + {numberWithSpaces(processed)} - - + + Commands Processed - - - - + + + + {numberWithSpaces(succeed)} - - + + Success - - - - + + + + {numberWithSpaces(failed)} - - + + Errors - - - - + + + + {millisecondsFormat(data?.duration || 0, 'H:mm:ss.SSS')} - - + + Time Taken - - - + + + ), className: 'dynamic', } diff --git a/redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx b/redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx index 66646b82af..fd8fc02973 100644 --- a/redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx @@ -3,6 +3,8 @@ import { useDispatch, useSelector } from 'react-redux' import { useLocation } from 'react-router-dom' import cx from 'classnames' +import { RiPrimaryButton } from 'uiBase/forms' +import { ExportIcon } from 'uiBase/icons' import { TelemetryEvent, getRedisModulesSummary, @@ -20,8 +22,6 @@ import { openNewWindowDatabase } from 'uiSrc/utils' import { Pages } from 'uiSrc/constants' import { setCapability } from 'uiSrc/slices/app/context' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { ExportIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' interface Props { @@ -85,7 +85,7 @@ const OAuthConnectFreeDb = ({ } return ( - Launch database - + ) } diff --git a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.spec.tsx b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.spec.tsx index 07bfde00cc..85292f4443 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.spec.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.spec.tsx @@ -17,6 +17,7 @@ import { } from 'uiSrc/slices/oauth/cloud' import { apiService } from 'uiSrc/services' import { loadSubscriptionsRedisCloud } from 'uiSrc/slices/instances/cloud' +import { mockModal } from 'uiSrc/mocks/components/modal' import OAuthSelectAccountDialog from './OAuthSelectAccountDialog' jest.mock('uiSrc/telemetry', () => ({ @@ -45,22 +46,10 @@ jest.mock('uiSrc/slices/instances/cloud', () => ({ }), })) -jest.mock('uiSrc/components/base/display', () => { - const actual = jest.requireActual('uiSrc/components/base/display') - - return { - ...actual, - Modal: { - ...actual.Modal, - Content: { - ...actual.Modal.Content, - Header: { - ...actual.Modal.Content.Header, - Title: jest.fn().mockReturnValue(null), - }, - }, - }, - } +jest.mock('uiBase/display', () => { + const actual = jest.requireActual('uiBase/display') + + return mockModal(actual) }) let store: typeof mockedStore diff --git a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx index 58382b435b..82498732f0 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx @@ -3,6 +3,18 @@ import { useDispatch, useSelector } from 'react-redux' import { useFormik } from 'formik' import { useHistory } from 'react-router-dom' +import { + RiPrimaryButton, + RiSecondaryButton, + RiRadioGroupItemIndicator, + RiRadioGroupItemLabel, + RiRadioGroupItemRoot, + RiRadioGroupRoot, +} from 'uiBase/forms' +import { RiColorText, RiText } from 'uiBase/text' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiModal } from 'uiBase/display' +import { CancelIcon } from 'uiBase/icons' import { activateAccount, createFreeDbJob, @@ -31,20 +43,6 @@ import { import { CloudJobName, CloudJobStep } from 'uiSrc/electron/constants' import { OAuthSocialAction } from 'uiSrc/slices/interfaces' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { - RiRadioGroupItemIndicator, - RiRadioGroupItemLabel, - RiRadioGroupItemRoot, - RiRadioGroupRoot, -} from 'uiSrc/components/base/forms/radio-group/RadioGroup' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Modal } from 'uiSrc/components/base/display' -import { CancelIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' interface FormValues { @@ -173,35 +171,35 @@ const OAuthSelectAccountDialog = () => { const radios = accounts.map(({ id, name = '' }) => ({ id: `${id}`, label: ( - + {name} - + {id} - - + + ), })) return ( - - + - - + Connect to Redis Cloud - - + +
- + Select an account to connect to: - - + + handleChangeAccountIdFormat(id)} @@ -215,15 +213,15 @@ const OAuthSelectAccountDialog = () => {
- Cancel - - + { aria-labelledby="submit oauth select account dialog" > Select account - +
- - - + + + ) } diff --git a/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.spec.tsx b/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.spec.tsx index efe3a9ac31..df35ebb2ff 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.spec.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.spec.tsx @@ -16,6 +16,7 @@ import { MOCK_RS_PREVIEW_REGION, MOCK_CUSTOM_REGIONS, } from 'uiSrc/constants/mocks/mock-sso' +import { mockModal } from 'uiSrc/mocks/components/modal' import OAuthSelectPlan from './OAuthSelectPlan' jest.mock('uiSrc/telemetry', () => ({ @@ -62,22 +63,10 @@ jest.mock('uiSrc/slices/app/features', () => ({ }), })) -jest.mock('uiSrc/components/base/display', () => { - const actual = jest.requireActual('uiSrc/components/base/display') +jest.mock('uiBase/display', () => { + const actual = jest.requireActual('uiBase/display') - return { - ...actual, - Modal: { - ...actual.Modal, - Content: { - ...actual.Modal.Content, - Header: { - ...actual.Modal.Content.Header, - Title: jest.fn().mockReturnValue(null), - }, - }, - }, - } + return mockModal(actual) }) let store: typeof mockedStore diff --git a/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx b/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx index 353338af93..3289bdcf60 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx @@ -3,6 +3,15 @@ import { toNumber, filter, get, find, first } from 'lodash' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { + RiEmptyButton, + RiPrimaryButton, + RiSecondaryButton, + RiSelect, +} from 'uiBase/forms' +import { RiColorText, RiText } from 'uiBase/text' +import { RiIcon, CancelIcon } from 'uiBase/icons' +import { RiModal } from 'uiBase/display' import { createFreeDbJob, oauthCloudPlanSelector, @@ -17,16 +26,6 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { FeatureFlags } from 'uiSrc/constants' import { Region } from 'uiSrc/slices/interfaces' -import { - EmptyButton, - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { ColorText, Text } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' -import { Modal } from 'uiSrc/components/base/display' -import { CancelIcon } from 'uiSrc/components/base/icons' import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto' import { OAuthProvider, OAuthProviders } from './constants' import styles from './styles.module.scss' @@ -119,23 +118,23 @@ const OAuthSelectPlan = () => { find(rsRegions, { provider })?.regions || [] return ( - {`${countryName} (${cityName})`} - {region} + {region} {rsProviderRegions?.includes(region) && ( - (Redis 7.2) - + )} - + ) } @@ -172,19 +171,26 @@ const OAuthSelectPlan = () => { } return ( - - - - + + + + Choose a cloud vendor - - + +
- + Select a cloud vendor and region to complete the final step towards your free trial Redis database. No credit card is required. - +
{OAuthProviders.map(({ icon, id, label }) => { const Icon = () => ( @@ -197,7 +203,7 @@ const OAuthSelectPlan = () => { )} - setProviderSelected(id)} @@ -205,13 +211,13 @@ const OAuthSelectPlan = () => { [styles.activeProvider]: id === providerSelected, })} /> - {label} + {label} ) })}
- Region + Region { }} /> {!regionOptions.length && ( - No regions available, try another vendor. - + )}
- Cancel - - + { aria-labelledby="submit oauth select plan dialog" > Create database - +
- - - + + + ) } diff --git a/redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts b/redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts index de842df16b..0c76fd77c3 100644 --- a/redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts +++ b/redisinsight/ui/src/components/oauth/oauth-select-plan/constants.ts @@ -1,4 +1,4 @@ -import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon' +import { AllIconsType } from 'uiBase/icons' import styles from './styles.module.scss' export enum OAuthProvider { diff --git a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx index b978ec309e..5ee90fa5c1 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx @@ -1,12 +1,12 @@ import React from 'react' import styled from 'styled-components' +import { RiSecondaryButton } from 'uiBase/forms' +import { RiImage } from 'uiBase/display' import { OAuthSsoHandlerDialog } from 'uiSrc/components' import RedisLogo from 'uiSrc/assets/img/logo_small.svg' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' -import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' -import { RiImage } from 'uiSrc/components/base/display' import styles from './styles.module.scss' const LogoWrapper = styled.div` @@ -24,7 +24,7 @@ const OAuthSignInButton = (props: Props) => { return ( {(socialCloudHandlerClick) => ( - @@ -39,7 +39,7 @@ const OAuthSignInButton = (props: Props) => { Cloud sign in - + )} ) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso-dialog/OAuthSsoDialog.tsx b/redisinsight/ui/src/components/oauth/oauth-sso-dialog/OAuthSsoDialog.tsx index 01800624ba..5889a1a154 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso-dialog/OAuthSsoDialog.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso-dialog/OAuthSsoDialog.tsx @@ -3,6 +3,7 @@ import React, { useCallback } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { RiModal } from 'uiBase/display' import { oauthCloudSelector, setSocialDialogState, @@ -12,7 +13,6 @@ import { cloudSelector } from 'uiSrc/slices/instances/cloud' import { OAuthCreateDb, OAuthSignIn } from 'uiSrc/components/oauth/oauth-sso' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' -import { Modal } from 'uiSrc/components/base/display' import styles from './styles.module.scss' const OAuthSsoDialog = () => { @@ -36,7 +36,7 @@ const OAuthSsoDialog = () => { } return ( - { return (
- + Use{' '} {currentAccountName?.name} #{currentAccountId} {' '} account to auto-discover subscriptions and add your databases. - - + Discover - +
) } @@ -113,7 +112,7 @@ const OAuthAutodiscovery = (props: Props) => { {(ssoCloudHandlerClick) => ( - { }} > Quick start - + )} @@ -143,20 +142,20 @@ const OAuthAutodiscovery = (props: Props) => { > {(form: React.ReactNode) => ( <> - + Discover subscriptions and add your databases. A new Redis Cloud account will be created for you if you don’t have one. - - + + - - Get started with - + <RiSpacer size="xl" /> + <RiText>Get started with</RiText> + <RiTitle className={styles.title} size="L"> Redis Cloud account - - + + {form} - +
diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx index 7d4802ddb4..149acd6d6b 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx @@ -1,5 +1,9 @@ import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton } from 'uiBase/forms' +import { RiTitle, RiText } from 'uiBase/text' import { createFreeDbJob, fetchPlans, @@ -27,11 +31,6 @@ import { } from 'uiSrc/slices/instances/cloud' import { Nullable } from 'uiSrc/utils' import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' import { OAuthAdvantages, OAuthAgreement, @@ -113,11 +112,11 @@ const OAuthCreateDb = (props: Props) => { return (
- - + + - - + + {!data ? ( { > {(form: React.ReactNode) => ( <> - Get started with - - + <RiText className={styles.subTitle}>Get started with</RiText> + <RiTitle size="XL" className={styles.title}> Free trial Cloud database - + {form}
{ ) : ( <> - Get your - - + <RiText className={styles.subTitle}>Get your</RiText> + <RiTitle size="XL" className={styles.title}> Free trial Cloud database - - - + + + The database will be created automatically and can be changed from Redis Cloud. - - + + - - + Create - + )} - - + +
) } diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/OAuthSignIn.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/OAuthSignIn.tsx index 9576b3c3b7..0d92abf502 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/OAuthSignIn.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-sign-in/OAuthSignIn.tsx @@ -1,14 +1,13 @@ import React from 'react' import { useDispatch } from 'react-redux' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiTitle, RiText } from 'uiBase/text' import { OAuthAdvantages, OAuthAgreement } from 'uiSrc/components/oauth/shared' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { setSSOFlow } from 'uiSrc/slices/instances/cloud' import { Nullable } from 'uiSrc/utils' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' import OAuthForm from '../../shared/oauth-form/OAuthForm' import styles from './styles.module.scss' @@ -36,11 +35,11 @@ const OAuthSignIn = (props: Props) => { return (
- - + + - - + + { > {(form: React.ReactNode) => ( <> - Get started with - + <RiText className={styles.subTitle}>Get started with</RiText> + <RiTitle size="XL" className={styles.title}> Redis Cloud account - + {form} )} - - + +
) } diff --git a/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx b/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx index 72e9fcc397..5cdca3b6a7 100644 --- a/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { RiLoader } from 'uiBase/display' import OAuthSignInButton from 'uiSrc/components/oauth/oauth-sign-in-button' import { activateAccount, @@ -13,7 +14,6 @@ import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { appInfoSelector } from 'uiSrc/slices/app/info' import { PackageType } from 'uiSrc/constants/env' import UserProfileBadge from 'uiSrc/components/instance-header/components/user-profile/UserProfileBadge' -import { Loader } from 'uiSrc/components/base/display' import styles from './styles.module.scss' @@ -41,7 +41,7 @@ const OAuthUserProfile = (props: Props) => { if (initialLoading) { return (
- (
- - + <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" /> + <RiTitle size="S" className={styles.title}> Cloud - +
{OAUTH_ADVANTAGES_ITEMS.map(({ title }) => ( - - + {title} - - + + ))}
diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx index 76d07c1cbd..ceb239763b 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-agreement/OAuthAgreement.tsx @@ -2,6 +2,8 @@ import React, { ChangeEvent } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { RiCheckbox } from 'uiBase/forms' +import { RiLink } from 'uiBase/display' import { localStorageService } from 'uiSrc/services' import { BrowserStorageItem } from 'uiSrc/constants' import { @@ -10,8 +12,6 @@ import { } from 'uiSrc/slices/oauth/cloud' import { enableUserAnalyticsAction } from 'uiSrc/slices/user/user-settings' -import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' -import { Link } from 'uiSrc/components/base/link/Link' import styles from './styles.module.scss' export interface Props { @@ -34,7 +34,7 @@ const OAuthAgreement = (props: Props) => { return (
- {
  • {'to our '} - { data-testid="ouath-agreements-cloud-terms-of-service" > Cloud Terms of Service - + {' and '} - { data-testid="oauth-agreement-privacy-policy" > Privacy Policy - +
  • that Redis Insight will generate Redis Cloud API account and user diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx index 6f1cdbca97..09ed7a2f79 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx @@ -1,19 +1,15 @@ import { isEmpty } from 'lodash' import React, { useState } from 'react' import { FormikErrors, useFormik } from 'formik' -import { validateEmail, validateField } from 'uiSrc/utils' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton, RiSecondaryButton, RiFormField } from 'uiBase/forms' +import { InfoIcon } from 'uiBase/icons' +import { RiTextInput } from 'uiBase/inputs' +import { RiTitle } from 'uiBase/text' import { RiTooltip } from 'uiSrc/components' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { InfoIcon } from 'uiSrc/components/base/icons' -import { TextInput } from 'uiSrc/components/base/inputs' -import { Title } from 'uiSrc/components/base/text/Title' -import { FormField } from 'uiSrc/components/base/forms/FormField' +import { validateEmail, validateField } from 'uiSrc/utils' import styles from './styles.module.scss' export interface Props { @@ -72,7 +68,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => { ) : null } > - { data-testid="btn-submit" > {text} - + ) return (
    - + <RiTitle className={styles.title} size="S"> Single Sign-On - +
    - - - - + + + { value={formik.values.email} autoComplete="off" onChange={(value) => { - formik.setFieldValue( - 'email', - validateField(value.trim()), - ) + formik.setFieldValue('email', validateField(value.trim())) }} /> - - - - - - - + + + + + + Back - - - + + + - - + +
    ) diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx index 422954a94b..1fec1e0e29 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-recommended-settings/OAuthRecommendedSettings.tsx @@ -1,10 +1,9 @@ import React from 'react' -import { FeatureFlagComponent, RiTooltip } from 'uiSrc/components' +import { RiCheckbox } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' +import { FeatureFlagComponent, RiSpacer, RiTooltip } from 'uiSrc/components' import { FeatureFlags } from 'uiSrc/constants' -import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { Spacer } from 'uiSrc/components/base/layout' import styles from './styles.module.scss' export interface Props { @@ -18,7 +17,7 @@ const OAuthRecommendedSettings = (props: Props) => { return (
    - {
    - +     ) } diff --git a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx index 9575cbb4d6..116366ba7e 100644 --- a/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx +++ b/redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx @@ -1,14 +1,14 @@ import React from 'react' import cx from 'classnames' import { useSelector } from 'react-redux' -import { oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud' -import { OAuthStrategy } from 'uiSrc/slices/interfaces' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { FlexItem } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' +import { RiEmptyButton } from 'uiBase/forms' +import { RiFlexItem } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { AllIconsType, RiIcon } from 'uiBase/icons' import { RiTooltip } from 'uiSrc/components' -import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon' +import { OAuthStrategy } from 'uiSrc/slices/interfaces' +import { oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud' import styles from './styles.module.scss' export interface Props { @@ -60,7 +60,7 @@ const OAuthSocialButtons = (props: Props) => { content={agreement ? null : 'Acknowledge the agreement'} data-testid={`${label}-tooltip`} > - { data-testid={label} aria-labelledby={label} > - + - {text} - - + {text} + + ))}
diff --git a/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx b/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx index 3f71d5c4f0..7fe7dc50b6 100644 --- a/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx +++ b/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import { isString, partialRight } from 'lodash' +import { RiSpacer } from 'uiBase/layout/spacer' import { keysDataSelector } from 'uiSrc/slices/browser/keys' import { openCli, @@ -43,7 +44,6 @@ import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { FeatureFlags } from 'uiSrc/constants' import { isAnyFeatureEnabled } from 'uiSrc/utils/features' -import { Spacer } from 'uiSrc/components/base/layout/spacer' import styles from './styles.module.scss' const sendTelemetry = (databaseId: string, step: string, action: string) => @@ -86,7 +86,7 @@ const ONBOARDING_FEATURES = { This is Browser, where you can see the list of keys in the plain List or Tree view, filter them, perform bulk operations, and view the values. - + Add a key to your database using a dedicated form. ), @@ -245,7 +245,7 @@ const ONBOARDING_FEATURES = { <> Command Helper lets you search and learn more about Redis commands, their syntax, and details. - + Run PING in CLI to see how it works. ), @@ -281,11 +281,11 @@ const ONBOARDING_FEATURES = { <> Use Profiler to track commands sent against the Redis server in real-time. - + Select Start Profiler to stream back every command processed by the Redis server. Save the log to download and investigate commands. - + Tip: Remember to stop Profiler to avoid throughput decrease. ), @@ -337,10 +337,10 @@ const ONBOARDING_FEATURES = { content: ( <> This is Workbench, our advanced CLI for Redis commands. - + Take advantage of syntax highlighting, intelligent auto-complete, and working with commands in editor mode. - + Workbench visualizes complex{' '} - + {firstIndex ? ( <> Run this command to see information and statistics on your index: - + Run this command to see information and statistics about client connections: - + Share your Redis expertise with your team and the wider community by building custom Redis Insight tutorials. - + Use our{' '} Use Database Analysis to get summary of your database and receive tips to improve memory usage and performance. - + Run a new report to get an overview of the database and receive tips to optimize your database usage. @@ -611,7 +611,7 @@ const ONBOARDING_FEATURES = { content: ( <> Check Slow Log to troubleshoot performance issues. - + See the list of slow logs in chronological order to debug and trace your Redis database. Customize parameters to capture logs. @@ -656,7 +656,7 @@ const ONBOARDING_FEATURES = { <> Use Redis pub/sub to subscribe to channels and post messages to channels. - + Subscribe to receive messages from all channels or enter a message to post to a specified channel. @@ -717,7 +717,7 @@ const ONBOARDING_FEATURES = { content: ( <> You are done! - + Take me back to Browser. ), diff --git a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx index f2c5a99f89..9e03028d32 100644 --- a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx +++ b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx @@ -2,22 +2,21 @@ import React, { useEffect, useState } from 'react' import { useDispatch } from 'react-redux' import cx from 'classnames' +import { CancelSlimIcon } from 'uiBase/icons' +import { + RiEmptyButton, + RiIconButton, + RiPrimaryButton, + RiSecondaryButton, +} from 'uiBase/forms' +import { RiColorText, RiTitle } from 'uiBase/text' +import { RiTourStep } from 'uiBase/display' +import { RiCol, RiRow } from 'uiBase/layout' import { skipOnboarding, setOnboardNextStep, setOnboardPrevStep, } from 'uiSrc/slices/app/features' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' -import { - EmptyButton, - IconButton, - PrimaryButton, - SecondaryButton, -} from 'uiSrc/components/base/forms/buttons' -import { ColorText } from 'uiSrc/components/base/text' -import { TourStep } from 'uiSrc/components/base/display/tour/TourStep' -import { Col, Row } from 'uiSrc/components/base/layout/flex' -import { Title } from 'uiSrc/components/base/text/Title' import { Props as OnboardingWrapperProps } from './OnboardingTourWrapper' import styles from './styles.module.scss' @@ -80,18 +79,18 @@ const OnboardingTour = (props: Props) => { } const Header = ( - + {!isLastStep ? ( - Skip tour - + ) : ( - { data-testid="close-tour-btn" /> )} - + <RiTitle size="XS" data-testid="step-title"> {title} - - + + ) const StepContent = ( - +
{content}
- - + + {currentStep} of {totalSteps} - - + + {currentStep > 1 && ( - Back - + )} - {!isLastStep ? 'Next' : 'Take me back'} - - - - + + + + ) return ( @@ -145,7 +144,7 @@ const OnboardingTour = (props: Props) => { })} role="presentation" > - { data-testid="onboarding-tour" > {children} - +
) } diff --git a/redisinsight/ui/src/components/page-header/PageHeader.tsx b/redisinsight/ui/src/components/page-header/PageHeader.tsx index 1318432bee..d388741513 100644 --- a/redisinsight/ui/src/components/page-header/PageHeader.tsx +++ b/redisinsight/ui/src/components/page-header/PageHeader.tsx @@ -3,6 +3,10 @@ import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' import cx from 'classnames' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiTitle } from 'uiBase/text' +import { RiEmptyButton } from 'uiBase/forms' +import { RedisLogoFullIcon } from 'uiBase/icons' import { Pages, FeatureFlags } from 'uiSrc/constants' import { resetDataRedisCloud } from 'uiSrc/slices/instances/cloud' import { resetDataRedisCluster } from 'uiSrc/slices/instances/cluster' @@ -13,10 +17,6 @@ import { FeatureFlagComponent, OAuthUserProfile } from 'uiSrc/components' import { OAuthSocialSource } from 'uiSrc/slices/interfaces' import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features' import { isAnyFeatureEnabled } from 'uiSrc/utils/features' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Title } from 'uiSrc/components/base/text/Title' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { RedisLogoFullIcon } from 'uiSrc/components/base/icons' import styles from './PageHeader.module.scss' interface Props { @@ -57,37 +57,37 @@ const PageHeader = (props: Props) => {
- + <RiTitle size="XXL" className={styles.title} data-testid="page-title"> <b data-testid="page-header-title">{title}</b> - + {subtitle ? {subtitle} : ''}
{children ? <>{children} : ''} {showInsights ? ( - + {isAnyChatAvailable && ( - + - + )} - + - + - - + - + ) : (
- { style={{ ...linkStyles }} > - + {title} - - + + {description} - + ) } diff --git a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx b/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx index 0667e76d67..53fe5e5e05 100644 --- a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx +++ b/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx @@ -1,21 +1,16 @@ import React from 'react' import cx from 'classnames' +import { GroupModeIcon, PlayFilledIcon, RawModeIcon } from 'uiBase/icons' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiEmptyButton } from 'uiBase/forms' +import { RiText } from 'uiBase/text' import { ResultsMode, RunQueryMode } from 'uiSrc/slices/interfaces' import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants' import { KeyboardShortcut, RiTooltip } from 'uiSrc/components' import { isGroupMode } from 'uiSrc/utils' -import { - GroupModeIcon, - PlayFilledIcon, - RawModeIcon, -} from 'uiSrc/components/base/icons' - import Divider from 'uiSrc/components/divider/Divider' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { Text } from 'uiSrc/components/base/text' import styles from './styles.module.scss' export interface Props { @@ -40,10 +35,10 @@ const QueryActions = (props: Props) => { } = props const KeyBoardTooltipContent = KEYBOARD_SHORTCUTS?.workbench?.runQuery && ( <> - + {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}: - - + + { content="Enables the raw output mode" data-testid="change-mode-tooltip" > - onChangeMode()} icon={RawModeIcon} disabled={isLoading} @@ -72,7 +67,7 @@ const QueryActions = (props: Props) => { data-testid="btn-change-mode" > Raw mode - + )} {onChangeGroupMode && ( @@ -88,7 +83,7 @@ const QueryActions = (props: Props) => { } data-testid="group-results-tooltip" > - onChangeGroupMode()} disabled={isLoading} icon={GroupModeIcon} @@ -98,7 +93,7 @@ const QueryActions = (props: Props) => { data-testid="btn-change-group-mode" > Group results - + )} { } data-testid="run-query-tooltip" > - { onSubmit() }} @@ -127,7 +122,7 @@ const QueryActions = (props: Props) => { data-testid="btn-submit" > Run - +
) diff --git a/redisinsight/ui/src/components/query/query-card/QueryCard.tsx b/redisinsight/ui/src/components/query/query-card/QueryCard.tsx index 9d67427a26..c0d9f7b5b9 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCard.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCard.tsx @@ -3,9 +3,9 @@ import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { useParams } from 'react-router-dom' import { isNull } from 'lodash' +import { RiLoadingContent } from 'uiBase/layout' import { KeyboardKeys as keys } from 'uiSrc/constants/keys' -import { LoadingContent } from 'uiSrc/components/base/layout' import { DEFAULT_TEXT_VIEW_TYPE, ProfileQueryType, @@ -276,7 +276,7 @@ const QueryCard = (props: Props) => { /> ) : (
- diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx index 649ea0ac95..1f893303bf 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx @@ -2,6 +2,9 @@ import React, { useContext, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { v4 as uuidv4 } from 'uuid' +import { RiLoadingContent, RiFlexItem } from 'uiBase/layout' +import { RiColorText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' import { pluginApi } from 'uiSrc/services/PluginAPI' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { @@ -10,7 +13,6 @@ import { formatToText, replaceEmptyValue, } from 'uiSrc/utils' -import { LoadingContent } from 'uiSrc/components/base/layout' import { Theme } from 'uiSrc/constants' import { CommandExecutionResult, @@ -28,9 +30,6 @@ import { import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { appServerInfoSelector } from 'uiSrc/slices/app/info' -import { FlexItem } from 'uiSrc/components/base/layout/flex' -import { ColorText } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import styles from './styles.module.scss' export interface Props { @@ -350,7 +349,7 @@ const QueryCardCliPlugin = (props: Props) => { /> {!!error && (
- + { style={{ display: 'inline', marginRight: 10 }} /> - {error} + {error} - +
)} {!isPluginLoaded && (
- +
)}
diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx index 28d3e89661..a04cf03ca7 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardCliResultWrapper/QueryCardCliResultWrapper.tsx @@ -2,7 +2,9 @@ import React from 'react' import cx from 'classnames' import { isArray } from 'lodash' -import { LoadingContent } from 'uiSrc/components/base/layout' +import { RiLoadingContent } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { RiIcon } from 'uiBase/icons' import { CommandExecutionResult } from 'uiSrc/slices/interfaces' import { ResultsMode } from 'uiSrc/slices/interfaces/workbench' import { @@ -14,8 +16,6 @@ import { } from 'uiSrc/utils' import { CommandExecutionStatus } from 'uiSrc/slices/interfaces/cli' -import { Text } from 'uiSrc/components/base/text' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' import QueryCardCliDefaultResult from '../QueryCardCliDefaultResult' import QueryCardCliGroupResult from '../QueryCardCliGroupResult' import styles from './styles.module.scss' @@ -49,11 +49,11 @@ const QueryCardCliResultWrapper = (props: Props) => { {!loading && (
{isNotStored && ( - + The result is too big to be saved. It will be deleted after the application is closed. - + )} {isGroupResults(resultsMode) && isArray(result[0]?.response) ? ( { )} {loading && (
- +
)}
diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx index 1e3d53e69e..4caeb66203 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardCommonResult/QueryCardCommonResult.tsx @@ -1,7 +1,7 @@ import React from 'react' import cx from 'classnames' -import { LoadingContent } from 'uiSrc/components/base/layout' +import { RiLoadingContent } from 'uiBase/layout' import styles from './styles.module.scss' export interface Props { @@ -22,7 +22,7 @@ const QueryCardCommonResult = (props: Props) => { )} {loading && (
- +
)}
diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index 9931a7c80e..84be43556a 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -4,7 +4,7 @@ import cx from 'classnames' import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' import { findIndex, isNumber } from 'lodash' -import { ColorText } from 'uiSrc/components/base/text' +import { RiColorText } from 'uiBase/text' import { ChevronDownIcon, @@ -12,7 +12,10 @@ import { CopyIcon, DeleteIcon, PlayIcon, -} from 'uiSrc/components/base/icons' + RiIcon, +} from 'uiBase/icons' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiIconButton, RiSelect } from 'uiBase/forms' import { Theme } from 'uiSrc/constants' import { getCommandNameFromQuery, @@ -46,10 +49,6 @@ import { import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands' import { FormatedDate, FullScreen, RiTooltip } from 'uiSrc/components' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' import QueryCardTooltip from '../QueryCardTooltip' import styles from './styles.module.scss' @@ -356,10 +355,10 @@ const QueryCardHeader = (props: Props) => { data-testid="query-card-open" role="button" > - - + +
- { db={db} resultsMode={resultsMode} /> - - + { data-testid="copy-command" />
- - - - + + + {!!createdAt && ( - + - + )} - - + + {!!message && !isOpen && ( - + {truncateText(message, 13)} - + )} - - + @@ -421,7 +420,7 @@ const QueryCardHeader = (props: Props) => { data-testid="command-execution-time-icon" className={styles.iconExecutingTime} /> - { data-testid="command-execution-time-value" > {getTruncatedExecutionTimeString(executionTime)} - + )} - + {!hideFields?.includes(HIDE_FIELDS.profiler) && ( - @@ -459,10 +458,10 @@ const QueryCardHeader = (props: Props) => {
)} - + )} {!hideFields?.includes(HIDE_FIELDS.viewType) && ( - @@ -484,9 +483,9 @@ const QueryCardHeader = (props: Props) => { )} - + )} - @@ -496,24 +495,24 @@ const QueryCardHeader = (props: Props) => { onToggleFullScreen={toggleFullScreen} /> )} - - - + + - + {!isFullScreen && ( - + - { onClick={handleQueryReRun} /> - + )} {!isFullScreen && ( - + {!isSilentModeWithoutError(resultsMode, summary?.fail) && ( - )} - + )} - + {(isRawMode(mode) || isGroupResults(resultsMode)) && ( { content={ <> {isGroupMode(resultsMode) && ( - - + )} {isSilentMode(resultsMode) && ( - - + )} {isRawMode(mode) && ( - -r - + )} } @@ -576,10 +575,10 @@ const QueryCardHeader = (props: Props) => { /> )} - - - - + + + + ) } diff --git a/redisinsight/ui/src/components/query/query-lite-actions/QueryLiteActions.tsx b/redisinsight/ui/src/components/query/query-lite-actions/QueryLiteActions.tsx index 959c1fd914..425e2e07b4 100644 --- a/redisinsight/ui/src/components/query/query-lite-actions/QueryLiteActions.tsx +++ b/redisinsight/ui/src/components/query/query-lite-actions/QueryLiteActions.tsx @@ -1,13 +1,13 @@ import React from 'react' import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants' -import { KeyboardShortcut, RiTooltip } from 'uiSrc/components' +import { KeyboardShortcut } from 'uiSrc/components' -import { PlayFilledIcon } from 'uiSrc/components/base/icons' - -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Button, EmptyButton } from 'uiSrc/components/base/forms/buttons' -import { Text } from 'uiSrc/components/base/text' +import { PlayFilledIcon } from 'uiBase/icons' +import { RiText } from 'uiBase/text' +import { RiSpacer } from 'uiBase/layout' +import { RiTooltip } from 'uiBase/display' +import { RiEmptyButton, Button } from 'uiBase/forms' export interface Props { onSubmit: () => void @@ -19,8 +19,8 @@ const QueryLiteActions = (props: Props) => { const { isLoading, onSubmit, onClear } = props const KeyBoardTooltipContent = KEYBOARD_SHORTCUTS?.workbench?.runQuery && ( <> - {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}: - + {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}: + { } data-testid="clear-query-tooltip" > - { data-testid="btn-clear" > Clear - + { return (
- Tutorials: + Tutorials: {tutorials.map(({ id, title }) => ( { } return ( - - + +
- { onKeyDown={goHome} > RDI instances - +
- - - > - - + + + > + + - - + +
- + {isAnyChatAvailable && ( - + - + )} - + - + - - + - + ) } diff --git a/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx b/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx index 334a991a91..3a3d92ed80 100644 --- a/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx +++ b/redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { RiTooltip } from 'uiSrc/components' -import { FlexItem } from 'uiSrc/components/base/layout/flex' +import { RiFlexItem } from 'uiBase/layout' +import { RiTooltip } from 'uiBase/display' import styles from '../styles.module.scss' export interface Props { @@ -10,7 +10,7 @@ export interface Props { name: string } const BadgeIcon = ({ id, icon, name }: Props) => ( - ( {icon}
- + ) export default BadgeIcon diff --git a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx index 43b5cffc19..3b69ae16ba 100644 --- a/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx +++ b/redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx @@ -1,15 +1,15 @@ import React from 'react' import { isArray, isString } from 'lodash' import cx from 'classnames' +import { RiSpacer, SpacerSize } from 'uiBase/layout/spacer' +import { RiColorText } from 'uiBase/text' +import { RiLink } from 'uiBase/display' import { OAuthSsoHandlerDialog, OAuthConnectFreeDb } from 'uiSrc/components' import { getUtmExternalLink } from 'uiSrc/utils/links' import { replaceVariables } from 'uiSrc/utils/recommendation' import { IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations' import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import { UTM_MEDIUMS } from 'uiSrc/constants/links' -import { Spacer, SpacerSize } from 'uiSrc/components/base/layout/spacer' -import { ColorText } from 'uiSrc/components/base/text' -import { Link } from 'uiSrc/components/base/link/Link' import InternalLink from '../internal-link' import RecommendationBody from '../recommendation-body' @@ -40,7 +40,7 @@ const ContentElement = (props: Props) => { switch (type) { case 'paragraph': return ( - { color="subdued" > {value} - + ) case 'code': return ( - {value} - + ) case 'span': return ( - { })} > {value} - + ) case 'link': return ( - { onClick={() => onLinkClick?.()} > {value.name} - + ) case 'link-sso': return ( {(ssoCloudHandlerClick) => ( - { })} > {value.name} - + )} ) @@ -117,7 +117,7 @@ const ContentElement = (props: Props) => { return case 'code-link': return ( - { campaign: telemetryName, })} > - {value.name} - - + + ) case 'spacer': return ( - { onClick?.() } return ( - {text} - + ) } diff --git a/redisinsight/ui/src/components/recommendation/recommendation-badges-legend/RecommendationBadgesLegend.tsx b/redisinsight/ui/src/components/recommendation/recommendation-badges-legend/RecommendationBadgesLegend.tsx index 5e2240c161..ac05af15f5 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-badges-legend/RecommendationBadgesLegend.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-badges-legend/RecommendationBadgesLegend.tsx @@ -1,24 +1,24 @@ import React from 'react' -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' +import { RiFlexItem, RiRow } from 'uiBase/layout' import { badgesContent } from '../constants' import styles from '../styles.module.scss' const RecommendationBadgesLegend = () => ( - {badgesContent.map(({ id, icon, name }) => ( - +
{icon} {name}
- + ))} - + ) export default RecommendationBadgesLegend diff --git a/redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx b/redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx index 292b4bd61f..48e74e8c10 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Row } from 'uiSrc/components/base/layout/flex' +import { RiRow } from 'uiBase/layout' import BadgeIcon from '../badge-icon' import { badgesContent } from '../constants' @@ -9,14 +9,14 @@ export interface Props { } const RecommendationBadges = ({ badges = [] }: Props) => ( - + {badgesContent.map( ({ id, name, icon }) => badges.includes(id) && ( ), )} - + ) export default RecommendationBadges diff --git a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx index 808e23014c..5be88aa583 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-copy-component/RecommendationCopyComponent.tsx @@ -2,12 +2,11 @@ import React from 'react' import { useParams } from 'react-router-dom' import cx from 'classnames' -import { bufferToString } from 'uiSrc/utils' +import { RiText, RiColorText } from 'uiBase/text' +import { RiIconButton } from 'uiBase/forms' +import { CopyIcon } from 'uiBase/icons' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' - -import { Text, ColorText } from 'uiSrc/components/base/text' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CopyIcon } from 'uiSrc/components/base/icons' +import { bufferToString } from 'uiSrc/utils' import styles from './styles.module.scss' export interface IProps { @@ -43,11 +42,11 @@ const RecommendationCopyComponent = ({ return (
- + Example of a key that may be relevant: - +
- {formattedName} - - + ('') return ( - - + Is this useful? - +
{Object.values(Vote).map((option) => ( ))}
- + ) } diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx index cb3d5424a6..a975a35c7d 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx @@ -1,6 +1,11 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' +import { RiCol, RiFlexItem, RiRow } from 'uiBase/layout' +import { RiText } from 'uiBase/text' +import { CancelSlimIcon, RiIcon } from 'uiBase/icons' +import { RiIconButton, RiPrimaryButton } from 'uiBase/forms' +import { RiLink, RiPopover, RiTooltip } from 'uiBase/display' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { Vote } from 'uiSrc/constants/recommendations' import { putRecommendationVote } from 'uiSrc/slices/analytics/dbAnalysis' @@ -12,20 +17,12 @@ import { import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { Nullable } from 'uiSrc/utils' -import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Text } from 'uiSrc/components/base/text' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { Link } from 'uiSrc/components/base/link/Link' -import { RiPopover, RiTooltip } from 'uiSrc/components/base' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' - import { getVotedText, iconType, voteTooltip } from './utils' import styles from './styles.module.scss' import styled from 'styled-components' -import { Theme } from 'uiSrc/components/base/theme/types' +import { Theme } from 'uiBase/theme/types' -const GitHubLink = styled(Link)` +const GitHubLink = styled(RiLink)` padding: 4px 8px 4px 4px; margin-top: 10px; @@ -130,7 +127,7 @@ const VoteOption = (props: Props) => { position="bottom" data-testid={`${voteOption}-vote-tooltip`} > - { className={styles.popoverWrapper} data-testid={`${name}-${voteOption}-popover`} > - - - - + + + + - - + +
- + Thank you for the feedback. - - + + {getVotedText(voteOption)} - +
- - - + + { className={styles.closeBtn} onClick={() => setPopover('')} /> - - - - - + + + + - - To Github - - - + + + To Github + + + +
) diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/utils.ts b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/utils.ts index f2d4db20b5..b21ff3bfb4 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/utils.ts +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/utils.ts @@ -1,6 +1,6 @@ +import { DislikeIcon, LikeIcon } from 'uiBase/icons' import { Vote } from 'uiSrc/constants/recommendations' import { Nullable } from 'uiSrc/utils' -import { DislikeIcon, LikeIcon } from 'uiSrc/components/base/icons' export const getVotedText = (vote: Nullable) => vote === Vote.Like diff --git a/redisinsight/ui/src/components/scan-more/ScanMore.tsx b/redisinsight/ui/src/components/scan-more/ScanMore.tsx index 96c168f55e..455289b0c7 100644 --- a/redisinsight/ui/src/components/scan-more/ScanMore.tsx +++ b/redisinsight/ui/src/components/scan-more/ScanMore.tsx @@ -1,11 +1,10 @@ import React from 'react' import { isNull } from 'lodash' +import { Button } from 'uiBase/forms' +import { RiIcon } from 'uiBase/icons' +import { RiTooltip } from 'uiBase/display' import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api' -import { RiTooltip } from 'uiSrc/components' -import { Button } from 'uiSrc/components/base/forms/buttons' -import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import styles from './styles.module.scss' export interface Props { withAlert?: boolean @@ -49,11 +48,7 @@ const ScanMore = ({ data-testid="scan-more" > {withAlert && ( - + )} diff --git a/redisinsight/ui/src/components/settings-item/SettingItem.tsx b/redisinsight/ui/src/components/settings-item/SettingItem.tsx index c72aa1d42b..cef7f08b5d 100644 --- a/redisinsight/ui/src/components/settings-item/SettingItem.tsx +++ b/redisinsight/ui/src/components/settings-item/SettingItem.tsx @@ -1,14 +1,12 @@ import React, { useEffect, useState } from 'react' import cx from 'classnames' +import { RiFlexItem, RiRow } from 'uiBase/layout' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiTitle, RiText } from 'uiBase/text' +import { RiNumericInput } from 'uiBase/inputs' +import { EditIcon } from 'uiBase/icons' import InlineItemEditor from 'uiSrc/components/inline-item-editor/InlineItemEditor' - -import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { NumericInput } from 'uiSrc/components/base/inputs' -import { EditIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -58,22 +56,22 @@ const SettingItem = (props: Props) => { return ( <> - + <RiTitle className={styles.title} size="XS"> {title} - - - + + + {summary} - - - - - + + + + + {label} - - + + - !isEditing && setHovering(true)} onMouseLeave={() => !isEditing && setHovering(false)} onClick={() => setEditing(true)} @@ -92,7 +90,7 @@ const SettingItem = (props: Props) => { [styles.inputHover]: isHovering, })} > - isEditing && @@ -112,13 +110,13 @@ const SettingItem = (props: Props) => {
) : ( - + {value} - + )} - - - + + + ) } diff --git a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx index f7ab8610e9..2eb87f1c60 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx +++ b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.spec.tsx @@ -2,7 +2,7 @@ import React from 'react' import { cloneDeep } from 'lodash' import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils' import ShortcutsFlyout from './ShortcutsFlyout' -import { SHORTCUTS, ShortcutGroup } from './schema' +import { ShortcutGroup, SHORTCUTS } from './schema' let store: typeof mockedStore beforeEach(() => { @@ -11,10 +11,14 @@ beforeEach(() => { store.clearActions() }) -jest.mock('uiSrc/components/base/layout/drawer', () => ({ - ...jest.requireActual('uiSrc/components/base/layout/drawer'), - DrawerHeader: jest.fn().mockReturnValue(null), -})) +jest.mock('uiBase/layout', () => { + const actual = jest.requireActual('uiBase/layout') + + return { + ...actual, + RiDrawerHeader: jest.fn().mockReturnValue(null), + } +}) const appInfoSlicesPath = 'uiSrc/slices/app/info' diff --git a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx index 0918576b97..038ede3f39 100644 --- a/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx +++ b/redisinsight/ui/src/components/shortcuts-flyout/ShortcutsFlyout.tsx @@ -1,16 +1,17 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' +import { RiSpacer } from 'uiBase/layout/spacer' +import { + RiDrawer, + RiDrawerBody, + RiDrawerHeader, + RiTable, + ColumnDefinition, +} from 'uiBase/layout' +import { RiTitle } from 'uiBase/text' import { appInfoSelector, setShortcutsFlyoutState } from 'uiSrc/slices/app/info' import { KeyboardShortcut } from 'uiSrc/components' import { BuildType } from 'uiSrc/constants/env' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { - Drawer, - DrawerHeader, - DrawerBody, -} from 'uiSrc/components/base/layout/drawer' -import { Title } from 'uiSrc/components/base/text/Title' -import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table' import { SHORTCUTS, ShortcutGroup, separator } from './schema' @@ -41,30 +42,30 @@ const ShortcutsFlyout = () => { const ShortcutsTable = ({ name, items }: ShortcutGroup) => (
- + <RiTitle size="XS" data-test-subj={`shortcuts-section-${name}`}> {name} - - - - + + + + ) return ( - dispatch(setShortcutsFlyoutState(isOpen))} data-test-subj="shortcuts-flyout" title="Shortcuts" > - - + + {SHORTCUTS.filter( ({ excludeFor }) => !excludeFor || !excludeFor.includes(server?.buildType as BuildType), ).map(ShortcutsTable)} - - + + ) } diff --git a/redisinsight/ui/src/components/side-panels/components/header/Header.tsx b/redisinsight/ui/src/components/side-panels/components/header/Header.tsx index 84ba942082..577ecd7981 100644 --- a/redisinsight/ui/src/components/side-panels/components/header/Header.tsx +++ b/redisinsight/ui/src/components/side-panels/components/header/Header.tsx @@ -1,9 +1,8 @@ import React from 'react' +import { RiIconButton } from 'uiBase/forms' +import { CancelSlimIcon } from 'uiBase/icons' import { FullScreen } from 'uiSrc/components' - -import { IconButton } from 'uiSrc/components/base/forms/buttons' -import { CancelSlimIcon } from 'uiSrc/components/base/icons' import styles from './styles.module.scss' export interface Props { @@ -30,7 +29,7 @@ const Header = (props: Props) => { onToggleFullScreen={onToggleFullScreen} btnTestId={`fullScreen-${panelName}-btn`} /> - {
- { { return (
{chats.length > 1 && ( - { content={connectedInstanceName} anchorClassName={styles.dbName} > - + {connectedInstanceName} - + ) : ( @@ -92,7 +92,7 @@ const ExpertChatHeader = (props: Props) => { panelPaddingSize="m" closePopover={() => setIsTutorialsPopoverOpen(false)} button={ - setIsTutorialsPopoverOpen(true)} @@ -102,24 +102,24 @@ const ExpertChatHeader = (props: Props) => { } > <> - + Open relevant tutorials to learn more about search and query. - - - + + Open tutorials - + { return (
- Hi! - + Hi! + I am here to help you get started with data querying. I noticed that you have no indexes created. - - - + + + Would you like to load the sample data and indexes (from this{' '} - tutorial - + ) to see what Redis Copilot can help you do? - - + + - +
) } diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx index 6550ec8602..e908b914c8 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx @@ -1,15 +1,14 @@ import React, { Ref, useRef, useState } from 'react' import cx from 'classnames' -import { isModifiedEvent } from 'uiSrc/services' -import { RiPopover, RiTooltip } from 'uiSrc/components/base' -import { Spacer } from 'uiSrc/components/base/layout/spacer' -import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' -import { SendIcon } from 'uiSrc/components/base/icons' -import { Title } from 'uiSrc/components/base/text/Title' -import { Text } from 'uiSrc/components/base/text' -import { TextArea } from 'uiSrc/components/base/inputs' +import { RiPopover, RiTooltip } from 'uiBase/index' +import { RiSpacer } from 'uiBase/layout/spacer' +import { RiPrimaryButton } from 'uiBase/forms' +import { SendIcon } from 'uiBase/icons' +import { RiTitle, RiText } from 'uiBase/text' +import { RiTextArea } from 'uiBase/inputs' +import { isModifiedEvent } from 'uiSrc/services' import * as keys from 'uiSrc/constants/keys' import styles from './styles.module.scss' @@ -99,12 +98,12 @@ const ChatForm = (props: Props) => {
{validation.title && ( <> - {validation.title} - + {validation.title} + )} {validation.content && ( - {validation.content} + {validation.content} )}
{validation.icon} @@ -121,7 +120,7 @@ const ChatForm = (props: Props) => { onKeyDown={handleKeyDown} role="presentation" > -