From 2f05caacda28c190a31325ea3aab5af534bb8805 Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Tue, 21 Apr 2026 14:34:06 -0400
Subject: [PATCH 1/5] finish

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 .../react-form-wizard/src/inputs/Input.ts     |  4 +
 .../src/review/ReviewStep.css                 | 17 +++-
 .../src/review/ReviewStep.tsx                 | 99 ++++++++++++++++---
 .../src/review/ReviewStepContexts.tsx         |  3 +
 .../src/review/ReviewStepNavigation.tsx       | 16 ++-
 5 files changed, 121 insertions(+), 18 deletions(-)

diff --git a/frontend/packages/react-form-wizard/src/inputs/Input.ts b/frontend/packages/react-form-wizard/src/inputs/Input.ts
index 982d7359719..3dcd79b905e 100644
--- a/frontend/packages/react-form-wizard/src/inputs/Input.ts
+++ b/frontend/packages/react-form-wizard/src/inputs/Input.ts
@@ -40,6 +40,8 @@ export type InputCommonProps<ValueT = any> = {
   disabledInEditMode?: boolean
   /** When true, this input is omitted from the review step navigation / registry. */
   hideFromReviewStep?: boolean
+  /** When true, the review step masks the value until the user chooses to reveal it. */
+  secret?: boolean
 
   inputValueToPathValue?: (inputValue: unknown, pathValue: unknown) => unknown
   pathValueToInputValue?: (pathValue: unknown) => unknown
@@ -179,6 +181,7 @@ export function useInput(props: InputCommonProps, options?: { isArrayInput?: boo
       value,
       label: props.label,
       error: error ?? undefined,
+      secret: props.secret,
       type: isArrayInput ? InputReviewMeta.ARRAY_INPUT : InputReviewMeta.INPUT,
     })
     bumpReviewDomTree?.()
@@ -192,6 +195,7 @@ export function useInput(props: InputCommonProps, options?: { isArrayInput?: boo
     registrationPath,
     value,
     props.label,
+    props.secret,
     error,
     isArrayInput,
     bumpReviewDomTree,
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStep.css b/frontend/packages/react-form-wizard/src/review/ReviewStep.css
index 1395947b46b..dc4eb8c1c47 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStep.css
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStep.css
@@ -130,6 +130,12 @@
   gap: var(--pf-t--global--spacer--xs, 0.25rem);
 }
 
+/* Value text grows so trailing controls (reveal / pen / YAML) stay on the right. */
+.wizard-review-inline-value-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 /* Full width of the value cell so pen controls can sit at the far right. */
 .wizard-review-pen-hover-zone.wizard-review-inline-value,
 .wizard-review-pen-hover-zone--dl-group-row .wizard-review-inline-value {
@@ -138,9 +144,14 @@
   min-width: 0;
 }
 
+/* Match description-list term baseline; keep reveal + pen + arrow on one typographic line. */
+.wizard-review-pen-hover-zone--dl-group-row .wizard-review-inline-value {
+  align-items: baseline;
+}
+
 .wizard-review-pen-controls {
   display: inline-flex;
-  align-items: center;
+  align-items: baseline;
   flex-shrink: 0;
   margin-left: auto;
   gap: var(--pf-t--global--spacer--xs, 0.25rem);
@@ -181,7 +192,9 @@
 
 /* One flex child so .wizard-review-inline-value gap does not sit between each match span */
 .wizard-review-inline-value > .wizard-review-find-inline-body,
-.wizard-review-inline-value > .wizard-review-find-value-with-trailing-icon {
+.wizard-review-inline-value > .wizard-review-find-value-with-trailing-icon,
+.wizard-review-inline-value-body > .wizard-review-find-inline-body,
+.wizard-review-inline-value-body > .wizard-review-find-value-with-trailing-icon {
   flex: 1 1 auto;
   min-width: 0;
 }
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
index 0d5c02debc7..b0f17de0667 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
@@ -1,6 +1,7 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import {
   Badge,
+  Button,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -17,7 +18,7 @@ import {
 } from '@patternfly/react-core'
 import { css } from '@patternfly/react-styles'
 import titleStyles from '@patternfly/react-styles/css/components/Title/title'
-import { CheckIcon, ExclamationCircleIcon } from '@patternfly/react-icons'
+import { CheckIcon, ExclamationCircleIcon, EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'
 import {
   Fragment,
   type ComponentProps,
@@ -706,6 +707,60 @@ function renderReviewInputDescriptionContent(node: WizardInputDomNode): ReactNod
   return <></>
 }
 
+function useReviewSecretMaskState(value: unknown) {
+  const [showSecrets, setShowSecrets] = useState(() => isReviewValueUnset(value))
+  const hasValue = !isReviewValueUnset(value)
+  const masked = !showSecrets && hasValue
+  const displayContent = formatReviewValue(value)
+  const maskedText = masked ? '****************' : displayContent
+  const revealButton = hasValue ? (
+    <Button
+      type="button"
+      className="wizard-review-edit-btn"
+      icon={showSecrets ? <EyeIcon /> : <EyeSlashIcon />}
+      variant="plain"
+      onClick={(e) => {
+        e.stopPropagation()
+        setShowSecrets((s) => !s)
+      }}
+    />
+  ) : null
+  return { maskedText, revealButton }
+}
+
+function ReviewSecretMaskedValue(props: { value: unknown }) {
+  const { maskedText, revealButton } = useReviewSecretMaskState(props.value)
+  return (
+    <Split>
+      <SplitItem isFilled>{maskedText}</SplitItem>
+      {revealButton ? <SplitItem>{revealButton}</SplitItem> : null}
+    </Split>
+  )
+}
+
+function ReviewSecretPenHoverInputRow(props: {
+  inputNode: WizardInputDomNode
+  termContent: ReactNode
+  yamlVisible: boolean
+  onReviewEdit: OnReviewEditHandler
+}) {
+  const { inputNode, termContent, yamlVisible, onReviewEdit } = props
+  const { maskedText, revealButton } = useReviewSecretMaskState(inputNode.value)
+  return (
+    <ReviewPenHoverZone
+      ariaLabel="Edit"
+      descriptionListTerm={termContent}
+      descriptionListDescriptionId={inputNode.id}
+      onPenClick={() => onReviewEdit(inputNode, yamlVisible ? 'highlight' : 'navigate')}
+      onPenIconClick={() => onReviewEdit(inputNode, 'navigate')}
+      onArrowClick={yamlVisible ? () => onReviewEdit(inputNode, 'highlight') : undefined}
+      beforePenControls={revealButton}
+    >
+      <span style={{ whiteSpace: 'pre-wrap' }}>{maskedText}</span>
+    </ReviewPenHoverZone>
+  )
+}
+
 /** Base margin 32px; each nested ARRAY_INPUT adds 2px. */
 function reviewArrayInstanceMarginLeft(arrayInputNesting: number): number {
   return 32 + 2 * arrayInputNesting
@@ -848,6 +903,8 @@ function renderReviewInputRows(nodes: readonly WizardInputDomNode[], ctx: Review
             {renderReviewInputDescriptionContent(inputNode)}
             <ExclamationCircleIcon color={REVIEW_ERROR_TEXT_COLOR} />
           </span>
+        ) : inputNode.secret ? (
+          <ReviewSecretMaskedValue value={inputNode.value} />
         ) : (
           renderReviewInputDescriptionContent(inputNode)
         )
@@ -855,21 +912,37 @@ function renderReviewInputRows(nodes: readonly WizardInputDomNode[], ctx: Review
         return (
           <DescriptionListGroup key={inputNode.path} style={{ marginLeft: ctx.inputGroupMarginLeft }}>
             {onReviewEdit != null ? (
-              <ReviewPenHoverZone
-                ariaLabel="Edit"
-                descriptionListTerm={termContent}
-                descriptionListDescriptionId={inputNode.id}
-                onPenClick={() => onReviewEdit(inputNode, yamlVisible ? 'highlight' : 'navigate')}
-                onPenIconClick={() => onReviewEdit(inputNode, 'navigate')}
-                onArrowClick={yamlVisible ? () => onReviewEdit(inputNode, 'highlight') : undefined}
-              >
-                {valueContent}
-              </ReviewPenHoverZone>
+              inputNode.secret && !inputNode.error ? (
+                <ReviewSecretPenHoverInputRow
+                  inputNode={inputNode}
+                  termContent={termContent}
+                  yamlVisible={yamlVisible}
+                  onReviewEdit={onReviewEdit}
+                />
+              ) : (
+                <ReviewPenHoverZone
+                  ariaLabel="Edit"
+                  descriptionListTerm={termContent}
+                  descriptionListDescriptionId={inputNode.id}
+                  onPenClick={() => onReviewEdit(inputNode, yamlVisible ? 'highlight' : 'navigate')}
+                  onPenIconClick={() => onReviewEdit(inputNode, 'navigate')}
+                  onArrowClick={yamlVisible ? () => onReviewEdit(inputNode, 'highlight') : undefined}
+                >
+                  {valueContent}
+                </ReviewPenHoverZone>
+              )
             ) : (
               <>
                 <DescriptionListTerm>{termContent}</DescriptionListTerm>
-                <DescriptionListDescription id={inputNode.id ?? ''}>
-                  <span className="wizard-review-inline-value">{valueContent}</span>
+                <DescriptionListDescription
+                  id={inputNode.id ?? ''}
+                  style={inputNode.secret && !inputNode.error ? { whiteSpace: 'pre-wrap' } : undefined}
+                >
+                  {inputNode.secret && !inputNode.error ? (
+                    valueContent
+                  ) : (
+                    <span className="wizard-review-inline-value">{valueContent}</span>
+                  )}
                 </DescriptionListDescription>
               </>
             )}
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStepContexts.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStepContexts.tsx
index e547a50b89b..5040fc8182d 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStepContexts.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStepContexts.tsx
@@ -27,6 +27,8 @@ export type InputReviewStepMeta =
       label?: string
       error: string | undefined
       type: InputReviewMeta.INPUT
+      /** When true, review shows a reveal control instead of the raw value. */
+      secret?: boolean
       /** Nearest enclosing wizard step `id` (set when building the review DOM tree). */
       stepId?: string
     }
@@ -37,6 +39,7 @@ export type InputReviewStepMeta =
       label?: string
       error: string | undefined
       type: InputReviewMeta.ARRAY_INPUT
+      secret?: boolean
     }
   | {
       id: string
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
index b5df2577a0c..23556794849 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
@@ -258,6 +258,8 @@ export function ReviewPenHoverZone({
   onArrowClick,
   descriptionListTerm,
   descriptionListDescriptionId,
+  /** Rendered inside the trailing control cluster, immediately before the pen / arrow buttons. */
+  beforePenControls,
   zoneClickable = true,
 }: {
   as?: 'div' | 'span'
@@ -275,6 +277,7 @@ export function ReviewPenHoverZone({
   descriptionListTerm?: ReactNode
   /** `id` on the value cell (scroll target); same as non-pen description rows. */
   descriptionListDescriptionId?: string
+  beforePenControls?: ReactNode
   /**
    * When false, only the pen / arrow buttons activate edit; the wrapper is not clickable.
    * Use beside controls that need their own click targets (e.g. an expandable toggle).
@@ -312,8 +315,8 @@ export function ReviewPenHoverZone({
     [onPenClick]
   )
 
-  const controls = (
-    <span className="wizard-review-pen-controls">
+  const editButtons = (
+    <>
       <Button
         type="button"
         variant="plain"
@@ -341,6 +344,13 @@ export function ReviewPenHoverZone({
           <ArrowRightIcon />
         </Button>
       ) : null}
+    </>
+  )
+
+  const controls = (
+    <span className="wizard-review-pen-controls">
+      {beforePenControls}
+      {editButtons}
     </span>
   )
 
@@ -356,7 +366,7 @@ export function ReviewPenHoverZone({
       <DescriptionListTerm>{descriptionListTerm}</DescriptionListTerm>
       <DescriptionListDescription id={descriptionListDescriptionId ?? ''}>
         <span className="wizard-review-inline-value">
-          {children}
+          <span className="wizard-review-inline-value-body">{children}</span>
           {controls}
         </span>
       </DescriptionListDescription>

From dc43ca535a9716f95a8afd9371b07eb656262475 Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Tue, 21 Apr 2026 15:19:25 -0400
Subject: [PATCH 2/5] rabbit stew

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 frontend/packages/react-form-wizard/src/review/ReviewStep.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
index b0f17de0667..f07d1f44a51 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
@@ -717,8 +717,10 @@ function useReviewSecretMaskState(value: unknown) {
     <Button
       type="button"
       className="wizard-review-edit-btn"
-      icon={showSecrets ? <EyeIcon /> : <EyeSlashIcon />}
+      icon={showSecrets ? <EyeSlashIcon /> : <EyeIcon />}
       variant="plain"
+      aria-label={showSecrets ? 'Hide secret value' : 'Show secret value'}
+      aria-pressed={showSecrets}
       onClick={(e) => {
         e.stopPropagation()
         setShowSecrets((s) => !s)

From 0480588e59ec159806436a5734c539cdca423448 Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Wed, 22 Apr 2026 14:58:10 -0400
Subject: [PATCH 3/5] mulltiline/preserve spaces

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 .../packages/react-form-wizard/src/review/ReviewStep.tsx     | 5 +----
 .../react-form-wizard/src/review/ReviewStepFindList.tsx      | 2 +-
 .../react-form-wizard/src/review/ReviewStepNavigation.tsx    | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
index f07d1f44a51..e85c3011e21 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx
@@ -936,10 +936,7 @@ function renderReviewInputRows(nodes: readonly WizardInputDomNode[], ctx: Review
             ) : (
               <>
                 <DescriptionListTerm>{termContent}</DescriptionListTerm>
-                <DescriptionListDescription
-                  id={inputNode.id ?? ''}
-                  style={inputNode.secret && !inputNode.error ? { whiteSpace: 'pre-wrap' } : undefined}
-                >
+                <DescriptionListDescription id={inputNode.id ?? ''} style={{ whiteSpace: 'pre-wrap' }}>
                   {inputNode.secret && !inputNode.error ? (
                     valueContent
                   ) : (
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStepFindList.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStepFindList.tsx
index 65f16fceb2a..1c39863fc4c 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStepFindList.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStepFindList.tsx
@@ -443,7 +443,7 @@ export function ReviewStepFindList(props: ReviewStepFindListProps) {
                     ) : (
                       <>
                         <DescriptionListTerm>{termBase}</DescriptionListTerm>
-                        <DescriptionListDescription id={row.node.id ?? ''}>
+                        <DescriptionListDescription id={row.node.id ?? ''} style={{ whiteSpace: 'pre-wrap' }}>
                           <span className="wizard-review-inline-value">{valueContent}</span>
                         </DescriptionListDescription>
                       </>
diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx b/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
index 23556794849..b79cdb3bde2 100644
--- a/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
+++ b/frontend/packages/react-form-wizard/src/review/ReviewStepNavigation.tsx
@@ -364,7 +364,7 @@ export function ReviewPenHoverZone({
       onKeyDown={zoneClickable ? onZoneKeyDown : undefined}
     >
       <DescriptionListTerm>{descriptionListTerm}</DescriptionListTerm>
-      <DescriptionListDescription id={descriptionListDescriptionId ?? ''}>
+      <DescriptionListDescription id={descriptionListDescriptionId ?? ''} style={{ whiteSpace: 'pre-wrap' }}>
         <span className="wizard-review-inline-value">
           <span className="wizard-review-inline-value-body">{children}</span>
           {controls}

From a83fb6e2f4d922a0f83874df7fef022382feb4fc Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Wed, 22 Apr 2026 15:04:44 -0400
Subject: [PATCH 4/5] secret not optional

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 frontend/packages/react-form-wizard/src/inputs/Input.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/packages/react-form-wizard/src/inputs/Input.ts b/frontend/packages/react-form-wizard/src/inputs/Input.ts
index 3dcd79b905e..4acfc6ff468 100644
--- a/frontend/packages/react-form-wizard/src/inputs/Input.ts
+++ b/frontend/packages/react-form-wizard/src/inputs/Input.ts
@@ -40,8 +40,7 @@ export type InputCommonProps<ValueT = any> = {
   disabledInEditMode?: boolean
   /** When true, this input is omitted from the review step navigation / registry. */
   hideFromReviewStep?: boolean
-  /** When true, the review step masks the value until the user chooses to reveal it. */
-  secret?: boolean
+  secret: boolean
 
   inputValueToPathValue?: (inputValue: unknown, pathValue: unknown) => unknown
   pathValueToInputValue?: (pathValue: unknown) => unknown

From 875aa9c3b2392b6af3ae62fc2a16fab0312657b3 Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Wed, 22 Apr 2026 15:42:27 -0400
Subject: [PATCH 5/5] move secret into common inputs

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 frontend/packages/react-form-wizard/src/inputs/Input.ts         | 2 +-
 frontend/packages/react-form-wizard/src/inputs/WizTextArea.tsx  | 1 -
 frontend/packages/react-form-wizard/src/inputs/WizTextInput.tsx | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/packages/react-form-wizard/src/inputs/Input.ts b/frontend/packages/react-form-wizard/src/inputs/Input.ts
index 4acfc6ff468..df3c5193712 100644
--- a/frontend/packages/react-form-wizard/src/inputs/Input.ts
+++ b/frontend/packages/react-form-wizard/src/inputs/Input.ts
@@ -40,7 +40,7 @@ export type InputCommonProps<ValueT = any> = {
   disabledInEditMode?: boolean
   /** When true, this input is omitted from the review step navigation / registry. */
   hideFromReviewStep?: boolean
-  secret: boolean
+  secret?: boolean
 
   inputValueToPathValue?: (inputValue: unknown, pathValue: unknown) => unknown
   pathValueToInputValue?: (pathValue: unknown) => unknown
diff --git a/frontend/packages/react-form-wizard/src/inputs/WizTextArea.tsx b/frontend/packages/react-form-wizard/src/inputs/WizTextArea.tsx
index 365daa94500..993f0695502 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizTextArea.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizTextArea.tsx
@@ -11,7 +11,6 @@ import useResizeObserver from '@react-hook/resize-observer'
 export type WizTextAreaProps = InputCommonProps<string> & {
   label: string
   placeholder?: string
-  secret?: boolean
   canPaste?: boolean
 }
 
diff --git a/frontend/packages/react-form-wizard/src/inputs/WizTextInput.tsx b/frontend/packages/react-form-wizard/src/inputs/WizTextInput.tsx
index 0b79f9969e6..81715ae6d2e 100644
--- a/frontend/packages/react-form-wizard/src/inputs/WizTextInput.tsx
+++ b/frontend/packages/react-form-wizard/src/inputs/WizTextInput.tsx
@@ -9,7 +9,6 @@ import { WizFormGroup } from './WizFormGroup'
 
 export type WizTextInputProps = InputCommonProps<string> & {
   placeholder?: string
-  secret?: boolean
   canPaste?: boolean
 }