RI-7040: replace eui accordion

Replace EuiAccordion with RiAccordion

Author: pd-redis

redisinsight/ui/src/components/base/display/accordion/RiAccordion.tsx

@@ -0,0 +1,84 @@
+import React, { ComponentProps, isValidElement, ReactNode } from 'react'
+import { Section, SectionProps } from '@redis-ui/components'
+
+export type RiAccordionProps = Omit<ComponentProps<typeof Section>, 'label'> & {
+  label: ReactNode
+  actions?: ReactNode
+  collapsible?: SectionProps['collapsible']
+  actionButtonText?: SectionProps['actionButtonText']
+  collapsedInfo?: SectionProps['collapsedInfo']
+  content?: SectionProps['content']
+  children?: SectionProps['content']
+  onAction?: SectionProps['onAction']
+}
+
+const RiAccordionLabel = ({ label }: Pick<RiAccordionProps, 'label'>) => {
+  if (!label) {
+    return null
+  }
+  if (typeof label === 'string') {
+    return <Section.Header.Label label={label} />
+  }
+  // Ensure we always return a valid JSX element by wrapping non-JSX values
+  return isValidElement(label) ? label : <>{label}</>
+}
+
+type RiAccordionActionsProps = Pick<
+  RiAccordionProps,
+  'actionButtonText' | 'actions' | 'onAction'
+>
+
+const RiAccordionActions = ({
+  actionButtonText,
+  actions,
+  onAction,
+}: RiAccordionActionsProps) => (
+  <Section.Header.Group>
+    <Section.Header.ActionButton onClick={onAction}>
+      {actionButtonText}
+    </Section.Header.ActionButton>
+    {actions}
+    <Section.Header.CollapseIndicator />
+  </Section.Header.Group>
+)
+
+export const RiAccordion = ({
+  id,
+  content,
+  label,
+  onAction,
+  actionButtonText,
+  collapsedInfo,
+  children,
+  actions,
+  collapsible = true,
+  ...rest
+}: RiAccordionProps) => (
+  <Section.Compose
+    id={`ri-accordion-${id}`}
+    data-testid={`ri-accordion-${id}`}
+    {...rest}
+    collapsible={collapsible}
+  >
+    <Section.Header.Compose
+      collapsedInfo={collapsedInfo}
+      id={`ri-accordion-${id}`}
+      data-testid={`ri-accordion-header-${id}`}
+    >
+      <RiAccordionLabel
+        label={label}
+        data-testid={`ri-accordion-label-${id}`}
+      />
+      <RiAccordionActions
+        actions={actions}
+        onAction={onAction}
+        actionButtonText={actionButtonText}
+        data-testid={`ri-accordion-actions-${id}`}
+      />
+    </Section.Header.Compose>
+    <Section.Body
+      content={children ?? content}
+      data-testid={`ri-accordion-body-${id}`}
+    />
+  </Section.Compose>
+)

redisinsight/ui/src/components/base/layout/flex/flex.spec.tsx

