refactor: fixed unsafe roles dialog and hook logic, added tests

src/components/PageComponents/Config/Device/index.tsx

@@ -3,42 +3,22 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf } from "@meshtastic/core";
-import { useUnsafeRoles } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRoles.ts";
+import { useUnsafeRolesDialog } from "@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts";
 
 export const Device = () => {
-
-  const { config, setWorkingConfig, setDialogOpen } = useDevice();
-  const { agreedToUnSafeRoles } = useUnsafeRoles();
+  const { config, setWorkingConfig } = useDevice();
+  const { validateRoleSelection } = useUnsafeRolesDialog();
 
   const onSubmit = (data: DeviceValidation) => {
     setWorkingConfig(
       create(Protobuf.Config.ConfigSchema, {
         payloadVariant: {
           case: "device",
-          value: data
+          value: data,
         },
-      }),
+      })
     );
   };
-
-  // deno-lint-ignore require-await
-  async function handleOnBeforeChange(newValue: string) {
-    if (newValue === "ROUTER" || newValue === 'REPEATER') {
-      // Open the dialog to confirm the user wants to select an unsafe role
-      setDialogOpen('unsafeRoles', true);
-
-      // We checked the persisted value of agreedToUnSafeRoles in localStorage to see if the user has agreed to unsafe roles
-      if (agreedToUnSafeRoles) {
-        return newValue;
-      } else {
-        // If the user has not agreed to unsafe roles, we return false to prevent the role from being set
-        return false;
-      }
-
-    }
-    return newValue;
-  }
-
   return (
     <DynamicForm<DeviceValidation>
       onSubmit={onSubmit}
@@ -53,7 +33,7 @@ export const Device = () => {
               name: "role",
               label: "Role",
               description: "What role the device performs on the mesh",
-              onBeforeChange: handleOnBeforeChange,
+              validate: validateRoleSelection,
               properties: {
                 enumValue: Protobuf.Config.Config_DeviceConfig_Role,
                 formatEnumName: true,
@@ -113,4 +93,4 @@ export const Device = () => {
       ]}
     />
   );
-};
+};