feat(admin-ui): add SNAuth repository switcher

Author: VargaJoe

apps/sensenet/src/components/app-providers.tsx

@@ -7,6 +7,7 @@ import {
   LocalizationProvider,
   PersonalSettingsContextProvider,
   RepositoryProvider,
+  RepositorySwitchContext,
   ResponsiveContextProvider,
   ThemeProvider,
 } from '../context'
@@ -23,6 +24,7 @@ import {
 } from '../services'
 import {
   clearActiveRepositorySelection,
+  hasSnAuthRepositoryTokens,
   normalizeRepositoryUrl,
   startSnAuthRepositoryLogin,
 } from '../services/repository-session'
@@ -65,6 +67,18 @@ export default function AppProviders({ children }: AppProvidersProps) {
     })
   }, [])
 
+  const switchRepository = useCallback((providedUrl: string) => {
+    const normalizedUrl = normalizeRepositoryUrl(providedUrl)
+
+    if (!hasSnAuthRepositoryTokens(normalizedUrl)) {
+      startSnAuthRepositoryLogin(normalizedUrl)
+    }
+
+    window.localStorage.setItem('authType', 'SNAuth')
+    setAuthType('SNAuth')
+    setUrl(normalizedUrl)
+  }, [])
+
   useEffect(() => {
     const repoUrl = new URL(window.location.href).searchParams.get('repoUrl')
     if (repoUrl) {
@@ -96,31 +110,33 @@ export default function AppProviders({ children }: AppProvidersProps) {
               <GridLoadingProvider>
                 <TreeLoadingProvider>
                   <ThemeProvider>
-                    {authType === 'IdentityServer' ? (
-                      <RepositoryProvider url={url} changeAuthType={changeAuthType}>
-                        <ShareProvider>
-                          <ISAuthProvider>
-                            <ResponsiveContextProvider>
-                              <ExpandedItemsProvider>
-                                <DialogProvider>{children}</DialogProvider>
-                              </ExpandedItemsProvider>
-                            </ResponsiveContextProvider>
-                          </ISAuthProvider>
-                        </ShareProvider>
-                      </RepositoryProvider>
-                    ) : (
-                      <SnAuthRepositoryProvider url={url} changeAuthType={changeAuthType}>
-                        <ShareProvider>
-                          <SNAuthProvider>
-                            <ResponsiveContextProvider>
-                              <ExpandedItemsProvider>
-                                <DialogProvider>{children}</DialogProvider>
-                              </ExpandedItemsProvider>
-                            </ResponsiveContextProvider>
-                          </SNAuthProvider>
-                        </ShareProvider>
-                      </SnAuthRepositoryProvider>
-                    )}
+                    <RepositorySwitchContext.Provider value={{ authType, switchRepository }}>
+                      {authType === 'IdentityServer' ? (
+                        <RepositoryProvider url={url} changeAuthType={changeAuthType}>
+                          <ShareProvider>
+                            <ISAuthProvider>
+                              <ResponsiveContextProvider>
+                                <ExpandedItemsProvider>
+                                  <DialogProvider>{children}</DialogProvider>
+                                </ExpandedItemsProvider>
+                              </ResponsiveContextProvider>
+                            </ISAuthProvider>
+                          </ShareProvider>
+                        </RepositoryProvider>
+                      ) : (
+                        <SnAuthRepositoryProvider url={url} changeAuthType={changeAuthType}>
+                          <ShareProvider>
+                            <SNAuthProvider>
+                              <ResponsiveContextProvider>
+                                <ExpandedItemsProvider>
+                                  <DialogProvider>{children}</DialogProvider>
+                                </ExpandedItemsProvider>
+                              </ResponsiveContextProvider>
+                            </SNAuthProvider>
+                          </ShareProvider>
+                        </SnAuthRepositoryProvider>
+                      )}
+                    </RepositorySwitchContext.Provider>
                   </ThemeProvider>
                 </TreeLoadingProvider>
               </GridLoadingProvider>

apps/sensenet/src/components/drawer/PermanentDrawer.tsx

@@ -15,6 +15,7 @@ import { useDrawerItems, useLocalization } from '../../hooks'
 import { AddButton } from '../AddButton'
 import { SearchButton } from '../search-button'
 import { PermanentDrawerItem } from './PermanentDrawerItem'
+import { RepositorySelector } from './repository-selector'
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
@@ -109,6 +110,7 @@ export const PermanentDrawer = () => {
                 </ListItemIcon>
               </ListItem>
             ) : null}
+            {opened ? <RepositorySelector /> : null}
             {matchPath(location.pathname, PATHS.savedQueries.appPath) ? <SearchButton isOpened={opened} /> : null}{' '}
             {matchPath(location.pathname, [
               PATHS.content.appPath,

apps/sensenet/src/components/drawer/TemporaryDrawer.tsx

@@ -18,6 +18,7 @@ import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { useDrawerItems, useLocalization, useTheme } from '../../hooks'
 import { LogoutButton } from '../LogoutButton'
 import { UserAvatar } from '../UserAvatar'
+import { RepositorySelector } from './repository-selector'
 
 type TemporaryDrawerProps = {
   isOpened: boolean
@@ -60,6 +61,7 @@ export const TemporaryDrawer = (props: TemporaryDrawerProps) => {
           transition: 'width 100ms ease-in-out',
         }}>
         <div style={{ paddingTop: '1em' }}>
+          <RepositorySelector />
           {items.map((item, index) => {
             const isActive = matchPath(location.pathname, item.url)
             return isActive ? (

apps/sensenet/src/components/drawer/repository-selector.tsx

@@ -0,0 +1,79 @@
+import { FormControl, InputLabel, makeStyles, MenuItem, Select, Theme } from '@material-ui/core'
+import { useRepository } from '@sensenet/hooks-react'
+import React, { useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { PATHS } from '../../application-paths'
+import { useRepositorySwitch } from '../../context'
+import { useLocalization } from '../../hooks'
+import {
+  getAuthenticatedSnAuthRepositorySessions,
+  normalizeRepositoryUrl,
+  snAuthRepositorySessionsChangedEvent,
+} from '../../services/repository-session'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    padding: theme.spacing(1, 1, 0),
+  },
+  formControl: {
+    width: '100%',
+  },
+}))
+
+const getRepositoryHost = (repoUrl: string) => {
+  try {
+    return new URL(repoUrl).host
+  } catch {
+    return repoUrl
+  }
+}
+
+export const RepositorySelector = () => {
+  const classes = useStyles()
+  const history = useHistory()
+  const localization = useLocalization().repositorySelector
+  const repository = useRepository()
+  const { authType, switchRepository } = useRepositorySwitch()
+  const currentRepositoryUrl = normalizeRepositoryUrl(repository.configuration.repositoryUrl)
+  const [repositorySessions, setRepositorySessions] = useState(getAuthenticatedSnAuthRepositorySessions)
+
+  useEffect(() => {
+    const refreshRepositorySessions = () => setRepositorySessions(getAuthenticatedSnAuthRepositorySessions())
+
+    window.addEventListener(snAuthRepositorySessionsChangedEvent, refreshRepositorySessions)
+
+    return () => window.removeEventListener(snAuthRepositorySessionsChangedEvent, refreshRepositorySessions)
+  }, [])
+
+  if (authType !== 'SNAuth' || repositorySessions.length < 2) {
+    return null
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControl className={classes.formControl} variant="outlined" size="small">
+        <InputLabel id="repository-selector-label">{localization.activeRepository}</InputLabel>
+        <Select
+          labelId="repository-selector-label"
+          label={localization.activeRepository}
+          value={currentRepositoryUrl}
+          onChange={(ev) => {
+            const nextRepositoryUrl = ev.target.value as string
+
+            if (nextRepositoryUrl === currentRepositoryUrl) {
+              return
+            }
+
+            switchRepository(nextRepositoryUrl)
+            history.push(PATHS.landingPath.appPath)
+          }}>
+          {repositorySessions.map((repositorySession) => (
+            <MenuItem key={repositorySession.repoUrl} value={repositorySession.repoUrl}>
+              {getRepositoryHost(repositorySession.repoUrl)}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  )
+}

apps/sensenet/src/context/index.ts

@@ -2,6 +2,7 @@ export * from './current-user-provider'
 export * from './LocalizationContext'
 export * from './PersonalSettingsContext'
 export * from './repository-provider'
+export * from './repository-switch-context'
 export * from './ResponsiveContextProvider'
 export * from './ThemeContext'
 export * from './ThemeProvider'

apps/sensenet/src/context/repository-switch-context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react'
+import { AuthServerType } from '../auth-config'
+
+export type RepositorySwitchContextValue = {
+  authType: AuthServerType
+  switchRepository: (repoUrl: string) => void
+}
+
+export const RepositorySwitchContext = createContext<RepositorySwitchContextValue>({
+  authType: 'SNAuth',
+  switchRepository: () => {},
+})
+
+export const useRepositorySwitch = () => useContext(RepositorySwitchContext)

apps/sensenet/src/context/sn-auth-repository-provider.tsx

@@ -50,7 +50,7 @@ export function SnAuthRepositoryProvider({
   })
   const cancelledLogin = useQuery().get('cancelledLogin')
   const [configString, setConfigString] = useState<any>()
-  const [authServerUrl, setAuthServerUrl] = useState()
+  const [authServerUrl, setAuthServerUrl] = useState<string>()
 
   const clearState = useCallback(() => setAuthState({ repoUrl: '', config: null }), [])
 
@@ -87,6 +87,7 @@ export function SnAuthRepositoryProvider({
       const storedConfig = getSnAuthRepositoryConfig(repoUrl)
 
       setSelectedSnAuthRepository(repoUrl)
+      setAuthServerUrl(storedConfig?.userManagerSettings.authority)
       setAuthState({ repoUrl, config: storedConfig?.userManagerSettings ?? null })
       setConfigString(storedConfig ? JSON.stringify(storedConfig) : null)
     }

apps/sensenet/src/localization/default.ts

@@ -292,6 +292,7 @@ const values = {
     sendLogWithCrashReports: 'Send log data with crash reports by default',
   },
   repositorySelector: {
+    activeRepository: 'Repository',
     loggedInAs: 'You are currently logged in as {0}',
     notLoggedIn: 'You are not logged in.',
     anotherRepo: 'Another repository',

apps/sensenet/src/localization/hungarian.ts

@@ -142,6 +142,7 @@ const values: Localization = {
     repositoryDisplayName: 'Egy tetszőleges megjelenítendő név',
   },
   repositorySelector: {
+    activeRepository: 'Repository',
     anotherRepo: 'Másik repository',
     loggedInAs: 'Bejelentkezve mint {0}',
     notLoggedIn: 'Nincs bejelentkezve',

apps/sensenet/src/services/repository-session.ts

@@ -10,6 +10,8 @@ const snAuthPendingLoginRepositoryKey = 'sn-auth-pending-login-repository'
 const snAuthScopedConfigKeyPrefix = 'sn-auth-config'
 const snAuthStorageKeyPrefix = 'sn-auth'
 
+export const snAuthRepositorySessionsChangedEvent = 'sn-auth-repository-sessions-changed'
+
 export type SnAuthRepositorySession = {
   repoUrl: string
   authServerUrl?: string
@@ -39,6 +41,15 @@ export const getSnAuthStorageKeyPrefix = (repoUrl: string) =>
 export const getSnAuthRepositoryConfigKey = (repoUrl: string) =>
   `${snAuthScopedConfigKeyPrefix}:${encodeRepositoryUrl(repoUrl)}`
 
+export const hasSnAuthRepositoryTokens = (repoUrl: string) => {
+  const storageKeyPrefix = getSnAuthStorageKeyPrefix(repoUrl)
+
+  return (
+    !!window.localStorage.getItem(getStorageKey(ACCESS_TOKEN_KEY, storageKeyPrefix)) &&
+    !!window.localStorage.getItem(getStorageKey(REFRESH_TOKEN_KEY, storageKeyPrefix))
+  )
+}
+
 export const getSelectedSnAuthRepository = () => window.localStorage.getItem(snAuthSelectedRepositoryKey)
 
 export const setSelectedSnAuthRepository = (repoUrl: string) => {
@@ -83,6 +94,9 @@ export const getSnAuthRepositorySessions = (): SnAuthRepositorySession[] => {
   }
 }
 
+export const getAuthenticatedSnAuthRepositorySessions = () =>
+  getSnAuthRepositorySessions().filter((session) => hasSnAuthRepositoryTokens(session.repoUrl))
+
 export const upsertSnAuthRepositorySession = (repoUrl: string, authServerUrl?: string) => {
   const normalizedRepoUrl = normalizeRepositoryUrl(repoUrl)
   const sessions = getSnAuthRepositorySessions().filter((session) => session.repoUrl !== normalizedRepoUrl)
@@ -97,6 +111,7 @@ export const upsertSnAuthRepositorySession = (repoUrl: string, authServerUrl?: s
 
   window.localStorage.setItem(snAuthRepositorySessionsKey, JSON.stringify(nextSessions))
   setSelectedSnAuthRepository(normalizedRepoUrl)
+  window.dispatchEvent(new Event(snAuthRepositorySessionsChangedEvent))
 }
 
 export const removeSnAuthRepositorySession = (repoUrl: string) => {
@@ -112,6 +127,8 @@ export const removeSnAuthRepositorySession = (repoUrl: string) => {
   if (getSelectedSnAuthRepository() === normalizedRepoUrl) {
     clearSelectedSnAuthRepository()
   }
+
+  window.dispatchEvent(new Event(snAuthRepositorySessionsChangedEvent))
 }
 
 export const getSnAuthRepositoryConfig = (repoUrl: string) => {