Ri-7465 auto discovery layout

.storybook/preview-head.html

@@ -19,7 +19,7 @@
       display: flex;
       flex-direction: column;
     }
-  
+
     .sbdocs-wrapper div:has(>div>.toc-wrapper){
       width:14rem;
     }

redisinsight/ui/src/components/auto-discover/EmptyState.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+
+import type { EmptyStateProps } from './EmptyState.types'
+
+export const EmptyState = ({ message }: EmptyStateProps) => (
+  <Col centered full>
+    <FlexItem padding={13}>
+      <Text size="L">{message}</Text>
+    </FlexItem>
+  </Col>
+)
+

redisinsight/ui/src/components/auto-discover/EmptyState.types.ts

@@ -0,0 +1,4 @@
+export interface EmptyStateProps {
+  message: string
+}
+

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

@@ -1,110 +1,5 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
-import { Text, Title } from 'uiSrc/components/base/text'
-import { Theme } from 'uiSrc/components/base/theme/types'
-import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
-import { FormField } from 'uiSrc/components/base/forms/FormField'
-import { IconButton } from 'uiSrc/components/base/forms/buttons'
-import { CopyIcon } from 'uiSrc/components/base/icons'
+export * from './styles'
 
-export const PageTitle = styled(Title).attrs({
-  size: 'L',
-})`
-  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
-`
-export const PageSubTitle = styled(Text).attrs({
-  size: 'S',
-  component: 'span',
-})`
-  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
-`
-export const SearchContainer = styled(FlexItem)`
-  max-width: 100%;
-  padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
-`
-export const SearchForm = styled(FormField)`
-  width: 266px;
-`
-export const Footer = styled(FlexItem).attrs<{
-  grow?: boolean | number
-  padding?: React.ComponentProps<typeof FlexItem>['padding']
-}>(({ grow, padding }) => ({
-  grow: grow ?? false,
-  padding: padding ?? 6,
-}))`
-  border-top: 1px solid
-    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral400};
-`
-
-export const DatabaseContainer = styled(Col)`
-  position: relative;
-  padding: ${({ theme }: { theme: Theme }) =>
-    `${theme.core.space.space250} ${theme.core.space.space200} 0 ${theme.core.space.space200}`};
-  @media only screen and (min-width: 768px) {
-    padding: ${({ theme }: { theme: Theme }) =>
-      `${theme.core.space.space400} ${theme.core.space.space200} 0 ${theme.core.space.space400}`};
-    max-width: calc(100vw - 95px);
-  }
-`
-
-export const DatabaseWrapper = styled.div`
-  height: auto;
-  scrollbar-width: thin;
-  //overflow: auto;
-  padding: 1px 1px 75px;
-  position: relative;
-  background-color: ${({ theme }: { theme: Theme }) =>
-    theme.semantic.color.background.neutral100};
-  flex-grow: 1;
-  overflow: hidden;
-`
-export const SelectAllCheckbox = styled(Checkbox)`
-  & svg {
-    margin: 0 !important;
-  }
-`
-export const CellText = styled(Text).attrs({
-  size: 'M',
-  component: 'span',
-})`
-  max-width: 100%;
-  display: inline-block;
-  width: auto;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`
-
-export const CopyPublicEndpointText = styled(CellText)`
-  vertical-align: top;
-`
-
-export const StatusColumnText = styled(CellText)`
-  text-transform: capitalize;
-`
-export const CopyBtn = styled(IconButton).attrs({
-  icon: CopyIcon,
-  size: 'L',
-})`
-  margin-left: 15px;
-  opacity: 0;
-  height: 0;
-  transition: opacity 0.25s ease-in-out;
-`
-
-export const CopyTextContainer = styled.div`
-  height: 24px;
-  line-height: 24px;
-  width: auto;
-  max-width: 100%;
-  padding-right: 34px;
-  position: relative;
-  * {
-  }
-
-  &:hover ${CopyBtn} {
-    opacity: 1;
-    height: auto;
-  }
-`
+export { Header } from './Header'
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState.types'

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

