diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 78b34ff0a..381bbeca1 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1652,6 +1652,13 @@ } }, "widget": { + "integrationSelect": { + "configureIntegrationFirst": "Connect an integration first", + "loading": "Loading...", + "placeholder": "Select an option", + "noResults": "No results found", + "loadError": "Failed to load options" + }, "app": { "name": "App", "description": "Embeds an app into the board.", @@ -3665,12 +3672,7 @@ "option": { "systemId": { "label": "System", - "description": "Select a Beszel system to display stats for", - "configureIntegrationFirst": "Configure a Beszel integration first", - "loading": "Loading systems...", - "placeholder": "Select a system", - "noSystems": "No systems found", - "loadError": "Failed to load systems" + "description": "Select a Beszel system to display stats for" }, "timePeriod": { "label": "Time period" diff --git a/packages/widgets/src/_inputs/index.ts b/packages/widgets/src/_inputs/index.ts index 82b02078f..ac9ef1a67 100644 --- a/packages/widgets/src/_inputs/index.ts +++ b/packages/widgets/src/_inputs/index.ts @@ -16,7 +16,7 @@ import { WidgetTextInput } from "./widget-text-input"; import { WidgetUmamiEventInput } from "./widget-umami-event-input"; import { WidgetUmamiEventNamesInput } from "./widget-umami-event-names-input"; import { WidgetUmamiWebsiteInput } from "./widget-umami-website-input"; -import { WidgetBeszelSystemInput } from "./widget-beszel-system-input"; +import { WidgetIntegrationSelectInput } from "./widget-integration-select-input"; const mapping = { anchorNote: WidgetAnchorNoteInput, @@ -36,7 +36,7 @@ const mapping = { umamiEventNames: WidgetUmamiEventNamesInput, umamiWebsite: WidgetUmamiWebsiteInput, customWidgetSelect: WidgetCustomWidgetSelectInput, - beszelSystem: WidgetBeszelSystemInput, + integrationSelect: WidgetIntegrationSelectInput, } satisfies Record; export const getInputForType = (type: TType) => { diff --git a/packages/widgets/src/_inputs/widget-beszel-system-input.tsx b/packages/widgets/src/_inputs/widget-integration-select-input.tsx similarity index 51% rename from packages/widgets/src/_inputs/widget-beszel-system-input.tsx rename to packages/widgets/src/_inputs/widget-integration-select-input.tsx index 0234ecf17..4a9840dc9 100644 --- a/packages/widgets/src/_inputs/widget-beszel-system-input.tsx +++ b/packages/widgets/src/_inputs/widget-integration-select-input.tsx @@ -2,28 +2,27 @@ import { Select, Text } from "@mantine/core"; -import { clientApi } from "@homarr/api/client"; import { useScopedI18n } from "@homarr/translation/client"; import type { CommonWidgetInputProps } from "./common"; import { useWidgetInputTranslation } from "./common"; import { useFormContext } from "./form"; -export const WidgetBeszelSystemInput = ({ property, kind }: CommonWidgetInputProps<"beszelSystem">) => { - const t = useScopedI18n("widget.beszelSystemStats.option.systemId"); +const useIntegrationSelectTranslation = () => + useScopedI18n("widget.integrationSelect"); + +export const WidgetIntegrationSelectInput = ({ + property, + kind, + options, +}: CommonWidgetInputProps<"integrationSelect">) => { + const t = useIntegrationSelectTranslation(); const tInput = useWidgetInputTranslation(kind, property); const form = useFormContext(); - const integrationIds = form.values.integrationIds; + const integrationIds = form.values.integrationIds as string[]; - const { - data: systemsResult = [], - isPending, - isError, - } = clientApi.widget.beszel.getSystems.useQuery( - { integrationIds }, - { enabled: integrationIds.length > 0, staleTime: 30_000 }, - ); + const { data: selectData = [], isPending, isError } = options.useOptions(integrationIds); if (integrationIds.length === 0) { return ( @@ -33,20 +32,18 @@ export const WidgetBeszelSystemInput = ({ property, kind }: CommonWidgetInputPro ); } - const systems = systemsResult.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name }))); - return (