RI-7001: replace horizontal rule (#4517)

* Create custom loading-content component and replace the eui one
* Create custom horizontal-rule component and replace the eui one

Author: dantovska

redisinsight/ui/src/components/base/index.ts

@@ -1,3 +1,4 @@
 import ExternalLink from './external-link'
+import { HorizontalRule, LoadingContent } from './layout'
 
-export { ExternalLink }
+export { ExternalLink, HorizontalRule, LoadingContent }

redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import HorizontalRule from './HorizontalRule'
+
+describe('HorizontalRule', () => {
+  it('should render with default props', () => {
+    const { container } = render(<HorizontalRule />)
+    expect(container).toBeTruthy()
+    expect(container.firstChild).toHaveStyle('width: 100%')
+  })
+
+  it('should render with set size and margin', () => {
+    const { container } = render(<HorizontalRule size="half" margin="xs" />)
+    expect(container).toBeTruthy()
+    expect(container.firstChild).toHaveStyle('width: 50%')
+    expect(container.firstChild).toHaveStyle('margin-inline: auto')
+  })
+})

redisinsight/ui/src/components/base/layout/horizontal-rule/HorizontalRule.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import {
+  HorizontalRuleProps,
+  StyledHorizontalRule,
+} from './horizontal-rule.styles'
+
+const HorizontalRule = ({
+  className,
+  size = 'full',
+  margin = 'l',
+  ...rest
+}: HorizontalRuleProps) => {
+  const classes = classNames('RI-horizontal-rule', className)
+
+  return (
+    <StyledHorizontalRule
+      size={size}
+      margin={margin}
+      className={classes}
+      {...rest}
+    />
+  )
+}
+
+export default HorizontalRule

redisinsight/ui/src/components/base/layout/horizontal-rule/horizontal-rule.styles.ts

@@ -0,0 +1,70 @@
+import { HTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+
+export const SIZES = ['full', 'half', 'quarter'] as const
+export const MARGINS = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const
+
+export type HorizontalRuleSize = (typeof SIZES)[number]
+export type HorizontalRuleMargin = (typeof MARGINS)[number]
+
+const horizontalRuleStyles = {
+  size: {
+    full: css`
+      width: 100%;
+    `,
+    half: css`
+      width: 50%;
+      margin-inline: auto;
+    `,
+    quarter: css`
+      width: 25%;
+      margin-inline: auto;
+    `,
+  },
+  margin: {
+    none: '',
+    xs: css`
+      margin-block: var(--size-xs);
+    `,
+    s: css`
+      margin-block: var(--size-s);
+    `,
+    m: css`
+      margin-block: var(--size-m);
+    `,
+    l: css`
+      margin-block: var(--size-l);
+    `,
+    xl: css`
+      margin-block: var(--size-xl);
+    `,
+    xxl: css`
+      margin-block: var(--size-xxl);
+    `,
+  },
+}
+
+export interface HorizontalRuleProps extends HTMLAttributes<HTMLHRElement> {
+  size?: HorizontalRuleSize
+  margin?: HorizontalRuleMargin
+}
+
+export const StyledHorizontalRule = styled.hr<
+  Omit<HorizontalRuleProps, 'size' | 'margin'> & {
+    size?: HorizontalRuleSize
+    margin?: HorizontalRuleMargin
+  }
+>`
+  ${({ size = 'full' }) => horizontalRuleStyles.size[size]}
+  ${({ margin = 'l' }) => horizontalRuleStyles.margin[margin]}
+
+  /* Reset the default styles */
+  border: none;
+
+  /* If the component is inside a flex box */
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  background-color: var(--hrBackgroundColor);
+  height: 1px;
+`

redisinsight/ui/src/components/base/layout/index.ts

@@ -0,0 +1,4 @@
+import HorizontalRule from './horizontal-rule/HorizontalRule'
+import LoadingContent from './loading-content/LoadingContent'
+
+export { HorizontalRule, LoadingContent }

redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.spec.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import LoadingContent from './LoadingContent'
+
+describe('LoadingContent', () => {
+  it('should render the component', () => {
+    const { container } = render(<LoadingContent />)
+    expect(container.firstChild).toHaveClass('RI-loading-content')
+  })
+
+  it('should render the default number of lines (3)', () => {
+    const { container } = render(<LoadingContent />)
+    const lines = container.querySelectorAll('.RI-loading-content > span')
+    expect(lines.length).toBe(3)
+  })
+
+  it('should render the correct number of lines when "lines" prop is passed', () => {
+    const { container } = render(<LoadingContent lines={5} />)
+    const lines = container.querySelectorAll('.RI-loading-content > span')
+    expect(lines.length).toBe(5)
+  })
+
+  it('should apply the custom className if provided', () => {
+    const { container } = render(<LoadingContent className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})

redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import {
+  StyledLoadingContent,
+  LoadingContentProps,
+  SingleLine,
+  SingleLineBackground,
+} from './loading-content.styles'
+
+const LoadingContent = ({
+  className,
+  lines = 3,
+  ...rest
+}: LoadingContentProps) => {
+  const classes = classNames('RI-loading-content', className)
+  const lineElements = []
+
+  for (let i = 0; i < lines; i++) {
+    lineElements.push(
+      <SingleLine key={i}>
+        <SingleLineBackground />
+      </SingleLine>,
+    )
+  }
+
+  return (
+    <StyledLoadingContent className={classes} {...rest}>
+      {lineElements}
+    </StyledLoadingContent>
+  )
+}
+
+export default LoadingContent

redisinsight/ui/src/components/base/layout/loading-content/loading-content.styles.ts

@@ -0,0 +1,53 @@
+import { HTMLAttributes } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+
+export interface LoadingContentProps extends HTMLAttributes<HTMLDivElement> {
+  lines?: LineRange
+}
+
+const loadingAnimation = keyframes`
+  0% {
+    transform: translateX(-53%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+`
+
+export const StyledLoadingContent = styled.span<
+  React.HtmlHTMLAttributes<HTMLSpanElement>
+>`
+  display: block;
+  width: 100%;
+`
+
+export const SingleLine = styled.span<
+  React.HtmlHTMLAttributes<HTMLSpanElement>
+>`
+  display: block;
+  width: 100%;
+  height: var(--base);
+  margin-bottom: var(--size-s);
+  border-radius: var(--size-xs);
+  overflow: hidden;
+
+  &:last-child:not(:only-child) {
+    width: 75%;
+  }
+`
+
+export const SingleLineBackground = styled.span`
+  display: block;
+  width: 220%;
+  height: 100%;
+  background: linear-gradient(
+    137deg,
+    var(--loadingContentColor) 45%,
+    var(--loadingContentLightestShade) 50%,
+    var(--loadingContentColor) 55%
+  );
+  animation: ${loadingAnimation} 1.5s ease-in-out infinite;
+`

redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx

@@ -12,13 +12,13 @@ import {
   EuiTitle,
   EuiToolTip,
   EuiForm,
-  EuiHorizontalRule,
   EuiCallOut,
   EuiLink,
 } from '@elastic/eui'
 import { EuiSwitchEvent } from '@elastic/eui/src/components/form/switch'
 import cx from 'classnames'
 
+import { HorizontalRule } from 'uiSrc/components'
 import { compareConsents } from 'uiSrc/utils'
 import {
   updateUserConfigSettingsAction,
@@ -261,7 +261,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
-            <EuiHorizontalRule
+            <HorizontalRule
               margin="l"
               className={cx({
                 [styles.pluginWarningHR]: !!requiredConsents.length,
@@ -310,7 +310,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
       </div>
       {requiredConsents.length ? (
         <>
-          <EuiHorizontalRule margin="l" className={styles.requiredHR} />
+          <HorizontalRule margin="l" className={styles.requiredHR} />
           <EuiSpacer size="m" />
           <EuiText color="subdued" size="s" className={styles.smallText}>
             To use Redis Insight, please accept the terms and conditions:{' '}

redisinsight/ui/src/components/query/query-card/QueryCard.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
-import { EuiLoadingContent, keys } from '@elastic/eui'
+import { keys } from '@elastic/eui'
 import { useParams } from 'react-router-dom'
 import { isNull } from 'lodash'
 
+import { LoadingContent } from 'uiSrc/components/base/layout'
 import {
   DEFAULT_TEXT_VIEW_TYPE,
   ProfileQueryType,
@@ -233,7 +234,7 @@ const QueryCard = (props: Props) => {
         {isOpen && (
           <>
             {React.isValidElement(commonError) &&
-            (!isGroupResults(resultsMode) || isNull(command)) ? (
+              (!isGroupResults(resultsMode) || isNull(command)) ? (
               <QueryCardCommonResult loading={loading} result={commonError} />
             ) : (
               <>
@@ -275,7 +276,7 @@ const QueryCard = (props: Props) => {
                               />
                             ) : (
                               <div className={styles.loading}>
-                                <EuiLoadingContent
+                                <LoadingContent
                                   lines={5}
                                   data-testid="loading-content"
                                 />