ACM-28595 fix wizard footers

frontend/package.json

@@ -66,7 +66,7 @@
     "@react-hook/resize-observer": "1.2.6",
     "@redhat-cloud-services/rule-components": "^4.0.51",
     "@reduxjs/toolkit": "1.9.x",
-    "@stolostron/react-data-view": "^3.2.0",
+    "@stolostron/react-data-view": "^3.3.1",
     "@tanstack/react-query": "^4.42.2",
     "ajv": "8.17.1",
     "axios": "^0.27.2",

frontend/packages/react-form-wizard/src/WizardPage.tsx

@@ -49,7 +49,7 @@ export function WizardPage(props: WizardPageProps) {
         )
       }
     >
-      <PageSection hasBodyWrapper={false}>
+      <PageSection hasBodyWrapper={false} stickyOnBreakpoint={{ default: 'top' }}>
         <Flex alignItems={{ default: 'alignItemsCenter' }} wrap="noWrap" style={{ flexWrap: 'nowrap', gap: 16 }}>
           <Title headingLevel="h1">{props.title}</Title>
           {props.yaml !== false && (

frontend/src/components/AcmDataForm.tsx

@@ -124,6 +124,7 @@ const defaultPanelSize = 600
 
 export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element {
   const pageRef = useRef(null)
+  const headerRef = useRef(null)
   const { t } = useTranslation()
 
   const { editorTitle, schema, secrets, immutables, formData, globalWizardAlert, hideYaml, isModalWizard } = props
@@ -133,6 +134,7 @@ export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element {
 
   const mode = props.mode ?? 'form'
   const isHorizontal = props.isHorizontal ?? false
+  const [headerHeight, setHeaderHeight] = useState(130)
   const [drawerExpanded, setDrawerExpanded] = useState(localStorage.getItem('yaml') === 'true')
   const [drawerMaxSize, setDrawerMaxSize] = useState<string | undefined>()
   const [copyHint, setCopyHint] = useState<ReactNode>(
@@ -160,6 +162,10 @@ export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element {
     setDrawerMaxSize(inline ? `${Math.round((entry.contentRect.width * 2) / 3)}px` : undefined)
   })
 
+  useResizeObserver(headerRef, (entry) => {
+    setHeaderHeight(entry.contentRect.height)
+  })
+
   const drawerContent = () => {
     return (
       <Drawer isExpanded={drawerExpanded} isInline={true}>
@@ -263,53 +269,55 @@ export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element {
   }
 
   return (
-    <div ref={pageRef} style={{ height: hideYaml ? '40em' : '100%' }}>
+    <>
       {isModalWizard ? (
         drawerContent()
       ) : (
-        <div style={{ height: '100%' }}>
-          <AcmPageHeader
-            title={formData.title}
-            titleTooltip={formData.titleTooltip}
-            description={formData.description}
-            breadcrumb={formData.breadcrumb}
-            actions={
-              <ActionList>
-                {mode === 'details' && props.edit !== undefined && (
-                  <ActionListItem>
-                    <Button onClick={props.edit}>{t('Edit')}</Button>
-                  </ActionListItem>
-                )}
-              </ActionList>
-            }
-            switches={
-              hideYaml ? undefined : (
-                <Fragment>
-                  {(editorTitle || process.env.NODE_ENV === 'development') && (
-                    <Switch
-                      label="YAML"
-                      isChecked={drawerExpanded}
-                      onChange={() => {
-                        localStorage.setItem('yaml', (!drawerExpanded).toString())
-                        setDrawerExpanded(!drawerExpanded)
-                      }}
-                    />
+        <>
+          <div ref={headerRef}>
+            <AcmPageHeader
+              title={formData.title}
+              titleTooltip={formData.titleTooltip}
+              description={formData.description}
+              breadcrumb={formData.breadcrumb}
+              actions={
+                <ActionList>
+                  {mode === 'details' && props.edit !== undefined && (
+                    <ActionListItem>
+                      <Button onClick={props.edit}>{t('Edit')}</Button>
+                    </ActionListItem>
                   )}
-                </Fragment>
-              )
-            }
-          />
+                </ActionList>
+              }
+              switches={
+                hideYaml ? undefined : (
+                  <Fragment>
+                    {(editorTitle || process.env.NODE_ENV === 'development') && (
+                      <Switch
+                        label="YAML"
+                        isChecked={drawerExpanded}
+                        onChange={() => {
+                          localStorage.setItem('yaml', (!drawerExpanded).toString())
+                          setDrawerExpanded(!drawerExpanded)
+                        }}
+                      />
+                    )}
+                  </Fragment>
+                )
+              }
+            />
+          </div>
           {showFormErrors &&
             mode === 'form' &&
             (editorValidationStatus === ValidationStatus.failure || formHasErrors(t, formData)) && (
               <PageSection hasBodyWrapper={false} style={{ paddingTop: 0 }}>
                 {renderErrors(true, formHasRequiredErrors(formData))}
               </PageSection>
             )}
-          {drawerContent()}
-        </div>
+          <div style={{ height: `calc(100% - ${headerHeight}px)` }}>{drawerContent()}</div>
+        </>
       )}
-    </div>
+    </>
   )
 }
 
@@ -692,7 +700,6 @@ export function AcmDataFormWizard(props: {
     <Fragment>
       {isModalWizard ? (
         <div ref={wizardRef}>
-          {/* <div ref={wizardRef} style={{ height: '100%' }}> */}
           <Wizard
             height={modalHeight}
             header={<WizardHeader title={formData.title} description={formData.description} onClose={cancel} />}

frontend/src/routes/Credentials/CreateCredentialsType/CreateCredentialsAWS.tsx

@@ -69,8 +69,8 @@ export function CreateCredentialsAWS() {
           items={cards}
           itemKeyFn={keyFn}
           itemToCardFn={(card) => card}
-          onBack={back(NavigationPath.createCluster)}
-          onCancel={cancel(NavigationPath.clusters)}
+          onBack={back(NavigationPath.addCredentials)}
+          onCancel={cancel(NavigationPath.credentials)}
         />
       </DataViewStringContext.Provider>
     </AcmPage>

frontend/src/routes/Credentials/CredentialsForm.tsx

@@ -1541,7 +1541,7 @@ export function CredentialsForm(
     cancelLabel: t('Cancel'),
     nextLabel: t('Next'),
     backLabel: t('Back'),
-    back: handleModalToggle ? guardedHandleModalToggle : back(NavigationPath.credentials),
+    back: handleModalToggle ? guardedHandleModalToggle : back(NavigationPath.addCredentials),
     cancel: handleModalToggle ? guardedHandleModalToggle : cancel(NavigationPath.credentials),
     stateToSyncs,
     stateToData,

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx

@@ -260,9 +260,6 @@ export function CreateClusterCatalog() {
               <>
                 <Divider style={{ paddingTop: '24px', paddingBottom: '12px' }} />
                 <ExpandableSection
-                  style={{
-                    backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
-                  }}
                   isExpanded={isAdditionalProvidersExpanded}
                   onToggle={(_event, isExpanded: boolean) => onAdditionalProvidersToggle(isExpanded)}
                   toggleContent={

frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/HypershiftDiagramExpand.tsx

@@ -21,7 +21,6 @@ export const HypershiftDiagramExpand = (props: HypershiftDiagramExpandProps) =>
     <ExpandableSection
       style={{
         paddingTop: '24px',
-        backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
       }}
       isExpanded={isDiagramExpanded}
       onToggle={(_event, isExpanded) => onDiagramToggle(isExpanded)}

frontend/src/routes/Search/components/__snapshots__/HeaderWithNotification.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`renders clusters disabled message 1`] = `
         style="flex: 1;"
       >
         <section
-          class="pf-v6-c-page__main-section pf-m-no-padding"
+          class="pf-v6-c-page__main-section pf-m-no-padding pf-m-sticky-top"
           id="page-header"
         >
           <div
@@ -140,7 +140,7 @@ exports[`renders empty message 1`] = `
         style="flex: 1;"
       >
         <section
-          class="pf-v6-c-page__main-section pf-m-no-padding"
+          class="pf-v6-c-page__main-section pf-m-no-padding pf-m-sticky-top"
           id="page-header"
         >
           <div
@@ -212,7 +212,7 @@ exports[`renders unknown message 1`] = `
         style="flex: 1;"
       >
         <section
-          class="pf-v6-c-page__main-section pf-m-no-padding"
+          class="pf-v6-c-page__main-section pf-m-no-padding pf-m-sticky-top"
           id="page-header"
         >
           <div
@@ -342,7 +342,7 @@ exports[`renders with Global Search alert & no message 1`] = `
         style="flex: 1;"
       >
         <section
-          class="pf-v6-c-page__main-section pf-m-no-padding"
+          class="pf-v6-c-page__main-section pf-m-no-padding pf-m-sticky-top"
           id="page-header"
         >
           <div

frontend/src/ui-components/AcmPage/AcmPage.tsx

@@ -66,6 +66,7 @@ export function AcmPageHeader(props: AcmPageHeaderProps) {
       style={{
         border: 'none',
       }}
+      stickyOnBreakpoint={{ default: 'top' }}
     >
       <Split>
         <SplitItem isFilled>