RI-7207: Replace RUI Button Group with Redis Button Group

redisinsight/ui/src/components/base/forms/button-group/ButtonGroup.tsx

@@ -0,0 +1,5 @@
+import { ButtonGroup, ButtonGroupProps } from '@redis-ui/components'
+
+export { ButtonGroup }
+
+export type { ButtonGroupProps }

redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartConfigForm.tsx

@@ -1,21 +1,25 @@
 import React, { useState } from 'react'
-import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui'
-import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
 
+import { SwitchInput, TextInput } from 'uiSrc/components/base/inputs'
 import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
 import { AxisScale, GraphMode, ChartConfigFormProps } from './interfaces'
 import {
   X_LABEL_MAX_LENGTH,
   Y_LABEL_MAX_LENGTH,
   TITLE_MAX_LENGTH,
 } from './constants'
+import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion'
+import {
+  ButtonGroup,
+  ButtonGroupProps,
+} from 'uiSrc/components/base/forms/button-group/ButtonGroup'
 
 const NewEnumSelect = ({
   selected,
   values,
   onClick,
 }: {
-  select: string
+  selected: string
   values: string[]
   onClick: (v: string) => void
 }) => (
@@ -25,6 +29,7 @@ const NewEnumSelect = ({
         title={v.charAt(0).toUpperCase() + v.slice(1)}
         onClick={() => onClick(v)}
         className={`button-point ${selected === v ? 'button-selected' : null}`}
+        key={v}
       >
         {v}
       </div>
@@ -37,9 +42,20 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
 
   const { onChange, value } = props
 
+  const yAxisButtonGroupItems = [
+    {
+      label: 'Left',
+      value: false,
+    },
+    {
+      label: 'Right',
+      value: true,
+    },
+  ]
+
   return (
     <form className="chart-config-form">
-      <div className="chart-top-form">
+      <div className="chart-form-top">
         <NewEnumSelect
           values={Object.keys(GraphMode)}
           selected={value.mode}
@@ -55,92 +71,90 @@ export default function ChartConfigForm(props: ChartConfigFormProps) {
           checked={value.fill}
           onCheckedChange={(checked) => onChange('fill', checked)}
         />
-        <EuiAccordion
-          arrowDisplay="right"
-          forceState={moreOptions ? 'open' : 'closed'}
-          onToggle={(isOpen) => setMoreOptions(isOpen)}
-          buttonContent={moreOptions ? 'Less options' : 'More options'}
-        >
-          <span></span>
-        </EuiAccordion>
       </div>
-      {moreOptions && (
-        <div className="more-options">
-          <section>
-            <FormFieldset legend={{ children: 'Title' }}>
-              <TextInput
-                placeholder="Title"
-                value={value.title}
-                onChange={value => onChange('title', value)}
-                aria-label="Title"
-                maxLength={parseInt(TITLE_MAX_LENGTH)}
-              />
-            </FormFieldset>
-            <FormFieldset legend={{ children: 'X axis Label' }}>
-              <TextInput
-                placeholder="X axis label"
-                value={value.xlabel}
-                onChange={value => onChange('xlabel', value)}
-                aria-label="X Label"
-                maxLength={parseInt(X_LABEL_MAX_LENGTH)}
-              />
-            </FormFieldset>
-          </section>
-          <section>
-            <div className="right-y-axis">
-              <div className="switch-wrapper">
-                <SwitchInput
-                  title="Use Right Y Axis"
-                  checked={value.yAxis2}
-                  onCheckedChange={(checked) => onChange('yAxis2', checked)}
+      <RiAccordion
+        className="chart-form-accordion"
+        collapsible
+        open={moreOptions}
+        onOpenChange={setMoreOptions}
+        label={moreOptions ? 'Less options' : 'More options'}
+        content={
+          <div className="more-options">
+            <section>
+              <FormFieldset legend={{ children: 'Title' }}>
+                <TextInput
+                  placeholder="Title"
+                  value={value.title}
+                  onChange={(value) => onChange('title', value)}
+                  aria-label="Title"
+                  maxLength={parseInt(TITLE_MAX_LENGTH)}
+
                 />
-              </div>
-              {value.yAxis2 && (
-                <div className="y-axis-2">
-                  {Object.keys(value.keyToY2Axis).map((key) => (
-                    <div className="y-axis-2-item">
-                      <div>{key}</div>
-                      <EuiButtonGroup
-                        buttonSize="compressed"
-                        options={['left', 'right'].map((v: string) => ({
-                          id: v,
-                          label: v,
-                        }))}
-                        onChange={(id) =>
-                          onChange('keyToY2Axis', {
-                            ...value.keyToY2Axis,
-                            [key]: id === 'right',
-                          })
-                        }
-                        idSelected={
-                          value.keyToY2Axis[key] === true ? 'right' : 'left'
-                        }
-                        isFullWidth
-                      />
-                    </div>
-                  ))}
+              </FormFieldset>
+              <FormFieldset legend={{ children: 'X axis Label' }}>
+                <TextInput
+                  placeholder="X axis label"
+                  value={value.xlabel}
+                  onChange={(value) => onChange('xlabel', value)}
+                  aria-label="X Label"
+                  maxLength={parseInt(X_LABEL_MAX_LENGTH)}
+                />
+              </FormFieldset>
+            </section>
+            <section>
+              <div className="right-y-axis">
+                <div className="switch-wrapper">
+                  <SwitchInput
+                    title="Use Right Y Axis"
+                    checked={value.yAxis2}
+                    onCheckedChange={(checked) => onChange('yAxis2', checked)}
+                  />
                 </div>
-              )}
-            </div>
-          </section>
-          <section className="y-axis-config">
-            <YAxisConfigForm
-              label="Left Y Axis"
-              onChange={(v: any) => onChange('yAxisConfig', v)}
-              isLeftYAxis={true}
-              value={value.yAxisConfig}
-            />
-            {value.yAxis2 && (
+                {value.yAxis2 && (
+                  <div className="y-axis-2">
+                    {Object.keys(value.keyToY2Axis).map((key) => (
+                      <div className="y-axis-2-item" key={key}>
+                        <div>{key}</div>
+                        <ButtonGroup>
+                          {yAxisButtonGroupItems.map((item) => (
+                            <ButtonGroup.Button
+                              isSelected={value.keyToY2Axis[key] === item.value}
+                              onClick={() =>
+                                onChange('keyToY2Axis', {
+                                  ...value.keyToY2Axis,
+                                  [key]: item.value,
+                                })
+                              }
+                            >
+                              {item.label}
+                            </ButtonGroup.Button>
+                          ))}
+                        </ButtonGroup>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </section>
+            <section className="y-axis-config">
               <YAxisConfigForm
-                label="Right Y Axis"
-                onChange={(v: any) => onChange('yAxis2Config', v)}
-                isLeftYAxis={false}
-                value={value.yAxis2Config}
+                label="Left Y Axis"
+                onChange={(v: any) => onChange('yAxisConfig', v)}
+                isLeftYAxis={true}
+                value={value.yAxisConfig}
               />
-            )}
-          </section>
-        </div>
-      )}
+              {value.yAxis2 && (
+                <YAxisConfigForm
+                  label="Right Y Axis"
+                  onChange={(v: any) => onChange('yAxis2Config', v)}
+                  isLeftYAxis={false}
+                  value={value.yAxis2Config}
+                />
+              )}
+            </section>
+          </div>
+        }
+      />
     </form>
   )
 }
@@ -169,6 +183,8 @@ const YAxisConfigForm = ({ value, onChange, label }: any) => (
   </div>
 )
 
+const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
+
 interface EnumSelectProps {
   enumType: any
   inputLabel: string
@@ -178,13 +194,18 @@ const EnumSelect = ({
   enumType,
   inputLabel,
   ...props
-}: EnumSelectProps & EuiButtonGroupProps) => (
-  <EuiButtonGroup
-    legend="form-button"
-    buttonSize="compressed"
-    options={Object.values(enumType).map((v: string) => ({ id: v, label: v }))}
-    onChange={(id) => props.onChange({ target: { value: id } } as any)}
-    idSelected={props.value.toString()}
-    isFullWidth
-  />
+}: EnumSelectProps & ButtonGroupProps) => (
+  <ButtonGroup>
+    {Object.values(enumType).map((v) => (
+      <ButtonGroup.Button
+        isSelected={props.value === v}
+        key={String(v)}
+        onClick={() =>
+          props.onChange?.({ target: { value: String(v) } } as any)
+        }
+      >
+        {capitalize(String(v))}
+      </ButtonGroup.Button>
+    ))}
+  </ButtonGroup>
 )