Merge pull request #3441 from RedisInsight/release/2.50.0

Release/2.50.0

Author: vlad-dargel

redisinsight/ui/src/components/global-subscriptions/CommonAppSubscription/CommonAppSubscription.spec.tsx

@@ -8,12 +8,14 @@ import { setNewNotificationReceived, setLastReceivedNotification } from 'uiSrc/s
 import { setIsConnected } from 'uiSrc/slices/app/socket-connection'
 import { NotificationType } from 'uiSrc/slices/interfaces'
 import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
-import { SocketEvent } from 'uiSrc/constants'
+import { CloudJobEvents, SocketEvent } from 'uiSrc/constants'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { RecommendationsSocketEvents } from 'uiSrc/constants/recommendations'
 import { addUnreadRecommendations } from 'uiSrc/slices/recommendations/recommendations'
+import { logoutUser } from 'uiSrc/slices/oauth/cloud'
 import { NotificationsDto } from 'apiSrc/modules/notification/dto'
 
+import { CloudJobInfo } from 'apiSrc/modules/cloud/job/models'
 import CommonAppSubscription from './CommonAppSubscription'
 
 let store: typeof mockedStore

redisinsight/ui/src/components/global-subscriptions/CommonAppSubscription/CommonAppSubscription.tsx

@@ -2,8 +2,8 @@ import { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { io, Socket } from 'socket.io-client'
 
-import { remove } from 'lodash'
-import { CloudJobEvents, SocketEvent, SocketFeaturesEvent } from 'uiSrc/constants'
+import { get, remove } from 'lodash'
+import { ApiStatusCode, CloudJobEvents, SocketEvent, SocketFeaturesEvent } from 'uiSrc/constants'
 import { NotificationEvent } from 'uiSrc/constants/notifications'
 import { setNewNotificationAction } from 'uiSrc/slices/app/notifications'
 import { setIsConnected } from 'uiSrc/slices/app/socket-connection'
@@ -13,7 +13,7 @@ import { addUnreadRecommendations } from 'uiSrc/slices/recommendations/recommend
 import { RecommendationsSocketEvents } from 'uiSrc/constants/recommendations'
 import { getFeatureFlagsSuccess } from 'uiSrc/slices/app/features'
 import { CustomHeaders } from 'uiSrc/constants/api'
-import { oauthCloudJobSelector, setJob } from 'uiSrc/slices/oauth/cloud'
+import { logoutUser, oauthCloudJobSelector, setJob } from 'uiSrc/slices/oauth/cloud'
 import { CloudJobName } from 'uiSrc/electron/constants'
 import { CloudJobInfo } from 'apiSrc/modules/cloud/job/models'
 
@@ -55,6 +55,7 @@ const CommonAppSubscription = () => {
 
     socketRef.current.on(CloudJobEvents.Monitor, (data: CloudJobInfo) => {
       const jobName = data.name as unknown
+
       if (
         jobName === CloudJobName.CreateFreeDatabase
         || jobName === CloudJobName.CreateFreeSubscriptionAndDatabase

redisinsight/ui/src/components/notifications/components/infinite-messages/InfiniteMessages.tsx

@@ -10,6 +10,7 @@ import {
   EuiTitle
 } from '@elastic/eui'
 import { find } from 'lodash'
+import cx from 'classnames'
 import { CloudJobStep } from 'uiSrc/electron/constants'
 import ExternalLink from 'uiSrc/components/base/external-link'
 import ChampagneIcon from 'uiSrc/assets/img/icons/champagne.svg'
@@ -42,7 +43,7 @@ export const INFINITE_MESSAGES = {
       >
         <EuiFlexGroup justifyContent="flexEnd" direction="row" gutterSize="none">
           <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner className="infiniteMessage__icon" />
+            <EuiLoadingSpinner className={cx('infiniteMessage__icon', styles.loading)} />
           </EuiFlexItem>
           <EuiFlexItem grow>
             <EuiTitle className="infiniteMessage__title">
@@ -67,7 +68,7 @@ export const INFINITE_MESSAGES = {
       >
         <EuiFlexGroup justifyContent="flexEnd" direction="row" gutterSize="none">
           <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner className="infiniteMessage__icon" />
+            <EuiLoadingSpinner className={cx('infiniteMessage__icon', styles.loading)} />
           </EuiFlexItem>
           <EuiFlexItem grow>
             <EuiTitle className="infiniteMessage__title">
@@ -259,7 +260,7 @@ export const INFINITE_MESSAGES = {
       >
         <EuiFlexGroup justifyContent="flexEnd" direction="row" gutterSize="none">
           <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner className="infiniteMessage__icon" />
+            <EuiLoadingSpinner className={cx('infiniteMessage__icon', styles.loading)} />
           </EuiFlexItem>
           <EuiFlexItem grow>
             <EuiTitle className="infiniteMessage__title">

redisinsight/ui/src/components/notifications/components/infinite-messages/styles.module.scss

@@ -9,3 +9,7 @@
     margin-right: 4px;
   }
 }
+
+.loading {
+  border-top-color: var(--euiColorGhost) !important;
+}

redisinsight/ui/src/components/oauth/oauth-jobs/OAuthJobs.spec.tsx

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash'
 import { useSelector } from 'react-redux'
 import { AxiosError } from 'axios'
 import { cleanup, clearStoreActions, mockedStore, render } from 'uiSrc/utils/test-utils'
-import { oauthCloudJobSelector, setJob, setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
+import { logoutUser, oauthCloudJobSelector, setJob, setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
 import { CloudJobStatus, CloudJobName, CloudJobStep } from 'uiSrc/electron/constants'
 import { addErrorNotification, addInfiniteNotification, removeInfiniteNotification } from 'uiSrc/slices/app/notifications'
 import { RootState } from 'uiSrc/slices/store'
@@ -203,4 +203,38 @@ describe('OAuthJobs', () => {
       clearStoreActions(expectedActions)
     )
   })
+
+  it('should call logoutUser when statusCode is 401', async () => {
+    const mockDatabaseId = '123'
+    const error = {
+      statusCode: 401,
+      errorCode: CustomErrorCodes.CloudSubscriptionAlreadyExistsFree,
+      resource: {
+        databaseId: mockDatabaseId
+      }
+    };
+    (oauthCloudJobSelector as jest.Mock).mockImplementation(() => ({
+      status: ''
+    }))
+
+    const { rerender } = render(<OAuthJobs />);
+
+    (oauthCloudJobSelector as jest.Mock).mockImplementation(() => ({
+      status: CloudJobStatus.Failed,
+      error,
+    }))
+
+    rerender(<OAuthJobs />)
+
+    const expectedActions = [
+      logoutUser(),
+      addInfiniteNotification(INFINITE_MESSAGES.DATABASE_EXISTS()),
+      setSSOFlow(),
+      setSocialDialogState(null),
+      removeInfiniteNotification(InfiniteMessagesIds.oAuthProgress),
+    ]
+    expect(clearStoreActions(store.getActions())).toEqual(
+      clearStoreActions(expectedActions)
+    )
+  })
 })

redisinsight/ui/src/components/oauth/oauth-jobs/OAuthJobs.tsx

@@ -8,6 +8,7 @@ import { fetchInstancesAction } from 'uiSrc/slices/instances/instances'
 import {
   createFreeDbJob,
   createFreeDbSuccess,
+  logoutUser,
   oauthCloudJobSelector,
   oauthCloudSelector,
   setJob,
@@ -18,7 +19,7 @@ import { addErrorNotification, addInfiniteNotification, removeInfiniteNotificati
 import { parseCloudOAuthError } from 'uiSrc/utils'
 import { INFINITE_MESSAGES, InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
-import { BrowserStorageItem, CustomErrorCodes } from 'uiSrc/constants'
+import { ApiStatusCode, BrowserStorageItem, CustomErrorCodes } from 'uiSrc/constants'
 import { localStorageService } from 'uiSrc/services'
 import { setSSOFlow } from 'uiSrc/slices/instances/cloud'
 
@@ -49,10 +50,15 @@ const OAuthJobs = () => {
         break
 
       case CloudJobStatus.Failed:
-
         const errorCode = get(error, 'errorCode', 0) as CustomErrorCodes
         const subscriptionId = get(error, 'resource.subscriptionId', 0)
         const resources = get(error, 'resource', {}) as CloudImportDatabaseResources
+        const statusCode = get(error, 'statusCode', 0) as number
+
+        if (statusCode === ApiStatusCode.Unauthorized) {
+          dispatch(logoutUser())
+        }
+
         // eslint-disable-next-line sonarjs/no-nested-switch
         switch (errorCode) {
           case CustomErrorCodes.CloudDatabaseAlreadyExistsFree:

redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.spec.tsx

@@ -109,6 +109,7 @@ describe('OAuthCreateDb', () => {
       setSSOFlow(OAuthSocialAction.Create),
       showOAuthProgress(true),
       addInfiniteNotification(INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Credentials)),
+      setSocialDialogState(null),
       addFreeDb()
     ]
     expect(store.getActions()).toEqual(expectedActions)

redisinsight/ui/src/components/oauth/oauth-sso/oauth-create-db/OAuthCreateDb.tsx

@@ -5,6 +5,7 @@ import {
   createFreeDbJob,
   fetchPlans,
   oauthCloudUserSelector,
+  setSocialDialogState,
   showOAuthProgress
 } from 'uiSrc/slices/oauth/cloud'
 
@@ -62,6 +63,7 @@ const OAuthCreateDb = (props: Props) => {
     dispatch(addInfiniteNotification(INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Credentials)))
 
     if (isRecommended) {
+      dispatch(setSocialDialogState(null))
       dispatch(createFreeDbJob({
         name: CloudJobName.CreateFreeSubscriptionAndDatabase,
         resources: {

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/texts.tsx

@@ -82,7 +82,7 @@ export const EXPERT_CHAT_AGREEMENTS = (
 
 export const EXPERT_CHAT_INITIAL_MESSAGE = (
   <>
-    <EuiText size="xs">Welcome!</EuiText>
+    <EuiText size="xs">Hi!</EuiText>
     <EuiText size="xs">I am here to help you get started with data querying.</EuiText>
     <EuiText size="xs">Type <b>/help</b> to get more info on what questions I can answer.</EuiText>
     <EuiSpacer />