OCPBUGS-63061: Replace react-helmet with DocumentTitle

logonoff · logonoff · commit 9cbaa60c0c58 · 2025-10-15T15:29:13.000-04:00
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -70,7 +70,6 @@
     "murmurhash-js": "1.0.x",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^11.8.11",
     "react-linkify": "^0.2.2",
     "react-modal": "^3.12.1",
@@ -87,7 +86,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.17.2",
     "@types/react": "17.0.83",
-    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.2",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
diff --git a/web/src/components/Incidents/IncidentsPage.tsx b/web/src/components/Incidents/IncidentsPage.tsx
@@ -20,7 +20,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { IncidentsTable } from './IncidentsTable';
 import {
   getIncidentsTimeRanges,
@@ -59,7 +58,7 @@ import { usePatternFlyTheme } from '../hooks/usePatternflyTheme';
 import { MonitoringState } from 'src/reducers/observe';
 import { Incident } from './model';
 import { useAlertsPoller } from '../hooks/useAlertsPoller';
-import { Rule } from '@openshift-console/dynamic-plugin-sdk';
+import { DocumentTitle, Rule } from '@openshift-console/dynamic-plugin-sdk';
 
 const IncidentsPage = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -296,9 +295,7 @@ const IncidentsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         {alertsAreLoading && incidentsAreLoading ? (
           <Bullseye>
diff --git a/web/src/components/alerting/AlertRulesDetailsPage.tsx b/web/src/components/alerting/AlertRulesDetailsPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusAlert,
   ResourceIcon,
@@ -38,7 +39,6 @@ import {
 import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
@@ -184,9 +184,9 @@ const AlertRulesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: rule?.name || RuleResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: rule?.name || RuleResource.label })}
+      </DocumentTitle>
       <StatusBox data={rule} label={RuleResource.label} loaded={loaded} loadError={loadError}>
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>
diff --git a/web/src/components/alerting/AlertRulesPage.tsx b/web/src/components/alerting/AlertRulesPage.tsx
@@ -1,5 +1,6 @@
 import {
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   PrometheusAlert,
   ResourceIcon,
@@ -15,7 +16,6 @@ import { sortable, Td } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -219,9 +219,7 @@ const AlertRulesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <ListPageFilter
           data={staticData}
diff --git a/web/src/components/alerting/AlertsDetailsPage.tsx b/web/src/components/alerting/AlertsDetailsPage.tsx
@@ -3,6 +3,7 @@ import {
   Alert,
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusLabels,
   ResourceIcon,
@@ -57,7 +58,6 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { MonitoringState } from '../../reducers/observe';
 import withFallback from '../console/console-shared/error/fallbacks/withFallback';
 import { StatusBox } from '../console/console-shared/src/components/status/StatusBox';
@@ -153,9 +153,9 @@ const AlertsDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: labels?.alertname || AlertResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: labels?.alertname || AlertResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={alert}
         label={AlertResource.label}
diff --git a/web/src/components/alerting/AlertsPage.tsx b/web/src/components/alerting/AlertsPage.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   RowFilter,
   useListPageFilter,
@@ -10,7 +11,6 @@ import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-tab
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../reducers/observe';
@@ -144,9 +144,7 @@ const AlertsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false} type="subnav">
         <Flex>
           <ListPageFilter
diff --git a/web/src/components/alerting/SilenceForm.tsx b/web/src/components/alerting/SilenceForm.tsx
@@ -1,4 +1,8 @@
-import { consoleFetchJSON, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  consoleFetchJSON,
+  DocumentTitle,
+  useActiveNamespace,
+} from '@openshift-console/dynamic-plugin-sdk';
 import {
   ActionGroup,
   Alert,
@@ -34,7 +38,6 @@ import { t_global_spacer_sm } from '@patternfly/react-tokens';
 import * as _ from 'lodash-es';
 import type { ComponentType, FC, FormEventHandler, MouseEvent, ChangeEvent, Ref } from 'react';
 import { useState, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -277,9 +280,7 @@ const SilenceForm_: FC<SilenceFormProps> = ({ defaults, Info, title }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1">{title}</Title>
         <HelperText>
diff --git a/web/src/components/alerting/SilencesDetailsPage.tsx b/web/src/components/alerting/SilencesDetailsPage.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import {
   Alert,
+  DocumentTitle,
   ResourceIcon,
   Timestamp,
   useActiveNamespace,
@@ -28,7 +29,6 @@ import {
   SplitItem,
   Title,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { MonitoringState } from 'src/reducers/observe';
 import {
@@ -73,9 +73,9 @@ const SilencesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: silence?.name || SilenceResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: silence?.name || SilenceResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={silence}
         label={SilenceResource.label}
diff --git a/web/src/components/alerting/SilencesPage.tsx b/web/src/components/alerting/SilencesPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertSeverity,
   consoleFetchJSON,
+  DocumentTitle,
   ListPageFilter,
   RowProps,
   Silence,
@@ -23,7 +24,6 @@ import { sortable } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useState, useMemo, useContext, useCallback, memo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -185,7 +185,7 @@ const SilencesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>{perspective === 'dev' ? <title>Silences</title> : <title>Alerting</title>}</Helmet>
+      <DocumentTitle>{perspective === 'dev' ? t('Silences') : t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <SelectedSilencesContext.Provider value={{ selectedSilences, setSelectedSilences }}>
           <Flex>
diff --git a/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx b/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
@@ -49,8 +49,12 @@ export const DashboardSkeletonLegacy: FC<MonitoringDashboardsLegacyPageProps> =
 
     return (
       <>
-        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
-        {perspective !== 'dev' && <HeaderTop />}
+        {perspective !== 'dev' && (
+          <>
+            <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>
+            <HeaderTop />
+          </>
+        )}
         <PageSection hasBodyWrapper={false}>
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
diff --git a/web/src/components/dashboards/perses/dashboard-skeleton.tsx b/web/src/components/dashboards/perses/dashboard-skeleton.tsx
@@ -65,8 +65,12 @@ export const DashboardSkeleton: FC<MonitoringDashboardsPageProps> = memo(
 
     return (
       <>
-        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
-        {perspective !== 'dev' && <HeaderTop />}
+        {perspective !== 'dev' && (
+          <>
+            <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>
+            <HeaderTop />
+          </>
+        )}
         <PageSection hasBodyWrapper={false}>
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
diff --git a/web/src/components/targets-page.tsx b/web/src/components/targets-page.tsx
@@ -1,4 +1,5 @@
 import {
+  DocumentTitle,
   GreenCheckCircleIcon,
   K8sModel,
   K8sResourceKind,
@@ -38,7 +39,6 @@ import { sortable, Td } from '@patternfly/react-table';
 import { find, includes, isEmpty } from 'lodash-es';
 import type { FC } from 'react';
 import { createContext, useContext, memo, useMemo, useState, useCallback } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router-dom-v5-compat';
 import { EmptyBox } from './console/console-shared/src/components/empty-state/EmptyBox';
@@ -253,9 +253,7 @@ const Details: FC<DetailsProps> = ({ loaded, loadError, targets }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Target details')}</title>
-      </Helmet>
+      <DocumentTitle>{t('Target details')}</DocumentTitle>
       <StatusBox data={target} label="target" loaded={loaded} loadError={loadError}>
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>
@@ -517,9 +515,7 @@ const ListPage: FC<ListPageProps> = ({ loaded, loadError, targets }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <ListPageHeader title={title} />
       <ListPageBody>
         {loadError && (
