refactor(integrations): remove use demo service button and bottom-right badge from integration select grid

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -27,7 +27,7 @@ import {
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useElementSize } from "@mantine/hooks";
-import { IconApi, IconBuildingStore, IconPlus, IconSearch, IconSparkles } from "@tabler/icons-react";
+import { IconApi, IconBuildingStore, IconPlus, IconSearch } from "@tabler/icons-react";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -848,40 +848,6 @@ const WidgetLivePreviewAndConfigContent = ({
     return [];
   }, [validIntegrationIds, supportsMock, mockIntegration]);
 
-  const { mutateAsync: createMockIntegration, isPending: isCreatingMock } = clientApi.integration.create.useMutation({
-    async onSuccess(data) {
-      await utils.integration.all.invalidate();
-      if (data && "integration" in data && data.integration) {
-        const nextIds = [...(maxIntegrations > 1 ? form.values.integrationIds : []), data.integration.id].slice(
-          -maxIntegrations,
-        );
-        form.setFieldValue("integrationIds", nextIds);
-        setShowInlineConnect(false);
-        showSuccessNotification({
-          title: "Demo Service Connected",
-          message: "A mock integration was created and connected for testing.",
-        });
-      }
-    },
-  });
-
-  const handleCreateMockService = async () => {
-    try {
-      await createMockIntegration({
-        name: "Demo Service",
-        url: "https://demo.homarr.dev",
-        kind: "mock",
-        secrets: [],
-        attemptSearchEngineCreation: false,
-      });
-    } catch (error) {
-      showErrorNotification({
-        title: t("common.error"),
-        message: error instanceof Error ? error.message : String(error),
-      });
-    }
-  };
-
   const handleInlineCreateSuccess = (result?: CreatedIntegrationResult) => {
     void utils.integration.all.invalidate();
     if (result?.integration?.id) {
@@ -1100,25 +1066,11 @@ const WidgetLivePreviewAndConfigContent = ({
                               Connect {getIntegrationName(inlineConnectKind ?? supportedKinds[0]!)}
                             </Text>
                           </Group>
-                          <Group gap="xs">
-                            {supportsMock && (
-                              <Button
-                                variant="light"
-                                color="teal"
-                                size="xs"
-                                leftSection={<IconSparkles size={14} />}
-                                loading={isCreatingMock}
-                                onClick={handleCreateMockService}
-                              >
-                                Use Demo Service
-                              </Button>
-                            )}
-                            {compatibleIntegrations.length > 0 && (
-                              <Button variant="subtle" size="xs" onClick={() => setShowInlineConnect(false)}>
-                                {t("common.action.cancel")}
-                              </Button>
-                            )}
-                          </Group>
+                          {compatibleIntegrations.length > 0 && (
+                            <Button variant="subtle" size="xs" onClick={() => setShowInlineConnect(false)}>
+                              {t("common.action.cancel")}
+                            </Button>
+                          )}
                         </Group>
 
                         {/* Multiple choice selector if widget supports >1 integration kind */}

e2e/specs/board/advanced-add-app.spec.ts

@@ -329,26 +329,23 @@ describe("Advanced Add App & Widget Modal E2E", () => {
   });
 
   // =========================================================================
-  // 5. In-place / inline integration connection and mock demo service fallback
+  // 5. In-place / inline integration connection form
   // =========================================================================
-  test("supports in-place demo service fallback and mock integration connection", async () => {
+  test("supports in-place integration connection form within widget settings", async () => {
     await actions.openItemSelectModalAsync();
     const modal = page.getByRole("dialog").filter({ hasText: "Choose item to add" }).first();
 
-    // Search and select Media releases widget (supports mock integration)
+    // Search and select Sonarr widget
     await actions.searchWidgetsAsync("Media releases");
     const mediaReleasesCard = modal.locator('button[aria-label*="Media releases" i]').first();
     if (await mediaReleasesCard.isVisible()) {
       await mediaReleasesCard.click();
       await modal.locator('text="Live Preview & Options"').waitFor({ state: "visible", timeout: 15_000 });
 
-      // Verify "Use Demo Service" button is available when no integration is connected
-      const demoBtn = modal.getByRole("button", { name: "Use Demo Service", exact: false }).first();
-      if (await demoBtn.isVisible()) {
-        await demoBtn.click();
-
-        // Verify demo / mock data badge appears in preview frame header
-        await expect(modal.getByText("Showing Demo / Mock Data")).toBeVisible({ timeout: 15_000 });
+      // Check if inline connect form is visible
+      const connectHeader = modal.locator('text="Connect"').first();
+      if (await connectHeader.isVisible()) {
+        await expect(connectHeader).toBeVisible();
       }
     }
   });

packages/ui/src/integration-select-grid/integration-select-grid.tsx

@@ -144,13 +144,6 @@ const IntegrationCard = ({
           <IntegrationCategoryBadges categories={integration.categories} limit={1} />
         )
       }
-      footerRight={
-        connectedCount > 0 ? (
-          <IntegrationCategoryBadges categories={integration.categories} limit={1} />
-        ) : (
-          <IntegrationCategoryBadges categories={integration.categories.slice(1)} limit={1} />
-        )
-      }
     >
       <Text size="10px" tt="uppercase" fw={700} c="dimmed">
         Tied Widgets