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

Author: dantovska

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 {
-  color?: string
-  colorVariable?: string
-  orientation?: 'horizontal' | 'vertical'
-  variant?: 'fullWidth' | 'middle' | 'half'
-  className?: string
-  style?: any
+export interface DividerProps {
+  orientation: DividerOrientation
+  variant: DividerVariant
+  color: string
+  className: string
 }
 
 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

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

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.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/components/bulk-actions/BulkActionsInfo/BulkActionsInfo.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/hash-details/HashDetails.tsx

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

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

@@ -50,11 +50,11 @@ const AddConnection = (props: Props) => {
             showFields={{ host: true, alias: true, port: true, timeout: true }}
           />
           <Spacer size="l" />
-          <Divider colorVariable="separatorColor" variant="fullWidth" />
+          <Divider />
           <Spacer size="m" />
           <DbIndex formik={formik} />
           <Spacer size="m" />
-          <Divider colorVariable="separatorColor" variant="fullWidth" />
+          <Divider />
           <Spacer size="m" />
           <ForceStandalone formik={formik} />
         </>
@@ -69,7 +69,7 @@ const AddConnection = (props: Props) => {
           {buildType !== BuildType.RedisStack && (
             <>
               <Spacer size="m" />
-              <Divider colorVariable="separatorColor" variant="fullWidth" />
+              <Divider />
               <Spacer size="m" />
               <SSHDetails formik={formik} />
             </>

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/AddConnection.tsx

@@ -17,7 +17,7 @@ const DecompressionAndFormatters = ({
   <>
     <DbCompressor formik={formik} />
     <Spacer size="m" />
-    <Divider colorVariable="separatorColor" variant="fullWidth" />
+    <Divider />
     <Spacer size="m" />
     <KeyFormatSelector formik={formik} />
   </>