diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
index a49b2713d07ad..1202e31a1e382 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
@@ -60,6 +60,7 @@ describe('LabeledErrorBoundInput', () => {
expect(textboxInput).toBeVisible();
expect(errorText).toBeVisible();
});
+
it('renders a LabeledErrorBoundInput with a InfoTooltip', async () => {
defaultProps.hasTooltip = true;
render();
@@ -75,4 +76,18 @@ describe('LabeledErrorBoundInput', () => {
expect(textboxInput).toBeVisible();
expect(await screen.findByText('This is a tooltip')).toBeInTheDocument();
});
+
+ it('becomes a password input if visibilityToggle prop is passed in', async () => {
+ defaultProps.visibilityToggle = true;
+ render();
+
+ expect(await screen.findByRole('img', { name: /eye/i })).toBeVisible();
+ });
+
+ it('becomes a password input if props.name === password (backwards compatibility)', async () => {
+ defaultProps.name = 'password';
+ render();
+
+ expect(await screen.findByRole('img', { name: /eye/i })).toBeVisible();
+ });
});
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index ebbb1c023622e..0e6dcc626fec3 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -37,6 +37,7 @@ export interface LabeledErrorBoundInputProps {
tooltipText?: string | null;
id?: string;
classname?: string;
+ visibilityToggle?: boolean;
[x: string]: any;
}
@@ -101,6 +102,7 @@ const LabeledErrorBoundInput = ({
tooltipText,
id,
className,
+ visibilityToggle,
...props
}: LabeledErrorBoundInputProps) => (
@@ -119,7 +121,7 @@ const LabeledErrorBoundInput = ({
help={errorMessage || helpText}
hasFeedback={!!errorMessage}
>
- {props.name === 'password' ? (
+ {visibilityToggle || props.name === 'password' ? (