refactor(ui): rework external link component

- change the display mode to inline-flex, so it does alignproperly when rendered with icon

re #RI-7415

Author: valkirilov

redisinsight/ui/src/components/base/external-link/ExternalLink.styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { Link } from '../link/Link'
+
+export const StyledExternalLink = styled(Link)`
+  display: inline-flex;
+`

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

@@ -1,7 +1,8 @@
 import React from 'react'
 import { IconProps } from 'uiSrc/components/base/icons'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link, type RiLinkProps } from 'uiSrc/components/base/link/Link'
+import { type RiLinkProps } from 'uiSrc/components/base/link/Link'
+import { StyledExternalLink } from './ExternalLink.styles'
 
 export type Props = RiLinkProps & {
   href: string
@@ -30,11 +31,11 @@ const ExternalLink = (props: Props) => {
   )
 
   return (
-    <Link {...rest} target="_blank" rel="noopener noreferrer">
+    <StyledExternalLink {...rest} target="_blank" rel="noopener noreferrer">
       {iconPosition === 'left' && <ArrowIcon />}
       {children}
       {iconPosition === 'right' && <ArrowIcon />}
-    </Link>
+    </StyledExternalLink>
   )
 }
 

redisinsight/ui/src/components/base/external-link/styles.module.scss

@@ -165,12 +165,7 @@ export const INFINITE_MESSAGES: InfiniteMessagesType = {
           <Spacer size="m" />
           <Row justify="between" align="center">
             <FlexItem>
-              <ExternalLink
-                href={MANAGE_DB_LINK}
-                iconSize="S"
-                variant="inline"
-                style={{ display: 'inline-flex' }}
-              >
+              <ExternalLink href={MANAGE_DB_LINK} iconSize="S" variant="inline">
                 Manage DB
               </ExternalLink>
             </FlexItem>