RI-7046: replace EuiCheckbox

package.json

@@ -234,7 +234,7 @@
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "34.6.0",
-    "@redis-ui/components": "^38.0.0",
+    "@redis-ui/components": "^38.1.3",
     "@redis-ui/icons": "^4.16.1",
     "@redis-ui/styles": "^11.0.2",
     "@reduxjs/toolkit": "^1.6.2",

redisinsight/ui/src/components/base/forms/buttons/IconButton.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { IconButton as RedisUiIconButton } from '@redis-ui/components'
 
 export type ButtonProps = React.ComponentProps<typeof RedisUiIconButton>
+
+export type IconType = ButtonProps['icon']
 export const IconButton = (props: ButtonProps) => (
   <RedisUiIconButton {...props} />
 )

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

@@ -0,0 +1,9 @@
+export { ActionIconButton } from 'uiSrc/components/base/forms/buttons/ActionIconButton'
+export { BaseButton as Button } from 'uiSrc/components/base/forms/buttons/Button'
+export { DestructiveButton } from 'uiSrc/components/base/forms/buttons/DestructiveButton'
+export { EmptyButton } from 'uiSrc/components/base/forms/buttons/EmptyButton'
+export { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton'
+export { PrimaryButton } from 'uiSrc/components/base/forms/buttons/PrimaryButton'
+export { SecondaryButton } from 'uiSrc/components/base/forms/buttons/SecondaryButton'
+
+export type { IconType } from 'uiSrc/components/base/forms/buttons/IconButton'

redisinsight/ui/src/components/base/forms/checkbox/Checkbox.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { fireEvent } from '@testing-library/react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { Checkbox } from './Checkbox'
+
+describe('Checkbox', () => {
+  it('Should render checkbox', () => {
+    render(<Checkbox label="Checkbox Label" />)
+
+    expect(screen.getByText('Checkbox Label')).toBeInTheDocument()
+  })
+
+  describe('Checkbox states', () => {
+    it('Should render disabled checkbox when disabled prop is passed', () => {
+      render(<Checkbox id="id1" label="Checkbox Label" disabled />)
+
+      expect(screen.getByRole('checkbox')).toBeDisabled()
+    })
+    it('Should render un-checked checkbox when checked prop is passed as false', () => {
+      render(<Checkbox id="id1" label="Checkbox Label" checked={false} />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toHaveAttribute('aria-checked', 'false')
+    })
+    it('Should render checked checkbox when checked prop is passed as true', () => {
+      render(<Checkbox id="id1" label="Checkbox Label" checked />)
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toHaveAttribute('aria-checked', 'true')
+    })
+    it('Should render indeterminate checkbox when checked prop is passed as indeterminate', () => {
+      render(
+        <Checkbox id="id1" label="Checkbox Label" checked="indeterminate" />,
+      )
+
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toHaveValue('on')
+      expect(checkbox).toHaveTextContent('Minus')
+    })
+  })
+
+  describe('change handlers', () => {
+    it('Should call handlers when checkbox is clicked with thruthy values', () => {
+      const onChange = jest.fn()
+      const onCheckedChange = jest.fn()
+      render(
+        <Checkbox
+          id="id1"
+          label="Checkbox Label"
+          onChange={onChange}
+          onCheckedChange={onCheckedChange}
+        />,
+      )
+      const checkbox = screen.getByRole('checkbox')
+      fireEvent.click(checkbox)
+      expect(onChange).toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith({
+        target: {
+          checked: true,
+          type: 'checkbox',
+          name: undefined,
+          id: 'id1',
+        },
+      })
+      expect(onCheckedChange).toHaveBeenCalled()
+      expect(onCheckedChange).toHaveBeenCalledWith(true)
+    })
+    it('Should call handlers when checkbox is clicked with falsy values', () => {
+      const onChange = jest.fn()
+      const onCheckedChange = jest.fn()
+      render(
+        <Checkbox
+          id="id1"
+          label="Checkbox Label"
+          onChange={onChange}
+          onCheckedChange={onCheckedChange}
+          checked
+        />,
+      )
+      const checkbox = screen.getByRole('checkbox')
+      fireEvent.click(checkbox)
+      expect(onChange).toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith({
+        target: {
+          checked: false,
+          type: 'checkbox',
+          name: undefined,
+          id: 'id1',
+        },
+      })
+      expect(onCheckedChange).toHaveBeenCalled()
+      expect(onCheckedChange).toHaveBeenCalledWith(false)
+    })
+    it('Should change state when clicked', () => {
+      render(<Checkbox id="id1" label="Checkbox Label" defaultChecked />)
+      const checkbox = screen.getByRole('checkbox')
+      expect(checkbox).toHaveAttribute('aria-checked', 'true')
+      fireEvent.click(checkbox)
+      expect(checkbox).toHaveAttribute('aria-checked', 'false')
+      fireEvent.click(checkbox)
+      expect(checkbox).toHaveAttribute('aria-checked', 'true')
+    })
+  })
+})

redisinsight/ui/src/components/base/forms/checkbox/Checkbox.tsx

@@ -0,0 +1,82 @@
+import React, { ChangeEvent } from 'react'
+import {
+  Checkbox as RedisUiCheckbox,
+  CheckedType,
+  Typography,
+} from '@redis-ui/components'
+import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types'
+
+type Size = BodySizesType
+
+export type CheckboxProps = Omit<
+  React.ComponentProps<typeof RedisUiCheckbox>,
+  'onChange'
+> & {
+  onCheckedChange?: (checked: CheckedType) => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  name?: string
+  id?: string
+  labelSize?: Size
+}
+
+type CheckboxLabelProps = Omit<
+  React.ComponentProps<typeof Typography.Body>,
+  'children' | 'component'
+> & {
+  children: React.ReactNode
+}
+
+const CheckboxLabel = ({ children, ...rest }: CheckboxLabelProps) => {
+  if (typeof children !== 'string') {
+    return <>{children}</>
+  }
+  return (
+    <Typography.Body {...rest} component="span">
+      {children}
+    </Typography.Body>
+  )
+}
+
+export const Checkbox = ({
+  onChange,
+  onCheckedChange,
+  id,
+  label,
+  labelSize = 'S',
+  ...rest
+}: CheckboxProps) => {
+  /**
+   * Handles the change event for a checkbox input and notifies the relevant handlers.
+   *
+   * This is added to provide compatibility with the `onChange` handler expected by the Formik library.
+   * Constructs a synthetic event object designed to mimic a React checkbox change event.
+   * Updates the `checked` status and passes the constructed event to the `onChange` handler
+   * if provided. Additionally, invokes the `onCheckedChange` handler with the new `checked` state
+   * if it is defined.
+   *
+   * @param {CheckedType} checked - The new checked state of the checkbox. It is expected to
+   *        be a boolean-like value where `true` indicates checked and any other value
+   *        indicates unchecked.
+   */
+  const handleCheckedChange = (checked: CheckedType) => {
+    const syntheticEvent = {
+      target: {
+        checked: checked === true,
+        type: 'checkbox',
+        name: rest.name,
+        id,
+      },
+    } as React.ChangeEvent<HTMLInputElement>
+    onChange?.(syntheticEvent)
+    onCheckedChange?.(checked)
+  }
+
+  return (
+    <RedisUiCheckbox
+      {...rest}
+      id={id}
+      onCheckedChange={handleCheckedChange}
+      label={<CheckboxLabel size={labelSize}>{label}</CheckboxLabel>}
+    />
+  )
+}

redisinsight/ui/src/components/base/icons/BannedIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 import BanIconSvg from 'uiSrc/assets/img/monitor/ban.svg?react'
 
 export const BannedIcon = (props: IconProps) => (

redisinsight/ui/src/components/base/icons/BulkActions.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import BulkActionsIcon from 'uiSrc/assets/img/icons/bulk_actions.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const BulkActions = (props: IconProps) => (
   <Icon icon={BulkActionsIcon} {...props} />

redisinsight/ui/src/components/base/icons/Cloud.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const Cloud = (props: IconProps) => <Icon icon={CloudIcon} {...props} />

redisinsight/ui/src/components/base/icons/Copilot.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const CopilotIcon = (props: IconProps) => (
   <Icon icon={CopilotSvg} {...props} />

redisinsight/ui/src/components/base/icons/DislikeIcon.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
+
+export const DislikeIcon = (props: IconProps) => (
+  <Icon icon={DislikeSvg} {...props} />
+)

redisinsight/ui/src/components/base/icons/ExtendIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const ExtendIcon = (props: IconProps) => (
   <Icon icon={ExtendSvg} {...props} />

redisinsight/ui/src/components/base/icons/Group.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import GroupModeIcon from 'uiSrc/assets/img/icons/group_mode.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const Group = (props: IconProps) => (
   <Icon icon={GroupModeIcon} {...props} />

redisinsight/ui/src/components/base/icons/Icon.tsx

@@ -21,7 +21,7 @@ const sizesMap = {
  */
 function isValidIconColor(
   theme: ReturnType<typeof useTheme>,
-  color: string,
+  color: string | number | symbol,
 ): color is keyof typeof theme.semantic.color.icon {
   return color in theme.semantic.color.icon
 }

redisinsight/ui/src/components/base/icons/LikeIcon.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+import LikeSvg from 'uiSrc/assets/img/icons/like.svg?react'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
+
+export const LikeIcon = (props: IconProps) => <Icon icon={LikeSvg} {...props} />

redisinsight/ui/src/components/base/icons/MinusInCircle.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import MinusInCircleSvg from 'uiSrc/assets/img/icons/minus_in_circle.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const MinusInCircleIcon = (props: IconProps) => (
   <Icon icon={MinusInCircleSvg} {...props} />

redisinsight/ui/src/components/base/icons/Play.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 import PlayIcon from 'uiSrc/assets/img/icons/play.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const Play = (props: IconProps) => <Icon icon={PlayIcon} {...props} />

redisinsight/ui/src/components/base/icons/PlayFilled.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PlayFilledSvg from 'uiSrc/assets/img/icons/play-filled.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const PlayFilledIcon = (props: IconProps) => (
   <Icon icon={PlayFilledSvg} {...props} />

redisinsight/ui/src/components/base/icons/PlusInCircle.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PlusInCircleSvg from 'uiSrc/assets/img/icons/plus_in_circle.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const PlusInCircle = (props: IconProps) => (
   <Icon icon={PlusInCircleSvg} {...props} />

redisinsight/ui/src/components/base/icons/RIResetIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiResetIcon = (props: IconProps) => (
   <Icon icon={ResetSvg} {...props} />

redisinsight/ui/src/components/base/icons/RIRocketIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiRocketIcon = (props: IconProps) => (
   <Icon icon={RocketSvg} {...props} />

redisinsight/ui/src/components/base/icons/RIStopIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import StopIconSvg from 'uiSrc/assets/img/rdi/stopFilled.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RiStopIcon = (props: IconProps) => (
   <Icon icon={StopIconSvg} {...props} />

redisinsight/ui/src/components/base/icons/RawMode.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import RawModeIcon from 'uiSrc/assets/img/icons/raw_mode.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RawMode = (props: IconProps) => (
   <Icon icon={RawModeIcon} {...props} />

redisinsight/ui/src/components/base/icons/RedisLogo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react'
-import { Icon, IconProps } from './Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const RedisLogo = (props: IconProps) => (
   <Icon icon={RedisLogoSvg} {...props} />

redisinsight/ui/src/components/base/icons/RedisLogoFullIcon.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import RedisLogoSvg from 'uiSrc/assets/img/logo.svg?react'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
+
+export const RedisLogoFullIcon = (props: IconProps) => (
+  <Icon icon={RedisLogoSvg} {...props} />
+)

redisinsight/ui/src/components/base/icons/ShrinkIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react'
-import { Icon, IconProps } from 'uiSrc/components/base/icons/Icon'
+import { Icon, IconProps } from 'uiSrc/components/base/icons'
 
 export const ShrinkIcon = (props: IconProps) => (
   <Icon icon={ShrinkSvg} {...props} />