Ri-7586: issues pointed by Yarden

- set default link size to S
- add align=center in EmptyButton.tsx
- refactor run button to RunButton.tsx
- replace run button in QueryActions.tsx and QueryLiteActions.tsx
- replace secondary button with EmptyButton in AddItemsAction.tsx
- rework TextInput.tsx, to support passing refs
- fix Checkbox.tsx props
- use correct key in AppNavigation.tsx
- refactor button group usage in KeysHeader.tsx
- remove className in HashDetails.tsx, clean up css
- add key button, use the existing 'Secondary Invert' button from Redis UI
- fix tabs height to be the same as in redis-ui
- set ExternalLink.tsx iconSize to 'S'

Author: pd-redis

redisinsight/ui/src/components/base/external-link/ExternalLink.spec.tsx

@@ -5,6 +5,6 @@ import ExternalLink from './ExternalLink'
 
 describe('ExternalLink', () => {
   it('should render', () => {
-    expect(render(<ExternalLink />)).toBeTruthy()
+    expect(render(<ExternalLink href="https://redis.com" />)).toBeTruthy()
   })
 })

redisinsight/ui/src/components/base/external-link/ExternalLink.tsx

@@ -1,18 +1,25 @@
 import React from 'react'
 import { IconProps } from 'uiSrc/components/base/icons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link, type LinkProps } from 'uiSrc/components/base/link/Link'
+import { Link, type RiLinkProps } from 'uiSrc/components/base/link/Link'
 
