feat: add import for config files from oldmarr (#1019)

* wip: add oldmarr config import

* wip: add support for wrong amount of categories / sections with autofix, color mapping, position adjustments of wrappers

* fix: lockfile broken

* feat: add support for form data trpc requests

* wip: improve file upload

* refactor: restructure import, add import configuration

* wip: add configurations for import to modal

* refactor: move oldmarr import to old-import package

* fix: column count not respects screen size for board

* feat: add beta badge for oldmarr config import

* chore: address pull request feedback

* fix: format issues

* fix: inconsistent versions

* fix: deepsource issues

* fix: revert {} to Record<string, never> convertion to prevent typecheck issue

* fix: inconsistent zod version

* fix: format issue

* chore: address pull request feedback

* fix: wrong import

* fix: broken lock file

* fix: inconsistent versions

* fix: format issues

packages/old-import/src/widgets/definitions/bookmark.ts

@@ -0,0 +1,18 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrBookmarkDefinition = CommonOldmarrWidgetDefinition<
+  "bookmark",
+  {
+    name: string;
+    items: {
+      id: string;
+      name: string;
+      href: string;
+      iconUrl: string;
+      openNewTab: boolean;
+      hideHostname: boolean;
+      hideIcon: boolean;
+    }[];
+    layout: "autoGrid" | "horizontal" | "vertical";
+  }
+>;

packages/old-import/src/widgets/definitions/calendar.ts

@@ -0,0 +1,11 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrCalendarDefinition = CommonOldmarrWidgetDefinition<
+  "calendar",
+  {
+    hideWeekDays: boolean;
+    showUnmonitored: boolean;
+    radarrReleaseType: "inCinemas" | "physicalRelease" | "digitalRelease";
+    fontSize: "xs" | "sm" | "md" | "lg" | "xl";
+  }
+>;

packages/old-import/src/widgets/definitions/common.ts

@@ -0,0 +1,9 @@
+import type { OldmarrWidgetKind } from "@homarr/old-schema";
+
+export interface CommonOldmarrWidgetDefinition<
+  TId extends OldmarrWidgetKind,
+  TOptions extends Record<string, unknown>,
+> {
+  id: TId;
+  options: TOptions;
+}

packages/old-import/src/widgets/definitions/dashdot.ts

@@ -0,0 +1,53 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrDashdotDefinition = CommonOldmarrWidgetDefinition<
+  "dashdot",
+  {
+    dashName: string;
+    url: string;
+    usePercentages: boolean;
+    columns: number;
+    graphHeight: number;
+    graphsOrder: (
+      | {
+          key: "storage";
+          subValues: {
+            enabled: boolean;
+            compactView: boolean;
+            span: number;
+            multiView: boolean;
+          };
+        }
+      | {
+          key: "network";
+          subValues: {
+            enabled: boolean;
+            compactView: boolean;
+            span: number;
+          };
+        }
+      | {
+          key: "cpu";
+          subValues: {
+            enabled: boolean;
+            multiView: boolean;
+            span: number;
+          };
+        }
+      | {
+          key: "ram";
+          subValues: {
+            enabled: boolean;
+            span: number;
+          };
+        }
+      | {
+          key: "gpu";
+          subValues: {
+            enabled: boolean;
+            span: number;
+          };
+        }
+    )[];
+  }
+>;

packages/old-import/src/widgets/definitions/date.ts

@@ -0,0 +1,21 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrDateDefinition = CommonOldmarrWidgetDefinition<
+  "date",
+  {
+    timezone: string;
+    customTitle: string;
+    display24HourFormat: boolean;
+    dateFormat:
+      | "hide"
+      | "dddd, MMMM D"
+      | "dddd, D MMMM"
+      | "MMM D"
+      | "D MMM"
+      | "DD/MM/YYYY"
+      | "MM/DD/YYYY"
+      | "DD/MM"
+      | "MM/DD";
+    titleState: "none" | "city" | "both";
+  }
+>;

packages/old-import/src/widgets/definitions/dlspeed.ts

@@ -0,0 +1,4 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type OldmarrDlspeedDefinition = CommonOldmarrWidgetDefinition<"dlspeed", {}>;

packages/old-import/src/widgets/definitions/dns-hole-controls.ts

@@ -0,0 +1,8 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrDnsHoleControlsDefinition = CommonOldmarrWidgetDefinition<
+  "dns-hole-controls",
+  {
+    showToggleAllButtons: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/dns-hole-summary.ts

@@ -0,0 +1,6 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrDnsHoleSummaryDefinition = CommonOldmarrWidgetDefinition<
+  "dns-hole-summary",
+  { usePiHoleColors: boolean; layout: "column" | "row" | "grid" }
+>;

packages/old-import/src/widgets/definitions/health-monitoring.ts

@@ -0,0 +1,21 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrHealthMonitoringDefinition = CommonOldmarrWidgetDefinition<
+  "health-monitoring",
+  {
+    fahrenheit: boolean;
+    cpu: boolean;
+    memory: boolean;
+    fileSystem: boolean;
+    defaultTabState: "system" | "cluster";
+    node: string;
+    defaultViewState: "storage" | "none" | "node" | "vm" | "lxc";
+    summary: boolean;
+    showNode: boolean;
+    showVM: boolean;
+    showLXCs: boolean;
+    showStorage: boolean;
+    sectionIndicatorColor: "all" | "any";
+    ignoreCert: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/iframe.ts

@@ -0,0 +1,16 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrIframeDefinition = CommonOldmarrWidgetDefinition<
+  "iframe",
+  {
+    embedUrl: string;
+    allowFullScreen: boolean;
+    allowScrolling: boolean;
+    allowTransparency: boolean;
+    allowPayment: boolean;
+    allowAutoPlay: boolean;
+    allowMicrophone: boolean;
+    allowCamera: boolean;
+    allowGeolocation: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/index.ts

@@ -0,0 +1,75 @@
+import { objectEntries } from "@homarr/common";
+import type { WidgetKind } from "@homarr/definitions";
+
+import type { OldmarrBookmarkDefinition } from "./bookmark";
+import type { OldmarrCalendarDefinition } from "./calendar";
+import type { OldmarrDashdotDefinition } from "./dashdot";
+import type { OldmarrDateDefinition } from "./date";
+import type { OldmarrDlspeedDefinition } from "./dlspeed";
+import type { OldmarrDnsHoleControlsDefinition } from "./dns-hole-controls";
+import type { OldmarrDnsHoleSummaryDefinition } from "./dns-hole-summary";
+import type { OldmarrHealthMonitoringDefinition } from "./health-monitoring";
+import type { OldmarrIframeDefinition } from "./iframe";
+import type { OldmarrIndexerManagerDefinition } from "./indexer-manager";
+import type { OldmarrMediaRequestListDefinition } from "./media-requests-list";
+import type { OldmarrMediaRequestStatsDefinition } from "./media-requests-stats";
+import type { OldmarrMediaServerDefinition } from "./media-server";
+import type { OldmarrMediaTranscodingDefinition } from "./media-transcoding";
+import type { OldmarrNotebookDefinition } from "./notebook";
+import type { OldmarrRssDefinition } from "./rss";
+import type { OldmarrSmartHomeEntityStateDefinition } from "./smart-home-entity-state";
+import type { OldmarrSmartHomeTriggerAutomationDefinition } from "./smart-home-trigger-automation";
+import type { OldmarrTorrentStatusDefinition } from "./torrent-status";
+import type { OldmarrUsenetDefinition } from "./usenet";
+import type { OldmarrVideoStreamDefinition } from "./video-stream";
+import type { OldmarrWeatherDefinition } from "./weather";
+
+export type OldmarrWidgetDefinitions =
+  | OldmarrWeatherDefinition
+  | OldmarrDateDefinition
+  | OldmarrCalendarDefinition
+  | OldmarrIndexerManagerDefinition
+  | OldmarrDashdotDefinition
+  | OldmarrUsenetDefinition
+  | OldmarrTorrentStatusDefinition
+  | OldmarrDlspeedDefinition
+  | OldmarrRssDefinition
+  | OldmarrVideoStreamDefinition
+  | OldmarrIframeDefinition
+  | OldmarrMediaServerDefinition
+  | OldmarrMediaRequestListDefinition
+  | OldmarrMediaRequestStatsDefinition
+  | OldmarrDnsHoleSummaryDefinition
+  | OldmarrDnsHoleControlsDefinition
+  | OldmarrBookmarkDefinition
+  | OldmarrNotebookDefinition
+  | OldmarrSmartHomeEntityStateDefinition
+  | OldmarrSmartHomeTriggerAutomationDefinition
+  | OldmarrHealthMonitoringDefinition
+  | OldmarrMediaTranscodingDefinition;
+
+export const widgetKindMapping = {
+  app: null, // In oldmarr apps were not widgets
+  clock: "date",
+  calendar: "calendar",
+  weather: "weather",
+  rssFeed: "rss",
+  video: "video-stream",
+  iframe: "iframe",
+  mediaServer: "media-server",
+  dnsHoleSummary: "dns-hole-summary",
+  dnsHoleControls: "dns-hole-controls",
+  notebook: "notebook",
+  "smartHome-entityState": "smart-home/entity-state",
+  "smartHome-executeAutomation": "smart-home/trigger-automation",
+  "mediaRequests-requestList": "media-requests-list",
+  "mediaRequests-requestStats": "media-requests-stats",
+} satisfies Record<WidgetKind, OldmarrWidgetDefinitions["id"] | null>;
+// Use null for widgets that did not exist in oldmarr
+// TODO: revert assignment so that only old widgets are needed in the object,
+// this can be done ones all widgets are implemented
+
+export type WidgetMapping = typeof widgetKindMapping;
+
+export const mapKind = (kind: OldmarrWidgetDefinitions["id"]): WidgetKind | undefined =>
+  objectEntries(widgetKindMapping).find(([_, value]) => value === kind)?.[0];

packages/old-import/src/widgets/definitions/indexer-manager.ts

@@ -0,0 +1,8 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrIndexerManagerDefinition = CommonOldmarrWidgetDefinition<
+  "indexer-manager",
+  {
+    openIndexerSiteInNewTab: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/media-requests-list.ts

@@ -0,0 +1,9 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrMediaRequestListDefinition = CommonOldmarrWidgetDefinition<
+  "media-requests-list",
+  {
+    replaceLinksWithExternalHost: boolean;
+    openInNewTab: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/media-requests-stats.ts

@@ -0,0 +1,9 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrMediaRequestStatsDefinition = CommonOldmarrWidgetDefinition<
+  "media-requests-stats",
+  {
+    replaceLinksWithExternalHost: boolean;
+    openInNewTab: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/media-server.ts

@@ -0,0 +1,4 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type OldmarrMediaServerDefinition = CommonOldmarrWidgetDefinition<"media-server", {}>;

packages/old-import/src/widgets/definitions/media-transcoding.ts

@@ -0,0 +1,12 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrMediaTranscodingDefinition = CommonOldmarrWidgetDefinition<
+  "media-transcoding",
+  {
+    defaultView: "workers" | "queue" | "statistics";
+    showHealthCheck: boolean;
+    showHealthChecksInQueue: boolean;
+    queuePageSize: number;
+    showAppIcon: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/notebook.ts

@@ -0,0 +1,10 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrNotebookDefinition = CommonOldmarrWidgetDefinition<
+  "notebook",
+  {
+    showToolbar: boolean;
+    allowReadOnlyCheck: boolean;
+    content: string;
+  }
+>;

packages/old-import/src/widgets/definitions/rss.ts

@@ -0,0 +1,14 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrRssDefinition = CommonOldmarrWidgetDefinition<
+  "rss",
+  {
+    rssFeedUrl: string[];
+    refreshInterval: number;
+    dangerousAllowSanitizedItemContent: boolean;
+    textLinesClamp: number;
+    sortByPublishDateAscending: boolean;
+    sortPostsWithoutPublishDateToTheTop: boolean;
+    maximumAmountOfPosts: number;
+  }
+>;

packages/old-import/src/widgets/definitions/smart-home-entity-state.ts

@@ -0,0 +1,13 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrSmartHomeEntityStateDefinition = CommonOldmarrWidgetDefinition<
+  "smart-home/entity-state",
+  {
+    entityId: string;
+    appendUnit: boolean;
+    genericToggle: boolean;
+    automationId: string;
+    displayName: string;
+    displayFriendlyName: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/smart-home-trigger-automation.ts

@@ -0,0 +1,9 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrSmartHomeTriggerAutomationDefinition = CommonOldmarrWidgetDefinition<
+  "smart-home/trigger-automation",
+  {
+    automationId: string;
+    displayName: string;
+  }
+>;

packages/old-import/src/widgets/definitions/torrent-status.ts

@@ -0,0 +1,18 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrTorrentStatusDefinition = CommonOldmarrWidgetDefinition<
+  "torrents-status",
+  {
+    displayCompletedTorrents: boolean;
+    displayActiveTorrents: boolean;
+    speedLimitOfActiveTorrents: number;
+    displayStaleTorrents: boolean;
+    labelFilterIsWhitelist: boolean;
+    labelFilter: string[];
+    displayRatioWithFilter: boolean;
+    columnOrdering: boolean;
+    rowSorting: boolean;
+    columns: ("up" | "down" | "eta" | "progress")[];
+    nameColumnSize: number;
+  }
+>;

packages/old-import/src/widgets/definitions/usenet.ts

@@ -0,0 +1,4 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type OldmarrUsenetDefinition = CommonOldmarrWidgetDefinition<"usenet", {}>;

packages/old-import/src/widgets/definitions/video-stream.ts

@@ -0,0 +1,11 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrVideoStreamDefinition = CommonOldmarrWidgetDefinition<
+  "video-stream",
+  {
+    FeedUrl: string;
+    autoPlay: boolean;
+    muted: boolean;
+    controls: boolean;
+  }
+>;

packages/old-import/src/widgets/definitions/weather.ts

@@ -0,0 +1,16 @@
+import type { CommonOldmarrWidgetDefinition } from "./common";
+
+export type OldmarrWeatherDefinition = CommonOldmarrWidgetDefinition<
+  "weather",
+  {
+    displayInFahrenheit: boolean;
+    displayCityName: boolean;
+    displayWeekly: boolean;
+    forecastDays: number;
+    location: {
+      name: string;
+      latitude: number;
+      longitude: number;
+    };
+  }
+>;

packages/old-import/src/widgets/options.ts

@@ -0,0 +1,121 @@
+import { objectEntries } from "@homarr/common";
+import type { WidgetKind } from "@homarr/definitions";
+import { logger } from "@homarr/log";
+
+import type { WidgetComponentProps } from "../../../widgets/src/definition";
+import type { OldmarrWidgetDefinitions, WidgetMapping } from "./definitions";
+
+// This type enforces, that for all widget mappings there is a corresponding option mapping,
+// each option of newmarr can be mapped from the value of the oldmarr options
+type OptionMapping = {
+  [WidgetKey in keyof WidgetMapping]: WidgetMapping[WidgetKey] extends null
+    ? null
+    : {
+        [OptionsKey in keyof WidgetComponentProps<WidgetKey>["options"]]: (
+          oldOptions: Extract<OldmarrWidgetDefinitions, { id: WidgetMapping[WidgetKey] }>["options"],
+        ) => WidgetComponentProps<WidgetKey>["options"][OptionsKey] | undefined;
+      };
+};
+
+const optionMapping: OptionMapping = {
+  "mediaRequests-requestList": {
+    linksTargetNewTab: (oldOptions) => oldOptions.openInNewTab,
+  },
+  "mediaRequests-requestStats": {},
+  calendar: {
+    filterFutureMonths: () => undefined,
+    filterPastMonths: () => undefined,
+  },
+  clock: {
+    customTitle: (oldOptions) => oldOptions.customTitle,
+    customTitleToggle: (oldOptions) => oldOptions.titleState !== "none",
+    dateFormat: (oldOptions) => (oldOptions.dateFormat === "hide" ? undefined : oldOptions.dateFormat),
+    is24HourFormat: (oldOptions) => oldOptions.display24HourFormat,
+    showDate: (oldOptions) => oldOptions.dateFormat !== "hide",
+    showSeconds: () => undefined,
+    timezone: (oldOptions) => oldOptions.timezone,
+    useCustomTimezone: () => true,
+  },
+  weather: {
+    forecastDayCount: (oldOptions) => oldOptions.forecastDays,
+    hasForecast: (oldOptions) => oldOptions.displayWeekly,
+    isFormatFahrenheit: (oldOptions) => oldOptions.displayInFahrenheit,
+    location: (oldOptions) => oldOptions.location,
+    showCity: (oldOptions) => oldOptions.displayCityName,
+  },
+  iframe: {
+    embedUrl: (oldOptions) => oldOptions.embedUrl,
+    allowAutoPlay: (oldOptions) => oldOptions.allowAutoPlay,
+    allowFullScreen: (oldOptions) => oldOptions.allowFullScreen,
+    allowPayment: (oldOptions) => oldOptions.allowPayment,
+    allowCamera: (oldOptions) => oldOptions.allowCamera,
+    allowMicrophone: (oldOptions) => oldOptions.allowMicrophone,
+    allowGeolocation: (oldOptions) => oldOptions.allowGeolocation,
+    allowScrolling: (oldOptions) => oldOptions.allowScrolling,
+    allowTransparency: (oldOptions) => oldOptions.allowTransparency,
+  },
+  video: {
+    feedUrl: (oldOptions) => oldOptions.FeedUrl,
+    hasAutoPlay: (oldOptions) => oldOptions.autoPlay,
+    hasControls: (oldOptions) => oldOptions.controls,
+    isMuted: (oldOptions) => oldOptions.muted,
+  },
+  dnsHoleControls: {
+    showToggleAllButtons: (oldOptions) => oldOptions.showToggleAllButtons,
+  },
+  dnsHoleSummary: {
+    layout: (oldOptions) => oldOptions.layout,
+    usePiHoleColors: (oldOptions) => oldOptions.usePiHoleColors,
+  },
+  rssFeed: {
+    feedUrls: (oldOptions) => oldOptions.rssFeedUrl,
+    maximumAmountPosts: (oldOptions) => oldOptions.maximumAmountOfPosts,
+    textLinesClamp: (oldOptions) => oldOptions.textLinesClamp,
+  },
+  notebook: {
+    allowReadOnlyCheck: (oldOptions) => oldOptions.allowReadOnlyCheck,
+    content: (oldOptions) => oldOptions.content,
+    showToolbar: (oldOptions) => oldOptions.showToolbar,
+  },
+  "smartHome-entityState": {
+    entityId: (oldOptions) => oldOptions.entityId,
+    displayName: (oldOptions) => oldOptions.displayName,
+    clickable: () => undefined,
+    entityUnit: () => undefined,
+  },
+  "smartHome-executeAutomation": {
+    automationId: (oldOptions) => oldOptions.automationId,
+    displayName: (oldOptions) => oldOptions.displayName,
+  },
+  mediaServer: {},
+  app: null,
+};
+
+/**
+ * Maps the oldmarr options to the newmarr options
+ * @param kind item kind to map
+ * @param oldOptions oldmarr options for this item
+ * @returns newmarr options for this item or null if the item did not exist in oldmarr
+ */
+export const mapOptions = <K extends WidgetKind>(
+  kind: K,
+  oldOptions: Extract<OldmarrWidgetDefinitions, { id: WidgetMapping[K] }>["options"],
+) => {
+  logger.debug(`Mapping old homarr options for widget kind=${kind} options=${JSON.stringify(oldOptions)}`);
+  if (optionMapping[kind] === null) {
+    return null;
+  }
+
+  const mapping = optionMapping[kind];
+  return objectEntries(mapping).reduce(
+    (acc, [key, value]) => {
+      const newValue = value(oldOptions as never);
+      logger.debug(`Mapping old homarr option kind=${kind} key=${key as string} newValue=${newValue as string}`);
+      if (newValue !== undefined) {
+        acc[key as string] = newValue;
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>,
+  ) as WidgetComponentProps<K>["options"];
+};