RI-7463 sentinel databases rerender

.storybook/helpers/styles.ts

@@ -1,9 +1,10 @@
 import styled from 'styled-components'
 import { Theme } from 'uiSrc/components/base/theme/types'
+import PageBody from 'uiSrc/components/base/layout/page/PageBody'
 
-export const StyledContainer = styled.div`
-  padding: 50px;
+export const StyledContainer = styled(PageBody)`
   height: max-content;
+  max-height: 100%;
   overflow: hidden;
   overflow-y: auto;
   background-color: ${({ theme }: { theme: Theme }) =>

.storybook/preview-head.html

@@ -13,6 +13,13 @@
       min-height: 100vh;
     }
 
+    #storybook-root {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
     .sbdocs-wrapper div:has(>div>.toc-wrapper){
       width:14rem;
     }

.storybook/preview.tsx

@@ -9,6 +9,7 @@ import { CommonStyles, themeDark, themeLight, themeOld } from '@redis-ui/styles'
 import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
+import 'uiSrc/pages/home/styles.scss'
 import { RootStoryLayout } from './RootStoryLayout'
 import { StoryContextProvider } from './Story.context'
 import { useStoryContext } from 'storybook/internal/preview-api'
@@ -18,12 +19,13 @@ import { type Theme } from 'uiSrc/components/base/theme/types'
 import { Provider } from 'react-redux'
 import { store } from 'uiSrc/slices/store'
 import Router from 'uiSrc/Router'