-export type Props = LinkProps & {
+export type Props = RiLinkProps & {
   href: string
   iconPosition?: 'left' | 'right'
   iconSize?: IconProps['size']
-  variant?: LinkProps['variant']
-  size?: LinkProps['size']
+  variant?: RiLinkProps['variant']
+  size?: RiLinkProps['size']
+  color?: RiLinkProps['color']
 }
 
 const ExternalLink = (props: Props) => {
-  const { iconPosition = 'right', iconSize = 'M', children, ...rest } = props
+  const {
+    iconPosition = 'right',
+    iconSize = 'S',
+    size = 'S',
+    children,
+    ...rest
+  } = props
 
   const ArrowIcon = () => (
     <RiIcon type="ArrowDiagonalIcon" size={iconSize} color="informative400" />

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

@@ -22,7 +22,7 @@ export const EmptyButton = ({
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <Row justify={justify} gap="xs">
+    <Row justify={justify} gap="s" align="center">
       <ButtonIcon
         buttonSide="left"
         icon={icon}

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

@@ -4,9 +4,7 @@ import {
   CheckedType,
   Typography,
 } from '@redis-ui/components'
-import { BodySizesType } from '@redis-ui/components/dist/Typography/components/Body/Body.types'
-
-type Size = BodySizesType
+import { BodyProps } from 'uiSrc/components/base/text/text.styles'
 
 export type CheckboxProps = Omit<
   React.ComponentProps<typeof RedisUiCheckbox>,
@@ -16,7 +14,7 @@ export type CheckboxProps = Omit<
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   name?: string
   id?: string
-  labelSize?: Size
+  labelSize?: BodyProps['size']
 }
 
 type CheckboxLabelProps = Omit<

redisinsight/ui/src/components/base/inputs/TextInput.tsx

@@ -1,15 +1,19 @@
-import React, { ComponentProps } from 'react'
+import React, { ComponentProps, forwardRef } from 'react'
 
 import { Input as RedisInput, TooltipProvider } from '@redis-ui/components'
 
 export type RedisInputProps = ComponentProps<typeof RedisInput>
 
-export default function TextInput(props: RedisInputProps) {
+const TextInput = forwardRef<React.ElementRef<typeof RedisInput>, RedisInputProps>((props, ref) => {
   // eslint-disable-next-line react/destructuring-assignment
   if (props.error) {
-    return <TooltipProvider>
-      <RedisInput {...props} />
-    </TooltipProvider>
+    return (
+      <TooltipProvider>
+        <RedisInput ref={ref} {...props} />
+      </TooltipProvider>
+    )
   }
-  return <RedisInput {...props} />
-} 
+  return <RedisInput ref={ref} {...props} />
+})
+
+export default TextInput

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

@@ -9,13 +9,11 @@ export type ThemeSpacingKey = Extract<
   keyof Theme['core']['space'],
   `space${string}`
 >
-// Allow direct theme spacing values
-export type ThemeSpacingValue = Theme['core']['space'][ThemeSpacingKey]
 
 export type SpacerProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     children?: ReactNode
-    size?: SpacerSize | ThemeSpacingKey | ThemeSpacingValue
+    size?: SpacerSize | ThemeSpacingKey
   }
 
 export const spacerStyles: Record<SpacerSize, ReturnType<typeof css>> = {
@@ -41,13 +39,12 @@ export const spacerStyles: Record<SpacerSize, ReturnType<typeof css>> = {
 }
 
 const isThemeSpacingKey = (
-  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue,
+  size: SpacerSize | ThemeSpacingKey,
   theme: Theme,
-): size is ThemeSpacingKey =>
-  typeof size === 'string' && size in theme.core.space
+): size is ThemeSpacingKey => size in theme.core.space
 
 const getSpacingValue = (
-  size: SpacerSize | ThemeSpacingKey | ThemeSpacingValue,
+  size: SpacerSize | ThemeSpacingKey,
   theme: Theme,
 ): string | ReturnType<typeof css> => {
   if (isThemeSpacingKey(size, theme)) {

redisinsight/ui/src/components/base/link/Link.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { LinkProps } from '@redis-ui/components'
 export { type LinkProps } from '@redis-ui/components'
-import { StyledLink } from 'uiSrc/components/base/link/link.styles'
+import { StyledLink, RiLinkProps } from 'uiSrc/components/base/link/link.styles'
+export { type RiLinkProps }
 
-export const Link = ({ color, ...props }: LinkProps) => (
+export const Link = ({ color, ...props }: RiLinkProps) => (
   <StyledLink {...props} $color={color} />
 )

redisinsight/ui/src/components/command-helper/components/command-helper-search-output/CHSearchOutput.tsx

@@ -90,7 +90,7 @@ const CHSearchOutput = ({ searchedCommands }: Props) => {
                     handleClickCommand(e, command)
                   }}
                 >
-                  <UnderlineReverseLink color="text" variant="button">
+                  <UnderlineReverseLink href="#" color="text" variant="inline">
                     {command}
                   </UnderlineReverseLink>
                 </Text>

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

@@ -10,8 +10,6 @@ import { SwitchInput } from 'uiSrc/components/base/inputs'
 import { ItemDescription } from './components'
 import { IConsent } from '../ConsentsSettings'
 
-import styles from '../styles.module.scss'
-
 interface Props {
   consent: IConsent
   onChangeAgreement: (checked: boolean, name: string) => void
@@ -34,7 +32,7 @@ const ConsentOption = (props: Props) => {
       {isSettingsPage && consent.description && (
         <>
           <Spacer size="s" />
-          <Text size="s" className={styles.smallText} color="primary">
+          <Text size="M" color="primary">
             <ItemDescription
               description={consent.description}
               withLink={consent.linkToPrivacyPolicy}
@@ -56,11 +54,11 @@ const ConsentOption = (props: Props) => {
           />
         </FlexItem>
         <FlexItem>
-          <Text className={styles.smallText}>{parse(consent.label)}</Text>
+          <Text size="M">{parse(consent.label)}</Text>
           {!isSettingsPage && consent.description && (
             <>
               <Spacer size="s" />
-              <Text size="s" className={styles.smallText} color="primary">
+              <Text size="M" color="primary">
                 <ItemDescription
                   description={consent.description}
                   withLink={consent.linkToPrivacyPolicy}

redisinsight/ui/src/components/consents-settings/ConsentOption/components/ItemDescription.tsx

@@ -18,6 +18,7 @@ export const ItemDescription = ({
     {withLink && (
       <>
         <Link
+          variant="inline"
           color="primary"
           target="_blank"
           href={getUtmExternalLink(EXTERNAL_LINKS.legalPrivacyPolicy, {