From d86f2c5b97214de43a1bdbb331852d854e145466 Mon Sep 17 00:00:00 2001 From: Kevin Cormier Date: Tue, 3 Feb 2026 14:22:57 -0500 Subject: [PATCH 1/5] Update @stolostron/react-data-view to fix Credentials catalog Signed-off-by: Kevin Cormier --- frontend/package-lock.json | 9 +++++---- frontend/package.json | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7c6b4eacf6f..c8381c2db1f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -37,7 +37,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", @@ -7756,9 +7756,10 @@ "link": true }, "node_modules/@stolostron/react-data-view": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@stolostron/react-data-view/-/react-data-view-3.2.0.tgz", - "integrity": "sha512-WZ/2912R90eI3qC1noADDNFo5T11DxbY4ZsRXG35PHVuGQ7enMUK8Ve9eGHeKLiaWLzIteZTNnN8kCkZkb1ynw==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@stolostron/react-data-view/-/react-data-view-3.3.1.tgz", + "integrity": "sha512-gSntC2TIeTYjqIU0LvQKbk0Ma8Hkav3maylxwELOhVWKd5wOeN0EAcWQZPUpvOugOdruQ9W6gDMIiryaLBJdkg==", + "license": "Apache-2.0", "dependencies": { "debounce": "1.2.1", "fuse.js": "6.6.2", diff --git a/frontend/package.json b/frontend/package.json index d1bd3309033..a18adadac05 100644 --- a/frontend/package.json +++ b/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", From e44a5e1b0891001ffee4c5c63330c243e3e640ff Mon Sep 17 00:00:00 2001 From: Kevin Cormier Date: Tue, 3 Feb 2026 14:31:40 -0500 Subject: [PATCH 2/5] Fix credentials navigation and background colors Signed-off-by: Kevin Cormier --- .../CreateCredentialsType/CreateCredentialsAWS.tsx | 4 ++-- frontend/src/routes/Credentials/CredentialsForm.tsx | 2 +- .../CreateClusterCatalog/CreateClusterCatalog.tsx | 3 --- .../CreateClusterCatalog/common/HypershiftDiagramExpand.tsx | 1 - 4 files changed, 3 insertions(+), 7 deletions(-) diff --git a/frontend/src/routes/Credentials/CreateCredentialsType/CreateCredentialsAWS.tsx b/frontend/src/routes/Credentials/CreateCredentialsType/CreateCredentialsAWS.tsx index eb30b4b1ef4..7fe3551e783 100644 --- a/frontend/src/routes/Credentials/CreateCredentialsType/CreateCredentialsAWS.tsx +++ b/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)} /> diff --git a/frontend/src/routes/Credentials/CredentialsForm.tsx b/frontend/src/routes/Credentials/CredentialsForm.tsx index 036af7020fd..c920c167b42 100644 --- a/frontend/src/routes/Credentials/CredentialsForm.tsx +++ b/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, diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx index e09fd80b180..3257160d62f 100644 --- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx +++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/CreateClusterCatalog.tsx @@ -260,9 +260,6 @@ export function CreateClusterCatalog() { <> onAdditionalProvidersToggle(isExpanded)} toggleContent={ diff --git a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/HypershiftDiagramExpand.tsx b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/HypershiftDiagramExpand.tsx index 93fda1833ab..067175e35b5 100644 --- a/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/HypershiftDiagramExpand.tsx +++ b/frontend/src/routes/Infrastructure/Clusters/ManagedClusters/CreateClusterCatalog/common/HypershiftDiagramExpand.tsx @@ -21,7 +21,6 @@ export const HypershiftDiagramExpand = (props: HypershiftDiagramExpandProps) => onDiagramToggle(isExpanded)} From 0aa750f4b07ce59f2f0082ff045cd6e910055ada Mon Sep 17 00:00:00 2001 From: Kevin Cormier Date: Mon, 12 Jan 2026 14:56:55 -0500 Subject: [PATCH 3/5] Set page headers to be sticky to the top of the page Signed-off-by: Kevin Cormier --- frontend/packages/react-form-wizard/src/WizardPage.tsx | 2 +- frontend/src/ui-components/AcmPage/AcmPage.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/packages/react-form-wizard/src/WizardPage.tsx b/frontend/packages/react-form-wizard/src/WizardPage.tsx index 88048929d43..d9dfc0edb27 100644 --- a/frontend/packages/react-form-wizard/src/WizardPage.tsx +++ b/frontend/packages/react-form-wizard/src/WizardPage.tsx @@ -49,7 +49,7 @@ export function WizardPage(props: WizardPageProps) { ) } > - + {props.title} {props.yaml !== false && ( diff --git a/frontend/src/ui-components/AcmPage/AcmPage.tsx b/frontend/src/ui-components/AcmPage/AcmPage.tsx index 37a5ce71ca7..16d9bb18567 100644 --- a/frontend/src/ui-components/AcmPage/AcmPage.tsx +++ b/frontend/src/ui-components/AcmPage/AcmPage.tsx @@ -66,6 +66,7 @@ export function AcmPageHeader(props: AcmPageHeaderProps) { style={{ border: 'none', }} + stickyOnBreakpoint={{ default: 'top' }} > From 7197acf9c4c2c5186eb90d661a4be5c54da6f7d2 Mon Sep 17 00:00:00 2001 From: Kevin Cormier Date: Tue, 3 Feb 2026 16:47:13 -0500 Subject: [PATCH 4/5] Fix Automations and Credentials wizards Signed-off-by: Kevin Cormier --- frontend/src/components/AcmDataForm.tsx | 79 ++++++++++++++----------- 1 file changed, 43 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/AcmDataForm.tsx b/frontend/src/components/AcmDataForm.tsx index 3b1c446e2a8..5edc720b952 100644 --- a/frontend/src/components/AcmDataForm.tsx +++ b/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() const [copyHint, setCopyHint] = useState( @@ -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 ( @@ -263,42 +269,44 @@ export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element { } return ( -
+ <> {isModalWizard ? ( drawerContent() ) : ( -
- - {mode === 'details' && props.edit !== undefined && ( - - - - )} - - } - switches={ - hideYaml ? undefined : ( - - {(editorTitle || process.env.NODE_ENV === 'development') && ( - { - localStorage.setItem('yaml', (!drawerExpanded).toString()) - setDrawerExpanded(!drawerExpanded) - }} - /> + <> +
+ + {mode === 'details' && props.edit !== undefined && ( + + + )} - - ) - } - /> + + } + switches={ + hideYaml ? undefined : ( + + {(editorTitle || process.env.NODE_ENV === 'development') && ( + { + localStorage.setItem('yaml', (!drawerExpanded).toString()) + setDrawerExpanded(!drawerExpanded) + }} + /> + )} + + ) + } + /> +
{showFormErrors && mode === 'form' && (editorValidationStatus === ValidationStatus.failure || formHasErrors(t, formData)) && ( @@ -306,10 +314,10 @@ export function AcmDataFormPage(props: AcmDataFormProps): JSX.Element { {renderErrors(true, formHasRequiredErrors(formData))} )} - {drawerContent()} -
+
{drawerContent()}
+ )} -
+ ) } @@ -692,7 +700,6 @@ export function AcmDataFormWizard(props: { {isModalWizard ? (
- {/*
*/} } From 2615cb858beccc358b5d63d8d32554ce3abb2397 Mon Sep 17 00:00:00 2001 From: Kevin Cormier Date: Tue, 3 Feb 2026 17:11:00 -0500 Subject: [PATCH 5/5] Update snapshots Signed-off-by: Kevin Cormier --- .../__snapshots__/HeaderWithNotification.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/routes/Search/components/__snapshots__/HeaderWithNotification.test.tsx.snap b/frontend/src/routes/Search/components/__snapshots__/HeaderWithNotification.test.tsx.snap index 8a22d8c1678..8ab15bddff6 100644 --- a/frontend/src/routes/Search/components/__snapshots__/HeaderWithNotification.test.tsx.snap +++ b/frontend/src/routes/Search/components/__snapshots__/HeaderWithNotification.test.tsx.snap @@ -10,7 +10,7 @@ exports[`renders clusters disabled message 1`] = ` style="flex: 1;" >