chore: Use visibilityToggle prop to control password input visibility (…

…#22363)

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(<LabeledErrorBoundInput {...defaultProps} />);
@@ -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(<LabeledErrorBoundInput {...defaultProps} />);
+
+    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(<LabeledErrorBoundInput {...defaultProps} />);
+
+    expect(await screen.findByRole('img', { name: /eye/i })).toBeVisible();
+  });
 });

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) => (
   <StyledFormGroup className={className}>
@@ -119,7 +121,7 @@ const LabeledErrorBoundInput = ({
       help={errorMessage || helpText}
       hasFeedback={!!errorMessage}
     >
-      {props.name === 'password' ? (
+      {visibilityToggle || props.name === 'password' ? (
         <StyledInputPassword
           {...props}
           {...validationMethods}