Remove Omit and replace size with $size; make src and alt required

Author: dantovska

redisinsight/ui/src/components/base/display/image/RiImage.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { RiImageProps, StyledImage } from './image.styles'
 
-const RiImage = ({ size, src, alt, ...rest }: RiImageProps) => (
-  <StyledImage src={src} alt={alt} size={size} {...rest} />
+const RiImage = ({ $size, src, alt, ...rest }: RiImageProps) => (
+  <StyledImage src={src} alt={alt} $size={$size} {...rest} />
 )
 
 export default RiImage

redisinsight/ui/src/components/base/display/image/image.styles.ts

@@ -27,15 +27,11 @@ export const imageSizeStyles = {
 export type RiImageSize = (typeof SIZES)[number]
 
 export interface RiImageProps extends HTMLAttributes<HTMLImageElement> {
-  size?: RiImageSize
-  src?: string
-  alt?: string
+  $size?: RiImageSize
+  src: string
+  alt: string
 }
 
-export const StyledImage = styled.img<
-  Omit<RiImageProps, 'size'> & {
-    size?: RiImageSize
-  }
->`
-  ${({ size = 'original' }) => imageSizeStyles[size]}
+export const StyledImage = styled.img<RiImageProps>`
+  ${({ $size = 'original' }) => imageSizeStyles[$size]}
 `

redisinsight/ui/src/components/oauth/oauth-sign-in-button/OAuthSignInButton.tsx

@@ -29,7 +29,7 @@ const OAuthSignInButton = (props: Props) => {
           }
           data-testid="cloud-sign-in-btn"
         >
-          <RiImage className={styles.logo} src={RedisLogo} alt="" />
+          <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" />
           <span>Cloud sign in</span>
         </SecondaryButton>
       )}

redisinsight/ui/src/components/oauth/shared/oauth-advantages/OAuthAdvantages.tsx

@@ -10,7 +10,7 @@ import styles from './styles.module.scss'
 
 const OAuthAdvantages = () => (
   <div className={styles.container} data-testid="oauth-advantages">
-    <RiImage className={styles.logo} src={RedisLogo} alt="" />
+    <RiImage className={styles.logo} src={RedisLogo} alt="Redis logo" />
     <Title size="S" className={styles.title}>
       Cloud
     </Title>

redisinsight/ui/src/pages/rdi/statistics/empty/Empty.tsx

@@ -21,7 +21,7 @@ const Empty = ({ rdiInstanceId }: Props) => {
   return (
     <Panel>
       <div className={styles.emptyPipelineContainer} data-testid="empty-pipeline">
-        <RiImage src={EmptyPipelineIcon} alt="empty" size="s" />
+        <RiImage src={EmptyPipelineIcon} alt="empty" $size="s" />
         <Spacer size="xl" />
         <Text>No pipeline deployed yet</Text>
         <Text className={styles.subTitle}>