Ensure input component can be assigned type

airbyte-webapp/src/components/base/Input/Input.test.tsx

@@ -5,13 +5,23 @@ import { Input } from "./Input";
 describe("<Input />", () => {
   test("renders text input", () => {
     const value = "[email protected]";
-    const { getByTestId, queryByTestId } = render(<Input defaultValue={value} />);
+    const { getByTestId, queryByTestId } = render(<Input type="text" defaultValue={value} />);
 
     expect(getByTestId("input")).toHaveAttribute("type", "text");
     expect(getByTestId("input")).toHaveValue(value);
     expect(queryByTestId("toggle-password-visibility-button")).toBeFalsy();
   });
 
+  test("renders other type of input", () => {
+    const type = "number";
+    const value = 888;
+    const { getByTestId, queryByTestId } = render(<Input type={type} defaultValue={value} />);
+
+    expect(getByTestId("input")).toHaveAttribute("type", type);
+    expect(getByTestId("input")).toHaveValue(value);
+    expect(queryByTestId("toggle-password-visibility-button")).toBeFalsy();
+  });
+
   test("renders password input with visibilty button", () => {
     const value = "eight888";
     const { getByTestId, getByRole } = render(<Input type="password" defaultValue={value} />);

airbyte-webapp/src/components/base/Input/Input.tsx

@@ -82,13 +82,14 @@ const Input: React.FC<InputProps> = (props) => {
 
   const isPassword = props.type === "password";
   const isVisibilityButtonVisible = isPassword && !props.disabled;
+  const type = isPassword ? (isContentVisible ? "text" : "password") : props.type;
   const onInputFocusChange = () => toggleFocused();
 
   return (
     <InputContainer {...props} className={focused ? "input-container--focused" : undefined}>
       <InputComponent
         {...props}
-        type={!isPassword || isContentVisible ? "text" : "password"}
+        type={type}
         isPassword={isPassword}
         onFocus={onInputFocusChange}
         onBlur={onInputFocusChange}