RI-7707 update the database analysis page

.storybook/preview.tsx

@@ -20,6 +20,7 @@ import { Provider } from 'react-redux'
 import { store } from 'uiSrc/slices/store'
 import Router from 'uiSrc/Router'
 import { StyledContainer } from './helpers/styles'
+import { GlobalStyles } from 'uiSrc/styles/globalStyles'
 
 const parameters: Parameters = {
   parameters: {
@@ -67,6 +68,7 @@ const preview: Preview = {
             <TooltipProvider>
               <RootStoryLayout storyContext={useStoryContext()}>
                 <CommonStyles />
+                <GlobalStyles />
                 <StyledContainer>
                   <Story />
                 </StyledContainer>

redisinsight/ui/src/components/auto-discover/index.ts

@@ -64,10 +64,14 @@ export const SelectAllCheckbox = styled(Checkbox)`
     margin: 0 !important;
   }
 `
-export const CellText = styled(Text).attrs({
-  size: 'M',
-  component: 'span',
-})`
+export const CellText = styled(Text).attrs<
+  Partial<React.ComponentProps<typeof Text>>
+>(({ size = 'M', component = 'span', color = 'default', ...props }) => ({
+  size,
+  component,
+  color,
+  ...props,
+}))`
   max-width: 100%;
   display: inline-block;
   width: auto;

redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx

@@ -22,22 +22,26 @@ export const EmptyButton = ({
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <Row justify={justify} gap="m" align="center">
-      <ButtonIcon
-        buttonSide="left"
-        icon={icon}
-        iconSide={iconSide}
-        loading={loading}
-        size={size}
-      />
-      {children}
-      <ButtonIcon
-        buttonSide="right"
-        icon={icon}
-        iconSide={iconSide}
-        loading={loading}
-        size={size}
-      />
-    </Row>
+    {icon ? (
+      <Row justify={justify} gap="m" align="center">
+        <ButtonIcon
+          buttonSide="left"
+          icon={icon}
+          iconSide={iconSide}
+          loading={loading}
+          size={size}
+        />
+        {children}
+        <ButtonIcon
+          buttonSide="right"
+          icon={icon}
+          iconSide={iconSide}
+          loading={loading}
+          size={size}
+        />
+      </Row>
+    ) : (
+      children
+    )}
   </TextButton>
 )

redisinsight/ui/src/components/base/layout/loading-content/loading-content.styles.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
 import styled, { keyframes } from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 
@@ -25,29 +26,29 @@ export const StyledLoadingContent = styled.span<
 `
 
 export const SingleLine = styled.span<
-  React.HtmlHTMLAttributes<HTMLSpanElement>
+  React.HtmlHTMLAttributes<HTMLSpanElement> & { theme: Theme }
 >`
   display: block;
   width: 100%;
-  height: var(--base);
-  margin-bottom: var(--size-s);
-  border-radius: var(--size-xs);
+  height: ${({ theme }) => theme.core.space.space200};
+  margin-bottom: ${({ theme }) => theme.core.space.space100};
+  border-radius: ${({ theme }) => theme.core.space.space050};
   overflow: hidden;
 
   &:last-child:not(:only-child) {
     width: 75%;
   }
 `
 
-export const SingleLineBackground = styled.span`
+export const SingleLineBackground = styled.span<{ theme: Theme }>`
   display: block;
   width: 220%;
   height: 100%;
   background: linear-gradient(
     137deg,
-    var(--loadingContentColor) 45%,
-    var(--loadingContentLightestShade) 50%,
-    var(--loadingContentColor) 55%
+    ${({ theme }) => theme.semantic.color.background.neutral200} 45%,
+    ${({ theme }) => theme.semantic.color.background.neutral300} 50%,
+    ${({ theme }) => theme.semantic.color.background.neutral200} 55%
   );
   animation: ${loadingAnimation} 1.5s ease-in-out infinite;
 `

redisinsight/ui/src/components/base/utils/pluginsThemeContext.tsx

@@ -4,6 +4,7 @@ import { CommonStyles, themeLight, themeDark } from '@redis-ui/styles'
 import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
+import { GlobalStyles } from 'uiSrc/styles/globalStyles'
 
 interface Props {
   children: React.ReactNode
@@ -31,6 +32,7 @@ export const ThemeProvider = ({ children }: Props) => {
     <PluginsThemeContext.Provider value={{ theme }}>
       <StyledThemeProvider theme={theme}>
         <CommonStyles />
+        <GlobalStyles />
         {children}
       </StyledThemeProvider>
     </PluginsThemeContext.Provider>