From 21cb164e7dc4464126dfe65d27eb1750054787a5 Mon Sep 17 00:00:00 2001
From: dvankeke <dvankeke@akamai.com>
Date: Tue, 31 Mar 2026 09:56:37 +0200
Subject: [PATCH] fix: v1 teams

---
 src/components/Dashboard.tsx | 17 ++++++-------
 src/components/Header.tsx    | 48 +++++++++++++++++++++++++-----------
 src/pages/Dashboard.tsx      | 17 ++++++++-----
 3 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index a902c31a7..1cca91657 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -6,7 +6,7 @@ import { getDomain } from 'layouts/Shell'
 import useSettings from 'hooks/useSettings'
 import Link from '@mui/material/Link'
 import { Link as RouterLink } from 'react-router-dom'
-import { GetTeamApiResponse } from 'redux/otomiApi'
+import { GetAplTeamApiResponse } from 'redux/otomiApi'
 import UpgradeVersion from './UpgradeVersion'
 
 // styles -----------------------------------------------------------
@@ -92,7 +92,7 @@ const useStyles = makeStyles()((theme) => ({
 
 // types -----------------------------------------------------------
 interface Props {
-  team?: GetTeamApiResponse
+  team?: GetAplTeamApiResponse
   inventory: any
 }
 
@@ -212,22 +212,22 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
   const hostname = window.location.hostname
   const domain = getDomain(hostname)
   const [isCookiesLoaded, setCookiesLoaded] = React.useState(false)
+
   const onLoad = () => {
     setTimeout(() => {
       setCookiesLoaded(true)
     }, 500)
   }
+
   React.useEffect(() => {
     setCookiesLoaded(false)
   }, [themeView])
 
-  // 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=`
-  const clusterCapacity = `https://grafana.${domain}/d-solo/iJiti6Lnkgg/kubernetes-cluster-status?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
-  // team view base iframe urls
   const resourceStatus = `https://grafana-${oboTeamId}.${domain}/d-solo/iJiti6Lnkgg/team-status?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
   const resourceUtilization = `https://grafana-${oboTeamId}.${domain}/d-solo/JcVjFgdZz/kubernetes-deployment?orgId=1&theme=${theme.palette.mode}&panelId=`
   const vulnerabilities = `https://grafana-${oboTeamId}.${domain}/d-solo/trivy_operator/container-scan-results?orgId=1&refresh=30s&theme=${theme.palette.mode}&panelId=`
+
   const views = {
     platform: [
       {
@@ -258,7 +258,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
           { id: '7', src: `${resourceStatus}9` },
           { id: '8', src: `${resourceStatus}10` },
         ],
-        show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin',
+        show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin',
       },
       {
         title: 'Resource Utilization',
@@ -267,7 +267,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
           { id: '9', src: `${resourceUtilization}8` },
           { id: '10', src: `${resourceUtilization}9` },
         ],
-        show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin',
+        show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin',
       },
       {
         title: 'Vulnerabilities',
@@ -278,7 +278,7 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
           { id: '13', src: `${vulnerabilities}50` },
           { id: '14', src: `${vulnerabilities}51` },
         ],
-        show: team?.managedMonitoring?.grafana && oboTeamId !== 'admin' && appsEnabled.trivy,
+        show: team?.spec.managedMonitoring?.grafana && oboTeamId !== 'admin' && appsEnabled.trivy,
       },
     ],
   }
@@ -295,7 +295,6 @@ export default function Dashboard({ team, inventory }: Props): React.ReactElemen
           title='Inventory'
         />
 
-        {/* Cookies Hack: Hidden iframe to load cookies for grafana */}
         <iframe
           className={classes.hiddenIframe}
           title='Hidden iFrame'
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 169f16d62..d111ccece 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import useOffSetTop from 'hooks/useOffSetTop'
 import useResponsive from 'hooks/useResponsive'
 import { useSession } from 'providers/Session'
 import { useHistory, useLocation } from 'react-router-dom'
-import { useGetTeamsQuery } from 'redux/otomiApi'
+import { useGetAplTeamsQuery } from 'redux/otomiApi'
 import useSettings from 'hooks/useSettings'
 import React from 'react'
 import { useLocalStorage } from 'hooks/useLocalStorage'
@@ -19,6 +19,11 @@ type Props = {
   verticalLayout?: boolean
 }
 
+type TeamOption = {
+  value: string
+  label: string
+}
+
 // ----------------------------------------------------------------------
 
 type RootStyleProps = {
@@ -78,17 +83,29 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
   } = useSession()
   const [localOboTeamId] = useLocalStorage<string>('oboTeamId', undefined)
   const oboTeamId = sessionOboTeamId || localOboTeamId || undefined
