refactor(widgets): replace beszelSystem option with generic integrationSelect

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"

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<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {

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 (
     <Select
       label={tInput("label")}
-      description={tInput("description")}
+      description={options.withDescription ? tInput("description") : undefined}
       placeholder={(isPending && t("loading")) || t("placeholder")}
-      clearable
-      searchable
-      nothingFoundMessage={t("noSystems")}
-      data={systems}
+      clearable={options.clearable}
+      searchable={options.searchable}
+      nothingFoundMessage={t("noResults")}
+      data={selectData}
       disabled={isError}
       error={(isError && t("loadError")) || undefined}
       {...form.getInputProps(`options.${property}`)}
     />
   );
-};
+};

packages/widgets/src/beszel-system-stats/index.ts

@@ -1,5 +1,7 @@
 import { IconChartAreaLine, IconServerOff } from "@tabler/icons-react";
 
+import { clientApi } from "@homarr/api/client";
+
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
@@ -18,7 +20,20 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
   integrationsRequired: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
-      systemId: factory.beszelSystem(),
+      systemId: factory.integrationSelect({
+        withDescription: true,
+        clearable: true,
+        useOptions: (integrationIds: string[]) => {
+          const { data = [], isPending, isError } = clientApi.widget.beszel.getSystems.useQuery(
+            { integrationIds },
+            { enabled: integrationIds.length > 0, staleTime: 30_000 },
+          );
+          const selectData = data.flatMap((r) =>
+            r.systems.map((s) => ({ value: s.id, label: s.name })),
+          );
+          return { data: selectData, isPending, isError };
+        },
+      }),
       timePeriod: factory.select({
         defaultValue: "1h",
         options: timePeriodOptions,

packages/widgets/src/options.ts

@@ -60,6 +60,18 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
   };
 }
 
+interface IntegrationSelectInput extends CommonInput<string> {
+  clearable?: boolean;
+  searchable?: boolean;
+  useOptions: (
+    integrationIds: string[],
+  ) => {
+    data: { value: string; label: string }[];
+    isPending: boolean;
+    isError: boolean;
+  };
+}
+
 interface NumberInput extends CommonInput<number> {
   validate: z.ZodNumber;
   step?: number;
@@ -175,10 +187,13 @@ const optionsFactory = {
     defaultValue: "",
     withDescription: true,
   }),
-  beszelSystem: () => ({
-    type: "beszelSystem" as const,
-    defaultValue: "",
-    withDescription: true,
+  integrationSelect: (input: IntegrationSelectInput) => ({
+    type: "integrationSelect" as const,
+    defaultValue: input.defaultValue ?? "",
+    withDescription: input.withDescription ?? false,
+    clearable: input.clearable ?? false,
+    searchable: input.searchable ?? true,
+    useOptions: input.useOptions,
   }),
   customWidgetSelect: (input?: CommonInput<string>) => ({
     type: "customWidgetSelect" as const,