From 44ce43c8b1caa63777cf425787eacc691c16cc4c Mon Sep 17 00:00:00 2001
From: Jenny Zhu <jenny.a.zhu@gmail.com>
Date: Mon, 31 Aug 2026 17:23:21 -0400
Subject: [PATCH] [BUGFIX] Fix Perses tooltips background color

Backport of d7fc15b2a from main. Adds proper tooltip styling to the
Perses eCharts theme so tooltip backgrounds match the PatternFly theme
in both light and dark modes.

Signed-off-by: Jenny Zhu <jenny.a.zhu@gmail.com>
---
 .../components/dashboards/perses/PersesWrapper.tsx    | 11 +++++++++++
 web/src/components/dashboards/perses/dashboard-api.ts |  2 +-
 .../components/dashboards/perses/dashboard-list.tsx   |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/components/dashboards/perses/PersesWrapper.tsx b/web/src/components/dashboards/perses/PersesWrapper.tsx
index 82a3ca56a..cc393a269 100644
--- a/web/src/components/dashboards/perses/PersesWrapper.tsx
+++ b/web/src/components/dashboards/perses/PersesWrapper.tsx
@@ -42,6 +42,8 @@ import {
   chart_color_blue_300,
   chart_color_blue_400,
   chart_color_blue_500,
+  t_color_gray_10,
+  t_color_gray_90,
   t_color_gray_95,
   t_color_white,
   t_global_background_color_100,
@@ -345,6 +347,8 @@ export function useRemotePluginLoader(): PluginLoader {
 export function PersesWrapper({ children, project }: PersesWrapperProps) {
   const { theme } = usePatternFlyTheme();
   const [dashboardName] = useQueryParam(QueryParams.Dashboard, StringParam);
+  const isDark = theme === 'dark';
+
   const muiTheme = getTheme(theme, {
     shape: {
       borderRadius: 6,
@@ -355,6 +359,13 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
   const chartsTheme: PersesChartsTheme = generateChartsTheme(muiTheme, {
     echartsTheme: {
       color: patternflyChartsMultiUnorderedPalette,
+      tooltip: {
+        backgroundColor: isDark ? t_color_gray_10.value : t_global_background_color_400.value,
+        borderColor: isDark ? t_color_gray_10.value : t_global_background_color_400.value,
+        textStyle: {
+          color: isDark ? t_color_gray_90.value : t_color_white.value,
+        },
+      },
     },
     thresholds: {
       defaultColor: patternflyBlue300,
diff --git a/web/src/components/dashboards/perses/dashboard-api.ts b/web/src/components/dashboards/perses/dashboard-api.ts
index 69cf97e8b..728aaa21a 100644
--- a/web/src/components/dashboards/perses/dashboard-api.ts
+++ b/web/src/components/dashboards/perses/dashboard-api.ts
@@ -92,7 +92,7 @@ export function useDeleteDashboardMutation(): UseMutationResult<
 
 export const getDashboards = async (
   project?: string,
-  metadataOnly: boolean = false,
+  metadataOnly = false,
 ): Promise<DashboardResource[]> => {
   const queryParams = new URLSearchParams();
   if (metadataOnly) {
diff --git a/web/src/components/dashboards/perses/dashboard-list.tsx b/web/src/components/dashboards/perses/dashboard-list.tsx
index 7b7cc9e81..f2865838b 100644
--- a/web/src/components/dashboards/perses/dashboard-list.tsx
+++ b/web/src/components/dashboards/perses/dashboard-list.tsx
@@ -294,6 +294,7 @@ const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
     () => [
       {
         title: t("You don't have permissions for dashboard actions"),
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClick: () => {},
       },
     ],