CONSOLE-4492: Move BasePageHeading to shared

- adopt `BasePageHeading` when possible (as many pages don't use the extra functionality provided by the `connect`)
- Rename `PageHeading` to `ConnectedPageHeading`
- Rename `BasePageHeading` to `PageHeading`
- move `PageHeading`, `Breadcrumbs` to console/shared
- update cypress test to reflect changes

Author: logonoff

Diff for: frontend/__tests__/components/container.spec.tsx

@@ -11,8 +11,8 @@ import {
   Firehose,
   HorizontalNav,
   LoadingBox,
-  PageHeading,
-  PageHeadingProps,
+  ConnectedPageHeading,
+  ConnectedPageHeadingProps,
 } from '@console/internal/components/utils';
 import { testPodInstance } from '../../__mocks__/k8sResourcesMocks';
 import { Status } from '@console/shared';
@@ -53,13 +53,13 @@ describe(ContainersDetailsPage.displayName, () => {
 describe(ContainerDetails.displayName, () => {
   const obj = { data: { ...testPodInstance } };
 
-  it('renders a `PageHeading` and a `ContainerDetails` with the same state', async () => {
+  it('renders a `ConnectedPageHeading` and a `ContainerDetails` with the same state', async () => {
     jest
       .spyOn(ReactRouter, 'useParams')
       .mockReturnValue({ podName: 'test-name', ns: 'default', name: 'crash-app' });
 
     jest.spyOn(ReactRouter, 'useLocation').mockReturnValue({ pathname: '' });
-    // Full mount needed to get the children of the PageHeading within the ContainerDetails without warning
+    // Full mount needed to get the children of the ConnectedPageHeading within the ContainerDetails without warning
     let containerDetails: ReactWrapper;
     await act(async () => {
       containerDetails = mount(<ContainerDetails obj={obj} loaded={true} />, {
@@ -72,7 +72,7 @@ describe(ContainerDetails.displayName, () => {
     });
 
     const pageHeadingStatusProps = containerDetails
-      .find<PageHeadingProps>(PageHeading)
+      .find<ConnectedPageHeadingProps>(ConnectedPageHeading)
       .children()
       .find<StatusProps>(Status)
       .props();

Diff for: frontend/__tests__/components/storage-class-form.spec.tsx

@@ -6,7 +6,7 @@ import {
   ConnectedStorageClassForm,
   StorageClassFormProps,
 } from '../../public/components/storage-class-form';
-import { PageHeading } from '../../public/components/utils';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 
 jest.mock('react-router-dom-v5-compat', () => ({
   ...jest.requireActual('react-router-dom-v5-compat'),

Diff for: frontend/__tests__/components/utils/page-heading.spec.tsx renamed to frontend/__tests__/components/utils/connected-page-heading.spec.tsx

@@ -1,44 +1,10 @@
 import { configure, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import {
-  PageHeading,
-  BreadCrumbs,
-  BreadCrumbsProps,
-} from '../../../public/components/utils/headings';
+import { ConnectedPageHeading } from '../../../public/components/utils/headings';
 import { testResourceInstance } from '../../../__mocks__/k8sResourcesMocks';
 import { MemoryRouter } from 'react-router-dom-v5-compat';
 
-describe(BreadCrumbs.displayName, () => {
-  let breadcrumbs: BreadCrumbsProps['breadcrumbs'];
-
-  beforeEach(() => {
-    configure({ testIdAttribute: 'data-test' });
-
-    breadcrumbs = [
-      { name: 'pods', path: '/pods' },
-      { name: 'containers', path: '/pods/containers' },
-    ];
-  });
-
-  it('renders each given breadcrumb', () => {
-    render(
-      <MemoryRouter>
-        <BreadCrumbs breadcrumbs={breadcrumbs} />
-      </MemoryRouter>,
-    );
-
-    breadcrumbs.forEach((crumb) => {
-      if (crumb.path) {
-        const link = screen.getByRole('link', { name: crumb.name });
-        expect(link).toHaveAttribute('href', crumb.path);
-      } else {
-        expect(screen.getByText(crumb.name)).toBeInTheDocument();
-      }
-    });
-  });
-});
-
-describe(PageHeading.displayName, () => {
+describe(ConnectedPageHeading.displayName, () => {
   beforeEach(() => {
     configure({ testIdAttribute: 'data-test' });
   });
@@ -47,7 +13,7 @@ describe(PageHeading.displayName, () => {
     const kind = 'Pod';
     render(
       <MemoryRouter>
-        <PageHeading.WrappedComponent obj={null} kind={kind} />
+        <ConnectedPageHeading.WrappedComponent obj={null} kind={kind} />
       </MemoryRouter>,
     );
 
@@ -60,7 +26,7 @@ describe(PageHeading.displayName, () => {
     const title = <span>My Custom Title</span>;
     render(
       <MemoryRouter>
-        <PageHeading.WrappedComponent obj={null} title={title} />
+        <ConnectedPageHeading.WrappedComponent obj={null} title={title} />
       </MemoryRouter>,
     );
 
@@ -71,7 +37,7 @@ describe(PageHeading.displayName, () => {
     const breadcrumbs = [];
     render(
       <MemoryRouter>
-        <PageHeading.WrappedComponent
+        <ConnectedPageHeading.WrappedComponent
           obj={{ data: testResourceInstance, loaded: true, loadError: null }}
           breadcrumbsFor={() => breadcrumbs}
         />
@@ -84,7 +50,7 @@ describe(PageHeading.displayName, () => {
   it('does not render breadcrumbs if object has not loaded', () => {
     render(
       <MemoryRouter>
-        <PageHeading.WrappedComponent obj={null} breadcrumbsFor={() => []} />
+        <ConnectedPageHeading.WrappedComponent obj={null} breadcrumbsFor={() => []} />
       </MemoryRouter>,
     );
 

Diff for: frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.tsx

@@ -15,9 +15,10 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { LockIcon } from '@patternfly/react-icons/dist/esm/icons/lock-icon';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
-import { LoadingBox, BasePageHeading, history } from '@console/internal/components/utils';
+import { LoadingBox, history } from '@console/internal/components/utils';
 import { isModifiedEvent } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import ClusterConfigurationForm from './ClusterConfigurationForm';
 import { getClusterConfigurationGroups } from './getClusterConfigurationGroups';
 import { ClusterConfigurationTabGroup } from './types';
@@ -100,7 +101,7 @@ const ClusterConfigurationPage: React.FC = () => {
   return (
     <div className="co-cluster-configuration-page">
       <DocumentTitle>{t('console-app~Cluster configuration')}</DocumentTitle>
-      <BasePageHeading
+      <PageHeading
         title={t('console-app~Cluster configuration')}
         helpText={t(
           'console-app~Set cluster-wide configuration for the console experience. Your changes will be autosaved and will affect after a refresh.',

Diff for: frontend/packages/console-app/src/components/network-policies/create-network-policy.tsx

@@ -3,9 +3,9 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
 import { AsyncResourceYAMLEditor } from '@console/internal/components/AsyncResourceYAMLEditor';
-import { PageHeading } from '@console/internal/components/utils';
 import { MultiNetworkPolicyModel, NetworkPolicyModel } from '@console/internal/models';
 import { NetworkPolicyKind } from '@console/internal/module/k8s';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { SyncedEditor } from '@console/shared/src/components/synced-editor';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
 import { safeYAMLToJS } from '@console/shared/src/utils/yaml';

Diff for: frontend/packages/console-app/src/components/pdb/PDBFormPage.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import { useParams, useLocation } from 'react-router-dom-v5-compat';
 import { CreateYAML } from '@console/internal/components/create-yaml';
-import { PageHeading, LoadingBox } from '@console/internal/components/utils';
+import { LoadingBox } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { K8sPodControllerKind, getGroupVersionKind } from '@console/internal/module/k8s';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { SyncedEditor } from '@console/shared/src/components/synced-editor';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
 import { safeJSToYAML } from '@console/shared/src/utils/yaml';

Diff for: frontend/packages/console-app/src/components/quick-starts/QuickStartCatalogPage.tsx

@@ -3,24 +3,24 @@ import { QuickStartCatalogPage as PfQuickStartCatalogPage } from '@patternfly/qu
 import { useTranslation } from 'react-i18next';
 import { LoadingBox } from '@console/internal/components/utils';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import QuickStartsLoader from './loader/QuickStartsLoader';
 
 const QuickStartCatalogPage: React.FC = () => {
   const { t } = useTranslation();
   return (
     <>
       <DocumentTitle>{t('console-app~Quick Starts')}</DocumentTitle>
+      <PageHeading
+        title={t('console-app~Quick Starts')}
+        helpText={t(
+          'console-app~Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.',
+        )}
+      />
       <QuickStartsLoader>
         {(quickStarts, loaded) =>
           loaded ? (
-            <PfQuickStartCatalogPage
-              quickStarts={quickStarts}
-              showFilter
-              title={t('console-app~Quick Starts')}
-              hint={t(
-                'console-app~Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.',
-              )}
-            />
+            <PfQuickStartCatalogPage showTitle={false} quickStarts={quickStarts} showFilter />
           ) : (
             <LoadingBox />
           )

Diff for: frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx

@@ -17,7 +17,7 @@ import {
   UserPreferenceItem,
   isUserPreferenceItem,
 } from '@console/dynamic-plugin-sdk';
-import { LoadingBox, BasePageHeading, history } from '@console/internal/components/utils';
+import { LoadingBox, history } from '@console/internal/components/utils';
 import { useExtensions } from '@console/plugin-sdk/src';
 import {
   isModifiedEvent,
@@ -26,6 +26,7 @@ import {
   Spotlight,
 } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { USER_PREFERENCES_BASE_URL } from './const';
 import {
   UserPreferenceTabGroup,
@@ -127,7 +128,7 @@ const UserPreferencePage: React.FC = () => {
           ? t('console-app~User Preferences {{activeTab}}', { activeTab })
           : t('console-app~User Preferences')}
       </DocumentTitle>
-      <BasePageHeading
+      <PageHeading
         title={t('console-app~User Preferences')}
         helpText={t(
           'console-app~Set your individual preferences for the console experience. Any changes will be autosaved.',

Diff for: frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx

@@ -32,7 +32,6 @@ import {
   convertToBaseValue,
   humanizeBinaryBytes,
   getURLSearchParams,
-  PageHeading,
 } from '@console/internal/components/utils';
 import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
@@ -57,6 +56,7 @@ import {
 } from '@console/internal/module/k8s';
 import { getName, getNamespace, getAnnotations } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { LinkTo } from '@console/shared/src/components/links/LinkTo';
 import './_create-volume-snapshot.scss';

Diff for: frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -347,12 +347,16 @@ export type UseActiveColumns = <D = any>({
 }) => [TableColumn<D>[], boolean];
 
 export type ListPageHeaderProps = {
+  /** If no title is set, only the `children` and `badge` props will be rendered */
   title: string;
+  /** A subtitle placed below the title. */
   helpText?: React.ReactNode;
+  /** A badge that is displayed next to the title of the heading */
   badge?: React.ReactNode;
-  /** Actions rendered in the header */
+  /** A primary action that is always rendered. */
   children?: React.ReactNode;
-  /** The favourites button will be hidden by default if no title is set. */
+  /** By default the favourites button is only shown while in the administrator perspective.
+   * This prop allows you to hide the button in the administrator perspective. */
   hideFavoriteButton?: boolean;
 };
 

Diff for: frontend/packages/console-shared/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,36 @@
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { LinkTo } from '@console/shared/src/components/links/LinkTo';
+
+type Breadcrumb = {
+  /** The text to be displayed in the breadcrumb */
+  name: string;
+  /** The react router path to be used for the breadcrumb */
+  path: string;
+};
+
+export type BreadcrumbsProps = {
+  breadcrumbs: Breadcrumb[];
+};
+
+/**
+ * A helper around the PatternFly Breadcrumb component.
+ */
+export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => (
+  <Breadcrumb data-test="page-heading-breadcrumbs">
+    {breadcrumbs.map((crumb, i, { length }) => {
+      return (
+        <BreadcrumbItem
+          to={crumb.path}
+          key={`${crumb.path}-${crumb.name}`}
+          data-test-id={`breadcrumb-link-${i}`}
+          isActive={i === length - 1}
+          component={LinkTo(crumb.path)}
+        >
+          {crumb.name}
+        </BreadcrumbItem>
+      );
+    })}
+  </Breadcrumb>
+);
+
+Breadcrumbs.displayName = 'Breadcrumbs';

Diff for: frontend/packages/console-shared/src/components/breadcrumbs/__tests__/Breadcrumbs.spec.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom-v5-compat';
+import { Breadcrumbs, BreadcrumbsProps } from '../Breadcrumbs';
+
+describe('Breadcrumbs', () => {
+  let breadcrumbs: BreadcrumbsProps['breadcrumbs'];
+
+  beforeEach(() => {
+    breadcrumbs = [
+      { name: 'pods', path: '/pods' },
+      { name: 'containers', path: '/pods/containers' },
+    ];
+  });
+
+  it('renders each given breadcrumb', () => {
+    render(
+      <MemoryRouter>
+        <Breadcrumbs breadcrumbs={breadcrumbs} />
+      </MemoryRouter>,
+    );
+
+    breadcrumbs.forEach((crumb) => {
+      if (crumb.path) {
+        const link = screen.getByRole('link', { name: crumb.name });
+        expect(link).toHaveAttribute('href', crumb.path);
+      } else {
+        expect(screen.getByText(crumb.name)).toBeInTheDocument();
+      }
+    });
+  });
+});

Diff for: frontend/packages/console-shared/src/components/catalog/CatalogController.tsx

@@ -5,13 +5,13 @@ import { useLocation } from 'react-router-dom-v5-compat';
 import { ResolvedExtension, CatalogItemType } from '@console/dynamic-plugin-sdk';
 import { CatalogItem, CatalogItemAttribute } from '@console/dynamic-plugin-sdk/src/extensions';
 import {
-  PageHeading,
   skeletonCatalog,
   StatusBox,
   removeQueryArgument,
   setQueryArgument,
 } from '@console/internal/components/utils';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import { useQueryParams } from '../../hooks';
 import PageBody from '../layout/PageBody';
 import CatalogView from './catalog-view/CatalogView';

Diff for: frontend/packages/console-shared/src/components/catalog/__tests__/CatalogController.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import { PageHeading } from '@console/internal/components/utils';
+import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
 import * as UseQueryParams from '@console/shared/src/hooks/useQueryParams';
 import CatalogController from '../CatalogController';
 

Diff for: frontend/packages/console-shared/src/components/editor/CodeEditor.scss

@@ -1,4 +1,4 @@
-@import '../../../../../public/style/vars';
+@use '../../../../../public/style/vars';
 
 .ocs-yaml-editor {
   // ensure editor stays fills the parent container while remaining in bounds
@@ -26,7 +26,7 @@
   }
 
   // hide CodeEditor toolbar on mobile
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: vars.$screen-sm-max) {
     .pf-v6-c-code-editor__header {
       display: none;
 
@@ -38,12 +38,8 @@
 
   .pf-v6-c-code-editor__controls {
     align-items: center;
-    // the height+padding of a PatternFly standard button.
-    // ensures that all toolbars are of the same height regardless of content
-    min-height: calc(
-      var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) +
-      var(--pf-t--global--spacer--control--vertical--default) * 2
-    );
+    // ensure all toolbars are of the same height regardless of content
+    min-height: vars.$co-button-height;
     width: 100%;
   }
 }