Added closeDialog prop to tab elements

src/components/Dialog/NewDeviceDialog.tsx

@@ -16,7 +16,19 @@ import {
 import { Link } from "@components/UI/Typography/Link.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 
-const tabs = [
+export interface TabElementProps {
+  closeDialog: () => void;
+}
+
+export interface TabManifest {
+  label: string;
+  element: React.FC<TabElementProps>;
+  disabled: boolean;
+  disabledMessage: string;
+  disabledLink?: string;
+}
+
+const tabs: TabManifest[] = [
   {
     label: "HTTP",
     element: HTTP,
@@ -74,7 +86,7 @@ export const NewDeviceDialog = ({
                   {tab.disabledMessage}
                 </p>
               ) : (
-                <tab.element />
+                <tab.element closeDialog={() => onOpenChange(false)} />
               )}
             </TabsContent>
           ))}

src/components/PageComponents/Connect/BLE.tsx

@@ -1,3 +1,4 @@
+import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";
@@ -7,7 +8,7 @@ import { randId } from "@core/utils/randId.js";
 import { BleConnection, Constants } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 
-export const BLE = (): JSX.Element => {
+export const BLE = ({ closeDialog }: TabElementProps): JSX.Element => {
   const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
@@ -30,6 +31,8 @@ export const BLE = (): JSX.Element => {
     });
     device.addConnection(connection);
     subscribeAll(device, connection);
+
+    closeDialog();
   };
 
   return (

src/components/PageComponents/Connect/HTTP.tsx

@@ -1,3 +1,4 @@
+import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Input } from "@components/UI/Input.js";
 import { Label } from "@components/UI/Label.js";
@@ -9,7 +10,7 @@ import { randId } from "@core/utils/randId.js";
 import { HttpConnection } from "@meshtastic/js";
 import { Controller, useForm, useWatch } from "react-hook-form";
 
-export const HTTP = (): JSX.Element => {
+export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
   const { register, handleSubmit, control } = useForm<{
@@ -18,7 +19,7 @@ export const HTTP = (): JSX.Element => {
   }>({
     defaultValues: {
       ip: ["client.meshtastic.org", "localhost"].includes(
-        window.location.hostname,
+        window.location.hostname
       )
         ? "meshtastic.local"
         : window.location.hostname,
@@ -45,6 +46,8 @@ export const HTTP = (): JSX.Element => {
     });
     device.addConnection(connection);
     subscribeAll(device, connection);
+
+    closeDialog();
   });
 
   return (

src/components/PageComponents/Connect/Serial.tsx

@@ -1,3 +1,4 @@
+import { TabElementProps } from "@app/components/Dialog/NewDeviceDialog";
 import { Button } from "@components/UI/Button.js";
 import { Mono } from "@components/generic/Mono.js";
 import { useAppStore } from "@core/stores/appStore.js";
@@ -7,7 +8,7 @@ import { randId } from "@core/utils/randId.js";
 import { SerialConnection } from "@meshtastic/js";
 import { useCallback, useEffect, useState } from "react";
 
-export const Serial = (): JSX.Element => {
+export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
   const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
   const { addDevice } = useDeviceStore();
   const { setSelectedDevice } = useAppStore();
@@ -40,6 +41,8 @@ export const Serial = (): JSX.Element => {
       .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
     device.addConnection(connection);
     subscribeAll(device, connection);
+
+    closeDialog();
   };
 
   return (