OCPBUGS-63531: [release-4.19] Improve alignment with console SDK

web/package.json

@@ -64,7 +64,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",
@@ -79,7 +78,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^17.0.21",
     "@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": "^5.15.0",

web/src/components/Incidents/IncidentsPage.jsx

@@ -16,12 +16,11 @@ import {
   ToolbarItem,
   MenuToggle,
   Badge,
-  Title,
   PageSection,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
+import { DocumentTitle } from '@openshift-console/dynamic-plugin-sdk';
 import { IncidentsTable } from './IncidentsTable';
 import {
   getIncidentsTimeRanges,
@@ -277,9 +276,7 @@ const IncidentsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         {alertsAreLoading && incidentsAreLoading ? (
           <Bullseye>

web/src/components/MetricsPage.tsx

@@ -1,4 +1,6 @@
 import {
+  DocumentTitle,
+  ListPageHeader,
   PrometheusData,
   PrometheusEndpoint,
   PrometheusLabels,
@@ -57,7 +59,6 @@ import {
 } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -1230,25 +1231,17 @@ const MetricsPage_: React.FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Metrics')}</title>
-      </Helmet>
-      <PageSection hasBodyWrapper={false}>
+      <DocumentTitle>{t('Metrics')}</DocumentTitle>
+      <ListPageHeader title={perspective !== 'dev' ? t('Metrics') : ''}>
         <Split hasGutter>
-          {perspective !== 'dev' && (
-            <SplitItem>
-              <Title headingLevel="h1">{t('Metrics')}</Title>
-            </SplitItem>
-          )}
-          <SplitItem isFilled />
           <SplitItem>
             <IntervalDropdown />
           </SplitItem>
           <SplitItem>
             <MetricsActionsMenu />
           </SplitItem>
         </Split>
-      </PageSection>
+      </ListPageHeader>
       <PageSection hasBodyWrapper={false}>
         <Stack hasGutter>
           <StackItem>

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 * as React 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';
@@ -179,9 +179,9 @@ const AlertRulesDetailsPage_: React.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}>

web/src/components/alerting/AlertRulesPage.tsx

@@ -1,5 +1,6 @@
 import {
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   PrometheusAlert,
   ResourceIcon,
@@ -14,7 +15,6 @@ import {
 import { sortable, Td } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -214,9 +214,7 @@ const AlertRulesPage_: React.FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <ListPageFilter
           data={staticData}

web/src/components/alerting/AlertingPage.tsx

@@ -1,7 +1,10 @@
-import { PageSection, Title } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { HorizontalNav, useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  HorizontalNav,
+  ListPageHeader,
+  useActivePerspective,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 const AlertsPage = React.lazy(
   () => import(/* webpackChunkName: "AlertsPage" */ '../alerting/AlertsPage'),
@@ -49,10 +52,8 @@ const AlertingPage: React.FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false}>
-        <Title headingLevel="h1">{t('Alerting')}</Title>
-        <HorizontalNav contextId={contextId} pages={pages} />
-      </PageSection>
+      <ListPageHeader title={t('Alerting')} />
+      <HorizontalNav contextId={contextId} pages={pages} />
     </>
   );
 };

web/src/components/alerting/AlertsDetailsPage.tsx

@@ -3,6 +3,7 @@ import {
   Alert,
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusLabels,
   ResourceIcon,
@@ -56,7 +57,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';
@@ -150,9 +150,9 @@ const AlertsDetailsPage_: React.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}

web/src/components/alerting/AlertsPage.tsx

@@ -1,6 +1,7 @@
 import {
   Alert,
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   RowFilter,
   useListPageFilter,
@@ -9,7 +10,6 @@ import { Flex, PageSection } from '@patternfly/react-core';
 import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../reducers/observe';
@@ -146,9 +146,7 @@ const AlertsPage_: React.FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false} type="subnav">
         <Flex>
           <ListPageFilter

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,
@@ -33,7 +37,6 @@ import { ExclamationCircleIcon, MinusCircleIcon, PlusCircleIcon } from '@pattern
 import { t_global_spacer_sm } from '@patternfly/react-tokens';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -275,9 +278,7 @@ const SilenceForm_: React.FC<SilenceFormProps> = ({ defaults, Info, title }) =>
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1">{title}</Title>
         <HelperText>

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 {
@@ -72,9 +72,9 @@ const SilencesDetailsPage_: React.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}

web/src/components/alerting/SilencesPage.tsx

@@ -1,6 +1,7 @@
 import {
   AlertSeverity,
   consoleFetchJSON,
+  DocumentTitle,
   ListPageFilter,
   RowProps,
   Silence,
@@ -22,7 +23,6 @@ import {
 import { sortable } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -183,7 +183,7 @@ const SilencesPage_: React.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>