#RI-6342 - fix auto-discovery flow

#RI-6343 - fix auto-discovery styles

Author: rsergeenko

redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import {
   EuiFlexGroup,
@@ -61,6 +61,9 @@ const DatabasePanelDialog = (props: Props) => {
   const { data: sentinelMasters } = useSelector(sentinelSelector)
   const { action, dbConnection } = useSelector(appRedirectionSelector)
 
+  const typeSelectedRef = useRef(typeSelected)
+  const connectionTypeRef = useRef(connectionType)
+
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -98,17 +101,18 @@ const DatabasePanelDialog = (props: Props) => {
     () => {
       if (connectionType === AddDbType.manual) return
 
+      if (connectionType === AddDbType.cloud) {
+        dispatch(resetDataRedisCluster())
+        dispatch(resetDataSentinel())
+        return
+      }
+
       switch (typeSelected) {
         case InstanceType.Sentinel: {
           dispatch(resetDataRedisCloud())
           dispatch(resetDataRedisCluster())
           break
         }
-        case InstanceType.RedisCloudPro: {
-          dispatch(resetDataRedisCluster())
-          dispatch(resetDataSentinel())
-          break
-        }
         case InstanceType.RedisEnterpriseCluster: {
           dispatch(resetDataRedisCloud())
           dispatch(resetDataSentinel())

redisinsight/ui/src/pages/home/styles.scss

@@ -70,6 +70,25 @@
     border-radius: 4px;
   }
 
+  .footerAddDatabase {
+    margin: 0;
+    width: 100%;
+    bottom: 0;
+    float: right;
+    text-align: right;
+    vertical-align: bottom;
+    padding: 15px 24px 0;
+    border-radius: 0 0 4px 4px;
+
+    border-top: 1px solid var(--euiColorLightShade);
+
+    .btn-cancel,
+    .btn-back {
+      margin-right: 10px;
+      min-width: 71px !important;
+    }
+  }
+
   .clusterDatabaseList,
   .clusterDatabaseListResult,
   .cloudDatabaseList,

redisinsight/ui/src/pages/rdi/home/header/RdiHeader.tsx

@@ -1,7 +1,6 @@
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'
 import React from 'react'
 import { useSelector } from 'react-redux'
-import cx from 'classnames'
 
 import { instancesSelector } from 'uiSrc/slices/rdi/instances'
 import SearchRdiList from '../search/SearchRdiList'
@@ -18,8 +17,7 @@ const RdiHeader = ({ onRdiInstanceClick }: Props) => {
       <EuiFlexGroup className="contentDL" alignItems="center" responsive={false} gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiButton fill color="secondary" onClick={onRdiInstanceClick} data-testid="rdi-instance">
-            <span className={cx('eui-showFor--s', 'eui-showFor--xs')}>+ RDI ENDPOINT</span>
-            <span className={cx('eui-hideFor--s', 'eui-hideFor--xs')}>+ Add RDI Endpoint</span>
+            <span>+ Endpoint</span>
           </EuiButton>
         </EuiFlexItem>
         {instances.length > 0 && (