From 288974dff3bee02570afac4fda55e6553bf0ebda Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Wed, 14 Jun 2023 12:15:35 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(nameInputComponent):=20add=20E?=
 =?UTF-8?q?ditFlowSettings=20component=20to=20allow=20editing=20of=20flow?=
 =?UTF-8?q?=20name=20and=20description=20The=20EditFlowSettings=20componen?=
 =?UTF-8?q?t=20is=20a=20form=20that=20allows=20the=20user=20to=20edit=20th?=
 =?UTF-8?q?e=20name=20and=20description=20of=20a=20flow.=20It=20receives?=
 =?UTF-8?q?=20the=20current=20name=20and=20description=20as=20props,=20as?=
 =?UTF-8?q?=20well=20as=20a=20list=20of=20flows,=20the=20current=20tab=20I?=
 =?UTF-8?q?D,=20and=20functions=20to=20update=20the=20name,=20description,?=
 =?UTF-8?q?=20and=20flow.=20The=20component=20also=20includes=20a=20charac?=
 =?UTF-8?q?ter=20limit=20for=20the=20name=20input=20and=20displays=20an=20?=
 =?UTF-8?q?error=20message=20if=20the=20limit=20is=20reached.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/nameInputComponent/index.tsx   | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/frontend/src/components/nameInputComponent/index.tsx

diff --git a/src/frontend/src/components/nameInputComponent/index.tsx b/src/frontend/src/components/nameInputComponent/index.tsx
new file mode 100644
index 000000000..126a99645
--- /dev/null
+++ b/src/frontend/src/components/nameInputComponent/index.tsx
@@ -0,0 +1,91 @@
+import React, { useState, ChangeEvent } from "react";
+import { Textarea } from "../ui/textarea";
+import { Label } from "../ui/label";
+import { Input } from "../ui/input";
+
+type InputProps = {
+  name: string | null;
+  description: string | null;
+  maxLength?: number;
+  flows: Array<{ id: string; name: string }>;
+  tabId: string;
+  setName: (name: string) => void;
+  setDescription: (description: string) => void;
+  updateFlow: (flow: { id: string; name: string }) => void;
+};
+
+export const EditFlowSettings: React.FC<InputProps> = ({
+  name,
+  description,
+  maxLength = 50,
+  flows,
+  tabId,
+  setName,
+  setDescription,
+  updateFlow,
+}) => {
+  const [isMaxLength, setIsMaxLength] = useState(false);
+
+  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    if (value.length >= maxLength) {
+      setIsMaxLength(true);
+    } else {
+      setIsMaxLength(false);
+    }
+
+    if (value !== "") {
+      let newFlow = flows.find((f) => f.id === tabId);
+      if (newFlow) {
+        newFlow.name = value;
+        setName(value);
+        updateFlow(newFlow);
+      }
+    } else {
+      setName(value);
+    }
+  };
+
+  const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setDescription(event.target.value);
+  };
+
+  return (
+    <div>
+      <Label>
+        <div className="flex justify-between">
+          <span className="font-medium">Name</span>{" "}
+          {isMaxLength && (
+            <span className="text-red-500 animate-pulse ml-10">
+              Character limit reached
+            </span>
+          )}
+        </div>
+        <Input
+          className="mt-2"
+          onChange={handleNameChange}
+          type="text"
+          name="name"
+          value={name ?? ""}
+          placeholder="File name"
+          id="name"
+          maxLength={maxLength}
+        />
+      </Label>
+      <Label>
+        <span className="font-medium">Description (optional)</span>
+        <Textarea
+          name="description"
+          id="description"
+          onChange={handleDescriptionChange}
+          value={description ?? ""}
+          placeholder="Flow description"
+          className="max-h-[100px] mt-2"
+          rows={3}
+        />
+      </Label>
+    </div>
+  );
+};
+
+export default EditFlowSettings;