#RI-6351 - fix system theme changing

#RI-6354 - fix autodiscovery logout
#RI-6350 - fix endless spinner

Author: rsergeenko

redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx

@@ -7,7 +7,7 @@ import { act, cleanup, mockedStore, render, screen,
   mockedStoreFn,
 } from 'uiSrc/utils/test-utils'
 
-import { getUserInfo, logoutUser, oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
+import { getUserInfo, logoutUser, oauthCloudUserSelector, setInitialLoadingState } from 'uiSrc/slices/oauth/cloud'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { loadSubscriptionsRedisCloud, setSSOFlow } from 'uiSrc/slices/instances/cloud'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
@@ -24,6 +24,7 @@ jest.mock('uiSrc/slices/oauth/cloud', () => ({
     loading: false,
     data: null,
     error: '',
+    initialLoading: false
   }),
 }))
 
@@ -53,6 +54,12 @@ describe('OAuthUserProfile', () => {
   })
 
   it('should render loading spinner initially', () => {
+    (oauthCloudUserSelector as jest.Mock).mockReturnValueOnce({
+      loading: false,
+      data: null,
+      error: '',
+      initialLoading: true
+    })
     render(<OAuthUserProfile {...mockedProps} />)
 
     expect(screen.getByTestId('oath-user-profile-spinner')).toBeInTheDocument()
@@ -132,7 +139,11 @@ describe('OAuthUserProfile', () => {
       }
     })
 
-    expect(store.getActions()).toEqual([setSSOFlow(OAuthSocialAction.Import), loadSubscriptionsRedisCloud()]);
+    expect(store.getActions()).toEqual([
+      setInitialLoadingState(false),
+      setSSOFlow(OAuthSocialAction.Import),
+      loadSubscriptionsRedisCloud()
+    ]);
 
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
@@ -154,7 +165,7 @@ describe('OAuthUserProfile', () => {
 
     fireEvent.click(screen.getByTestId('profile-account-2'))
 
-    expect(store.getActions()).toEqual([getUserInfo()]);
+    expect(store.getActions()).toEqual([setInitialLoadingState(false), getUserInfo()]);
 
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
@@ -195,6 +206,6 @@ describe('OAuthUserProfile', () => {
 
     fireEvent.click(screen.getByTestId('profile-logout'))
 
-    expect(store.getActions()).toEqual([logoutUser(), setSSOFlow()])
+    expect(store.getActions()).toEqual([setInitialLoadingState(false), logoutUser(), setSSOFlow()])
   })
 })

redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.tsx

@@ -5,7 +5,12 @@ import { EuiIcon, EuiLink, EuiLoadingSpinner, EuiPopover, EuiText } from '@elast
 import cx from 'classnames'
 import { useHistory } from 'react-router-dom'
 import OAuthSignInButton from 'uiSrc/components/oauth/oauth-sign-in-button'
-import { activateAccount, logoutUserAction, oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
+import {
+  activateAccount,
+  logoutUserAction,
+  oauthCloudUserSelector,
+  setInitialLoadingState
+} from 'uiSrc/slices/oauth/cloud'
 import CloudIcon from 'uiSrc/assets/img/oauth/cloud.svg?react'
 
 import { getUtmExternalLink } from 'uiSrc/utils/links'
@@ -27,26 +32,25 @@ export interface Props {
 const OAuthUserProfile = (props: Props) => {
   const { source } = props
   const [selectingAccountId, setSelectingAccountId] = useState<number>()
-  const { loading, error, data } = useSelector(oauthCloudUserSelector)
+  const { error, data, initialLoading } = useSelector(oauthCloudUserSelector)
   const { server } = useSelector(appInfoSelector)
 
   const [isProfileOpen, setIsProfileOpen] = useState(false)
   const [isImportLoading, setIsImportLoading] = useState(false)
-  const [profileLoading, setProfileLoading] = useState(true)
 
   const dispatch = useDispatch()
   const history = useHistory()
 
   useEffect(() => {
-    if (!loading && (error || data)) {
-      setProfileLoading(false)
+    if (data || error) {
+      dispatch(setInitialLoadingState(false))
     }
-  }, [data, loading, error])
+  }, [data, error])
 
   if (!data) {
     if (server?.packageType === PackageType.Mas) return null
 
-    if (profileLoading) {
+    if (initialLoading) {
       return (
         <div className={styles.loadingContainer}>
           <EuiLoadingSpinner

redisinsight/ui/src/contexts/themeContext.tsx

@@ -39,13 +39,14 @@ export class ThemeProvider extends React.Component<Props> {
 
   getSystemTheme = () => (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches ? Theme.Dark : Theme.Light)
 
-  changeTheme = (themeValue: any) => {
+  changeTheme = async (themeValue: any) => {
     let actualTheme = themeValue
     if (themeValue === Theme.System) {
       actualTheme = this.getSystemTheme()
     }
 
-    ipcThemeChange(themeValue)
+    // since change theme is async need to wait to have a proper prefers-color-scheme
+    await ipcThemeChange(themeValue)
 
     this.setState({ theme: actualTheme, usingSystemTheme: themeValue === Theme.System }, () => {
       themeService.applyTheme(themeValue)

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabasesPage.tsx

@@ -48,6 +48,7 @@ const RedisCloudDatabasesPage = () => {
   } = useSelector(cloudSelector)
   const { data: userOAuthProfile } = useSelector(oauthCloudUserSelector)
   const currentAccountIdRef = useRef(userOAuthProfile?.id)
+  const ssoFlowRef = useRef(ssoFlow)
 
   setTitle('Redis Cloud Databases')
 
@@ -60,7 +61,7 @@ const RedisCloudDatabasesPage = () => {
   }, [])
 
   useEffect(() => {
-    if (ssoFlow !== OAuthSocialAction.Import) return
+    if (ssoFlowRef.current !== OAuthSocialAction.Import) return
 
     if (!userOAuthProfile) {
       dispatch(resetDataRedisCloud())
@@ -73,7 +74,7 @@ const RedisCloudDatabasesPage = () => {
         history.push(Pages.redisCloudSubscriptions)
       }))
     }
-  }, [ssoFlow, userOAuthProfile])
+  }, [userOAuthProfile])
 
   useEffect(() => {
     if (instancesAdded.length) {

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptionsPage.tsx

@@ -48,6 +48,7 @@ const RedisCloudSubscriptionsPage = () => {
   } = useSelector(cloudSelector)
   const { data: userOAuthProfile } = useSelector(oauthCloudUserSelector)
   const currentAccountIdRef = useRef(userOAuthProfile?.id)
+  const ssoFlowRef = useRef(ssoFlow)
 
   setTitle('Redis Cloud Subscriptions')
 
@@ -58,7 +59,7 @@ const RedisCloudSubscriptionsPage = () => {
   }, [])
 
   useEffect(() => {
-    if (ssoFlow !== OAuthSocialAction.Import) return
+    if (ssoFlowRef.current !== OAuthSocialAction.Import) return
 
     if (!userOAuthProfile) {
       history.push(Pages.home)
@@ -69,7 +70,7 @@ const RedisCloudSubscriptionsPage = () => {
       dispatch(fetchSubscriptionsRedisCloud(null, true))
       currentAccountIdRef.current = userOAuthProfile?.id
     }
-  }, [ssoFlow, userOAuthProfile])
+  }, [userOAuthProfile])
 
   useEffect(() => {
     if (instancesLoaded) {

redisinsight/ui/src/services/theme.ts

@@ -16,11 +16,7 @@ class ThemeService {
     let actualTheme = newTheme
 
     if (newTheme === Theme.System) {
-      if (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches) {
-        actualTheme = Theme.Dark
-      } else {
-        actualTheme = Theme.Light
-      }
+      actualTheme = window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches ? Theme.Dark : Theme.Light
     }
 
     const sheet = new CSSStyleSheet()

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

@@ -17,6 +17,7 @@ export interface StateAppOAuth {
   source: Nullable<OAuthSocialSource>
   job: Nullable<CloudJobInfoState>
   user: {
+    initialLoading: boolean
     error: string
     loading: boolean
     data: Nullable<CloudUser>

redisinsight/ui/src/slices/oauth/cloud.ts

@@ -52,6 +52,7 @@ export const initialState: StateAppOAuth = {
   isOpenSelectAccountDialog: false,
   showProgress: true,
   user: {
+    initialLoading: true,
     loading: false,
     error: '',
     data: null,
@@ -101,6 +102,7 @@ const oauthCloudSlice = createSlice({
     getUserInfoFailure: (state, { payload }: PayloadAction<string>) => {
       state.user.loading = false
       state.user.error = payload
+      state.user.data = null
     },
     addFreeDb: (state) => {
       state.user.freeDb.loading = true
@@ -191,6 +193,9 @@ const oauthCloudSlice = createSlice({
     logoutUserFailure: (state) => {
       state.user.loading = false
       state.user.data = null
+    },
+    setInitialLoadingState: (state, { payload }: PayloadAction<boolean>) => {
+      state.user.initialLoading = payload
     }
   },
 })
@@ -228,7 +233,8 @@ export const {
   removeAllCapiKeysFailure,
   logoutUser,
   logoutUserSuccess,
-  logoutUserFailure
+  logoutUserFailure,
+  setInitialLoadingState
 } = oauthCloudSlice.actions
 
 // A selector

redisinsight/ui/src/slices/tests/oauth/cloud.spec.ts

@@ -56,7 +56,7 @@ import reducer, {
   logoutUser,
   logoutUserSuccess,
   logoutUserFailure,
-  logoutUserAction, oauthCloudUserSelector
+  logoutUserAction, oauthCloudUserSelector, setInitialLoadingState
 } from '../../oauth/cloud'
 
 let store: typeof mockedStore
@@ -848,6 +848,27 @@ describe('oauth cloud slice', () => {
     })
   })
 
+  describe('setInitialLoadingState', () => {
+    it('should properly set the state', () => {
+      // Arrange
+      const userState = {
+        ...initialState.user,
+        initialLoading: false
+      }
+
+      // Act
+      const nextState = reducer(initialState as any, setInitialLoadingState(false))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        oauth: {
+          cloud: nextState
+        }
+      })
+      expect(oauthCloudUserSelector(rootState)).toEqual(userState)
+    })
+  })
+
   describe('thunks', () => {
     describe('fetchUserInfo', () => {
       it('call both fetchUserInfo and getUserInfoSuccess when fetch is successed', async () => {