diff --git a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/ReviewStep.tsx b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/ReviewStep.tsx index 65bd7974..e94a1bfa 100644 --- a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/ReviewStep.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/ReviewStep.tsx @@ -8,7 +8,7 @@ import { TextVariants, Tooltip } from '@patternfly/react-core'; -import { FileDownloadIcon } from '@patternfly/react-icons'; +import { EyeIcon, EyeSlashIcon, FileDownloadIcon} from '@patternfly/react-icons'; import * as React from 'react'; import { mapToObject, maskPropertyValues } from 'shared'; @@ -18,15 +18,17 @@ export interface IReviewStepProps { propertyValues: Map; } -const getJson = properties => { - return JSON.stringify(maskPropertyValues(mapToObject(properties)), null, 2); +const getJson = (properties, showHiddenFields) => { + return showHiddenFields ? JSON.stringify(mapToObject(properties), null, 2) : JSON.stringify(maskPropertyValues(mapToObject(properties)), null, 2); }; export const ReviewStep: React.FC = props => { let timer; const [copied, setCopied] = React.useState(false); + const [showPassword, setShowPassword] = React.useState(false); - const tooltipRef = React.useRef(); + const downloadTooltipRef = React.useRef(); + const showTooltipRef = React.useRef(); const clipboardCopyFunc = (event, text) => { const clipboard = event.currentTarget.parentElement; @@ -72,12 +74,22 @@ export const ReviewStep: React.FC = props => { const actions = ( + + + {showPassword ? 'Hide password' : 'Show password'}} reference={showTooltipRef} /> + onClick(e, getJson(props.propertyValues))} + onClick={e => onClick(e, getJson(props.propertyValues, showPassword))} exitDelay={600} maxWidth="110px" variant="plain" @@ -88,13 +100,13 @@ export const ReviewStep: React.FC = props => { - Download JSON} reference={tooltipRef} /> + Download JSON} reference={downloadTooltipRef} /> ); @@ -103,7 +115,7 @@ export const ReviewStep: React.FC = props => { <> {props.i18nReviewMessage} - {getJson(props.propertyValues)} + {getJson(props.propertyValues, showPassword)} ); diff --git a/ui/packages/ui/src/app/shared/Utils.ts b/ui/packages/ui/src/app/shared/Utils.ts index de61ed78..fb8f3f5d 100644 --- a/ui/packages/ui/src/app/shared/Utils.ts +++ b/ui/packages/ui/src/app/shared/Utils.ts @@ -699,7 +699,7 @@ export function mapToObject(inputMap: Map): {key: string, value: export function maskPropertyValues(inputObj:{key: string, value: any}){ for (const [key, value] of Object.entries(inputObj)) { - if(key === "database.password") { + if(key.includes("password")) { inputObj[key] = "*".repeat(value.length); } }