feat: add Synology integration support for health/system monitoring (#6121)

packages/widgets/src/_inputs/common.tsx

@@ -11,7 +11,7 @@ export interface CommonWidgetInputProps<TKey extends WidgetOptionType> {
   itemId?: string;
 }
 
-type UseWidgetInputTranslationReturnType = (key: "label" | "description") => string;
+type UseWidgetInputTranslationReturnType = (key: "label" | "description" | "placeholder") => string;
 
 /**
  * Short description why as and unknown convertions are used below:

packages/widgets/src/_inputs/index.ts

@@ -17,6 +17,7 @@ import { WidgetUmamiEventInput } from "./widget-umami-event-input";
 import { WidgetUmamiEventNamesInput } from "./widget-umami-event-names-input";
 import { WidgetUmamiWebsiteInput } from "./widget-umami-website-input";
 import { WidgetIntegrationSelectInput } from "./widget-integration-select-input";
+import { WidgetIntegrationMultiSelectInput } from "./widget-integration-multi-select-input";
 
 const mapping = {
   anchorNote: WidgetAnchorNoteInput,
@@ -37,6 +38,7 @@ const mapping = {
   umamiWebsite: WidgetUmamiWebsiteInput,
   customWidgetSelect: WidgetCustomWidgetSelectInput,
   integrationSelect: WidgetIntegrationSelectInput,
+  integrationMultiSelect: WidgetIntegrationMultiSelectInput,
 } satisfies Record<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {

packages/widgets/src/_inputs/widget-integration-multi-select-input.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { MultiSelect, Text } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
+
+import type { CommonWidgetInputProps } from "./common";
+import { useWidgetInputTranslation } from "./common";
+import { useFormContext } from "./form";
+
+const useIntegrationSelectTranslation = () => useScopedI18n("widget.integrationSelect");
+
+export const WidgetIntegrationMultiSelectInput = ({
+  property,
+  kind,
+  options,
+}: CommonWidgetInputProps<"integrationMultiSelect">) => {
+  const t = useIntegrationSelectTranslation();
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds as string[];
+  const inputProps = form.getInputProps(`options.${property}`);
+  const selectedValues = (inputProps.value as string[] | undefined) ?? [];
+
+  const { data: selectData = [], isPending, isError } = options.useOptions(integrationIds);
+  const data = [
+    ...selectData,
+    ...selectedValues
+      .filter((selectedValue) => !selectData.some((option) => option.value === selectedValue))
+      .map((selectedValue) => ({ value: selectedValue, label: selectedValue })),
+  ];
+
+  if (integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureIntegrationFirst")}
+      </Text>
+    );
+  }
+
+  const description = options.withDescription ? tInput("description") : undefined;
+  const placeholder = isPending ? t("loading") : tInput("placeholder");
+  const loadError = isError ? t("loadError") : undefined;
+
+  return (
+    <MultiSelect
+      {...inputProps}
+      label={tInput("label")}
+      description={description}
+      placeholder={placeholder}
+      searchable
+      clearable
+      nothingFoundMessage={t("noResults")}
+      data={data}
+      disabled={isError}
+      error={loadError ?? inputProps.error}
+    />
+  );
+};