Config form improvements (#652)

* Config reset work WIP

* Config reset WIP

* Fix tests, tsc, linting

* Form reset adjustments

* Add ManagedModeDialog

* Remove debug logging

* Add Suspense

* Review fixes

---------

Co-authored-by: philon- <philon-@users.noreply.github.com>

src/components/Form/FormSelect.tsx

@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from "@components/UI/Select.tsx";
 import { type FieldValues, useController } from "react-hook-form";
+import { cn } from "@core/utils/cn.ts";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select";
@@ -38,6 +39,8 @@ export function SelectInput<T extends FieldValues>({
   control,
   disabled,
   field,
+  isDirty,
+  invalid,
 }: GenericFormElementProps<T, SelectFieldProps<T>>) {
   const {
     field: { value, onChange, ref, onBlur, ...rest },
@@ -46,8 +49,13 @@ export function SelectInput<T extends FieldValues>({
     control,
   });
 
-  const { enumValue, formatEnumName, defaultValue, ...remainingProperties } =
-    field.properties;
+  const {
+    enumValue,
+    formatEnumName,
+    defaultValue,
+    className,
+    ...remainingProperties
+  } = field.properties;
   const valueToKeyMap: Record<string, string> = {};
   const optionsEnumValues: [string, number][] = [];
 
@@ -82,6 +90,13 @@ export function SelectInput<T extends FieldValues>({
     >
       <SelectTrigger
         id={field.name}
+        className={cn([
+          className,
+          isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
+          invalid
+            ? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2"
+            : "",
+        ])}
         ref={ref}
         onBlur={onBlur}
         {...remainingProperties}