RI-6855: Sync latest base branch changes (#4808)

Author: pawelangelow

redisinsight/ui/src/assets/img/rdi/rocket.svg

@@ -250,7 +250,9 @@ const AutoRefresh = ({
         anchorPosition="downRight"
         isOpen={isPopoverOpen}
         anchorClassName={styles.anchorWrapper}
-        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper)}
+        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper, {
+          [styles.popoverWrapperEditing]: editingRate,
+        })}
         closePopover={closePopover}
         button={
           <IconButton

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -61,11 +61,14 @@
 
     input {
       height: 30px !important;
-      border-radius: 0px !important;
+      border-radius: 0 !important;
       background-color: var(--euiColorLightestShade) !important;
     }
   }
 }
+.popoverWrapperEditing {
+  height: 140px;
+}
 
 .inputContainer {
   height: 30px;

redisinsight/ui/src/components/auto-refresh/styles.module.scss

@@ -2,8 +2,10 @@ import Loader from './loader/Loader'
 import ProgressBarLoader from './progress-bar/ProgressBarLoader'
 import RiImage from './image/RiImage'
 import RiLoadingLogo from './loading-logo/RiLoadingLogo'
+import { Modal } from './modal'
+
+export { Loader, ProgressBarLoader, RiImage, RiLoadingLogo, Modal }
 
-export { Loader, ProgressBarLoader, RiImage, RiLoadingLogo }
 export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
 
 export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'

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

@@ -0,0 +1 @@
+export { Modal } from '@redis-ui/components'

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

@@ -17,16 +17,12 @@ const StyledMessage = styled.div<{ theme: Theme }>`
   margin-bottom: ${({ theme }) => theme.core.space.space100};
 `
 
+type RiToastType = ToastContentParams &
+  CommonProps & {
+    onClose?: VoidFunction
+  }
 export const riToast = (
-  {
-    onClose,
-    actions,
-    message,
-    ...content
-  }: ToastContentParams &
-    CommonProps & {
-      onClose?: VoidFunction
-    },
+  { onClose, actions, message, ...content }: RiToastType,
   options?: ToastOptions | undefined,
 ) => {
   const toastContent: ToastContentParams = {

redisinsight/ui/src/components/base/display/toast/RiToast.tsx

@@ -0,0 +1,16 @@
+import React, { ComponentProps } from 'react'
+import { FormField as RedisFormField, TooltipProvider } from '@redis-ui/components'
+
+export type RedisFormFieldProps = ComponentProps<typeof RedisFormField> & {
+  infoIconProps?: any
+}
+
+export function FormField(props: RedisFormFieldProps) {
+  // eslint-disable-next-line react/destructuring-assignment
+  if (props.infoIconProps) {
+    return <TooltipProvider>
+      <RedisFormField {...props} />
+    </TooltipProvider>
+  }
+  return <RedisFormField {...props} />
+}

redisinsight/ui/src/components/base/forms/FormField.ts

@@ -2,36 +2,44 @@ import React from 'react'
 import { TextButton } from '@redis-ui/components'
 import { ButtonIcon } from 'uiSrc/components/base/forms/buttons/Button'
 import { IconType } from 'uiSrc/components/base/icons'
+import { Row } from '../../layout/flex'
+import { FlexProps } from '../../layout/flex/flex.styles'
 
 export type ButtonProps = React.ComponentProps<typeof TextButton> & {
   icon?: IconType
   iconSide?: 'left' | 'right'
   loading?: boolean
   size?: 'small' | 'large' | 'medium'
+  justify?: FlexProps['justify']
 }
 export const EmptyButton = ({
   children,
   icon,
   iconSide = 'left',
   loading,
   size = 'small',
+  justify = 'center',
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <ButtonIcon
-      buttonSide="left"
-      icon={icon}
-      iconSide={iconSide}
-      loading={loading}
-      size={size}
-    />
-    {children}
-    <ButtonIcon
-      buttonSide="right"
-      icon={icon}
-      iconSide={iconSide}
-      loading={loading}
-      size={size}
-    />
+    <Row
+      justify={justify}
+    >  
+      <ButtonIcon
+        buttonSide="left"
+        icon={icon}
+        iconSide={iconSide}
+        loading={loading}
+        size={size}
+      />
+      {children}
+      <ButtonIcon
+        buttonSide="right"
+        icon={icon}
+        iconSide={iconSide}
+        loading={loading}
+        size={size}
+      />
+    </Row>
   </TextButton>
 )

redisinsight/ui/src/components/base/forms/FormField.tsx

@@ -1,9 +1,20 @@
 import React from 'react'
 import { IconButton as RedisUiIconButton } from '@redis-ui/components'
+import * as Icons from 'uiSrc/components/base/icons/iconRegistry'
+import { AllIconsType } from 'uiSrc/components/base/icons'
 
 export type ButtonProps = React.ComponentProps<typeof RedisUiIconButton>
 
 export type IconType = ButtonProps['icon']
-export const IconButton = (props: ButtonProps) => (
-  <RedisUiIconButton {...props} />
-)
+export type IconButtonProps = Omit<ButtonProps, 'icon'> & {
+  icon: IconType | string
+}
+export const IconButton = ({ icon, size, ...props }: IconButtonProps) => {
+  let buttonIcon: IconType
+  if (typeof icon === 'string') {
+    buttonIcon = Icons[icon as AllIconsType]
+  } else {
+    buttonIcon = icon
+  }
+  return <RedisUiIconButton icon={buttonIcon} {...props} />
+}