fix: set themeView correctly (#694)

* fix: only load dashboard query if teamId is there

* fix: add some debug logs

* feat: add ThemeViewInitializer to manage theme view based on user role

* fix: remove logs

---------

Co-authored-by: Ferruh Cihan <[email protected]>

Author: CasLubbers

src/App.tsx

@@ -52,6 +52,7 @@ import TeamsOverviewPage from 'pages/teams/overview/TeamsOverviewPage'
 import WorkloadsCreateEditPage from 'pages/workloads/create-edit/WorkloadsCreateEditPage'
 import WorkloadsOverviewPage from 'pages/workloads/overview/WorkloadsOverviewPage'
 import WorkloadCatalogsPage from 'pages/workloads/catalog/WorkloadCatalogsPage'
+import ThemeViewInitializer from 'components/ThemeViewInitializer'
 import { HttpErrorBadRequest } from './utils/error'
 import { NotistackProvider, SnackbarUtilsConfigurator } from './utils/snack'
 
@@ -84,6 +85,7 @@ function App() {
                               <SnackbarUtilsConfigurator />
                               <CssBaseline />
                               <Helmet titleTemplate='%s | App Platform' defaultTitle='Akamai App Platform' />
+                              <ThemeViewInitializer />
                               <Switch>
                                 <Route path='/' component={Dashboard} exact />
                                 <PrivateRoute

src/components/Dashboard.tsx

@@ -207,7 +207,7 @@ function IFramesCard({ classes, title, iframeSources, iframeClass, themeMode, sh
 export default function Dashboard({ team, inventory }: Props): React.ReactElement {
   const theme = useTheme()
   const { classes } = useStyles()
-  const { themeView, onChangeView } = useSettings()
+  const { themeView } = useSettings()
   const { oboTeamId, appsEnabled, user, versions } = useSession()
   const hostname = window.location.hostname
   const domain = getDomain(hostname)
@@ -220,11 +220,6 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
   React.useEffect(() => {
     setCookiesLoaded(false)
   }, [themeView])
-  // reset themeView to team if user is not admin
-  React.useEffect(() => {
-    const { isPlatformAdmin } = user
-    if (!isPlatformAdmin) onChangeView({ target: { value: 'team' } } as React.ChangeEvent<HTMLInputElement>)
-  }, [])
 
   // platform view base iframe urls
   const clusterResourceUtilization = `https://grafana.${domain}/d-solo/efa86fd1d0c121a26444b636a3f509a8/kubernetes-compute-resources-cluster?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`

src/components/ThemeViewInitializer.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from 'react'
+import { useSession } from 'providers/Session'
+import useSettings from 'hooks/useSettings'
+
+/**
+ * Initializes theme view based on user role.
+ * Non-platform admin users are automatically set to 'team' view.
+ */
+export default function ThemeViewInitializer() {
+  const { user } = useSession()
+  const { onChangeView } = useSettings()
+
+  useEffect(() => {
+    const { isPlatformAdmin } = user
+    if (!isPlatformAdmin) onChangeView({ target: { value: 'team' } } as React.ChangeEvent<HTMLInputElement>)
+  }, [])
+
+  return null
+}

src/pages/Dashboard.tsx

@@ -28,11 +28,12 @@ export default function (): React.ReactElement {
   const { data: teamData } = useGetTeamQuery({ teamId: oboTeamId }, { skip: !oboTeamId || isPlatformAdmin })
 
   const teamId = isPlatformView ? undefined : oboTeamId
+
   const {
     data: dashboard,
     isFetching: isFetchingDashboard,
     refetch: refetchDashboard,
-  } = useGetDashboardQuery({ teamId })
+  } = useGetDashboardQuery({ teamId }, { skip: !isPlatformAdmin && !teamId })
 
   const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
   useEffect(() => {

src/redux/otomiApi.ts

@@ -5238,7 +5238,9 @@ export type GetDockerConfigApiArg = {
 }
 export type GetSessionApiResponse = /** status 200 Get the session for the logged in user */ {
   ca?: string
-  core?: object
+  core?: {
+    [key: string]: any
+  }
   corrupt?: boolean
   editor?: string
   inactivityTimeout?: number
@@ -5277,7 +5279,9 @@ export type GetSessionApiResponse = /** status 200 Get the session for the logge
     console?: string
     values?: string
   }
-  valuesSchema?: object
+  valuesSchema?: {
+    [key: string]: any
+  }
 }
 export type GetSessionApiArg = void
 export type GetApiDocApiResponse = /** status 200 The requested apiDoc. */ object
@@ -5868,8 +5872,12 @@ export type EditSettingsApiArg = {
 export type GetAppsApiResponse = /** status 200 The request is successful. */ {
   enabled?: boolean
   id: string
-  rawValues?: object
-  values?: object
+  rawValues?: {
+    [key: string]: any
+  }
+  values?: {
+    [key: string]: any
+  }
 }[]
 export type GetAppsApiArg = {
   teamId: string
@@ -5885,8 +5893,12 @@ export type ToggleAppsApiArg = {
 export type GetTeamAppApiResponse = /** status 200 The request is successful. */ {
   enabled?: boolean
   id: string
-  rawValues?: object
-  values?: object
+  rawValues?: {
+    [key: string]: any
+  }
+  values?: {
+    [key: string]: any
+  }
 }
 export type GetTeamAppApiArg = {
   teamId: string
@@ -5900,8 +5912,12 @@ export type EditAppApiArg = {
   body: {
     enabled?: boolean
     id: string
-    rawValues?: object
-    values?: object
+    rawValues?: {
+      [key: string]: any
+    }
+    values?: {
+      [key: string]: any
+    }
   }
 }
 export type GetAiModelsApiResponse = /** status 200 Successfully obtained shared AI models */ ({