-  const { data: allTeams } = useGetTeamsQuery(!isPlatformAdmin && skipToken)
-  // END HOOKs
-  let teams: string[] = []
+
+  const { data: allTeams } = useGetAplTeamsQuery(isPlatformAdmin ? undefined : skipToken)
+
+  let teams: TeamOption[] = []
 
   if (isPlatformAdmin) {
-    teams = allTeams?.map((team) => team?.name) || []
-    teams = [...new Set(teams)]
-    teams = teams.filter((team) => team !== 'admin') // Remove "admin" from the list
-    teams.sort()
-    teams = ['admin', ...teams]
-  } else teams = userTeams
+    teams =
+      allTeams?.map((team) => ({
+        value: team.metadata.labels['apl.io/teamId'],
+        label: team.metadata.name,
+      })) || []
+
+    teams = teams.filter((team) => Boolean(team.value))
+    teams = Array.from(new Map(teams.map((team) => [team.value, team])).values())
+    teams = teams.filter((team) => team.value !== 'admin')
+    teams.sort((a, b) => a.label.localeCompare(b.label))
+    teams = [{ value: 'admin', label: 'admin' }, ...teams]
+  } else {
+    teams = (userTeams || []).map((team) => ({
+      value: team,
+      label: team,
+    }))
+  }
 
   const handleChangeView = (event: React.ChangeEvent<HTMLInputElement>) => {
     onChangeView(event)
@@ -121,7 +138,8 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
     history.push(nextPathname)
     event.preventDefault()
   }
-  if (!teams && oboTeamId) teams = [oboTeamId]
+
+  if (!teams.length && oboTeamId) teams = [{ value: oboTeamId, label: oboTeamId }]
 
   return (
     <RootStyle
@@ -149,13 +167,13 @@ export default function Header({ onOpenSidebar, isCollapse = false, verticalLayo
               <StyledSelect
                 size='small'
                 color='secondary'
-                value={(teams?.length && oboTeamId) || ''}
+                value={oboTeamId || ''}
                 onChange={handleChangeTeam}
                 data-cy='select-oboteam'
               >
-                {teams?.map((teamName) => (
-                  <MenuItem key={teamName} value={teamName} data-cy={`select-oboteam-${teamName}`}>
-                    {teamName}
+                {teams.map((team) => (
+                  <MenuItem key={team.value} value={team.value} data-cy={`select-oboteam-${team.value}`}>
+                    {team.label}
                   </MenuItem>
                 ))}
               </StyledSelect>
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index dd976bdd8..b0bcc6f2a 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-prototype-builtins */
 import { Box } from '@mui/material'
-import { skipToken } from '@reduxjs/toolkit/dist/query'
+import { skipToken } from '@reduxjs/toolkit/query/react'
 import Dashboard from 'components/Dashboard'
 import useSettings from 'hooks/useSettings'
 import PaperLayout from 'layouts/Paper'
@@ -9,7 +9,7 @@ import { useSession } from 'providers/Session'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAppSelector } from 'redux/hooks'
-import { useGetDashboardQuery, useGetTeamQuery, useGetTeamsQuery } from 'redux/otomiApi'
+import { useGetAplTeamQuery, useGetAplTeamsQuery, useGetDashboardQuery } from 'redux/otomiApi'
 
 export default function (): React.ReactElement {
   const { themeView } = useSettings()
@@ -24,8 +24,9 @@ export default function (): React.ReactElement {
     isLoading: isLoadingTeams,
     isFetching: isFetchingTeams,
     refetch: refetchTeams,
-  } = useGetTeamsQuery(!isPlatformAdmin && skipToken)
-  const { data: teamData } = useGetTeamQuery({ teamId: oboTeamId }, { skip: !oboTeamId || isPlatformAdmin })
+  } = useGetAplTeamsQuery(isPlatformAdmin ? undefined : skipToken)
+
+  const { data: teamData } = useGetAplTeamQuery({ teamId: oboTeamId }, { skip: !oboTeamId || isPlatformAdmin })
 
   const teamId = isPlatformView ? undefined : oboTeamId
 
@@ -36,19 +37,23 @@ export default function (): React.ReactElement {
   } = useGetDashboardQuery({ teamId }, { skip: !isPlatformAdmin && !teamId })
 
   const isDirty = useAppSelector(({ global: { isDirty } }) => isDirty)
+
   useEffect(() => {
     if (isDirty !== false) return
     if (oboTeamId && !isFetchingDashboard) refetchDashboard()
     if (oboTeamId && !isFetchingTeams) refetchTeams()
   }, [isDirty])
+
   const { t } = useTranslation()
-  // END HOOKS
-  const team = !isLoadingTeams && (find(teams, { name: teamId }) || teamData)
+
+  const team = !isLoadingTeams && (find(teams, (team) => team.metadata.labels['apl.io/teamId'] === teamId) || teamData)
+
   const loading = isFetchingDashboard || isLoadingTeams
   const teamInventory = isPlatformView ? [{ name: 'teams', count: teams?.length }] : []
   const dashboardInventory = dashboard ?? ([] as any)
   const inventory = [...teamInventory, ...dashboardInventory]
   const comp = (teams || team) && dashboard && <Dashboard team={team} inventory={inventory} />
+
   return (
     <Box sx={{ paddingTop: '3rem' }}>
       <PaperLayout