refactor(boards): extract shared openAppsInNewTabs helper

apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx

@@ -20,11 +20,12 @@ import {
   IconSettings,
 } from "@tabler/icons-react";
 
-import { clientApi, fetchApi } from "@homarr/api/client";
+import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
+import { openAppsInNewTabs } from "~/components/board/open-apps-in-new-tabs";
 import { filterByItemKind } from "~/components/board/sections/category/filter";
 import { revalidatePathActionAsync } from "@homarr/common/client";
 import { env } from "@homarr/common/env";
@@ -55,34 +56,15 @@ export const BoardContentHeaderActions = () => {
 
   const openAllInNewTabs = useCallback(async () => {
     const currentLayoutId = getCurrentLayout(board);
-    const appIds = [
-      ...new Set(
-        filterByItemKind(
-          board.items.filter((item) => item.layouts.some((layout) => layout.layoutId === currentLayoutId)),
-          settings,
-          "app",
-        ).map((item) => {
-          return item.options.appId;
-        }),
-      ),
-    ];
+    const appIds = filterByItemKind(
+      board.items.filter((item) => item.layouts.some((layout) => layout.layoutId === currentLayoutId)),
+      settings,
+      "app",
+    ).map((item) => {
+      return item.options.appId;
+    });
 
-    const apps = await fetchApi.app.byIds.query(appIds);
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
-
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined, "_blank", "noopener,noreferrer");
-      if (openedWindow) {
-        openedWindow.opener = null;
-        continue;
-      }
-
-      openConfirmModal({
-        title: t("section.category.openAllInNewTabs.title"),
-        children: t("section.category.openAllInNewTabs.text"),
-      });
-      break;
-    }
+    await openAppsInNewTabs(appIds, { t, openConfirmModal });
   }, [board, t, openConfirmModal, settings]);
 
   if (!hasChangeAccess || isLoading) {

apps/nextjs/src/components/board/open-apps-in-new-tabs.ts

@@ -0,0 +1,38 @@
+import { fetchApi } from "@homarr/api/client";
+
+type AppWithHref = {
+  href: string | null;
+};
+
+type TranslationKey = "section.category.openAllInNewTabs.title" | "section.category.openAllInNewTabs.text";
+
+interface OpenAppsInNewTabsOptions {
+  t: (key: TranslationKey) => string;
+  openConfirmModal: (options: { title: string; children: string }) => void;
+  fetchAppsByIds?: (appIds: string[]) => Promise<AppWithHref[]>;
+}
+
+export const openAppsInNewTabs = async (
+  appIds: string[],
+  { t, openConfirmModal, fetchAppsByIds = fetchApi.app.byIds.query }: OpenAppsInNewTabsOptions,
+) => {
+  if (appIds.length === 0) return;
+
+  const distinctAppIds = [...new Set(appIds)];
+  const apps = await fetchAppsByIds(distinctAppIds);
+  const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+
+  for (const app of appsWithUrls) {
+    const openedWindow = window.open(app.href ?? undefined, "_blank", "noopener,noreferrer");
+    if (openedWindow) {
+      openedWindow.opener = null;
+      continue;
+    }
+
+    openConfirmModal({
+      title: t("section.category.openAllInNewTabs.title"),
+      children: t("section.category.openAllInNewTabs.text"),
+    });
+    break;
+  }
+};

apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
 
-import { fetchApi } from "@homarr/api/client";
 import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
@@ -8,6 +7,7 @@ import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
+import { openAppsInNewTabs } from "~/components/board/open-apps-in-new-tabs";
 import { useCategoryActions } from "./category-actions";
 import { CategoryEditModal } from "./category-edit-modal";
 import { filterByItemKind } from "./filter";
@@ -115,21 +115,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
       return item.options.appId;
     });
 
-    const apps = await fetchApi.app.byIds.query(appIds);
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
-
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined);
-      if (openedWindow) {
-        continue;
-      }
-
-      openConfirmModal({
-        title: t("section.category.openAllInNewTabs.title"),
-        children: t("section.category.openAllInNewTabs.text"),
-      });
-      break;
-    }
+    await openAppsInNewTabs(appIds, { t, openConfirmModal });
   }, [category, board, t, openConfirmModal, settings]);
 
   return {

apps/nextjs/src/components/board/test/open-apps-in-new-tabs.spec.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { openAppsInNewTabs } from "../open-apps-in-new-tabs";
+
+describe("openAppsInNewTabs", () => {
+  test("opens fetched apps with URLs in new tabs with noopener", async () => {
+    const open = vi.spyOn(window, "open").mockReturnValue({ opener: null } as unknown as Window);
+    const fetchAppsByIds = vi
+      .fn()
+      .mockResolvedValue([{ href: "https://example.com/one" }, { href: null }, { href: "https://example.com/two" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one", "app-two", "app-three"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(fetchAppsByIds).toHaveBeenCalledWith(["app-one", "app-two", "app-three"]);
+    expect(open).toHaveBeenCalledTimes(2);
+    expect(open).toHaveBeenNthCalledWith(1, "https://example.com/one", "_blank", "noopener,noreferrer");
+    expect(open).toHaveBeenNthCalledWith(2, "https://example.com/two", "_blank", "noopener,noreferrer");
+    expect(openConfirmModal).not.toHaveBeenCalled();
+  });
+
+  test("de-duplicates app IDs before fetching", async () => {
+    const open = vi.spyOn(window, "open").mockReturnValue({ opener: null } as unknown as Window);
+    const fetchAppsByIds = vi.fn().mockResolvedValue([{ href: "https://example.com/one" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one", "app-one", "app-one"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(fetchAppsByIds).toHaveBeenCalledWith(["app-one"]);
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+
+  test("shows confirm modal when popup is blocked", async () => {
+    vi.spyOn(window, "open").mockReturnValue(null);
+    const fetchAppsByIds = vi.fn().mockResolvedValue([{ href: "https://example.com/one" }]);
+    const openConfirmModal = vi.fn();
+
+    await openAppsInNewTabs(["app-one"], {
+      t: (key) => key,
+      openConfirmModal,
+      fetchAppsByIds,
+    });
+
+    expect(openConfirmModal).toHaveBeenCalledWith({
+      title: "section.category.openAllInNewTabs.title",
+      children: "section.category.openAllInNewTabs.text",
+    });
+  });
+});