RI-7681: [NEW UI] Connection Settings (#5127)

* adjust some spacings and alignment around the dividers in the lower section

* increase footer button sizes

* replace the hard coded asterisk with required; add space between forms

* replace the Arrow Left icon <- with Chevron icon <

* add the info icon

* attempt to fix the double scroll layout issue

* remove unused divider class

* fix margin for tls details

* fix spacing around security items

* adjust decompression and formatters tab spacing

* adjust spacings and required fields in ssh and tls details

* adjust spacings in the edit db connectivity settings

* decrease spacer below private key / pass radio

* adjust spacings and dividers to reduce space and not cause extra scrolls

* use text for the label to make the format match the designs

* decrease some spacings

* remove the "should not exceed constraint"

* wrap the checkbox in form field

* add styles to modal content to spread through the whole content container

* revert accidentally commited default formatter settings

* fix tests

* refactor the Divider component to be styled and replace all its occurences

* move the flex:1 style to the modal body instead of compose

* remove not needed important

* change the info icon props interface import to come from LabelProps property instead from dist

* make divider props optional

* create host info tooltip content component

* reaplce the new tooltip content in all occurences

* get rid of unneeded classes

* fix test Database Alias -> Database alias

Author: dantovska

redisinsight/ui/src/components/base/forms/FormField.tsx

@@ -1,16 +1,24 @@
 import React, { ComponentProps } from 'react'
-import { FormField as RedisFormField, TooltipProvider } from '@redis-ui/components'
+import {
+  FormField as RedisFormField,
+  TooltipProvider,
+  LabelProps,
+} from '@redis-ui/components'
+
+export type RiInfoIconProps = LabelProps['infoIconProps']
 
 export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & {
-  infoIconProps?: any
+  infoIconProps?: RiInfoIconProps
 }
 
 export function FormField(props: RedisFormFieldProps) {
   // eslint-disable-next-line react/destructuring-assignment
   if (props.infoIconProps) {
-    return <TooltipProvider>
-      <RedisFormField {...props} />
-    </TooltipProvider>
+    return (
+      <TooltipProvider>
+        <RedisFormField {...props} />
+      </TooltipProvider>
+    )
   }
   return <RedisFormField {...props} />
 }

redisinsight/ui/src/components/divider/Divider.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import Divider, { Props } from './Divider'
+import Divider, { DividerProps } from './Divider'
 
-const mockedProps = mock<Props>()
+const mockedProps = mock<DividerProps>()
 
 describe('Divider', () => {
   it('should render', () => {

redisinsight/ui/src/components/divider/Divider.styles.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+
+export type DividerVariant = 'fullWidth' | 'half'
+export type DividerOrientation = 'horizontal' | 'vertical'
+
+const dividerStyles = {
+  orientation: {
+    horizontal: css`
+      width: 100%;
+      height: 1px;
+    `,
+    vertical: css`
+      width: 1px;
+      height: 100%;
+    `,
+  },
+  variant: {
+    fullWidth: {
+      horizontal: css``,
+      vertical: css``,
+    },
+    half: {
+      horizontal: css`
+        width: 50%;
+      `,
+      vertical: css`
+        height: 50%;
+      `,
+    },
+  },
+}
+
+export interface StyledDividerProps extends HTMLAttributes<HTMLHRElement> {
+  $color?: string
+  $orientation?: DividerOrientation
+  $variant?: DividerVariant
+}
+
+export const StyledDividerWrapper = styled.div<HTMLAttributes<HTMLDivElement>>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const StyledDivider = styled.hr<StyledDividerProps>`
+  border: none;
+  background-color: ${({
+    theme,
+    $color = theme.semantic.color.background.neutral500,
+  }) => $color};
+
+  ${({ $orientation = 'horizontal' }) =>
+    dividerStyles.orientation[$orientation]}
+  ${({ $variant = 'fullWidth', $orientation = 'horizontal' }) =>
+    dividerStyles.variant[$variant][$orientation]}
+`

redisinsight/ui/src/components/divider/Divider.tsx

@@ -1,42 +1,33 @@
 import React from 'react'
-import cx from 'classnames'
 
-import styles from './styles.module.scss'
+import {
+  StyledDividerWrapper,
+  StyledDivider,
+  DividerVariant,
+  DividerOrientation,
+} from './Divider.styles'
 
-export interface Props {
+export interface DividerProps {
+  orientation?: DividerOrientation
+  variant?: DividerVariant
   color?: string
-  colorVariable?: string
-  orientation?: 'horizontal' | 'vertical'
-  variant?: 'fullWidth' | 'middle' | 'half'
   className?: string
-  style?: any
 }
 
 const Divider = ({
   orientation,
   variant,
-  className,
   color,
-  colorVariable,
+  className,
   ...props
-}: Props) => (
-  <div
-    className={cx(
-      styles.divider,
-      styles[`divider-${variant || 'fullWidth'}`],
-      styles[`divider-${orientation || 'horizontal'}`],
-      className,
-    )}
-    {...props}
-  >
-    <hr
-      style={
-        color || colorVariable
-          ? { backgroundColor: color ?? `var(--${colorVariable})` }
-          : {}
-      }
+}: DividerProps) => (
+  <StyledDividerWrapper {...props}>
+    <StyledDivider
+      $variant={variant}
+      $orientation={orientation}
+      $color={color}
     />
-  </div>
+  </StyledDividerWrapper>
 )
 
 export default Divider

redisinsight/ui/src/components/divider/styles.module.scss

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { Modal } from 'uiSrc/components/base/display/modal'
+
+export const StyledFormDialogContent = styled(Modal.Content.Compose)`
+  width: 900px;
+  height: 700px;
+
+  max-width: calc(100vw - 120px);
+  max-height: calc(100vh - 120px);
+`
+
+export const StyledFormDialogContentBody = styled(Modal.Content.Body)`
+  flex: 1;
+  min-height: 0;
+`

redisinsight/ui/src/components/form-dialog/FormDialog.styles.ts

@@ -1,10 +1,12 @@
 import React from 'react'
-import cx from 'classnames'
 
 import { Nullable } from 'uiSrc/utils'
 import { CancelIcon } from 'uiSrc/components/base/icons'
 import { Modal } from 'uiSrc/components/base/display'
-import styles from './styles.module.scss'
+import {
+  StyledFormDialogContent,
+  StyledFormDialogContentBody,
+} from './FormDialog.styles'
 
 export interface Props {
   isOpen: boolean
@@ -22,16 +24,16 @@ const FormDialog = (props: Props) => {
 
   return (
     <Modal.Compose open={isOpen}>
-      <Modal.Content.Compose
+      <StyledFormDialogContent
         persistent
-        className={cx(styles.modal, className)}
+        className={className}
         onCancel={onClose}
       >
         <Modal.Content.Close icon={CancelIcon} onClick={onClose} />
         <Modal.Content.Header.Title>{header}</Modal.Content.Header.Title>
-        <Modal.Content.Body content={children} />
+        <StyledFormDialogContentBody content={children} />
         <Modal.Content.Footer.Compose>{footer}</Modal.Content.Footer.Compose>
-      </Modal.Content.Compose>
+      </StyledFormDialogContent>
     </Modal.Compose>
   )
 }

redisinsight/ui/src/components/form-dialog/FormDialog.tsx

@@ -124,7 +124,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
           {!!details && (
             <>
               <Spacer size="m" />
-              <Divider variant="fullWidth" />
+              <Divider />
               <Spacer size="m" />
               <Row className={styles.detailsRow} justify="between">
                 <FlexItem>

redisinsight/ui/src/components/form-dialog/styles.module.scss

@@ -75,7 +75,7 @@ const BulkActionsInfo = (props: Props) => {
           )}
         </Row>
       </Col>
-      <Divider colorVariable="separatorColor" />
+      <Divider />
       {loading && (
         <BulkActionsProgressLine data-testid="progress-line">
           <div style={{ width: `${(total ? scanned / total : 0) * 100}%` }} />