diff --git a/frontend/packages/react-form-wizard/src/inputs/Input.ts b/frontend/packages/react-form-wizard/src/inputs/Input.ts index 982d7359719..df3c5193712 100644 --- a/frontend/packages/react-form-wizard/src/inputs/Input.ts +++ b/frontend/packages/react-form-wizard/src/inputs/Input.ts @@ -40,6 +40,7 @@ export type InputCommonProps = { disabledInEditMode?: boolean /** When true, this input is omitted from the review step navigation / registry. */ hideFromReviewStep?: boolean + secret?: boolean inputValueToPathValue?: (inputValue: unknown, pathValue: unknown) => unknown pathValueToInputValue?: (pathValue: unknown) => unknown @@ -179,6 +180,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 +194,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/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 & { 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 & { placeholder?: string - secret?: boolean canPaste?: boolean } diff --git a/frontend/packages/react-form-wizard/src/review/ReviewStep.css b/frontend/packages/react-form-wizard/src/review/ReviewStep.css index 3148004d333..1cba77d56af 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); @@ -189,7 +200,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 c9e059e9feb..2d862f4561a 100644 --- a/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx +++ b/frontend/packages/react-form-wizard/src/review/ReviewStep.tsx @@ -2,6 +2,7 @@ import { Alert, Badge, + Button, DescriptionList, DescriptionListDescription, DescriptionListGroup, @@ -18,7 +19,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, @@ -769,6 +770,62 @@ 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 ? ( + ) : null} + + ) + + const controls = ( + + {beforePenControls} + {editButtons} ) @@ -359,9 +369,9 @@ export function ReviewPenHoverZone({ onKeyDown={zoneClickable ? onZoneKeyDown : undefined} > {descriptionListTerm} - + - {children} + {children} {controls}