RI-7681: [NEW UI] Connection Settings

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/form-dialog/FormDialog.styles.ts

@@ -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.tsx

@@ -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/notifications/components/infinite-messages/InfiniteMessages.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/pages/browser/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.tsx

@@ -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}%` }} />

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/HashDetails.tsx

@@ -83,7 +83,6 @@ const HashDetails = (props: Props) => {
           />
           <Divider
             className={styles.divider}
-            colorVariable="separatorColor"
             orientation="vertical"
           />
         </>

redisinsight/ui/src/pages/browser/modules/key-details/components/key-details-subheader/KeyDetailsSubheader.tsx

@@ -26,7 +26,6 @@ export const KeyDetailsSubheader = ({ keyType, Actions }: Props) => (
                 </FlexItem>
                 <Divider
                   className={styles.divider}
-                  colorVariable="separatorColor"
                   orientation="vertical"
                 />
               </>

redisinsight/ui/src/pages/home/components/add-database-screen/components/connection-url/ConnectionUrl.tsx

@@ -1,54 +1,28 @@
 import React from 'react'
-import styled from 'styled-components'
 
-import { FormField } from 'uiSrc/components/base/forms/FormField'
+import {
+  FormField,
+  RiInfoIconProps,
+} from 'uiSrc/components/base/forms/FormField'
 import { TextArea } from 'uiSrc/components/base/inputs'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { RiTooltip } from 'uiSrc/components'
-import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { Text } from 'uiSrc/components/base/text'
-
-const PointerIcon = styled(RiIcon)`
-  cursor: pointer;
-`
+import { HostInfoTooltipContent } from '../../../host-info-tooltip-content/HostInfoTooltipContent'
 
 export interface Props {
   value: string
   onChange: (e: React.ChangeEvent<any>) => void
 }
 
+const connectionUrlInfo: RiInfoIconProps = {
+  content: HostInfoTooltipContent({ includeAutofillInfo: false }),
+  placement: 'right',
+  maxWidth: '100%',
+}
+
 const ConnectionUrl = ({ value, onChange }: Props) => (
   <FormField
-    label={
-      <FlexGroup gap="s" align="center">
-        <Text>Connection URL</Text>
-        <RiTooltip
-          title="The following connection URLs are supported:"
-          className="homePage_tooltip"
-          position="right"
-          content={
-            <ul className="homePage_toolTipUl">
-              <li>
-                <span className="dot" />
-                redis://[[username]:[password]]@host:port
-              </li>
-              <li>
-                <span className="dot" />
-                rediss://[[username]:[password]]@host:port
-              </li>
-              <li>
-                <span className="dot" />
-                host:port
-              </li>
-            </ul>
-          }
-        >
-          <FlexItem>
-            <PointerIcon type="InfoIcon" />
-          </FlexItem>
-        </RiTooltip>
-      </FlexGroup>
-    }
+    label={<Text>Connection URL</Text>}
+    infoIconProps={connectionUrlInfo}
   >
     <TextArea
       name="connectionURL"