From 00cbac5f065ca8ac47ee1b4faa473c7776c37203 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 27 Jul 2023 21:10:05 +1000
Subject: [PATCH] Add icon to clear text input value

---
 .../src/components/forms/ApiFormField.tsx        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/frontend/src/components/forms/ApiFormField.tsx b/src/frontend/src/components/forms/ApiFormField.tsx
index e04d91ac0b..1e8b67401b 100644
--- a/src/frontend/src/components/forms/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/ApiFormField.tsx
@@ -2,6 +2,7 @@ import { Alert, Checkbox, NumberInput, Select, TextInput } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
@@ -177,6 +178,11 @@ export function ApiFormField({
           {...definition}
           type="url"
           onChange={(event) => onChange(event.currentTarget.value)}
+          rightSection={
+            definition.value && !definition.required ? (
+              <IconX size="1rem" color="red" onClick={() => onChange('')} />
+            ) : null
+          }
         />
       );
     case 'email':
@@ -185,6 +191,11 @@ export function ApiFormField({
           {...definition}
           type="email"
           onChange={(event) => onChange(event.currentTarget.value)}
+          rightSection={
+            definition.value && !definition.required ? (
+              <IconX size="1rem" color="red" onClick={() => onChange('')} />
+            ) : null
+          }
         />
       );
     case 'string':
@@ -192,6 +203,11 @@ export function ApiFormField({
         <TextInput
           {...definition}
           onChange={(event) => onChange(event.currentTarget.value)}
+          rightSection={
+            definition.value && !definition.required ? (
+              <IconX size="1rem" color="red" onClick={() => onChange('')} />
+            ) : null
+          }
         />
       );
     case 'boolean':