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

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

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { Device } from '@components/PageComponents/Config/Device/index.tsx';
+import { useDevice } from '@core/stores/deviceStore.ts';
+import { useUnsafeRolesDialog } from '@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog.ts';
+
+// Mock dependencies
+vi.mock('@core/stores/deviceStore', () => ({
+  useDevice: vi.fn()
+}));
+
+vi.mock('@components/Dialog/UnsafeRolesDialog/useUnsafeRolesDialog', () => ({
+  useUnsafeRolesDialog: vi.fn()
+}));
+
+describe('Device component with UnsafeRolesDialog', () => {
+  const setWorkingConfigMock = vi.fn();
+  const validateRoleDialogResultMock = vi.fn();
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+    
+    // Mock useDevice hook
+    (useDevice as any).mockReturnValue({
+      config: {
+        device: {}
+      },
+      setWorkingConfig: setWorkingConfigMock
+    });
+    
+    // Mock useUnsafeRolesDialog hook
+    (useUnsafeRolesDialog as any).mockReturnValue({
+      validateRoleDialogResult: validateRoleDialogResultMock
+    });
+  });
+
+  it('should use the validateRoleDialogResult from the hook', () => {
+    render(<Device />);
+    
+    // Verify the hook was called
+    expect(useUnsafeRolesDialog).toHaveBeenCalled();
+    
+    // Verify the form is using the validation function from the hook
+    expect(setWorkingConfigMock).not.toHaveBeenCalled(); // Just ensure the component rendered without errors
+  });
+});

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 = () => {
       ]}
     />
   );
-};
+};