@@ -0,0 +1,107 @@
+import styled from 'styled-components'
+import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
+import { Text, Title } from 'uiSrc/components/base/text'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { CopyIcon } from 'uiSrc/components/base/icons'
+
+export const PageTitle = styled(Title).attrs({
+  size: 'L',
+})`
+  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
+`
+export const PageSubTitle = styled(Text).attrs({
+  size: 'S',
+  component: 'span',
+})`
+  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
+`
+export const SearchContainer = styled(FlexItem)`
+  max-width: 100%;
+  padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
+`
+export const SearchForm = styled(FormField)`
+  width: 266px;
+`
+export const Footer = styled(FlexItem).attrs<{
+  grow?: boolean | number
+  padding?: React.ComponentProps<typeof FlexItem>['padding']
+}>(({ grow, padding }) => ({
+  grow: grow ?? false,
+  padding: padding ?? 6,
+}))`
+  border-top: 1px solid
+    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral400};
+`
+
+export const DatabaseContainer = styled(Col)`
+  position: relative;
+  padding: ${({ theme }: { theme: Theme }) =>
+    `${theme.core.space.space250} ${theme.core.space.space200} 0 ${theme.core.space.space200}`};
+  @media only screen and (min-width: 768px) {
+    padding: ${({ theme }: { theme: Theme }) =>
+      `${theme.core.space.space400} ${theme.core.space.space200} 0 ${theme.core.space.space400}`};
+    max-width: calc(100vw - 95px);
+  }
+`
+
+export const DatabaseWrapper = styled.div`
+  height: auto;
+  scrollbar-width: thin;
+  padding: ${({ theme }: { theme: Theme }) => theme.core.space.space010};
+  position: relative;
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.neutral100};
+  overflow: hidden;
+`
+export const SelectAllCheckbox = styled(Checkbox)`
+  & svg {
+    margin: 0 !important;
+  }
+`
+export const CellText = styled(Text).attrs({
+  size: 'M',
+  component: 'span',
+})`
+  max-width: 100%;
+  display: inline-block;
+  width: auto;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
+
+export const CopyPublicEndpointText = styled(CellText)`
+  vertical-align: top;
+`
+
+export const StatusColumnText = styled(CellText)`
+  text-transform: capitalize;
+`
+export const CopyBtn = styled(IconButton).attrs({
+  icon: CopyIcon,
+  size: 'L',
+})`
+  margin-left: 15px;
+  opacity: 0;
+  height: 0;
+  transition: opacity 0.25s ease-in-out;
+`
+
+export const CopyTextContainer = styled.div`
+  height: 24px;
+  line-height: 24px;
+  width: auto;
+  max-width: 100%;
+  padding-right: 34px;
+  position: relative;
+  * {
+  }
+
+  &:hover ${CopyBtn} {
+    opacity: 1;
+    height: auto;
+  }
+`

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

@@ -1,13 +1,11 @@
 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
+import { useTheme } from '@redis-ui/styles'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export type RedisLoaderProps = ComponentProps<typeof RedisLoader>
 
-const convertSizeToPx = (tShirtSize: string, space: Space) => {
+const convertSizeToPx = (tShirtSize: string, space: Theme['core']['space']) => {
   switch (tShirtSize.toLowerCase()) {
     case 's':
       return space.space050

redisinsight/ui/src/components/base/layout/list/list.styles.ts

@@ -12,6 +12,7 @@ import {
 
 import { AllIconsType } from 'uiSrc/components/base/icons/RiIcon'
 import { IconProps } from 'uiSrc/components/base/icons'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export const ListClassNames = {
   listItem: 'RI-list-group-item',
@@ -25,9 +26,6 @@ export const ListClassNames = {
 
 export const MAX_FORM_WIDTH = 400
 
-export const GAP_SIZES = ['none', 's', 'm'] as const
-export type ListGroupGapSize = (typeof GAP_SIZES)[number]
-
 export type ListGroupProps = HTMLAttributes<HTMLUListElement> & {
   className?: string
   /**
@@ -40,7 +38,7 @@ export type ListGroupProps = HTMLAttributes<HTMLUListElement> & {
    * Spacing between list items
    * @default s
    */
-  gap?: ListGroupGapSize
+  gap?: keyof typeof listStyles.gap
 
   /**
    * Sets the max-width of the page.
@@ -55,14 +53,12 @@ export type ListGroupProps = HTMLAttributes<HTMLUListElement> & {
 
 export const listStyles = {
   gap: {
-    none: css`
-      gap: 0;
-    `,
+    none: 'gap: 0;',
     s: css`
-      gap: var(--gap-s);
+      gap: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
     `,
     m: css`
-      gap: var(--gap-m);
+      gap: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
     `,
   },
   flush: css`
@@ -78,7 +74,7 @@ export const listStyles = {
 
 export const StyledGroup = styled.ul<
   Omit<ListGroupProps, 'gap' | 'flush' | 'maxWidth'> & {
-    $gap?: ListGroupGapSize
+    $gap?: keyof typeof listStyles.gap
     $flush?: boolean
   }
 >`

redisinsight/ui/src/components/base/tooltip/HoverContent.tsx

@@ -8,9 +8,11 @@ interface RiTooltipContentProps {
   content: React.ReactNode
 }
 
-export const HoverContent = ({ title, content }: RiTooltipContentProps) => (
-  <Col gap="s">
-    {title && <Title size="XS">{title}</Title>}
-    {content}
-  </Col>
-)
+export const HoverContent = ({ title, content }: RiTooltipContentProps) => {
+  return (
+    <Col gap="s">
+      {typeof title === 'string' ? <Title size="XS">{title}</Title> : title}
+      {content}
+    </Col>
+  )
+}