From 86a74a6107e58ec0364408081bdd9f6a96780afa Mon Sep 17 00:00:00 2001 From: nishantharcot Date: Tue, 24 Dec 2024 13:41:49 +0530 Subject: [PATCH 1/2] feat: update page titles for dashboards and alerts --- frontend/src/pages/AlertDetails/AlertDetails.tsx | 3 +++ frontend/src/pages/NewDashboard/DashboardPage.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/frontend/src/pages/AlertDetails/AlertDetails.tsx b/frontend/src/pages/AlertDetails/AlertDetails.tsx index 5ee95dfce2..4f6d70466e 100644 --- a/frontend/src/pages/AlertDetails/AlertDetails.tsx +++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx @@ -80,6 +80,9 @@ function AlertDetails(): JSX.Element { alertDetailsResponse, } = useGetAlertRuleDetails(); + const alertTitle = alertDetailsResponse?.payload?.data.alert; + document.title = alertTitle || document.title; + if ( isError || !isValidRuleId || diff --git a/frontend/src/pages/NewDashboard/DashboardPage.tsx b/frontend/src/pages/NewDashboard/DashboardPage.tsx index 7da194aad0..5118cf3ad3 100644 --- a/frontend/src/pages/NewDashboard/DashboardPage.tsx +++ b/frontend/src/pages/NewDashboard/DashboardPage.tsx @@ -17,6 +17,9 @@ function DashboardPage(): JSX.Element { (dashboardResponse?.error as AxiosError)?.response?.data?.errorType : 'Something went wrong'; + const dashboardTitle = dashboardResponse.data?.data.title; + document.title = dashboardTitle || document.title; + if (isError && !isFetching && errorMessage === ErrorType.NotFound) { return ; } From f418a881423b6abff454fe639bf148822cf69569 Mon Sep 17 00:00:00 2001 From: nishantharcot Date: Tue, 24 Dec 2024 14:23:57 +0530 Subject: [PATCH 2/2] fix: page titles update in useEffect --- frontend/src/pages/AlertDetails/AlertDetails.tsx | 8 +++++--- frontend/src/pages/NewDashboard/DashboardPage.tsx | 7 +++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/AlertDetails/AlertDetails.tsx b/frontend/src/pages/AlertDetails/AlertDetails.tsx index 4f6d70466e..29bb8df2f9 100644 --- a/frontend/src/pages/AlertDetails/AlertDetails.tsx +++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx @@ -8,7 +8,7 @@ import RouteTab from 'components/RouteTab'; import Spinner from 'components/Spinner'; import ROUTES from 'constants/routes'; import history from 'lib/history'; -import { useMemo } from 'react'; +import { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; @@ -80,8 +80,10 @@ function AlertDetails(): JSX.Element { alertDetailsResponse, } = useGetAlertRuleDetails(); - const alertTitle = alertDetailsResponse?.payload?.data.alert; - document.title = alertTitle || document.title; + useEffect(() => { + const alertTitle = alertDetailsResponse?.payload?.data.alert; + document.title = alertTitle || document.title; + }, [alertDetailsResponse?.payload?.data.alert, isRefetching]); if ( isError || diff --git a/frontend/src/pages/NewDashboard/DashboardPage.tsx b/frontend/src/pages/NewDashboard/DashboardPage.tsx index 5118cf3ad3..befefa88eb 100644 --- a/frontend/src/pages/NewDashboard/DashboardPage.tsx +++ b/frontend/src/pages/NewDashboard/DashboardPage.tsx @@ -4,6 +4,7 @@ import NotFound from 'components/NotFound'; import Spinner from 'components/Spinner'; import NewDashboard from 'container/NewDashboard'; import { useDashboard } from 'providers/Dashboard/Dashboard'; +import { useEffect } from 'react'; import { ErrorType } from 'types/common'; function DashboardPage(): JSX.Element { @@ -17,8 +18,10 @@ function DashboardPage(): JSX.Element { (dashboardResponse?.error as AxiosError)?.response?.data?.errorType : 'Something went wrong'; - const dashboardTitle = dashboardResponse.data?.data.title; - document.title = dashboardTitle || document.title; + useEffect(() => { + const dashboardTitle = dashboardResponse.data?.data.title; + document.title = dashboardTitle || document.title; + }, [dashboardResponse.data?.data.title, isFetching]); if (isError && !isFetching && errorMessage === ErrorType.NotFound) { return ;