small fixes to SentinelDatabases.tsx

Author: pd-redis

.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/index.ts

@@ -1,3 +1,4 @@
+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'
@@ -6,10 +7,9 @@ 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'
-import { PaddingType } from 'uiSrc/components/base/layout/flex/flex.styles'
 
 export const PageTitle = styled(Title).attrs({
-  size: 'M',
+  size: 'L',
 })`
   padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
 `
@@ -28,7 +28,7 @@ export const SearchForm = styled(FormField)`
 `
 export const Footer = styled(FlexItem).attrs<{
   grow?: boolean | number
-  padding?: PaddingType
+  padding?: React.ComponentProps<typeof FlexItem>['padding']
 }>(({ grow, padding }) => ({
   grow: grow ?? false,
   padding: padding ?? 6,
@@ -56,30 +56,31 @@ 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',

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

@@ -3,6 +3,7 @@ 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'
@@ -62,7 +63,11 @@ export const IconSizes = {
   medium: '20px',
   large: '24px',
 }
-
+const Wrapper = styled.div`
+  svg {
+    display: block;
+  }
+`
 export const ButtonIcon = ({
   buttonSide,
   icon,
@@ -87,10 +92,10 @@ export const ButtonIcon = ({
   }
   const spacer = <Spacer size="s" direction="horizontal" />
   return (
-    <>
+    <Wrapper>
       {buttonSide === 'right' && spacer}
       <Button.Icon icon={renderIcon} customSize={iconSize} />
       {buttonSide === 'left' && spacer}
-    </>
+    </Wrapper>
   )
 }

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.stories.tsx

@@ -13,8 +13,6 @@ import {
   getRowId,
 } from 'uiSrc/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig'
 
-import { StyledContainer } from '../../../../../../../../.storybook/helpers/styles'
-
 const meta: Meta<typeof SentinelDatabases> = {
   component: SentinelDatabases,
 }
@@ -72,19 +70,17 @@ const DefaultRender = () => {
     .map((key) => mastersMock.find((master) => getRowId(master) === key))
     .filter((item): item is ModifiedSentinelMaster => Boolean(item))
   return (
-    <StyledContainer paddingSize="m">
-      <SentinelDatabases
-        selection={selection || []}
-        columns={columnsMock}
-        masters={mastersMock}
-        onClose={action('onClose')}
-        onBack={action('onBack')}
-        onSubmit={action('onSubmit')}
-        onSelectionChange={(sel) => {
-          setSelection(sel)
-        }}
-      />
-    </StyledContainer>
+    <SentinelDatabases
+      selection={selection || []}
+      columns={columnsMock}
+      masters={mastersMock}
+      onClose={action('onClose')}
+      onBack={action('onBack')}
+      onSubmit={action('onSubmit')}
+      onSelectionChange={(sel) => {
+        setSelection(sel)
+      }}
+    />
   )
 }
 

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx

@@ -12,7 +12,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { InfoIcon } from 'uiSrc/components/base/icons'
+import { RiIcon } from 'uiSrc/components/base/icons'
 import { SearchInput } from 'uiSrc/components/base/inputs'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover, RiTooltip } from 'uiSrc/components/base'
@@ -142,7 +142,6 @@ const SentinelDatabases = ({
       button={
         <SecondaryButton
           onClick={showPopover}
-          color="secondary"
           className="btn-cancel"
           data-testid="btn-cancel"
         >
@@ -168,8 +167,8 @@ const SentinelDatabases = ({
   )
 
   const SubmitButton = ({ onClick }: { onClick: () => void }) => {
-    let title = null
-    let content = null
+    let title: string | null = null
+    let content: string | null = null
     const emptyAliases = selection.filter(({ alias }) => !alias)
 
     if (selection.length < 1) {
@@ -181,24 +180,23 @@ const SentinelDatabases = ({
       title = validationErrors.REQUIRED_TITLE(emptyAliases.length)
       content = 'Database Alias'
     }
+    const TooltipIcon = () => (
+      <RiTooltip position="top" title={title} content={<span>{content}</span>}>
+        <RiIcon type="InfoIcon" />
+      </RiTooltip>
+    )
 
     return (
-      <RiTooltip
-        position="top"
-        title={title}
-        content={isSubmitDisabled() ? <span>{content}</span> : null}
+      <PrimaryButton
+        type="submit"
+        onClick={onClick}
+        disabled={isSubmitDisabled()}
+        loading={loading}
+        icon={isSubmitDisabled() ? TooltipIcon : undefined}
+        data-testid="btn-add-primary-group"
       >
-        <PrimaryButton
-          type="submit"
-          onClick={onClick}
-          disabled={isSubmitDisabled()}
-          loading={loading}
-          icon={isSubmitDisabled() ? InfoIcon : undefined}
-          data-testid="btn-add-primary-group"
-        >
-          Add Primary Group
-        </PrimaryButton>
-      </RiTooltip>
+        Add Primary Group
+      </PrimaryButton>
     )
   }
 

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/useSentinelDatabasesConfig.tsx

@@ -19,6 +19,7 @@ import { getSelectionColumn } from 'uiSrc/pages/autodiscover-cloud/utils'
 import { InputFieldSentinel, RiTooltip } from 'uiSrc/components'
 import { SentinelInputFieldType } from 'uiSrc/components/input-field-sentinel/InputFieldSentinel'
 import {
+  CellText,
   CopyBtn,
   CopyPublicEndpointText,
   CopyTextContainer,
@@ -50,7 +51,7 @@ export const colFactory = (
         row: {
           original: { name },
         },
-      }) => <span data-testid={`primary-group_${name}`}>{name}</span>,
+      }) => <CellText data-testid={`primary-group_${name}`}>{name}</CellText>,
     },
     {
       header: 'Database Alias*',