RI-7463 sentinel databases rerender (#5126)

Updated design for Sentinel, pages both discovery page, and results page 
refactor common components to be used amongst the rest of the discovery pages 
Added stories, and test in the stories for the corresponding pages

Author: pd-redis

.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