Merge pull request #4292 from RedisInsight/fe/feature/RI-6554

#RI-6554 - update icons and connectivity buttons

Author: mariasergeenko

redisinsight/ui/src/assets/img/redis-software.svg

@@ -23,6 +23,7 @@ import {
 import { Pages } from 'uiSrc/constants'
 import ConnectivityOptions from './components/connectivity-options'
 import ConnectionUrl from './components/connection-url'
+import { Values } from './constants'
 
 import styles from './styles.module.scss'
 
@@ -63,9 +64,9 @@ const AddDatabaseScreen = (props: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
 
-  const validate = (values: any) => {
+  const validate = (values: Values) => {
     const payload = getPayload(values.connectionURL, true)
-    setIsInvalid(!payload && values.connectionURL)
+    setIsInvalid(!payload && !!values.connectionURL)
   }
 
   const handleTestConnection = () => {
@@ -87,7 +88,7 @@ const AddDatabaseScreen = (props: Props) => {
     }))
   }
 
-  const formik = useFormik({
+  const formik = useFormik<Values>({
     initialValues: {
       connectionURL: 'redis://[email protected]:6379'
     },

redisinsight/ui/src/assets/img/shield.svg

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EuiButton, EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'
+import { EuiBadge, EuiButton, EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'
 import cx from 'classnames'
 import { AddDbType } from 'uiSrc/pages/home/constants'
 import { OAuthSsoHandlerDialog } from 'uiSrc/components'
@@ -8,7 +8,7 @@ import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 
 import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react'
-import StarIcon from 'uiSrc/assets/img/icons/star.svg?react'
+import RocketIcon from 'uiSrc/assets/img/oauth/rocket.svg?react'
 
 import { CONNECTIVITY_OPTIONS } from '../../constants'
 
@@ -24,30 +24,31 @@ const ConnectivityOptions = (props: Props) => {
 
   return (
     <>
-      <section>
+      <section className={styles.cloudSection}>
         <EuiTitle size="xs" className={styles.sectionTitle}>
           <span>
-            <CloudIcon className={styles.cloudIcon} />Get started with Redis Cloud account
+            Get started with Redis Cloud account
           </span>
         </EuiTitle>
         <EuiSpacer />
-        <EuiFlexGrid columns={3}>
-          <EuiFlexItem grow={1}>
+        <EuiFlexGrid>
+          <EuiFlexItem grow={false}>
             <EuiButton
               color="secondary"
               className={styles.typeBtn}
               onClick={() => onClickOption(AddDbType.cloud)}
               data-testid="discover-cloud-btn"
             >
-              Add Cloud databases
+              <CloudIcon className={styles.btnIcon} />
+              Add databases
             </EuiButton>
           </EuiFlexItem>
-          <EuiFlexItem grow={1}>
+          <EuiFlexItem grow={false}>
             <OAuthSsoHandlerDialog>
               {(ssoCloudHandlerClick, isSSOEnabled) => (
                 <EuiButton
                   color="secondary"
-                  className={cx(styles.typeBtn, styles.primary)}
+                  className={styles.typeBtn}
                   href={getUtmExternalLink(EXTERNAL_LINKS.tryFree, {
                     campaign: UTM_CAMPAINGS[OAuthSocialSource.AddDbForm]
                   })}
@@ -61,8 +62,9 @@ const ConnectivityOptions = (props: Props) => {
                   }}
                   data-testid="create-free-db-btn"
                 >
-                  <StarIcon className={styles.star} />
-                  Create free database
+                  <EuiBadge color="subdued" className={styles.freeBadge}>Free</EuiBadge>
+                  <RocketIcon className={cx(styles.btnIcon, styles.rocket)} />
+                  New database
                 </EuiButton>
               )}
             </OAuthSsoHandlerDialog>
@@ -76,15 +78,16 @@ const ConnectivityOptions = (props: Props) => {
           <span>More connectivity options</span>
         </EuiTitle>
         <EuiSpacer />
-        <EuiFlexGrid columns={3}>
-          {CONNECTIVITY_OPTIONS.map(({ id, type, title }) => (
-            <EuiFlexItem grow={1} key={id}>
+        <EuiFlexGrid>
+          {CONNECTIVITY_OPTIONS.map(({ id, type, title, icon }) => (
+            <EuiFlexItem grow={false} key={id}>
               <EuiButton
                 color="secondary"
-                className={styles.typeBtn}
+                className={cx(styles.typeBtn, styles.small)}
                 onClick={() => onClickOption(type)}
                 data-testid={`option-btn-${id}`}
               >
+                {icon?.({ className: styles.btnIcon })}
                 {title}
               </EuiButton>
             </EuiFlexItem>

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -2,29 +2,72 @@
   font-weight: 400 !important;
   display: flex;
   align-items: center;
+}
 
-  .cloudIcon {
-    margin-right: 8px;
+.cloudSection {
+  .typeBtn {
+    min-width: 160px !important;
   }
 }
 
 .typeBtn {
+  position: relative;
   width: 100%;
-  height: 76px !important;
+  height: 84px !important;
+  padding: 0 12px;
 
   border-color: var(--separatorColorLight) !important;
   color: var(--buttonSecondaryTextColor) !important;
   box-shadow: none !important;
 
-  &.primary {
-    border-color: var(--euiColorSecondary) !important;
+  &.small {
+    padding: 0 8px;
+    height: 52px !important;
+
+    :global(.euiButton__text) {
+      flex-direction: row;
+    }
+
+    .btnIcon {
+      margin-right: 8px;
+    }
   }
 
   &:hover {
     background-color: transparent !important;
   }
-}
 
-.star {
-  margin-right: 4px;
+  :global(.euiButton__text) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-weight: 400 !important;
+  }
+
+  &:not(.small) {
+    .btnIcon {
+      margin-bottom: 8px;
+
+      &.rocket {
+        fill: currentColor;
+        height: 24px;
+        width: 24px;
+      }
+    }
+  }
+
+
+
+  .freeBadge {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+
+    text-transform: uppercase;
+    background-color: var(--euiColorLightestShade);
+    border: 1px solid var(--euiColorPrimary);
+    border-radius: 2px !important;
+  }
 }

redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { EuiIcon } from '@elastic/eui'
+import { AddDbType } from 'uiSrc/pages/home/constants'
+
+import ShieldIcon from 'uiSrc/assets/img/shield.svg?react'
+import RedisSoftwareIcon from 'uiSrc/assets/img/redis-software.svg?react'
+
+export interface Values {
+  connectionURL: string
+}
+
+export const CONNECTIVITY_OPTIONS = [
+  {
+    id: 'sentinel',
+    title: 'Redis Sentinel',
+    type: AddDbType.sentinel,
+    icon: (props: Record<string, any> = {}) => <ShieldIcon {...props} />
+  },
+  {
+    id: 'software',
+    title: 'Redis Software',
+    type: AddDbType.software,
+    icon: (props: Record<string, any> = {}) => <RedisSoftwareIcon {...props} />
+  },
+  {
+    id: 'import',
+    title: 'Import from file',
+    type: AddDbType.import,
+    icon: (props: Record<string, any> = {}) => <EuiIcon type="importAction" {...props} />
+  }
+]