Merge pull request #462 from RedisInsight/feature/RI-2390

#RI-2390 - rework tooltip about db index

Author: rsergeenko

redisinsight/ui/src/pages/home/components/AddInstanceForm/InstanceForm/InstanceForm.tsx

@@ -23,6 +23,7 @@ import {
   htmlIdGenerator,
   EuiLink,
   keys,
+  EuiCallOut,
 } from '@elastic/eui'
 import { capitalize, isEmpty, pick } from 'lodash'
 import ReactDOM from 'react-dom'
@@ -556,16 +557,6 @@ const AddStandaloneForm = (props: Props) => {
     </EuiToolTip>
   )
 
-  const AppendDbIndex = () => (
-    <EuiToolTip
-      anchorClassName="inputAppendIcon"
-      position="right"
-      content="Select the Redis logical database to work with in Browser and Workbench."
-    >
-      <EuiIcon type="iInCircle" style={{ cursor: 'pointer' }} />
-    </EuiToolTip>
-  )
-
   const AppendEndpoints = () => (
     <EuiToolTip
       title="Host:port"
@@ -731,18 +722,27 @@ const AddStandaloneForm = (props: Props) => {
         <EuiFlexGroup
           className={flexGroupClassName}
         >
+          <EuiFlexItem className={flexItemClassName}>
+            <EuiCallOut>
+              <EuiText size="s" data-testid="db-index-message">
+                When the database is added, you can select logical databases only in CLI.
+                To work with other logical databases in Browser and Workbench, add another database with the same host and port,
+                but a different database index.
+              </EuiText>
+            </EuiCallOut>
+          </EuiFlexItem>
           <EuiFlexItem className={cx(
             flexItemClassName,
             styles.dbInput,
             { [styles.dbInputBig]: !flexItemClassName }
           )}
           >
-            <EuiFormRow label="Database Index" helpText="Should not exceed 15.">
+            <EuiFormRow label="Select the Redis logical database" helpText="Should not exceed 15.">
               <EuiFieldNumber
                 name="db"
                 id="db"
                 data-testid="db"
-                style={{ width: '100%' }}
+                style={{ width: 120 }}
                 placeholder="Enter Database Index"
                 value={formik.values.db ?? '0'}
                 maxLength={6}
@@ -755,7 +755,6 @@ const AddStandaloneForm = (props: Props) => {
                 type="text"
                 min={0}
                 max={MAX_DATABASE_INDEX_NUMBER}
-                append={<AppendDbIndex />}
               />
             </EuiFormRow>
           </EuiFlexItem>