feat: add Umami Analytics integration and widget (#5362)

Co-authored-by: Josh G <febrile42@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
Co-authored-by: Thomas <thomas@ajnart.fr>

packages/widgets/src/_inputs/index.ts

@@ -12,6 +12,9 @@ import { WidgetSliderInput } from "./widget-slider-input";
 import { WidgetSortedItemListInput } from "./widget-sortable-item-list-input";
 import { WidgetSwitchInput } from "./widget-switch-input";
 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";
 
 const mapping = {
   anchorNote: WidgetAnchorNoteInput,
@@ -27,6 +30,9 @@ const mapping = {
   sortableItemList: WidgetSortedItemListInput,
   multiReleasesRepositories: WidgetMultiReleasesRepositoriesInput,
   dynamicSelect: WidgetDynamicSelectInput,
+  umamiEventName: WidgetUmamiEventInput,
+  umamiEventNames: WidgetUmamiEventNamesInput,
+  umamiWebsite: WidgetUmamiWebsiteInput,
 } satisfies Record<WidgetOptionType, unknown>;
 
 export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {

packages/widgets/src/_inputs/widget-umami-event-input.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+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 WidgetUmamiEventInput = ({ property, kind }: CommonWidgetInputProps<"umamiEventName">) => {
+  const t = useScopedI18n("widget.umami.option.eventName");
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds;
+  const websiteId = form.values.options.websiteId as string | undefined;
+
+  const { data: eventNames, isPending } = clientApi.widget.umami.getEventNames.useQuery(
+    { integrationId: integrationIds[0] ?? "", websiteId: websiteId ?? "" },
+    { enabled: Boolean(integrationIds[0]) && Boolean(websiteId) },
+  );
+
+  if (!websiteId || integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureWebsiteFirst")}
+      </Text>
+    );
+  }
+
+  const data = [{ value: "", label: t("none") }, ...(eventNames ?? [])];
+
+  return (
+    <Select
+      label={tInput("label")}
+      description={tInput("description")}
+      placeholder={isPending ? t("loading") : undefined}
+      searchable
+      nothingFoundMessage={t("noEvents")}
+      data={data}
+      {...form.getInputProps(`options.${property}`)}
+    />
+  );
+};

packages/widgets/src/_inputs/widget-umami-event-names-input.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { MultiSelect, 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 WidgetUmamiEventNamesInput = ({ property, kind }: CommonWidgetInputProps<"umamiEventNames">) => {
+  const t = useScopedI18n("widget.umami.option.eventNames");
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds;
+  const websiteId = form.values.options.websiteId as string | undefined;
+
+  const { data: eventNames, isPending } = clientApi.widget.umami.getEventNames.useQuery(
+    { integrationId: integrationIds[0] ?? "", websiteId: websiteId ?? "" },
+    { enabled: Boolean(integrationIds[0]) && Boolean(websiteId) },
+  );
+
+  if (!websiteId || integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureWebsiteFirst")}
+      </Text>
+    );
+  }
+
+  return (
+    <MultiSelect
+      label={tInput("label")}
+      description={tInput("description")}
+      placeholder={isPending ? t("loading") : t("placeholder")}
+      searchable
+      nothingFoundMessage={t("noEvents")}
+      data={eventNames ?? []}
+      {...form.getInputProps(`options.${property}`)}
+    />
+  );
+};

packages/widgets/src/_inputs/widget-umami-website-input.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+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 WidgetUmamiWebsiteInput = ({ property, kind }: CommonWidgetInputProps<"umamiWebsite">) => {
+  const t = useScopedI18n("widget.umami.option.websiteId");
+  const tInput = useWidgetInputTranslation(kind, property);
+  const form = useFormContext();
+
+  const integrationIds = form.values.integrationIds;
+
+  const { data: websites, isPending } = clientApi.widget.umami.getWebsites.useQuery(
+    { integrationId: integrationIds[0] ?? "" },
+    { enabled: Boolean(integrationIds[0]) },
+  );
+
+  if (integrationIds.length === 0) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("configureIntegrationFirst")}
+      </Text>
+    );
+  }
+
+  return (
+    <Select
+      label={tInput("label")}
+      description={tInput("description")}
+      placeholder={isPending ? t("loading") : t("placeholder")}
+      clearable
+      searchable
+      nothingFoundMessage={t("noWebsites")}
+      data={(websites ?? []).map((site) => ({ value: site.id, label: site.domain }))}
+      {...form.getInputProps(`options.${property}`)}
+    />
+  );
+};