🪟 🐛 Fix input validation on blur and cleanup signup error handling

airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx

@@ -1,24 +1,26 @@
 import React from "react";
 
 import { Input, InputProps } from "components/base";
-import { ControlLabels } from "components/LabeledControl";
+import { ControlLabels, ControlLabelsProps } from "components/LabeledControl";
 
-type IProps = {
-  success?: boolean;
-  message?: React.ReactNode;
-  label?: React.ReactNode;
-  labelAdditionLength?: number;
-} & InputProps;
+type LabeledInputProps = Pick<ControlLabelsProps, "success" | "message" | "label" | "labelAdditionLength"> & InputProps;
 
-const LabeledInput: React.FC<IProps> = (props) => (
+const LabeledInput: React.FC<LabeledInputProps> = ({
+  error,
+  success,
+  message,
+  label,
+  labelAdditionLength,
+  ...inputProps
+}) => (
   <ControlLabels
-    error={props.error}
-    success={props.success}
-    message={props.message}
-    label={props.label}
-    labelAdditionLength={props.labelAdditionLength}
+    error={error}
+    success={success}
+    message={message}
+    label={label}
+    labelAdditionLength={labelAdditionLength}
   >
-    <Input {...props} />
+    <Input {...inputProps} error={error} />
   </ControlLabels>
 );
 

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

@@ -52,4 +52,45 @@ describe("<Input />", () => {
     fireEvent.change(inputEl, { target: { value: "one more test" } });
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  test("has focused class after focus", async () => {
+    const { getByTestId } = await render(<Input />);
+    const inputEl = getByTestId("input");
+
+    fireEvent.focus(inputEl);
+    fireEvent.focus(inputEl);
+
+    expect(getByTestId("input-container")).toHaveClass("input-container--focused");
+  });
+
+  test("does not have focused class after blur", async () => {
+    const { getByTestId } = await render(<Input />);
+    const inputEl = getByTestId("input");
+
+    fireEvent.focus(inputEl);
+    fireEvent.blur(inputEl);
+    fireEvent.blur(inputEl);
+
+    expect(getByTestId("input-container")).not.toHaveClass("input-container--focused");
+  });
+
+  test("calls onFocus if passed as prop", async () => {
+    const onFocus = jest.fn();
+    const { getByTestId } = await render(<Input onFocus={onFocus} />);
+    const inputEl = getByTestId("input");
+
+    fireEvent.focus(inputEl);
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+  });
+
+  test("calls onBlur if passed as prop", async () => {
+    const onBlur = jest.fn();
+    const { getByTestId } = await render(<Input onBlur={onBlur} />);
+    const inputEl = getByTestId("input");
+
+    fireEvent.blur(inputEl);
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -1,6 +1,7 @@
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React, { useEffect, useRef } from "react";
+import classNames from "classnames";
+import React, { useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
@@ -82,18 +83,15 @@ const VisibilityButton = styled(Button)`
   border: none;
 `;
 
-const Input: React.FC<InputProps> = (props) => {
-  const { defaultFocus = false } = props;
-
+const Input: React.FC<InputProps> = ({ defaultFocus = false, onFocus, onBlur, ...props }) => {
   const { formatMessage } = useIntl();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isContentVisible, setIsContentVisible] = useToggle(false);
-  const [focused, toggleFocused] = useToggle(false);
+  const [focused, setFocused] = useState(false);
 
   const isPassword = props.type === "password";
   const isVisibilityButtonVisible = isPassword && !props.disabled;
   const type = isPassword ? (isContentVisible ? "text" : "password") : props.type;
-  const onInputFocusChange = () => toggleFocused();
 
   useEffect(() => {
     if (defaultFocus && inputRef.current !== null) {
@@ -102,15 +100,24 @@ const Input: React.FC<InputProps> = (props) => {
   }, [inputRef, defaultFocus]);
 
   return (
-    <InputContainer className={focused ? "input-container--focused" : undefined}>
+    <InputContainer
+      className={classNames("input-container", { "input-container--focused": focused })}
+      data-testid="input-container"
+    >
       <InputComponent
         data-testid="input"
         {...props}
         ref={inputRef}
         type={type}
         isPassword={isPassword}
-        onFocus={onInputFocusChange}
-        onBlur={onInputFocusChange}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus?.(event);
+        }}
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur?.(event);
+        }}
       />
       {isVisibilityButtonVisible ? (
         <VisibilityButton

airbyte-webapp/src/locales/en.json

@@ -26,8 +26,8 @@
   "form.continue": "Continue",
   "form.yourEmail": "Your email",
   "form.email.placeholder": "[email protected]",
-  "form.email.error": "This email address doesn’t seem correct.",
-  "form.empty.error": "Field is required",
+  "form.email.error": "Enter a valid email",
+  "form.empty.error": "Required",
   "form.selectConnector": "Type to search for a connector",
   "form.searchName": "search by name...",
   "form.noResult": "No result",

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx

@@ -218,7 +218,7 @@ export const SignupForm: React.FC = () => {
         })
       }
       validateOnBlur
-      validateOnChange
+      validateOnChange={false}
     >
       {({ isValid, isSubmitting, values, status }) => (
         <Form>