From 05b8d2476baf0c252e8ebd4f0e10873d9d6295de Mon Sep 17 00:00:00 2001
From: Mohamed Khelif <mohamed.khelif@mongodb.com>
Date: Tue, 31 Oct 2023 15:04:14 -0400
Subject: [PATCH] Refactor tupleselect to use special textinput with validation

---
 .../TextInputWithValidation/index.tsx         | 16 +++++++
 src/components/TupleSelect/index.tsx          | 45 +++----------------
 2 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/TextInputWithValidation/index.tsx b/src/components/TextInputWithValidation/index.tsx
index 08f0d91f12..8e22376d83 100644
--- a/src/components/TextInputWithValidation/index.tsx
+++ b/src/components/TextInputWithValidation/index.tsx
@@ -8,8 +8,20 @@ import type { TextInputWithGlyphProps } from "components/TextInputWithGlyph";
 
 const { yellow } = palette;
 type TextInputWithValidationProps = {
+  /**
+   * `onSubmit` will be called when the user submits a new input with the enter key or the plus button
+   * if the input is valid
+   * @param value - the value of the input
+   * @returns
+   */
   onSubmit?: (value: string) => void;
   validator?: (value: string) => boolean;
+  /**
+   * `onChange` will be called when the user types into the input and the input is valid
+   * @param value - the value of the input
+   * @returns void
+   */
+  onChange?: (value: string) => void;
   validatorErrorMessage?: string;
   label?: React.ReactNode;
   placeholder?: string;
@@ -18,6 +30,7 @@ type TextInputWithValidationProps = {
 const TextInputWithValidation: React.FC<TextInputWithValidationProps> =
   forwardRef((props, ref) => {
     const {
+      onChange = () => {},
       onSubmit = () => {},
       placeholder = "",
       validator = () => true,
@@ -36,6 +49,9 @@ const TextInputWithValidation: React.FC<TextInputWithValidationProps> =
     };
 
     const handleOnChange = (value: string) => {
+      if (isValid) {
+        onChange(value);
+      }
       setInput(value);
     };
 
diff --git a/src/components/TupleSelect/index.tsx b/src/components/TupleSelect/index.tsx
index 5b907b1091..a09609adfc 100644
--- a/src/components/TupleSelect/index.tsx
+++ b/src/components/TupleSelect/index.tsx
@@ -1,15 +1,10 @@
 import { useState } from "react";
 import styled from "@emotion/styled";
-import IconButton from "@leafygreen-ui/icon-button";
-import { palette } from "@leafygreen-ui/palette";
 import { Select, Option } from "@leafygreen-ui/select";
 import { Label } from "@leafygreen-ui/typography";
-import Icon from "components/Icon";
-import IconTooltip from "components/IconTooltip";
-import TextInput from "components/TextInputWithGlyph";
+import TextInput from "components/TextInputWithValidation";
 import { size } from "constants/tokens";
 
-const { yellow } = palette;
 type option = {
   value: string;
   displayName: string;
@@ -30,20 +25,12 @@ const TupleSelect: React.FC<TupleSelectProps> = ({
   validator = () => true,
   validatorErrorMessage = "Invalid Input",
 }) => {
-  const [input, setInput] = useState("");
   const [selected, setSelected] = useState(options[0].value);
-  const isValid = validator(input);
 
-  const handleOnSubmit = () => {
-    if (isValid) {
-      onSubmit({ category: selected, value: input });
-      setInput("");
-    }
+  const handleOnSubmit = (input: string) => {
+    onSubmit({ category: selected, value: input });
   };
 
-  const handleOnChange = (value: string) => {
-    setInput(value);
-  };
   const selectedOption = options.find((o) => o.value === selected);
 
   return (
@@ -73,31 +60,11 @@ const TupleSelect: React.FC<TupleSelectProps> = ({
           id="filter-input"
           aria-label={selectedOption.displayName}
           data-cy="tuple-select-input"
-          value={input}
           type="search"
-          onChange={(e) => handleOnChange(e.target.value)}
           placeholder={selectedOption.placeHolderText}
-          onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
-            e.key === "Enter" && handleOnSubmit()
-          }
-          icon={
-            isValid ? (
-              <IconButton
-                onClick={handleOnSubmit}
-                aria-label="Select plus button"
-              >
-                <Icon glyph="Plus" data-cy="tuple-select-button" />
-              </IconButton>
-            ) : (
-              <IconTooltip
-                glyph="Warning"
-                data-cy="tuple-select-warning"
-                fill={yellow.base}
-              >
-                {validatorErrorMessage}
-              </IconTooltip>
-            )
-          }
+          validator={validator}
+          validatorErrorMessage={validatorErrorMessage}
+          onSubmit={handleOnSubmit}
         />
       </InputGroup>
     </Container>