Merge pull request #396 from RedisInsight/bugfix/RI-2561

#RI-2561 - fix showing redis stack logo

Author: rsergeenko

redisinsight/ui/src/pages/instance/InstancePage.tsx

@@ -5,8 +5,8 @@ import { useParams } from 'react-router-dom'
 import cx from 'classnames'
 
 import {
-  fetchInstanceAction,
-  getDatabaseConfigInfoAction,
+  fetchInstanceAction, fetchInstancesAction,
+  getDatabaseConfigInfoAction, instancesSelector,
 } from 'uiSrc/slices/instances'
 import {
   appContextSelector,
@@ -53,13 +53,16 @@ const InstancePage = ({ routes = [] }: Props) => {
   const dispatch = useDispatch()
   const { instanceId: connectionInstanceId } = useParams<{ instanceId: string }>()
   const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
+  const { data: modulesData } = useSelector(instancesSelector)
   const { isShowMonitor } = useSelector(monitorSelector)
   const { contextInstanceId } = useSelector(appContextSelector)
 
   const isShowBottomGroup = isShowCli || isShowHelper || isShowMonitor
 
   useEffect(() => {
-    dispatch(fetchInstanceAction(connectionInstanceId))
+    dispatch(fetchInstanceAction(connectionInstanceId, () => {
+      !modulesData.length && dispatch(fetchInstancesAction())
+    }))
     dispatch(getDatabaseConfigInfoAction(connectionInstanceId))
 
     if (contextInstanceId !== connectionInstanceId) {

redisinsight/ui/src/slices/instances.ts

@@ -52,6 +52,10 @@ const instancesSlice = createSlice({
     loadInstancesSuccess: (state, { payload }: { payload: Instance[] }) => {
       state.data = checkRediStack(payload)
       state.loading = false
+      if (state.connectedInstance.id) {
+        const isRediStack = state.data.find((db) => db.id === state.connectedInstance.id)?.isRediStack
+        state.connectedInstance.isRediStack = isRediStack || false
+      }
     },
     loadInstancesFailure: (state, { payload }) => {
       state.loading = false
@@ -135,7 +139,9 @@ const instancesSlice = createSlice({
 
     // set connected instance
     setConnectedInstance: (state, { payload }: { payload: Instance }) => {
-      state.connectedInstance = checkRediStack([payload])[0]
+      const isRediStack = state.data?.find((db) => db.id === state.connectedInstance.id)?.isRediStack
+      state.connectedInstance = payload
+      state.connectedInstance.isRediStack =  isRediStack || false
     },
 
     // reset connected instance
@@ -332,6 +338,7 @@ export function checkConnectToInstanceAction(
 ) {
   return async (dispatch: AppDispatch) => {
     dispatch(setDefaultInstance())
+    dispatch(resetConnectedInstance())
     try {
       const { status } = await apiService.get(`${ApiEndpoints.INSTANCE}/${id}/connect`)
 

redisinsight/ui/src/slices/interfaces/instances.ts

@@ -36,7 +36,7 @@ export interface Instance extends DatabaseInstanceResponse {
   isDeleting?: boolean;
   sentinelMaster?: SentinelMasterDto;
   modules: RedisModuleDto[];
-  isRediStack: boolean;
+  isRediStack?: boolean;
 }
 
 export enum ConnectionType {

redisinsight/ui/src/slices/tests/instances.spec.ts

@@ -36,6 +36,7 @@ import reducer, {
   changeInstanceAliasFailure,
   changeInstanceAliasSuccess,
   changeInstanceAliasAction,
+  resetConnectedInstance,
 } from '../instances'
 import { addErrorNotification, addMessageNotification, IAddInstanceErrorPayload } from '../app/notifications'
 import { ConnectionType, InitialStateInstances, Instance } from '../interfaces'
@@ -62,6 +63,7 @@ beforeEach(() => {
       password: null,
       connectionType: ConnectionType.Standalone,
       nameFromProvider: null,
+      modules: [],
       lastConnection: new Date('2021-04-22T09:03:56.917Z'),
     },
     {
@@ -73,6 +75,7 @@ beforeEach(() => {
       password: null,
       connectionType: ConnectionType.Standalone,
       nameFromProvider: null,
+      modules: [],
       tls: {
         verifyServerCert: true,
         caCertId: '70b95d32-c19d-4311-bb24-e684af12cf15',
@@ -89,6 +92,7 @@ beforeEach(() => {
       connectionType: ConnectionType.Sentinel,
       nameFromProvider: null,
       lastConnection: new Date('2021-04-22T18:40:44.031Z'),
+      modules: [],
       endpoints: [
         {
           host: 'localhost',
@@ -670,10 +674,11 @@ describe('instances slice', () => {
         // Assert
         const expectedActions = [
           setDefaultInstance(),
+          resetConnectedInstance(),
           setDefaultInstanceSuccess(),
         ]
 
-        expect(store.getActions().splice(0, 2)).toEqual(expectedActions)
+        expect(store.getActions().splice(0, expectedActions.length)).toEqual(expectedActions)
       })
 
       it('call both checkConnectToInstance and setDefaultInstanceFailure when fetch is fail', async () => {
@@ -702,6 +707,7 @@ describe('instances slice', () => {
         // Assert
         const expectedActions = [
           setDefaultInstance(),
+          resetConnectedInstance(),
           setDefaultInstanceFailure(responsePayload.response.data.message),
           addErrorNotification(responsePayload as IAddInstanceErrorPayload),
         ]