From 26c28f9e1cf8b76dc7c8c51ac457b4584d43c18e Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 24 Oct 2024 22:26:09 +0530
Subject: [PATCH 1/5] Clear and cancel button in create preset form

---
 src/components/CameraFeed/ConfigureCamera.tsx | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index 03b627d48ce..b4b62c60975 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -389,16 +389,37 @@ export default function ConfigureCamera(props: Props) {
                     setPresetName("");
                   }}
                 >
-                  <TextFormField
-                    name="preset-name"
-                    className="py-4"
-                    value={presetName}
-                    onChange={({ value }) => setPresetName(value)}
-                    errorClassName="hidden"
-                    placeholder={t("preset_name_placeholder")}
-                    suggestions={presetNameSuggestions}
-                  />
-                  <div className="cui-form-button-group">
+                  <div className="relative w-full">
+                    <TextFormField
+                      name="preset-name"
+                      className="w-full py-4"
+                      value={presetName}
+                      onChange={({ value }) => setPresetName(value)}
+                      errorClassName="hidden"
+                      placeholder={t("preset_name_placeholder")}
+                      suggestions={presetNameSuggestions}
+                    />
+                    {presetName && (
+                      <button
+                        type="button"
+                        className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
+                        onClick={() => setPresetName("")}
+                      >
+                        <CareIcon icon="l-times-circle" className="text-lg" />
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+                    <Cancel
+                      shadow={false}
+                      onClick={() => {
+                        setCreatePreset(undefined);
+                        setPresetName("");
+                      }}
+                      className="ml-0 w-full sm:ml-2 sm:w-auto"
+                    />
+
                     <Submit
                       onClick={async () => {
                         const { res } = await request(FeedRoutes.createPreset, {
@@ -417,6 +438,7 @@ export default function ConfigureCamera(props: Props) {
                         cameraPresetsQuery.refetch();
                       }}
                       disabled={!presetName}
+                      className="w-full sm:w-auto"
                     />
                   </div>
                 </DialogModal>

From 50fa2c804fefd0cfaa85d5f4e30457ed64c476ee Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Fri, 25 Oct 2024 10:52:46 +0530
Subject: [PATCH 2/5] Clear and cancel button in create preset form

---
 src/components/CameraFeed/ConfigureCamera.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index b4b62c60975..a41f4ff5dbd 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -412,7 +412,6 @@ export default function ConfigureCamera(props: Props) {
 
                   <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
                     <Cancel
-                      shadow={false}
                       onClick={() => {
                         setCreatePreset(undefined);
                         setPresetName("");

From 9a0236cbb2b00cce2e7e7ad5daf65d8051bf8c5d Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Mon, 28 Oct 2024 20:40:41 +0530
Subject: [PATCH 3/5] Alignment of clear button in preset form

---
 src/components/CameraFeed/ConfigureCamera.tsx | 10 +---
 .../Form/FormFields/TextFormField.tsx         | 52 +++++++++++++------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index a41f4ff5dbd..8d671eeef34 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -398,16 +398,8 @@ export default function ConfigureCamera(props: Props) {
                       errorClassName="hidden"
                       placeholder={t("preset_name_placeholder")}
                       suggestions={presetNameSuggestions}
+                      isClear={true}
                     />
-                    {presetName && (
-                      <button
-                        type="button"
-                        className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
-                        onClick={() => setPresetName("")}
-                      >
-                        <CareIcon icon="l-times-circle" className="text-lg" />
-                      </button>
-                    )}
                   </div>
 
                   <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
index a3663358a56..0777f10c6fb 100644
--- a/src/components/Form/FormFields/TextFormField.tsx
+++ b/src/components/Form/FormFields/TextFormField.tsx
@@ -24,6 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
+    isClear?: boolean;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -35,30 +36,47 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   const hasTrailing = !!(trailing || trailingFocused);
   const hasIcon = hasLeading || hasTrailing;
   const [showPassword, setShowPassword] = useState(false);
+  const isClear = props.isClear || false;
 
   const getPasswordFieldType = () => {
     return showPassword ? "text" : "password";
   };
 
+  const handleClear = () => {
+    field.handleChange("");
+  };
+
   let child = (
-    <input
-      {...props}
-      ref={ref as React.Ref<HTMLInputElement>}
-      id={field.id}
-      className={classNames(
-        "cui-input-base peer",
-        hasLeading && (props.leadingPadding || "pl-10"),
-        hasTrailing && (props.trailingPadding || "pr-10"),
-        field.error && "border-danger-500",
-        props.inputClassName,
+    <div className="relative">
+      <input
+        {...props}
+        ref={ref as React.Ref<HTMLInputElement>}
+        id={field.id}
+        className={classNames(
+          "cui-input-base peer",
+          hasLeading && (props.leadingPadding || "pl-10"),
+          hasTrailing && (props.trailingPadding || "pr-10"),
+          field.error && "border-danger-500",
+          props.inputClassName,
+        )}
+        disabled={field.disabled}
+        type={props.type === "password" ? getPasswordFieldType() : props.type}
+        name={field.name}
+        value={field.value}
+        required={field.required}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {isClear && field.value && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
+          onClick={handleClear}
+          aria-label="Clear input"
+        >
+          <CareIcon icon="l-times-circle" className="text-lg" />
+        </button>
       )}
-      disabled={field.disabled}
-      type={props.type === "password" ? getPasswordFieldType() : props.type}
-      name={field.name}
-      value={field.value}
-      required={field.required}
-      onChange={(e) => field.handleChange(e.target.value)}
-    />
+    </div>
   );
 
   if (props.type === "password") {

From 20dbaf74981747d7c483d8dd8722c0129962dc31 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Tue, 29 Oct 2024 18:19:43 +0530
Subject: [PATCH 4/5] Clearable prop added in TextFormField

---
 src/components/CameraFeed/ConfigureCamera.tsx | 26 ++++++++-----------
 .../Form/FormFields/TextFormField.tsx         |  5 ++--
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index 8d671eeef34..70e127fa58a 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -389,26 +389,23 @@ export default function ConfigureCamera(props: Props) {
                     setPresetName("");
                   }}
                 >
-                  <div className="relative w-full">
-                    <TextFormField
-                      name="preset-name"
-                      className="w-full py-4"
-                      value={presetName}
-                      onChange={({ value }) => setPresetName(value)}
-                      errorClassName="hidden"
-                      placeholder={t("preset_name_placeholder")}
-                      suggestions={presetNameSuggestions}
-                      isClear={true}
-                    />
-                  </div>
+                  <TextFormField
+                    name="preset-name"
+                    className="w-full py-4"
+                    value={presetName}
+                    onChange={({ value }) => setPresetName(value)}
+                    errorClassName="hidden"
+                    placeholder={t("preset_name_placeholder")}
+                    suggestions={presetNameSuggestions}
+                    clearable={true}
+                  />
 
-                  <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+                  <div className="cui-form-button-group">
                     <Cancel
                       onClick={() => {
                         setCreatePreset(undefined);
                         setPresetName("");
                       }}
-                      className="ml-0 w-full sm:ml-2 sm:w-auto"
                     />
 
                     <Submit
@@ -429,7 +426,6 @@ export default function ConfigureCamera(props: Props) {
                         cameraPresetsQuery.refetch();
                       }}
                       disabled={!presetName}
-                      className="w-full sm:w-auto"
                     />
                   </div>
                 </DialogModal>
diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
index 0777f10c6fb..dddd3cdf61e 100644
--- a/src/components/Form/FormFields/TextFormField.tsx
+++ b/src/components/Form/FormFields/TextFormField.tsx
@@ -24,7 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
-    isClear?: boolean;
+    clearable?: boolean | undefined;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -36,7 +36,6 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   const hasTrailing = !!(trailing || trailingFocused);
   const hasIcon = hasLeading || hasTrailing;
   const [showPassword, setShowPassword] = useState(false);
-  const isClear = props.isClear || false;
 
   const getPasswordFieldType = () => {
     return showPassword ? "text" : "password";
@@ -66,7 +65,7 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
         required={field.required}
         onChange={(e) => field.handleChange(e.target.value)}
       />
-      {isClear && field.value && (
+      {props.clearable && field.value && (
         <button
           type="button"
           className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"

From 348d31edd9c3f365016c3be9129da43bfa2f04b6 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Wed, 30 Oct 2024 18:54:02 +0530
Subject: [PATCH 5/5] Clean up of clear and cancel button in create preset form

---
 src/components/CameraFeed/ConfigureCamera.tsx    | 1 -
 src/components/Form/FormFields/TextFormField.tsx | 6 +-----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
index 70e127fa58a..c0cb19e6a23 100644
--- a/src/components/CameraFeed/ConfigureCamera.tsx
+++ b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -407,7 +407,6 @@ export default function ConfigureCamera(props: Props) {
                         setPresetName("");
                       }}
                     />
-
                     <Submit
                       onClick={async () => {
                         const { res } = await request(FeedRoutes.createPreset, {
diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
index dddd3cdf61e..81e1edea9d0 100644
--- a/src/components/Form/FormFields/TextFormField.tsx
+++ b/src/components/Form/FormFields/TextFormField.tsx
@@ -41,10 +41,6 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
     return showPassword ? "text" : "password";
   };
 
-  const handleClear = () => {
-    field.handleChange("");
-  };
-
   let child = (
     <div className="relative">
       <input
@@ -69,7 +65,7 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
         <button
           type="button"
           className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
-          onClick={handleClear}
+          onClick={() => field.handleChange("")}
           aria-label="Clear input"
         >
           <CareIcon icon="l-times-circle" className="text-lg" />