fix(db & connection): make to show/hide the password when only creati…

…ng db connection (apache#19694)

* fix(db & connection): make to show/hide the password when only creating db connection

* fix(db & connection): make to fix unit test of Database Modal

superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { Input } from 'antd';
+import { Input, Tooltip } from 'antd';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
 import InfoTooltip from 'src/components/InfoTooltip';
 import errorIcon from 'src/assets/images/icons/error.svg';
@@ -43,6 +44,10 @@ const StyledInput = styled(Input)`
   margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
 `;
 
+const StyledInputPassword = styled(Input.Password)`
+  margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
+`;
+
 const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   .ant-form-item-children-icon {
     display: none;
@@ -114,7 +119,26 @@ const LabeledErrorBoundInput = ({
       help={errorMessage || helpText}
       hasFeedback={!!errorMessage}
     >
-      <StyledInput {...props} {...validationMethods} />
+      {props.name === 'password' ? (
+        <StyledInputPassword
+          {...props}
+          {...validationMethods}
+          iconRender={visible =>
+            visible ? (
+              <Tooltip title="Hide password.">
+                <EyeInvisibleOutlined />
+              </Tooltip>
+            ) : (
+              <Tooltip title="Show password.">
+                <EyeOutlined />
+              </Tooltip>
+            )
+          }
+          role="textbox"
+        />
+      ) : (
+        <StyledInput {...props} {...validationMethods} />
+      )}
     </FormItem>
   </StyledFormGroup>
 );