OCPBUGS-63056: Add favourites to Dashboards page

adssda

Author: logonoff

web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx

@@ -1,43 +1,30 @@
 import * as _ from 'lodash-es';
 import type { FC, PropsWithChildren } from 'react';
 import { memo, useCallback } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Divider,
-  PageSection,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
-  Title,
-} from '@patternfly/react-core';
+import { Divider, PageSection, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import { usePerspective } from '../../hooks/usePerspective';
 import { CombinedDashboardMetadata } from '../perses/hooks/useDashboardsData';
 import { DashboardDropdown } from '../shared/dashboard-dropdown';
 import { PollIntervalDropdown, TimespanDropdown } from './time-dropdowns';
 import { LegacyDashboardsAllVariableDropdowns } from './legacy-variable-dropdowns';
+import { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 
 const HeaderTop: FC = memo(() => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <Split hasGutter isWrappable>
-      <SplitItem isFilled>
-        <Title headingLevel="h1">{t('Dashboards')}</Title>
-      </SplitItem>
-      <SplitItem>
-        <Split hasGutter isWrappable>
-          <SplitItem>
-            <TimespanDropdown />
-          </SplitItem>
-          <SplitItem>
-            <PollIntervalDropdown />
-          </SplitItem>
-        </Split>
-      </SplitItem>
-    </Split>
+    <ListPageHeader title={t('Dashboards')}>
+      <Split hasGutter isWrappable>
+        <SplitItem>
+          <TimespanDropdown />
+        </SplitItem>
+        <SplitItem>
+          <PollIntervalDropdown />
+        </SplitItem>
+      </Split>
+    </ListPageHeader>
   );
 });
 
@@ -62,13 +49,9 @@ export const DashboardSkeletonLegacy: FC<MonitoringDashboardsLegacyPageProps> =
 
     return (
       <>
-        {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
-        )}
+        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
+        {perspective !== 'dev' && <HeaderTop />}
         <PageSection hasBodyWrapper={false}>
-          {perspective !== 'dev' && <HeaderTop />}
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
               <StackItem>

web/src/components/dashboards/perses/dashboard-skeleton.tsx

@@ -1,18 +1,8 @@
 import * as _ from 'lodash-es';
 import type { FC, PropsWithChildren } from 'react';
 import { memo, useCallback, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-
-import {
-  Divider,
-  PageSection,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
-  Title,
-} from '@patternfly/react-core';
+import { Divider, PageSection, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import {
   DashboardStickyToolbar,
   useDashboardActions,
@@ -22,23 +12,19 @@ import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { usePerspective } from '../../hooks/usePerspective';
 import { DashboardDropdown } from '../shared/dashboard-dropdown';
 import { CombinedDashboardMetadata } from './hooks/useDashboardsData';
+import { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 
 const HeaderTop: FC = memo(() => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <Split hasGutter isWrappable>
-      <SplitItem isFilled>
-        <Title headingLevel="h1">{t('Dashboards')}</Title>
-      </SplitItem>
-      <SplitItem>
-        <Split hasGutter isWrappable>
-          <SplitItem>
-            <TimeRangeControls />
-          </SplitItem>
-        </Split>
-      </SplitItem>
-    </Split>
+    <ListPageHeader title={t('Dashboards')}>
+      <Split hasGutter isWrappable>
+        <SplitItem>
+          <TimeRangeControls />
+        </SplitItem>
+      </Split>
+    </ListPageHeader>
   );
 });
 
@@ -79,13 +65,9 @@ export const DashboardSkeleton: FC<MonitoringDashboardsPageProps> = memo(
 
     return (
       <>
-        {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
-        )}
+        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
+        {perspective !== 'dev' && <HeaderTop />}
         <PageSection hasBodyWrapper={false}>
-          {perspective !== 'dev' && <HeaderTop />}
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
               <StackItem>