@@ -8,8 +8,9 @@ const gapStyles = {
   xs: '0.2rem',
   s: '0.4rem',
   m: '0.8rem',
-  l: '2rem',
-  xl: '2.4rem',
+  l: '1.2rem',
+  xl: '2rem',
+  xxl: '2.4rem',
 }
 describe('Flex Components', () => {
   it('should render', () => {

redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components'
 import { useTheme } from '@redis-ui/styles'
 import { CommonProps } from 'uiSrc/components/base/theme/types'
 
-export const gapSizes = ['none', 'xs', 's', 'm', 'l', 'xl'] as const
+export const gapSizes = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const
 export type GapSizeType = (typeof gapSizes)[number]
 export const columnCount = [1, 2, 3, 4] as const
 export type ColumnCountType = (typeof columnCount)[number]
@@ -103,9 +103,12 @@ const flexGroupStyles = {
       gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space100};
     `,
     l: css`
-      gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space250};
+      gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space150};
     `,
     xl: css`
+      gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space250};
+    `,
+    xxl: css`
       gap: ${({ theme }: { theme: ThemeType }) => theme.core.space.space300};
     `,
   },

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { RiTooltip } from 'uiSrc/components'
 import { FlexItem } from 'uiSrc/components/base/layout/flex'
 import styles from '../styles.module.scss'

redisinsight/ui/src/components/recommendation/recommendation-badges/RecommendationBadges.tsx

@@ -3,14 +3,13 @@ import React from 'react'
 import { Row } from 'uiSrc/components/base/layout/flex'
 import BadgeIcon from '../badge-icon'
 import { badgesContent } from '../constants'
-import styles from '../styles.module.scss'
 
 export interface Props {
   badges?: string[]
 }
 
 const RecommendationBadges = ({ badges = [] }: Props) => (
-  <Row className={styles.badgesContainer} align="center" justify="between">
+  <Row align="center" justify="end" gap="m">
     {badgesContent.map(
       ({ id, name, icon }) =>
         badges.includes(id) && (

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.spec.tsx

@@ -23,7 +23,7 @@ describe('Group', () => {
         {children}
       </Group>,
     )
-    const accordionButton = queryByTestId(`accordion-button-${testId}`)
+    const accordionButton = queryByTestId(`accordion-${testId}`)
 
     expect(accordionButton).toHaveTextContent(label)
   })
@@ -39,7 +39,9 @@ describe('Group', () => {
         onToggle={callback}
       />,
     )
-    fireEvent.click(screen.getByTestId(`accordion-button-${testId}`))
+    const accordion = screen.getByTestId(`accordion-${testId}`)
+    const btn = accordion.querySelector('button')
+    fireEvent.click(btn!)
 
     expect(callback).toHaveBeenCalled()
   })

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { EuiAccordion, EuiIcon } from '@elastic/eui'
+
+import { EuiIcon } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import cx from 'classnames'
@@ -12,8 +13,12 @@ import {
 import { workbenchCustomTutorialsSelector } from 'uiSrc/slices/workbench/wb-custom-tutorials'
 import { EAItemActions } from 'uiSrc/constants'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
+
+import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion'
+import { Col } from 'uiSrc/components/base/layout/flex'
 import { RiTooltip, OnboardingTour } from 'uiSrc/components'
 import { Text } from 'uiSrc/components/base/text'
+
 import DeleteTutorialButton from '../DeleteTutorialButton'
 
 import './styles.scss'
@@ -22,19 +27,16 @@ export interface Props {
   id: string
   label: string
   actions?: string[]
-  isShowActions?: boolean
-  isShowFolder?: boolean
   onCreate?: () => void
   onDelete?: (id: string) => void
   children: React.ReactNode
   withBorder?: boolean
   initialIsOpen?: boolean
   forceState?: 'open' | 'closed'
-  arrowDisplay?: 'left' | 'right' | 'none'
   onToggle?: (isOpen: boolean) => void
-  triggerStyle?: any
-  buttonClassName?: string
   isPageOpened?: boolean
+  isShowActions?: boolean
+  isShowFolder?: boolean
 }
 
 const Group = (props: Props) => {
@@ -46,15 +48,12 @@ const Group = (props: Props) => {
     id,
     forceState,
     withBorder = false,
-    arrowDisplay = 'right',
-    isShowFolder = true,
     initialIsOpen = false,
     onToggle,
     onCreate,
     onDelete,
-    triggerStyle,
-    buttonClassName,
     isPageOpened,
+    isShowFolder,
   } = props
   const { deleting: deletingCustomTutorials } = useSelector(
     workbenchCustomTutorialsSelector,
@@ -120,39 +119,33 @@ const Group = (props: Props) => {
     </>
   )
 
-  const buttonContent = (
-    <div className="group-header-wrapper">
-      <Text className="group-header" size="m">
-        {isShowFolder && (
-          <EuiIcon type={isGroupOpen ? 'folderOpen' : 'folderClosed'} />
-        )}
-        {label}
-      </Text>
-      {isShowActions && actionsContent}
-    </div>
-  )
-
-  const buttonProps: any = {
-    'data-testid': `accordion-button-${id}`,
-    style: triggerStyle,
-    className: buttonClassName,
-  }
-
   return (
-    <EuiAccordion
+    <RiAccordion
       id={id}
       data-testid={`accordion-${id}`}
-      buttonContent={buttonContent}
-      buttonProps={buttonProps}
-      forceState={forceState}
-      arrowDisplay={arrowDisplay}
-      onToggle={handleOpen}
-      initialIsOpen={initialIsOpen}
-      style={{ whiteSpace: 'nowrap', width: 'auto' }}
-      className={[withBorder ? 'withBorder' : ''].join(' ')}
+      defaultOpen={initialIsOpen}
+      open={forceState === 'open' || isGroupOpen}
+      label={
+        <Text className="group-header" size="m">
+          {isShowFolder && (
+            <EuiIcon
+              type={isGroupOpen ? 'folderOpen' : 'folderClosed'}
+              style={{ marginRight: '10px' }}
+            />
+          )}
+          {label}
+        </Text>
+      }
+      onOpenChange={handleOpen}
+      style={{
+        whiteSpace: 'nowrap',
+        width: 'auto',
+      }}
+      className={cx({ withBorder })}
+      actions={isShowActions ? actionsContent : null}
     >
-      {children}
-    </EuiAccordion>
+      <Col gap="l">{children}</Col>
+    </RiAccordion>
   )
 }
 

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

@@ -161,8 +161,6 @@ const Navigation = (props: Props) => {
       case EnablementAreaComponent.Group:
         return (
           <Group
-            buttonClassName={level === 0 ? styles.baseGroup : ''}
-            triggerStyle={paddingsStyle}
             id={id}
             label={label}
             actions={actions}
@@ -242,6 +240,8 @@ const Navigation = (props: Props) => {
 
   return (
     <ListGroup
+      style={{ padding: 5 }}
+      gap="m"
       maxWidth="false"
       data-testid="enablementArea-treeView"
       flush