Add icon to clear text input value

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':