feat(connections): Add connections page (replaces new device dialog) (#919)
* feat(conn): add connection screen and logic * fixes from code review * force https * code review fixes * add http for self testing * enable deviceStore persistance * added translations * disabled feature flag * i18n updates * chore: add new folders to biome config (#910) * chore(i18n): New Crowdin Translations by GitHub Action (#908) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * fix: use correct deprecated GPS coordinate format enum (#917) The Config_DisplayConfig_GpsCoordinateFormat export doesn't exist in the protobufs package. The correct export is Config_DisplayConfig_DeprecatedGpsCoordinateFormat, which matches what's used in the validation schema. Added TODO comment explaining that this field is deprecated since protobufs 2.7.4 and should be migrated to DeviceUIConfig.gps_format when DeviceUI settings are implemented. * style: fix line wrapping for GPS coordinate format enum (#918) - Split long enum reference across multiple lines to improve code readability - Maintains consistent code formatting standards without changing functionality * fix(core): ensure core package works in browser (#923) * fix(core): ensure core package works in browser * style(core): revert new line removal * fix: add @serialport/bindings-cpp to onlyBuiltDependencies (#914) * feat(ui): Add UI library (#900) * feat: scaffold UI library * Update packages/ui/src/components/theme-provider.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * add lock file * lint/formatting fixes --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * formatting/linting fixes * fixed some paring logic * fixed connection issue with serial --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Kamil Dzieniszewski <kamil.dzieniszewski@gmail.com> Co-authored-by: Azarattum <43073346+Azarattum@users.noreply.github.com> Co-authored-by: Ben Allfree <ben@benallfree.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Dan Ditomaso
co-authored by
Copilot
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Crowdin Bot
Kamil Dzieniszewski
Azarattum
Ben Allfree
Copilot
github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Crowdin Bot
Kamil Dzieniszewski
Azarattum
Ben Allfree
parent
a1a646983e
commit
1af1295b8f
@@ -0,0 +1,19 @@
|
||||
import { Badge } from "../UI/Badge.tsx";
|
||||
|
||||
export function SupportBadge({
|
||||
supported,
|
||||
labelSupported,
|
||||
labelUnsupported,
|
||||
}: {
|
||||
supported: boolean;
|
||||
labelSupported: string;
|
||||
labelUnsupported: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={supported ? "secondary" : "destructive"}>
|
||||
{supported ? labelSupported : labelUnsupported}
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
import type { ConnectionStatus } from "@app/core/stores/deviceStore/types.ts";
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import {
|
||||
ChevronRight,
|
||||
CpuIcon,
|
||||
Languages,
|
||||
type LucideIcon,
|
||||
@@ -29,6 +32,8 @@ interface DeviceInfoPanelProps {
|
||||
setDialogOpen: () => void;
|
||||
setCommandPaletteOpen: () => void;
|
||||
disableHover?: boolean;
|
||||
connectionStatus?: ConnectionStatus;
|
||||
connectionName?: string;
|
||||
}
|
||||
|
||||
interface InfoDisplayItem {
|
||||
@@ -54,10 +59,36 @@ export const DeviceInfoPanel = ({
|
||||
isCollapsed,
|
||||
setCommandPaletteOpen,
|
||||
disableHover = false,
|
||||
connectionStatus,
|
||||
connectionName,
|
||||
}: DeviceInfoPanelProps) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate({ from: "/" });
|
||||
const { batteryLevel, voltage } = deviceMetrics;
|
||||
|
||||
const getStatusColor = (status?: ConnectionStatus): string => {
|
||||
if (!status) {
|
||||
return "bg-gray-400";
|
||||
}
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return "bg-emerald-500";
|
||||
case "connecting":
|
||||
return "bg-amber-500";
|
||||
case "error":
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return "bg-gray-400";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status?: ConnectionStatus): string => {
|
||||
if (!status) {
|
||||
return t("unknown.notAvailable", "N/A");
|
||||
}
|
||||
return status;
|
||||
};
|
||||
|
||||
const deviceInfoItems: InfoDisplayItem[] = [
|
||||
{
|
||||
id: "battery",
|
||||
@@ -129,6 +160,45 @@ export const DeviceInfoPanel = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{connectionStatus && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate({ to: "/connections" })}
|
||||
aria-label={t("navigation.manageConnections", "Manage connections")}
|
||||
className={cn(
|
||||
"group flex items-center gap-2 px-1 py-2 flex-shrink-0 rounded-md w-full",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-gray-100 dark:hover:bg-gray-700",
|
||||
"focus:outline-none focus:ring-2 focus:ring-accent",
|
||||
isCollapsed && "justify-center",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2.5 w-2.5 ml-2 rounded-full flex-shrink-0",
|
||||
getStatusColor(connectionStatus),
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<div className="flex flex-col min-w-0 flex-1 text-left">
|
||||
<Subtle className="text-xs truncate transition-colors duration-150 group-hover:text-gray-800 dark:group-hover:text-gray-100">
|
||||
{connectionName || "Connection"}
|
||||
</Subtle>
|
||||
<Subtle className="text-xs capitalize text-gray-500 dark:text-gray-400 transition-colors duration-150">
|
||||
{getStatusLabel(connectionStatus)}
|
||||
</Subtle>
|
||||
</div>
|
||||
<ChevronRight
|
||||
size={14}
|
||||
className="flex-shrink-0 text-gray-400 dark:text-gray-500 transition-colors duration-150 group-hover:text-gray-600 dark:group-hover:text-gray-300"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!isCollapsed && (
|
||||
<div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0" />
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,671 @@
|
||||
import { SupportBadge } from "@app/components/Badge/SupportedBadge.tsx";
|
||||
import { Switch } from "@app/components/UI/Switch.tsx";
|
||||
import type { NewConnection } from "@app/core/stores/deviceStore/types.ts";
|
||||
import { testHttpReachable } from "@app/pages/Connections/utils";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import { Input } from "@components/UI/Input.tsx";
|
||||
import { Label } from "@components/UI/Label.tsx";
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@components/UI/Tabs.tsx";
|
||||
import { Link } from "@components/UI/Typography/Link.tsx";
|
||||
import {
|
||||
type BrowserFeature,
|
||||
useBrowserFeatureDetection,
|
||||
} from "@core/hooks/useBrowserFeatureDetection.ts";
|
||||
import { useToast } from "@core/hooks/useToast.ts";
|
||||
import { TransportWebBluetooth } from "@meshtastic/transport-web-bluetooth";
|
||||
import {
|
||||
AlertCircle,
|
||||
Bluetooth,
|
||||
Cable,
|
||||
CheckCircle2,
|
||||
Globe,
|
||||
Loader2,
|
||||
type LucideIcon,
|
||||
MousePointerClick,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useReducer } from "react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { DialogWrapper } from "../DialogWrapper.tsx";
|
||||
import { urlOrIpv4Schema } from "./validation.ts";
|
||||
|
||||
type TabKey = "http" | "bluetooth" | "serial";
|
||||
type TestingStatus = "idle" | "testing" | "success" | "failure";
|
||||
type DialogState = {
|
||||
tab: TabKey;
|
||||
name: string;
|
||||
protocol: "http" | "https";
|
||||
url: string;
|
||||
testStatus: TestingStatus;
|
||||
btSelected: { id: string; name?: string; device?: BluetoothDevice } | undefined;
|
||||
serialSelected: { vendorId?: number; productId?: number } | undefined;
|
||||
};
|
||||
|
||||
type DialogAction =
|
||||
| { type: "RESET"; payload?: { isHTTPS?: boolean } }
|
||||
| { type: "SET_TAB"; payload: TabKey }
|
||||
| { type: "SET_NAME"; payload: string }
|
||||
| { type: "SET_PROTOCOL"; payload: "http" | "https" }
|
||||
| { type: "SET_URL"; payload: string }
|
||||
| { type: "SET_TEST_STATUS"; payload: TestingStatus }
|
||||
| {
|
||||
type: "SET_BT_SELECTED";
|
||||
payload: { id: string; name?: string; device?: BluetoothDevice } | undefined;
|
||||
}
|
||||
| {
|
||||
type: "SET_SERIAL_SELECTED";
|
||||
payload: { vendorId?: number; productId?: number } | undefined;
|
||||
}
|
||||
| { type: "SET_URL_AND_RESET_TEST"; payload: string };
|
||||
|
||||
interface FeatureErrorProps {
|
||||
missingFeatures: BrowserFeature[];
|
||||
tabId: "bluetooth" | "serial";
|
||||
}
|
||||
|
||||
type Pane = {
|
||||
children: () => React.ReactNode;
|
||||
placeholder: string;
|
||||
validate: () => boolean;
|
||||
build: () => NewConnection | null;
|
||||
};
|
||||
|
||||
const featureErrors: Record<BrowserFeature, { href: string; i18nKey: string }> =
|
||||
{
|
||||
"Web Bluetooth": {
|
||||
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
|
||||
i18nKey: "addConnection.validation.requiresWebBluetooth",
|
||||
},
|
||||
"Web Serial": {
|
||||
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
|
||||
i18nKey: "addConnection.validation.requiresWebSerial",
|
||||
},
|
||||
"Secure Context": {
|
||||
href: "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts",
|
||||
i18nKey: "addConnection.validation.requiresSecureContext",
|
||||
},
|
||||
};
|
||||
|
||||
const FeatureErrorMessage = ({ missingFeatures, tabId }: FeatureErrorProps) => {
|
||||
if (missingFeatures.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const browserFeatures = missingFeatures.filter(
|
||||
(feature) => feature !== "Secure Context",
|
||||
);
|
||||
const needsSecureContext = missingFeatures.includes("Secure Context");
|
||||
|
||||
const needsFeature =
|
||||
tabId === "bluetooth" && browserFeatures.includes("Web Bluetooth")
|
||||
? "Web Bluetooth"
|
||||
: tabId === "serial" && browserFeatures.includes("Web Serial")
|
||||
? "Web Serial"
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-2 bg-red-500 p-4 rounded-md text-sm mt-4">
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<AlertCircle size={40} className="mr-2 shrink-0 text-white" />
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="text-sm text-white">
|
||||
{needsFeature && (
|
||||
<Trans
|
||||
i18nKey={featureErrors[needsFeature].i18nKey}
|
||||
components={[
|
||||
<Link
|
||||
key="0"
|
||||
href={featureErrors[needsFeature].href}
|
||||
className="underline hover:text-slate-200 text-white dark:text-white dark:hover:text-slate-300"
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{needsFeature && needsSecureContext && " "}
|
||||
{needsSecureContext && (
|
||||
<Trans
|
||||
i18nKey={
|
||||
browserFeatures.length > 0
|
||||
? "addConnection.validation.additionallyRequiresSecureContext"
|
||||
: "addConnection.validation.requiresSecureContext"
|
||||
}
|
||||
components={{
|
||||
"0": (
|
||||
<Link
|
||||
href={featureErrors["Secure Context"].href}
|
||||
className="underline hover:text-slate-200 text-white dark:text-white dark:hover:text-slate-300"
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const initialState: DialogState = {
|
||||
tab: "http",
|
||||
name: "",
|
||||
protocol: "http",
|
||||
url: "",
|
||||
testStatus: "idle",
|
||||
btSelected: undefined,
|
||||
serialSelected: undefined,
|
||||
};
|
||||
export const createInitialDialogState = (
|
||||
overrides?: Partial<DialogState>,
|
||||
): DialogState => {
|
||||
return { ...initialState, ...(overrides ?? {}) };
|
||||
};
|
||||
|
||||
export const dialogStateInitializer = (
|
||||
overrides?: Partial<DialogState>,
|
||||
): DialogState => createInitialDialogState(overrides);
|
||||
|
||||
function dialogReducer(state: DialogState, action: DialogAction): DialogState {
|
||||
switch (action.type) {
|
||||
case "RESET":
|
||||
return createInitialDialogState(
|
||||
action.payload?.isHTTPS ? { protocol: "https" } : {},
|
||||
);
|
||||
case "SET_TAB":
|
||||
return { ...state, tab: action.payload };
|
||||
case "SET_NAME":
|
||||
return { ...state, name: action.payload };
|
||||
case "SET_PROTOCOL":
|
||||
return { ...state, protocol: action.payload };
|
||||
case "SET_URL":
|
||||
return { ...state, url: action.payload };
|
||||
case "SET_TEST_STATUS":
|
||||
return { ...state, testStatus: action.payload };
|
||||
case "SET_BT_SELECTED":
|
||||
return { ...state, btSelected: action.payload };
|
||||
case "SET_SERIAL_SELECTED":
|
||||
return { ...state, serialSelected: action.payload };
|
||||
case "SET_URL_AND_RESET_TEST":
|
||||
return { ...state, url: action.payload, testStatus: "idle" };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
function PickerRow({
|
||||
label,
|
||||
buttonText,
|
||||
onPick,
|
||||
disabled,
|
||||
display,
|
||||
helper,
|
||||
}: {
|
||||
label: string;
|
||||
buttonText: string;
|
||||
onPick: () => void | Promise<void>;
|
||||
disabled?: boolean;
|
||||
display: string;
|
||||
helper?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<Label>{label}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="subtle"
|
||||
className="gap-2"
|
||||
onClick={onPick}
|
||||
disabled={disabled}
|
||||
>
|
||||
<MousePointerClick className="h-4 w-4" />
|
||||
{buttonText}
|
||||
</Button>
|
||||
<div className="text-sm text-slate-500 dark:text-slate-400 truncate">
|
||||
{display}
|
||||
</div>
|
||||
</div>
|
||||
{helper ? (
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{helper}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TAB_META: Array<{ key: TabKey; label: string; Icon: LucideIcon }> = [
|
||||
{ key: "http", label: "HTTP", Icon: Globe },
|
||||
{ key: "bluetooth", label: "Bluetooth", Icon: Bluetooth },
|
||||
{ key: "serial", label: "Serial", Icon: Cable },
|
||||
];
|
||||
|
||||
export default function AddConnectionDialog({
|
||||
open = false,
|
||||
onOpenChange = () => {},
|
||||
onSave = async () => {},
|
||||
isHTTPS = false,
|
||||
}: {
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onSave?: (conn: NewConnection, device?: BluetoothDevice) => Promise<void>;
|
||||
isHTTPS?: boolean;
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const [state, dispatch] = useReducer(dialogReducer, initialState, () =>
|
||||
dialogStateInitializer(isHTTPS ? { protocol: "https" } : {}),
|
||||
);
|
||||
const { unsupported } = useBrowserFeatureDetection();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const bluetoothSupported =
|
||||
typeof navigator !== "undefined" && "bluetooth" in navigator;
|
||||
const serialSupported =
|
||||
typeof navigator !== "undefined" && "serial" in navigator;
|
||||
const isURLHTTPS = isHTTPS;
|
||||
|
||||
const reset = useCallback(() => {
|
||||
dispatch({ type: "RESET", payload: { isHTTPS } });
|
||||
}, [isHTTPS]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
}, [reset, open]);
|
||||
|
||||
const makeToastErrorHandler = useCallback(
|
||||
(titlePrefix: string) =>
|
||||
(err: unknown): void => {
|
||||
if (err && (err as { name?: string }).name === "NotFoundError") {
|
||||
return; // user canceled
|
||||
}
|
||||
const message = err instanceof Error ? err.message : String(err);
|
||||
toast({ title: `${titlePrefix} error`, description: message });
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
const handlePickBluetooth = useCallback(async () => {
|
||||
if (!bluetoothSupported) {
|
||||
toast({
|
||||
title: t("addConnection.bluetoothConnection.notSupported.title"),
|
||||
description: t(
|
||||
"addConnection.bluetoothConnection.notSupported.description",
|
||||
),
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const device = await navigator.bluetooth.requestDevice({
|
||||
filters: [{ services: [TransportWebBluetooth.ServiceUuid] }],
|
||||
});
|
||||
dispatch({
|
||||
type: "SET_BT_SELECTED",
|
||||
payload: { id: device.id, name: device.name ?? undefined, device },
|
||||
});
|
||||
if (!state.name || state.name === "") {
|
||||
dispatch({
|
||||
type: "SET_NAME",
|
||||
payload: device.name
|
||||
? t("addConnection.bluetoothConnection.short", {
|
||||
deviceName: device.name,
|
||||
})
|
||||
: t("addConnection.bluetoothConnection.long"),
|
||||
});
|
||||
}
|
||||
toast({
|
||||
title: t("addConnection.bluetoothConnection.selected"),
|
||||
description: device.name || device.id,
|
||||
});
|
||||
} catch (err) {
|
||||
makeToastErrorHandler("Bluetooth")(err);
|
||||
}
|
||||
}, [bluetoothSupported, state.name, toast, makeToastErrorHandler, t]);
|
||||
|
||||
const handlePickSerial = useCallback(async () => {
|
||||
if (!serialSupported) {
|
||||
toast({
|
||||
title: t("addConnection.serialConnection.notSupported.title"),
|
||||
description: t(
|
||||
"addConnection.serialConnection.notSupported.description",
|
||||
),
|
||||
});
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const port = await (
|
||||
navigator as Navigator & {
|
||||
serial: {
|
||||
requestPort: (o: Record<string, unknown>) => Promise<SerialPort>;
|
||||
};
|
||||
}
|
||||
).serial.requestPort({});
|
||||
const info =
|
||||
(
|
||||
port as SerialPort & {
|
||||
getInfo?: () => { usbVendorId?: number; usbProductId?: number };
|
||||
}
|
||||
).getInfo?.() ?? {};
|
||||
dispatch({
|
||||
type: "SET_SERIAL_SELECTED",
|
||||
payload: {
|
||||
vendorId: info.usbVendorId,
|
||||
productId: info.usbProductId,
|
||||
},
|
||||
});
|
||||
if (!state.name || state.name === "") {
|
||||
const v = info.usbVendorId ? info.usbVendorId.toString(16) : "?";
|
||||
const p = info.usbProductId ? info.usbProductId.toString(16) : "?";
|
||||
dispatch({ type: "SET_NAME", payload: `Serial: ${v}:${p}` });
|
||||
}
|
||||
toast({
|
||||
title: t("addConnection.serialConnection.portSelected.title"),
|
||||
description: t(
|
||||
"addConnection.serialConnection.portSelected.description",
|
||||
),
|
||||
});
|
||||
} catch (err) {
|
||||
makeToastErrorHandler("Serial")(err);
|
||||
}
|
||||
}, [serialSupported, state.name, toast, makeToastErrorHandler, t]);
|
||||
|
||||
const handleTestHttp = useCallback(async () => {
|
||||
const fullUrl = `${state.protocol}://${state.url}`;
|
||||
const validatedURL = urlOrIpv4Schema.safeParse(fullUrl);
|
||||
if (validatedURL.success === false) {
|
||||
toast({
|
||||
title: t("addConnection.httpConnection.invalidUrl.title"),
|
||||
description: t("addConnection.httpConnection.invalidUrl.description"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
dispatch({ type: "SET_TEST_STATUS", payload: "testing" });
|
||||
const reachable = await testHttpReachable(validatedURL.data);
|
||||
if (reachable) {
|
||||
dispatch({ type: "SET_TEST_STATUS", payload: "success" });
|
||||
toast({
|
||||
title: t("addConnection.httpConnection.connectionTest.success.title"),
|
||||
description: t(
|
||||
"addConnection.httpConnection.connectionTest.success.description",
|
||||
),
|
||||
});
|
||||
} else {
|
||||
dispatch({ type: "SET_TEST_STATUS", payload: "failure" });
|
||||
toast({
|
||||
title: t("addConnection.httpConnection.connectionTest.failure.title"),
|
||||
description: t(
|
||||
"addConnection.httpConnection.connectionTest.failure.description",
|
||||
),
|
||||
});
|
||||
}
|
||||
}, [state.protocol, state.url, toast, t]);
|
||||
|
||||
const PANES: Record<TabKey, Pane> = useMemo(
|
||||
() => ({
|
||||
http: {
|
||||
placeholder: t("addConnection.httpConnection.namePlaceholder"),
|
||||
children: () => (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label htmlFor="url">
|
||||
{t("addConnection.httpConnection.heading")}
|
||||
</Label>
|
||||
|
||||
<Input
|
||||
id={"url"}
|
||||
inputMode="url"
|
||||
placeholder={t("addConnection.httpConnection.inputPlaceholder")}
|
||||
prefix={`${state.protocol}://`}
|
||||
value={state.url}
|
||||
onChange={(e) => {
|
||||
dispatch({
|
||||
type: "SET_URL_AND_RESET_TEST",
|
||||
payload: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Switch
|
||||
value={state.protocol}
|
||||
disabled={!!isURLHTTPS}
|
||||
checked={state.protocol === "https"}
|
||||
onCheckedChange={(value) => {
|
||||
dispatch({
|
||||
type: "SET_PROTOCOL",
|
||||
payload: value ? "https" : "http",
|
||||
});
|
||||
dispatch({ type: "SET_TEST_STATUS", payload: "idle" });
|
||||
}}
|
||||
></Switch>
|
||||
<Label>{t("addConnection.httpConnection.useHttps")}</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<Button
|
||||
variant="subtle"
|
||||
className="gap-2"
|
||||
onClick={handleTestHttp}
|
||||
disabled={
|
||||
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`)
|
||||
.success === false || state.testStatus === "testing"
|
||||
}
|
||||
>
|
||||
{state.testStatus === "testing" ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
{t(
|
||||
"addConnection.httpConnection.connectionTest.button.loading",
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MousePointerClick className="h-4 w-4" />
|
||||
{t(
|
||||
"addConnection.httpConnection.connectionTest.button.label",
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{state.testStatus === "success" && (
|
||||
<div className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
{t("addConnection.httpConnection.connectionTest.reachable")}
|
||||
</div>
|
||||
)}
|
||||
{state.testStatus === "failure" && (
|
||||
<div className="flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
|
||||
<XCircle className="h-4 w-4" />
|
||||
{t(
|
||||
"addConnection.httpConnection.connectionTest.notReachable",
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{t("addConnection.httpConnection.connectionTest.description")}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
validate: () =>
|
||||
urlOrIpv4Schema.safeParse(`${state.protocol}://${state.url}`)
|
||||
.success === true && state.testStatus === "success",
|
||||
build: () => ({
|
||||
type: "http",
|
||||
name: state.name.trim(),
|
||||
url: `${state.protocol}://${state.url.trim()}`,
|
||||
}),
|
||||
},
|
||||
bluetooth: {
|
||||
placeholder: "My Bluetooth Node",
|
||||
children: () => (
|
||||
<>
|
||||
<SupportBadge
|
||||
supported={bluetoothSupported}
|
||||
labelSupported={t(
|
||||
"addConnection.bluetoothConnection.supported.title",
|
||||
)}
|
||||
labelUnsupported={t(
|
||||
"addConnection.bluetoothConnection.notSupported.title",
|
||||
)}
|
||||
/>
|
||||
<PickerRow
|
||||
label={t("addConnection.bluetoothConnection.device")}
|
||||
buttonText={t("addConnection.bluetoothConnection.selectDevice")}
|
||||
onPick={handlePickBluetooth}
|
||||
disabled={!bluetoothSupported}
|
||||
display={
|
||||
state.btSelected
|
||||
? state.btSelected.name || state.btSelected.id
|
||||
: t("addConnection.bluetoothConnection.notSelected")
|
||||
}
|
||||
helper={t("addConnection.bluetoothConnection.helperText")}
|
||||
/>
|
||||
<FeatureErrorMessage
|
||||
missingFeatures={unsupported}
|
||||
tabId="bluetooth"
|
||||
/>
|
||||
</>
|
||||
),
|
||||
validate: () => state.name.trim().length > 0 && !!state.btSelected,
|
||||
build: () => ({
|
||||
type: "bluetooth",
|
||||
name: state.name.trim(),
|
||||
deviceId: state.btSelected?.id,
|
||||
deviceName: state.btSelected?.name,
|
||||
gattServiceUUID: TransportWebBluetooth.ServiceUuid,
|
||||
}),
|
||||
},
|
||||
serial: {
|
||||
placeholder: t("addConnection.serialConnection.namePlaceholder"),
|
||||
children: () => (
|
||||
<>
|
||||
<SupportBadge
|
||||
supported={serialSupported}
|
||||
labelSupported={t(
|
||||
"addConnection.serialConnection.supported.title",
|
||||
)}
|
||||
labelUnsupported={t(
|
||||
"addConnection.serialConnection.notSupported.title",
|
||||
)}
|
||||
/>
|
||||
<PickerRow
|
||||
label={t("addConnection.serialConnection.port")}
|
||||
buttonText={t("addConnection.serialConnection.selectPort")}
|
||||
onPick={handlePickSerial}
|
||||
disabled={!serialSupported}
|
||||
display={
|
||||
state.serialSelected
|
||||
? t("addConnection.serialConnection.deviceName", {
|
||||
vendorId:
|
||||
state.serialSelected.vendorId?.toString(16) ?? "?",
|
||||
productId:
|
||||
state.serialSelected.productId?.toString(16) ?? "?",
|
||||
})
|
||||
: t("addConnection.serialConnection.notSelected")
|
||||
}
|
||||
helper={t("addConnection.serialConnection.helperText")}
|
||||
/>
|
||||
<FeatureErrorMessage missingFeatures={unsupported} tabId="serial" />
|
||||
</>
|
||||
),
|
||||
validate: () =>
|
||||
state.name.trim().length > 0 &&
|
||||
(!!state.serialSelected || !serialSupported),
|
||||
build: () => ({
|
||||
type: "serial",
|
||||
name: state.name.trim(),
|
||||
usbVendorId: state.serialSelected?.vendorId,
|
||||
usbProductId: state.serialSelected?.productId,
|
||||
}),
|
||||
},
|
||||
}),
|
||||
[
|
||||
state,
|
||||
bluetoothSupported,
|
||||
serialSupported,
|
||||
isURLHTTPS,
|
||||
handlePickBluetooth,
|
||||
handlePickSerial,
|
||||
handleTestHttp,
|
||||
unsupported,
|
||||
t,
|
||||
],
|
||||
);
|
||||
|
||||
const currentPane = PANES[state.tab];
|
||||
const canCreate = useMemo(() => currentPane.validate(), [currentPane]);
|
||||
|
||||
const submit = (fn: (p: NewConnection, device?: BluetoothDevice) => Promise<void>) => async () => {
|
||||
if (!canCreate) {
|
||||
return;
|
||||
}
|
||||
const payload = currentPane.build();
|
||||
|
||||
if (!payload) {
|
||||
return;
|
||||
}
|
||||
const btDevice = state.tab === "bluetooth" ? state.btSelected?.device : undefined;
|
||||
await fn(payload, btDevice);
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogWrapper
|
||||
variant="default"
|
||||
type="custom"
|
||||
title={t("addConnection.title")}
|
||||
description={t("addConnection.description")}
|
||||
cancelText={t("button.cancel")}
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<Tabs
|
||||
value={state.tab}
|
||||
onValueChange={(v) =>
|
||||
dispatch({ type: "SET_TAB", payload: v as TabKey })
|
||||
}
|
||||
>
|
||||
<TabsList className="grid grid-cols-3">
|
||||
{TAB_META.map(({ key, label, Icon }) => (
|
||||
<TabsTrigger key={key} value={key} className="gap-2">
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{TAB_META.map(({ key }) => (
|
||||
<TabsContent key={key} value={key}>
|
||||
{state.tab === key ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label htmlFor={`name-${state.tab}`}>Name</Label>
|
||||
<Input
|
||||
id={`name-${state.tab}`}
|
||||
value={state.name}
|
||||
onChange={(evt) =>
|
||||
dispatch({ type: "SET_NAME", payload: evt.target.value })
|
||||
}
|
||||
placeholder={currentPane.placeholder}
|
||||
/>
|
||||
</div>
|
||||
{PANES[key].children()}
|
||||
<div className="flex justify-end">
|
||||
<div className="inline-flex rounded-md shadow-sm overflow-hidden border">
|
||||
<Button
|
||||
onClick={submit(onSave)}
|
||||
disabled={!canCreate}
|
||||
className="rounded-none"
|
||||
>
|
||||
{t("button.saveConnection")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</DialogWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import z from "zod";
|
||||
|
||||
export const urlOrIpv4Schema = z
|
||||
.string()
|
||||
.trim()
|
||||
.refine((val) => {
|
||||
const input = val.replace(/^https?:\/\//i, ""); // remove protocol for validation
|
||||
|
||||
// IPv4 pattern
|
||||
const ipv4Regex =
|
||||
/^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
|
||||
|
||||
// Domain pattern (e.g. example.com, meshtastic.local)
|
||||
const domainRegex = /^(?!-)(?:[a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,}$/;
|
||||
|
||||
// Local domain (e.g. meshtastic.local)
|
||||
const localDomainRegex = /^(?!-)[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.local$/;
|
||||
|
||||
return (
|
||||
ipv4Regex.test(input) ||
|
||||
domainRegex.test(input) ||
|
||||
localDomainRegex.test(input)
|
||||
);
|
||||
}, "Must be a valid IPv4 address or domain name")
|
||||
.transform((val) => {
|
||||
return /^https?:\/\//i.test(val) ? val : `http://${val}`;
|
||||
});
|
||||
@@ -1,140 +0,0 @@
|
||||
import { create } from "@bufbuild/protobuf";
|
||||
import { GenericInput } from "@components/Form/FormInput.tsx";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@components/UI/Dialog.tsx";
|
||||
import { useDevice, useNodeDB } from "@core/stores";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Protobuf } from "@meshtastic/core";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import z from "zod";
|
||||
import { Label } from "../UI/Label.tsx";
|
||||
|
||||
export interface User {
|
||||
longName: string;
|
||||
shortName: string;
|
||||
}
|
||||
|
||||
export interface DeviceNameDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export const DeviceNameDialog = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: DeviceNameDialogProps) => {
|
||||
const { t } = useTranslation("dialog");
|
||||
const { hardware, connection } = useDevice();
|
||||
const { getNode } = useNodeDB();
|
||||
const myNode = getNode(hardware.myNodeNum);
|
||||
|
||||
const defaultValues = {
|
||||
shortName: myNode?.user?.shortName ?? "",
|
||||
longName: myNode?.user?.longName ?? "",
|
||||
};
|
||||
|
||||
const deviceNameSchema = z.object({
|
||||
longName: z
|
||||
.string()
|
||||
.min(1, t("deviceName.validation.longNameMin"))
|
||||
.max(40, t("deviceName.validation.longNameMax")),
|
||||
shortName: z
|
||||
.string()
|
||||
.min(2, t("deviceName.validation.shortNameMin"))
|
||||
.max(4, t("deviceName.validation.shortNameMax")),
|
||||
});
|
||||
|
||||
const { getValues, reset, control, handleSubmit } = useForm<User>({
|
||||
values: defaultValues,
|
||||
resolver: zodResolver(deviceNameSchema),
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((data) => {
|
||||
connection?.setOwner(
|
||||
create(Protobuf.Mesh.UserSchema, {
|
||||
...data,
|
||||
}),
|
||||
);
|
||||
onOpenChange(false);
|
||||
});
|
||||
|
||||
const handleReset = () => {
|
||||
reset(defaultValues);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogClose />
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("deviceName.title")}</DialogTitle>
|
||||
<DialogDescription>{t("deviceName.description")}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-4">
|
||||
<div>
|
||||
<Label htmlFor="longName">{t("deviceName.longName")}</Label>
|
||||
<GenericInput
|
||||
control={control}
|
||||
field={{
|
||||
name: "longName",
|
||||
label: t("deviceName.longName"),
|
||||
type: "text",
|
||||
properties: {
|
||||
className: "text-slate-900 dark:text-slate-200",
|
||||
fieldLength: {
|
||||
currentValueLength: getValues("longName").length,
|
||||
max: 40,
|
||||
min: 1,
|
||||
showCharacterCount: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="shortName">{t("deviceName.shortName")}</Label>
|
||||
<GenericInput
|
||||
control={control}
|
||||
field={{
|
||||
name: "shortName",
|
||||
label: t("deviceName.shortName"),
|
||||
type: "text",
|
||||
properties: {
|
||||
fieldLength: {
|
||||
currentValueLength: getValues("shortName").length,
|
||||
max: 4,
|
||||
min: 1,
|
||||
showCharacterCount: true,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
name="reset"
|
||||
onClick={handleReset}
|
||||
>
|
||||
{t("button.reset")}
|
||||
</Button>
|
||||
<Button type="submit" name="save">
|
||||
{t("button.save")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -3,7 +3,6 @@ import { FactoryResetDeviceDialog } from "@app/components/Dialog/FactoryResetDev
|
||||
import { ClearAllStoresDialog } from "@components/Dialog/ClearAllStoresDialog/ClearAllStoresDialog.tsx";
|
||||
import { ClientNotificationDialog } from "@components/Dialog/ClientNotificationDialog/ClientNotificationDialog.tsx";
|
||||
import { DeleteMessagesDialog } from "@components/Dialog/DeleteMessagesDialog/DeleteMessagesDialog.tsx";
|
||||
import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.tsx";
|
||||
import { ImportDialog } from "@components/Dialog/ImportDialog.tsx";
|
||||
import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx";
|
||||
import { PkiBackupDialog } from "@components/Dialog/PKIBackupDialog.tsx";
|
||||
@@ -47,12 +46,6 @@ export const DialogManager = () => {
|
||||
setDialogOpen("reboot", false);
|
||||
}}
|
||||
/>
|
||||
<DeviceNameDialog
|
||||
open={dialog.deviceName}
|
||||
onOpenChange={(open) => {
|
||||
setDialogOpen("deviceName", open);
|
||||
}}
|
||||
/>
|
||||
<RemoveNodeDialog
|
||||
open={dialog.nodeRemoval}
|
||||
onOpenChange={(open) => {
|
||||
|
||||
@@ -105,7 +105,7 @@ export const ImportDialog = ({ open, onOpenChange }: ImportDialogProps) => {
|
||||
)
|
||||
) {
|
||||
setChange(
|
||||
{ type: "channel", index: importIndex[index] ?? 0 },
|
||||
{ type: "channels", index: importIndex[index] ?? 0 },
|
||||
payload,
|
||||
channels.get(importIndex[index] ?? 0),
|
||||
);
|
||||
|
||||
@@ -47,7 +47,7 @@ export const Channel = ({ onFormInit, channel }: SettingsPanelProps) => {
|
||||
};
|
||||
|
||||
const workingChannel = getChange({
|
||||
type: "channel",
|
||||
type: "channels",
|
||||
index: channel.index,
|
||||
}) as Protobuf.Channel.Channel | undefined;
|
||||
const effectiveConfig = workingChannel ?? channel;
|
||||
@@ -123,11 +123,11 @@ export const Channel = ({ onFormInit, channel }: SettingsPanelProps) => {
|
||||
});
|
||||
|
||||
if (deepCompareConfig(channel, payload, true)) {
|
||||
removeChange({ type: "channel", index: channel.index });
|
||||
removeChange({ type: "channels", index: channel.index });
|
||||
return;
|
||||
}
|
||||
|
||||
setChange({ type: "channel", index: channel.index }, payload, channel);
|
||||
setChange({ type: "channels", index: channel.index }, payload, channel);
|
||||
};
|
||||
|
||||
const preSharedKeyRegenerate = async () => {
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
import { Mono } from "@components/generic/Mono.tsx";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import {
|
||||
useAppStore,
|
||||
useDeviceStore,
|
||||
useMessageStore,
|
||||
useNodeDBStore,
|
||||
} from "@core/stores";
|
||||
import { subscribeAll } from "@core/subscriptions.ts";
|
||||
import { randId } from "@core/utils/randId.ts";
|
||||
import { MeshDevice } from "@meshtastic/core";
|
||||
import { TransportWebBluetooth } from "@meshtastic/transport-web-bluetooth";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { TabElementProps } from "../../Dialog/NewDeviceDialog.tsx";
|
||||
|
||||
export const BLE = ({ closeDialog }: TabElementProps) => {
|
||||
const [connectionInProgress, setConnectionInProgress] = useState(false);
|
||||
const [bleDevices, setBleDevices] = useState<BluetoothDevice[]>([]);
|
||||
|
||||
const { addDevice } = useDeviceStore();
|
||||
const { addNodeDB } = useNodeDBStore();
|
||||
const { addMessageStore } = useMessageStore();
|
||||
const { setSelectedDevice } = useAppStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const updateBleDeviceList = useCallback(async (): Promise<void> => {
|
||||
setBleDevices(await navigator.bluetooth.getDevices());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
updateBleDeviceList();
|
||||
}, [updateBleDeviceList]);
|
||||
|
||||
const onConnect = async (bleDevice: BluetoothDevice) => {
|
||||
const id = randId();
|
||||
const transport = await TransportWebBluetooth.createFromDevice(bleDevice);
|
||||
const device = addDevice(id);
|
||||
const nodeDB = addNodeDB(id);
|
||||
const messageStore = addMessageStore(id);
|
||||
|
||||
const connection = new MeshDevice(transport, id);
|
||||
connection.configure();
|
||||
setSelectedDevice(id);
|
||||
device.addConnection(connection);
|
||||
subscribeAll(device, connection, messageStore, nodeDB);
|
||||
|
||||
const HEARTBEAT_INTERVAL = 5 * 60 * 1000;
|
||||
connection.setHeartbeatInterval(HEARTBEAT_INTERVAL);
|
||||
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
return (
|
||||
<fieldset
|
||||
className="flex w-full flex-col gap-2 p-4"
|
||||
disabled={connectionInProgress}
|
||||
>
|
||||
<div className="flex h-48 flex-col gap-2 overflow-y-auto">
|
||||
{bleDevices.map((device) => (
|
||||
<Button
|
||||
key={device.id}
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
setConnectionInProgress(true);
|
||||
onConnect(device);
|
||||
}}
|
||||
>
|
||||
{device.name}
|
||||
</Button>
|
||||
))}
|
||||
{bleDevices.length === 0 && (
|
||||
<Mono className="m-auto select-none">
|
||||
{t("newDeviceDialog.bluetoothConnection.noDevicesPaired")}
|
||||
</Mono>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={async () => {
|
||||
await navigator.bluetooth
|
||||
.requestDevice({
|
||||
filters: [{ services: [TransportWebBluetooth.ServiceUuid] }],
|
||||
})
|
||||
.then((device) => {
|
||||
const exists = bleDevices.findIndex((d) => d.id === device.id);
|
||||
if (exists === -1) {
|
||||
setBleDevices(bleDevices.concat(device));
|
||||
}
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
console.error("Error requesting device:", error);
|
||||
setConnectionInProgress(false);
|
||||
})
|
||||
.finally(() => {
|
||||
setConnectionInProgress(false);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span>{t("newDeviceDialog.bluetoothConnection.newDeviceButton")}</span>
|
||||
</Button>
|
||||
</fieldset>
|
||||
);
|
||||
};
|
||||
@@ -1,103 +0,0 @@
|
||||
import { HTTP } from "@components/PageComponents/Connect/HTTP.tsx";
|
||||
import { MeshDevice } from "@meshtastic/core";
|
||||
import { TransportHTTP } from "@meshtastic/transport-http";
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
vi.mock("@core/stores", () => ({
|
||||
useAppStore: vi.fn(() => ({ setSelectedDevice: vi.fn() })),
|
||||
useDeviceStore: vi.fn(() => ({
|
||||
addDevice: vi.fn(() => ({ addConnection: vi.fn() })),
|
||||
})),
|
||||
useMessageStore: vi.fn(() => ({
|
||||
addMessageStore: vi.fn(),
|
||||
})),
|
||||
useNodeDBStore: vi.fn(() => ({
|
||||
addNodeDB: vi.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
vi.mock("@core/utils/randId.ts", () => ({
|
||||
randId: vi.fn(() => "mock-id"),
|
||||
}));
|
||||
|
||||
vi.mock("@meshtastic/transport-http", () => ({
|
||||
TransportHTTP: {
|
||||
create: vi.fn(() => Promise.resolve({})),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@meshtastic/core", () => ({
|
||||
MeshDevice: vi.fn(() => ({
|
||||
configure: vi.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
describe("HTTP Component", () => {
|
||||
it("renders correctly", () => {
|
||||
render(<HTTP closeDialog={vi.fn()} />);
|
||||
expect(screen.getByText("IP Address/Hostname")).toBeInTheDocument();
|
||||
expect(screen.getByRole("textbox")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByPlaceholderText("000.000.000.000 / meshtastic.local"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText("Use HTTPS")).toBeInTheDocument();
|
||||
expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("allows input field to be updated", () => {
|
||||
render(<HTTP closeDialog={vi.fn()} />);
|
||||
const inputField = screen.getByRole("textbox");
|
||||
fireEvent.change(inputField, { target: { value: "meshtastic.local" } });
|
||||
expect(
|
||||
screen.getByPlaceholderText("000.000.000.000 / meshtastic.local"),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("toggles HTTPS switch and updates prefix", () => {
|
||||
render(<HTTP closeDialog={vi.fn()} />);
|
||||
|
||||
const switchInput = screen.getByRole("switch");
|
||||
expect(screen.getByText("http://")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(switchInput);
|
||||
expect(screen.getByText("https://")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(switchInput);
|
||||
expect(switchInput).not.toBeChecked();
|
||||
expect(screen.getByText("http://")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("enables HTTPS toggle when location protocol is https", () => {
|
||||
Object.defineProperty(window, "location", {
|
||||
value: { protocol: "https:" },
|
||||
writable: true,
|
||||
});
|
||||
|
||||
render(<HTTP closeDialog={vi.fn()} />);
|
||||
|
||||
const switchInput = screen.getByRole("switch");
|
||||
expect(switchInput).toBeChecked();
|
||||
|
||||
expect(screen.getByText("https://")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.skip("submits form and triggers connection process", async () => {
|
||||
const closeDialog = vi.fn();
|
||||
render(<HTTP closeDialog={closeDialog} />);
|
||||
const button = screen.getByRole("button", { name: "Connect" });
|
||||
expect(button).not.toBeDisabled();
|
||||
|
||||
try {
|
||||
fireEvent.click(button);
|
||||
await waitFor(() => {
|
||||
expect(button).toBeDisabled();
|
||||
expect(closeDialog).toBeCalled();
|
||||
expect(TransportHTTP.create).toBeCalled();
|
||||
expect(MeshDevice).toBeCalled();
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,172 +0,0 @@
|
||||
import type { TabElementProps } from "@components/Dialog/NewDeviceDialog.tsx";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import { Input } from "@components/UI/Input.tsx";
|
||||
import { Label } from "@components/UI/Label.tsx";
|
||||
import { Switch } from "@components/UI/Switch.tsx";
|
||||
import { Link } from "@components/UI/Typography/Link.tsx";
|
||||
import {
|
||||
useAppStore,
|
||||
useDeviceStore,
|
||||
useMessageStore,
|
||||
useNodeDBStore,
|
||||
} from "@core/stores";
|
||||
import { subscribeAll } from "@core/subscriptions.ts";
|
||||
import { randId } from "@core/utils/randId.ts";
|
||||
import { MeshDevice } from "@meshtastic/core";
|
||||
import { TransportHTTP } from "@meshtastic/transport-http";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useController, useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
interface FormData {
|
||||
ip: string;
|
||||
tls: boolean;
|
||||
}
|
||||
|
||||
export const HTTP = ({ closeDialog }: TabElementProps) => {
|
||||
const { t } = useTranslation("dialog");
|
||||
const [connectionInProgress, setConnectionInProgress] = useState(false);
|
||||
const isURLHTTPS = location.protocol === "https:";
|
||||
|
||||
const { addDevice } = useDeviceStore();
|
||||
const { addNodeDB } = useNodeDBStore();
|
||||
const { addMessageStore } = useMessageStore();
|
||||
const { setSelectedDevice } = useAppStore();
|
||||
|
||||
const { control, handleSubmit, register } = useForm<FormData>({
|
||||
defaultValues: {
|
||||
ip: ["client.meshtastic.org", "localhost"].includes(
|
||||
globalThis.location.hostname,
|
||||
)
|
||||
? "meshtastic.local"
|
||||
: globalThis.location.host,
|
||||
tls: !!isURLHTTPS,
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
field: { value: tlsValue, onChange: setTLS },
|
||||
} = useController({ name: "tls", control });
|
||||
|
||||
const [connectionError, setConnectionError] = useState<{
|
||||
host: string;
|
||||
secure: boolean;
|
||||
} | null>(null);
|
||||
|
||||
const onSubmit = handleSubmit(async (data) => {
|
||||
setConnectionInProgress(true);
|
||||
setConnectionError(null);
|
||||
|
||||
try {
|
||||
const id = randId();
|
||||
const transport = await TransportHTTP.create(data.ip, data.tls);
|
||||
const device = addDevice(id);
|
||||
const nodeDB = addNodeDB(id);
|
||||
const messageStore = addMessageStore(id);
|
||||
|
||||
const connection = new MeshDevice(transport, id);
|
||||
connection.configure();
|
||||
setSelectedDevice(id);
|
||||
device.addConnection(connection);
|
||||
subscribeAll(device, connection, messageStore, nodeDB);
|
||||
closeDialog();
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.error("Connection error:", error);
|
||||
}
|
||||
// Capture all connection errors regardless of type
|
||||
setConnectionError({ host: data.ip, secure: data.tls });
|
||||
setConnectionInProgress(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<form className="flex w-full flex-col gap-2 p-4" onSubmit={onSubmit}>
|
||||
<fieldset
|
||||
className="flex flex-col gap-2"
|
||||
style={{ minHeight: "12rem" }}
|
||||
disabled={connectionInProgress}
|
||||
>
|
||||
<div>
|
||||
<Label>{t("newDeviceDialog.httpConnection.label")}</Label>
|
||||
<Input
|
||||
prefix={
|
||||
tlsValue
|
||||
? `${t("newDeviceDialog.https")}://`
|
||||
: `${t("newDeviceDialog.http")}://`
|
||||
}
|
||||
placeholder={t("newDeviceDialog.httpConnection.placeholder")}
|
||||
className="text-slate-900 dark:text-slate-100"
|
||||
{...register("ip")}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Switch
|
||||
onCheckedChange={setTLS}
|
||||
disabled={isURLHTTPS}
|
||||
checked={isURLHTTPS || tlsValue}
|
||||
{...register("tls")}
|
||||
/>
|
||||
<Label>{t("newDeviceDialog.useHttps")}</Label>
|
||||
</div>
|
||||
|
||||
{connectionError && (
|
||||
<div className="mt-2 mb-2 p-3 rounded-md bg-amber-100 border border-amber-300 dark:bg-amber-100 dark:border-amber-300">
|
||||
<div className="flex gap-2 items-start">
|
||||
<AlertTriangle
|
||||
className="shrink-0 mt-0.5 text-amber-600 dark:text-amber-600"
|
||||
size={20}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-800 dark:text-amber-800">
|
||||
{t("newDeviceDialog.connectionFailedAlert.title")}
|
||||
</p>
|
||||
<p className="text-xs mt-1 text-amber-700 dark:text-amber-700">
|
||||
{t("newDeviceDialog.connectionFailedAlert.descriptionPrefix")}
|
||||
{connectionError.secure &&
|
||||
t("newDeviceDialog.connectionFailedAlert.httpsHint")}
|
||||
{t("newDeviceDialog.connectionFailedAlert.openLinkPrefix")}
|
||||
<Link
|
||||
href={`${
|
||||
connectionError.secure
|
||||
? t("newDeviceDialog.https")
|
||||
: t("newDeviceDialog.http")
|
||||
}://${connectionError.host}`}
|
||||
className="underline font-medium text-amber-800 dark:text-amber-800"
|
||||
>
|
||||
{`${
|
||||
connectionError.secure
|
||||
? t("newDeviceDialog.https")
|
||||
: t("newDeviceDialog.http")
|
||||
}://${connectionError.host}`}
|
||||
</Link>{" "}
|
||||
{t("newDeviceDialog.connectionFailedAlert.openLinkSuffix")}
|
||||
{connectionError.secure
|
||||
? t(
|
||||
"newDeviceDialog.connectionFailedAlert.acceptTlsWarningSuffix",
|
||||
)
|
||||
: ""}
|
||||
.{" "}
|
||||
<Link
|
||||
href="https://meshtastic.org/docs/software/web-client/#http"
|
||||
className="underline font-medium text-amber-800 dark:text-amber-800"
|
||||
>
|
||||
{t("newDeviceDialog.connectionFailedAlert.learnMoreLink")}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</fieldset>
|
||||
<Button type="submit" variant="default">
|
||||
<span>
|
||||
{connectionInProgress
|
||||
? t("newDeviceDialog.connecting")
|
||||
: t("newDeviceDialog.connect")}
|
||||
</span>
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -1,116 +0,0 @@
|
||||
import { Mono } from "@components/generic/Mono.tsx";
|
||||
import { Button } from "@components/UI/Button.tsx";
|
||||
import {
|
||||
useAppStore,
|
||||
useDeviceStore,
|
||||
useMessageStore,
|
||||
useNodeDBStore,
|
||||
} from "@core/stores";
|
||||
import { subscribeAll } from "@core/subscriptions.ts";
|
||||
import { randId } from "@core/utils/randId.ts";
|
||||
import { MeshDevice } from "@meshtastic/core";
|
||||
import { TransportWebSerial } from "@meshtastic/transport-web-serial";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { TabElementProps } from "../../Dialog/NewDeviceDialog.tsx";
|
||||
|
||||
export const Serial = ({ closeDialog }: TabElementProps) => {
|
||||
const [connectionInProgress, setConnectionInProgress] = useState(false);
|
||||
const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
|
||||
|
||||
const { addDevice } = useDeviceStore();
|
||||
const { addNodeDB } = useNodeDBStore();
|
||||
const { addMessageStore } = useMessageStore();
|
||||
const { setSelectedDevice } = useAppStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const updateSerialPortList = useCallback(async () => {
|
||||
setSerialPorts(await navigator.serial.getPorts());
|
||||
}, []);
|
||||
|
||||
navigator.serial.addEventListener("connect", () => {
|
||||
updateSerialPortList();
|
||||
});
|
||||
navigator.serial.addEventListener("disconnect", () => {
|
||||
updateSerialPortList();
|
||||
});
|
||||
useEffect(() => {
|
||||
updateSerialPortList();
|
||||
}, [updateSerialPortList]);
|
||||
|
||||
const onConnect = async (port: SerialPort) => {
|
||||
const id = randId();
|
||||
const device = addDevice(id);
|
||||
const nodeDB = addNodeDB(id);
|
||||
const messageStore = addMessageStore(id);
|
||||
|
||||
setSelectedDevice(id);
|
||||
const transport = await TransportWebSerial.createFromPort(port);
|
||||
const connection = new MeshDevice(transport, id);
|
||||
connection.configure();
|
||||
device.addConnection(connection);
|
||||
subscribeAll(device, connection, messageStore, nodeDB);
|
||||
|
||||
const HEARTBEAT_INTERVAL = 5 * 60 * 1000;
|
||||
connection.setHeartbeatInterval(HEARTBEAT_INTERVAL);
|
||||
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
return (
|
||||
<fieldset
|
||||
className="flex w-full flex-col gap-2 p-4"
|
||||
disabled={connectionInProgress}
|
||||
>
|
||||
<div className="flex h-48 flex-col gap-2 overflow-y-auto">
|
||||
{serialPorts.map((port, idx) => {
|
||||
const { usbProductId, usbVendorId } = port.getInfo();
|
||||
const vendor = usbVendorId ?? t("unknown.shortName");
|
||||
const product = usbProductId ?? t("unknown.shortName");
|
||||
return (
|
||||
<Button
|
||||
key={`${vendor}-${product}`}
|
||||
disabled={port.readable !== null}
|
||||
variant="default"
|
||||
onClick={async () => {
|
||||
setConnectionInProgress(true);
|
||||
await onConnect(port);
|
||||
// No need to setConnectionInProgress(false) here as closeDialog() unmounts.
|
||||
}}
|
||||
>
|
||||
{t("newDeviceDialog.serialConnection.deviceIdentifier", {
|
||||
vendorId: vendor,
|
||||
productId: product,
|
||||
index: idx,
|
||||
})}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
{serialPorts.length === 0 && (
|
||||
<Mono className="m-auto select-none">
|
||||
{t("newDeviceDialog.serialConnection.noDevicesPaired")}
|
||||
</Mono>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={async () => {
|
||||
await navigator.serial
|
||||
.requestPort()
|
||||
.then((port) => {
|
||||
setSerialPorts(serialPorts.concat(port));
|
||||
// No need to setConnectionInProgress(false) here if requestPort is quick
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
console.error("Error requesting port:", error);
|
||||
})
|
||||
.finally(() => {
|
||||
setConnectionInProgress(false);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span>{t("newDeviceDialog.serialConnection.newDeviceButton")}</span>
|
||||
</Button>
|
||||
</fieldset>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Button } from "@app/components/UI/Button";
|
||||
import type { Connection } from "@app/core/stores/deviceStore/types";
|
||||
|
||||
export function ConnectionStatusBadge({
|
||||
status,
|
||||
}: {
|
||||
status: Connection["status"];
|
||||
}) {
|
||||
let color = "";
|
||||
|
||||
switch (status) {
|
||||
case "connected":
|
||||
color = "bg-emerald-500";
|
||||
break;
|
||||
case "connecting":
|
||||
color = "bg-amber-500";
|
||||
break;
|
||||
case "online":
|
||||
color = "bg-blue-500";
|
||||
break;
|
||||
case "error":
|
||||
color = "bg-red-500";
|
||||
break;
|
||||
default:
|
||||
color = "bg-gray-400";
|
||||
}
|
||||
return (
|
||||
<Button variant="subtle" className="inline-flex items-center gap-2">
|
||||
<span
|
||||
className={`h-2.5 w-2.5 rounded-full ${color}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="text-xs capitalize text-slate-500 dark:text-slate-400">
|
||||
{status}
|
||||
</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
type Page,
|
||||
useAppStore,
|
||||
useDevice,
|
||||
useDeviceStore,
|
||||
useNodeDB,
|
||||
useSidebar,
|
||||
} from "@core/stores";
|
||||
@@ -70,11 +71,18 @@ export const Sidebar = ({ children }: SidebarProps) => {
|
||||
const { hardware, metadata, unreadCounts, setDialogOpen } = useDevice();
|
||||
const { getNode, getNodesLength } = useNodeDB();
|
||||
const { setCommandPaletteOpen } = useAppStore();
|
||||
const savedConnections = useDeviceStore((s) => s.savedConnections);
|
||||
const myNode = getNode(hardware.myNodeNum);
|
||||
const { isCollapsed } = useSidebar();
|
||||
const { t } = useTranslation("ui");
|
||||
const navigate = useNavigate({ from: "/" });
|
||||
|
||||
// Get the active connection (connected > default > first)
|
||||
const activeConnection =
|
||||
savedConnections.find((c) => c.status === "connected") ||
|
||||
savedConnections.find((c) => c.isDefault) ||
|
||||
savedConnections[0];
|
||||
|
||||
const pathname = useLocation({
|
||||
select: (location) => location.pathname.replace(/^\//, ""),
|
||||
});
|
||||
@@ -210,6 +218,8 @@ export const Sidebar = ({ children }: SidebarProps) => {
|
||||
? Math.abs(myNode.deviceMetrics?.voltage)
|
||||
: undefined,
|
||||
}}
|
||||
connectionStatus={activeConnection?.status}
|
||||
connectionName={activeConnection?.name}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
||||
import * as React from "react";
|
||||
import { buttonVariants } from "./Button.tsx";
|
||||
|
||||
const AlertDialog = AlertDialogPrimitive.Root;
|
||||
|
||||
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
||||
|
||||
const AlertDialogPortal = ({
|
||||
children,
|
||||
...props
|
||||
}: AlertDialogPrimitive.AlertDialogPortalProps) => (
|
||||
<AlertDialogPrimitive.Portal {...props}>
|
||||
<div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
|
||||
{children}
|
||||
</div>
|
||||
</AlertDialogPrimitive.Portal>
|
||||
);
|
||||
AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
|
||||
|
||||
const AlertDialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/50 backdrop-blur-xs transition-opacity animate-in fade-in",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
));
|
||||
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
||||
|
||||
const AlertDialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed z-50 grid w-full max-w-lg scale-100 gap-4 border border-slate-200 bg-white p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 dark:border-slate-700 dark:bg-slate-800",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
));
|
||||
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
||||
|
||||
const AlertDialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
AlertDialogHeader.displayName = "AlertDialogHeader";
|
||||
|
||||
const AlertDialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
AlertDialogFooter.displayName = "AlertDialogFooter";
|
||||
|
||||
const AlertDialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold text-slate-900 dark:text-slate-100",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
||||
|
||||
const AlertDialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogDescription.displayName =
|
||||
AlertDialogPrimitive.Description.displayName;
|
||||
|
||||
const AlertDialogAction = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Action
|
||||
ref={ref}
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
||||
|
||||
const AlertDialogCancel = React.forwardRef<
|
||||
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
ref={ref}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"mt-2 sm:mt-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import type * as React from "react";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-slate-900 text-white hover:bg-slate-900/80 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/80",
|
||||
secondary:
|
||||
"border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-800/80",
|
||||
destructive:
|
||||
"border-transparent bg-red-500 text-white hover:bg-red-500/80 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/80",
|
||||
outline: "text-slate-900 dark:text-slate-100",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
@@ -0,0 +1,85 @@
|
||||
import { cn } from "@core/utils/cn.ts";
|
||||
import * as React from "react";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border border-slate-200 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
));
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
};
|
||||
@@ -48,8 +48,8 @@ export function ErrorPage({ error }: { error: Error }) {
|
||||
</P>
|
||||
<P>
|
||||
<Trans
|
||||
i18nKey="errorPage.dashboardLink"
|
||||
components={[<Link key="dashboard" href="/" />]}
|
||||
i18nKey="errorPage.connectionsLink"
|
||||
components={[<Link key="connections" href="/" />]}
|
||||
/>
|
||||
</P>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user