Merge pull request #388 from RedisInsight/fix/RI-2475_RI-2479_RI-2485_RI-2489_bugfixing

#RI2475, #2479, #2485, #2489 - fix settings page, redisstack edit page

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -5,8 +5,10 @@ import cx from 'classnames'
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'
 
 import { Pages } from 'uiSrc/constants'
+import { BuildType } from 'uiSrc/constants/env'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { connectedInstanceOverviewSelector, connectedInstanceSelector } from 'uiSrc/slices/instances'
+import { appInfoSelector } from 'uiSrc/slices/app/info'
 import ShortInstanceInfo from 'uiSrc/components/instance-header/components/ShortInstanceInfo'
 import DatabaseOverviewWrapper from 'uiSrc/components/database-overview/DatabaseOverviewWrapper'
 
@@ -22,6 +24,7 @@ const InstanceHeader = () => {
     db = 0
   } = useSelector(connectedInstanceSelector)
   const { version } = useSelector(connectedInstanceOverviewSelector)
+  const { server } = useSelector(appInfoSelector)
   const history = useHistory()
   const [windowDimensions, setWindowDimensions] = useState(0)
 
@@ -49,14 +52,14 @@ const InstanceHeader = () => {
             <div>
               <EuiToolTip
                 position="bottom"
-                content="My Redis databases"
+                content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
               >
                 <EuiButtonIcon
                   display="empty"
                   size="s"
                   iconSize="l"
                   iconType="sortLeft"
-                  aria-label="My Redis databases"
+                  aria-label={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
                   data-testid="my-redis-db-icon"
                   onClick={goHome}
                 />

redisinsight/ui/src/components/main-router/constants/redisStackRoutes.ts

@@ -1,6 +1,6 @@
 import { PageNames, Pages, IRoute } from 'uiSrc/constants'
 import {
-  BrowserPage, InstancePage, SettingsPage,
+  BrowserPage, InstancePage,
 } from 'uiSrc/pages'
 import WorkbenchPage from 'uiSrc/pages/workbench'
 import EditConnection from 'uiSrc/pages/redisStack/components/edit-connection'
@@ -28,10 +28,6 @@ const ROUTES: IRoute[] = [
     component: EditConnection,
   },
   ...COMMON_ROUTES,
-  {
-    path: Pages.settings,
-    component: SettingsPage,
-  },
   {
     path: '/:instanceId',
     protected: true,

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -233,7 +233,7 @@ const NavigationMenu = ({ buildType }: IProps) => {
     <EuiPageSideBar aria-label="Main navigation" className={cx(styles.navigation, 'eui-yScroll')}>
       <div className={styles.container}>
         <EuiToolTip
-          content={buildType === BuildType.RedisStack ? 'Redis Stack' : 'My Redis databases'}
+          content={buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
           position="right"
         >
           <span className={styles.iconLogo}>

redisinsight/ui/src/pages/redisStack/components/edit-connection/EditConnection.tsx

@@ -49,6 +49,8 @@ const EditConnection = () => {
     }
   }, [])
 
+  const onClose = () => history.goBack()
+
   const getInstanceInfo = async () => {
     try {
       setState(DEFAULT_STATE)
@@ -68,7 +70,7 @@ const EditConnection = () => {
   const onInstanceChanged = () => {
     if (server?.fixedDatabaseId) {
       dispatch(setConnectedInstanceId(server.fixedDatabaseId))
-      history.push(Pages.browser(server?.fixedDatabaseId))
+      history.goBack()
     }
   }
 
@@ -78,6 +80,7 @@ const EditConnection = () => {
 
   const CreateCloudBtn = ({ content }: { content: ContentCreateRedis }) => {
     const { title, description, styles, links } = content
+
     // @ts-ignore
     const linkStyles = styles ? styles[theme] : {}
     return (
@@ -123,6 +126,7 @@ const EditConnection = () => {
                     onDbAdded={() => {}}
                     onDbEdited={onInstanceChanged}
                     onAliasEdited={onAliasChanged}
+                    onClose={onClose}
                   />
                 </div>
                 <div id="footerDatabaseForm" />