+import { StyledContainer } from './helpers/styles'
 
 const parameters: Parameters = {
   parameters: {
     layout: 'centered',
   },
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: '^on.*' },
   controls: {
     disableSaveFromUI: true,
     matchers: {
@@ -51,7 +53,7 @@ const parameters: Parameters = {
 const GlobalStoryStyles = createGlobalStyle`
   .sb-show-main, .docs-story {
     background: ${({ theme }: { theme: Theme }) => theme.globals.body.bgColor};
-    color: ${({ theme }: { theme: Theme }) => theme.globals.body.textColor};
+    color: ${({ theme }: { theme: Theme }) => theme.components.typography.colors.primary};
   }
 `
 
@@ -65,7 +67,9 @@ const preview: Preview = {
             <TooltipProvider>
               <RootStoryLayout storyContext={useStoryContext()}>
                 <CommonStyles />
-                <Story />
+                <StyledContainer>
+                  <Story />
+                </StyledContainer>
               </RootStoryLayout>
             </TooltipProvider>
           </Provider>

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

@@ -0,0 +1,61 @@
+import React, { ReactNode } from 'react'
+
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
+import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
+import {
+  PageSubTitle,
+  PageTitle,
+  SearchContainer,
+  SearchForm,
+} from 'uiSrc/components/auto-discover/index'
+import { SearchInput } from 'uiSrc/components/base/inputs'
+
+type HeaderProps = {
+  title: ReactNode
+  subTitle?: ReactNode
+  onBack: () => void
+  onQueryChange: (query: string) => void
+  backButtonText?: string
+}
+export const Header = ({
+  title,
+  subTitle,
+  onBack,
+  onQueryChange,
+  backButtonText = 'Add databases',
+}: HeaderProps) => {
+  return (
+    <Row align="center" justify="between" grow={false}>
+      <Col align="start" justify="start" gap="m">
+        <EmptyButton
+          icon={ChevronLeftIcon}
+          onClick={onBack}
+          data-testid="btn-back-adding"
+        >
+          {backButtonText}
+        </EmptyButton>
+        <PageTitle color="primary" data-testid="title">
+          {title}
+        </PageTitle>
+        {subTitle && (
+          <FlexItem grow>
+            <PageSubTitle>{subTitle}</PageSubTitle>
+          </FlexItem>
+        )}
+      </Col>
+      <Row justify="end" gap="s" grow={false}>
+        <SearchContainer>
+          <SearchForm>
+            <SearchInput
+              placeholder="Search..."
+              onChange={onQueryChange}
+              aria-label="Search"
+              data-testid="search"
+            />
+          </SearchForm>
+        </SearchContainer>
+      </Row>
+    </Row>
+  )
+}

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

@@ -1,20 +1,20 @@
+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 { FlexItem } from 'uiSrc/components/base/layout/flex'
+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: 'M',
+  size: 'L',
 })`
   padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
 `
 export const PageSubTitle = styled(Text).attrs({
   size: 'S',
-  color: 'subdued',
   component: 'span',
 })`
   padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space100};
@@ -26,12 +26,28 @@ export const SearchContainer = styled(FlexItem)`
 export const SearchForm = styled(FormField)`
   width: 266px;
 `
-export const Footer = styled(FlexItem).attrs({
-  grow: false,
-})`
+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;
@@ -42,34 +58,36 @@ export const DatabaseWrapper = styled.div`
     theme.semantic.color.background.neutral100};
   flex-grow: 1;
   overflow: hidden;
-
-  .column_status {
-    text-transform: capitalize;
-  }
 `
 export const SelectAllCheckbox = styled(Checkbox)`
   & svg {
     margin: 0 !important;
   }
 `
 export const CellText = styled(Text).attrs({
-  size: 'S',
+  size: 'M',
   component: 'span',
-})``
-
-export const CopyPublicEndpointText = styled(CellText)`
+})`
   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: 25px;
+  margin-left: 15px;
   opacity: 0;
   height: 0;
   transition: opacity 0.25s ease-in-out;
@@ -83,8 +101,6 @@ export const CopyTextContainer = styled.div`
   padding-right: 34px;
   position: relative;
   * {
-    color: ${({ theme }: { theme: Theme }) =>
-      theme.semantic.color.text.primary500};
   }
 
   &:hover ${CopyBtn} {

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

@@ -2,6 +2,8 @@ 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 { Spacer } from 'uiSrc/components/base/layout'
+import styled from 'styled-components'
 
 type ButtonSize = 'small' | 'medium' | 'large'
 type SizeKey = 'small' | 's' | 'medium' | 'm' | 'large' | 'l'
@@ -59,7 +61,11 @@ export const IconSizes = {
   medium: '20px',
   large: '24px',
 }
-
+const Wrapper = styled.div`
+  svg {
+    display: block;
+  }
+`
 export const ButtonIcon = ({
   buttonSide,
   icon,
@@ -82,11 +88,12 @@ export const ButtonIcon = ({
   if (size) {
     iconSize = IconSizes[size]
   }
+  const spacer = <Spacer size="s" direction="horizontal" />
   return (
-    <Button.Icon
-      title={`button-icon ${iconSide}`}
-      icon={renderIcon}
-      customSize={iconSize}
-    />
+    <Wrapper>
+      {buttonSide === 'right' && spacer}
+      <Button.Icon icon={renderIcon} customSize={iconSize} />
+      {buttonSide === 'left' && spacer}
+    </Wrapper>
   )
 }

redisinsight/ui/src/components/base/icons/Icon.tsx

@@ -3,11 +3,12 @@ import { useTheme } from '@redis-ui/styles'
 import cx from 'classnames'
 import { IconSizeType } from '@redis-ui/icons'
 import { MonochromeIconProps } from 'uiSrc/components/base/icons'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 type BaseIconProps = Omit<MonochromeIconProps, 'color' | 'size'> & {
   icon: React.ComponentType<any>
   color?:
-    | keyof ReturnType<typeof useTheme>['semantic']['color']['icon']
+    | keyof Theme['semantic']['color']['icon']
     | 'currentColor'
     | (string & {})
   size?: IconSizeType | null
@@ -30,7 +31,7 @@ const sizesMap = {
  * @returns A boolean indicating if the color is valid and a type predicate
  */
 function isValidIconColor(
-  theme: ReturnType<typeof useTheme>,
+  theme: Theme,
   color: string | number | symbol,
 ): color is keyof typeof theme.semantic.color.icon {
   return color in theme.semantic.color.icon