Merge pull request #8103 from Jayashree-panda/baremetal

Fixes inconsistent fonts on step 1 and step 2 of baremetal wizard

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/auto-detect-volume.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form } from '@patternfly/react-core';
+import { Form, TextVariants } from '@patternfly/react-core';
 import {
   AutoDetectVolumeInner,
   AutoDetectVolumeHeader,
@@ -11,7 +11,7 @@ import '../../attached-devices.scss';
 
 export const AutoDetectVolume: React.FC<AutoDetectVolumeProps> = ({ state, dispatch }) => (
   <>
-    <AutoDetectVolumeHeader />
+    <AutoDetectVolumeHeader className="ocs-install-wizard__h3" variant={TextVariants.h3} />
     <Form noValidate={false} className="ceph-ocs-install__auto-detect-table">
       <AutoDetectVolumeInner state={state} dispatch={dispatch} taintsFilter={hasOCSTaint} />
     </Form>

frontend/packages/ceph-storage-plugin/src/components/ocs-install/attached-devices/create-sc/wizard-pages/create-local-volume-set.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, Alert, Button, Grid, GridItem } from '@patternfly/react-core';
+import { Form, Alert, Button, Grid, GridItem, TextVariants } from '@patternfly/react-core';
 import { Modal, useFlag } from '@console/shared';
 import { k8sCreate } from '@console/internal/module/k8s';
 import { LocalVolumeSetModel } from '@console/local-storage-operator-plugin/src/models';
@@ -64,7 +64,7 @@ export const CreateLocalVolumeSet: React.FC<CreateLocalVolumeSetProps> = ({
 
   return (
     <>
-      <LocalVolumeSetHeader />
+      <LocalVolumeSetHeader className="ocs-install-wizard__h3" variant={TextVariants.h3} />
       <Grid className="ceph-ocs-install__form-wrapper">
         <GridItem lg={10} md={12} sm={12}>
           <Form noValidate={false}>

frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume-inner.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { FormGroup, Radio } from '@patternfly/react-core';
+import { FormGroup, Radio, Text, TextContent } from '@patternfly/react-core';
 import { ListPage } from '@console/internal/components/factory';
 import { NodeKind } from '@console/internal/module/k8s';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
@@ -101,12 +101,19 @@ export const AutoDetectVolumeInner: React.FC<AutoDetectVolumeInnerProps> = ({
   );
 };
 
-export const AutoDetectVolumeHeader = () => {
+export const AutoDetectVolumeHeader: React.FC<AutoDetectVolumeHeaderProps> = ({
+  className,
+  variant,
+}) => {
   const { t } = useTranslation();
 
   return (
     <>
-      <h1 className="co-create-operand__header-text">{t('lso-plugin~Auto Detect Volume')}</h1>
+      <TextContent>
+        <Text component={variant} className={className}>
+          {t('lso-plugin~Auto Detect Volume')}
+        </Text>
+      </TextContent>
       <p className="help-block">
         {t('lso-plugin~Allows you to discover the available disks on all available nodes')}
       </p>
@@ -119,3 +126,8 @@ type AutoDetectVolumeInnerProps = {
   dispatch: React.Dispatch<Action>;
   taintsFilter?: (node: NodeKind) => boolean;
 };
+
+type AutoDetectVolumeHeaderProps = {
+  variant: any;
+  className?: string;
+};

frontend/packages/local-storage-operator-plugin/src/components/auto-detect-volume/auto-detect-volume.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { match as RouterMatch } from 'react-router';
-import { ActionGroup, Button, Form } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, TextVariants } from '@patternfly/react-core';
 import {
   resourcePathFromModel,
   BreadCrumbs,
@@ -105,7 +105,7 @@ const AutoDetectVolume: React.FC = withHandlePromise<AutoDetectVolumeProps & Han
             />
           </div>
 
-          <AutoDetectVolumeHeader />
+          <AutoDetectVolumeHeader variant={TextVariants.h1} />
         </div>
         <Form
           noValidate={false}

frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/create-local-volume-set.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { match as RouterMatch } from 'react-router';
-import { ActionGroup, Button, Form } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, TextVariants } from '@patternfly/react-core';
 import {
   resourcePathFromModel,
   BreadCrumbs,
@@ -79,7 +79,7 @@ const CreateLocalVolumeSet: React.FC = withHandlePromise<
             ]}
           />
         </div>
-        <LocalVolumeSetHeader />
+        <LocalVolumeSetHeader variant={TextVariants.h1} />
       </div>
       <Form
         noValidate={false}

frontend/packages/local-storage-operator-plugin/src/components/local-volume-set/local-volume-set-inner.tsx

@@ -7,6 +7,7 @@ import {
   ExpandableSection,
   TextInputTypes,
   Text,
+  TextContent,
   TextVariants,
   Tooltip,
 } from '@patternfly/react-core';
@@ -307,12 +308,19 @@ type LocalVolumeSetInnerProps = {
   taintsFilter?: (node: NodeKind) => boolean;
 };
 
-export const LocalVolumeSetHeader = () => {
+export const LocalVolumeSetHeader: React.FC<LocalVolumeSetHeaderProps> = ({
+  className,
+  variant,
+}) => {
   const { t } = useTranslation();
 
   return (
     <>
-      <h1 className="co-create-operand__header-text">{t('lso-plugin~Local Volume Set')}</h1>
+      <TextContent>
+        <Text component={variant} className={className}>
+          {t('lso-plugin~Local Volume Set')}
+        </Text>
+      </TextContent>
       <p className="help-block">
         {t(
           'lso-plugin~A Local Volume Set allows you to filter a set of storage volumes group them and create a dedicated storage class to consume storage for them.',
@@ -321,3 +329,8 @@ export const LocalVolumeSetHeader = () => {
     </>
   );
 };
+
+type LocalVolumeSetHeaderProps = {
+  variant: any;
+  className?: string;
+};