feat(integrations): add mock integration (#3505)

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx

@@ -10,15 +10,20 @@ import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 import { IntegrationAvatar } from "@homarr/ui";
 
-export const IntegrationCreateDropdownContent = () => {
+interface IntegrationCreateDropdownContentProps {
+  enableMockIntegration: boolean;
+}
+
+export const IntegrationCreateDropdownContent = ({ enableMockIntegration }: IntegrationCreateDropdownContentProps) => {
   const t = useI18n();
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds.filter((kind) =>
-      getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()),
-    );
-  }, [search]);
+    return integrationKinds
+      .filter((kind) => enableMockIntegration || kind !== "mock")
+      .filter((kind) => getIntegrationName(kind).toLowerCase().includes(search.toLowerCase().trim()))
+      .sort((kindA, kindB) => getIntegrationName(kindA).localeCompare(getIntegrationName(kindB)));
+  }, [search, enableMockIntegration]);
 
   const handleSearch = React.useCallback(
     (event: ChangeEvent<HTMLInputElement>) => setSearch(event.target.value),

apps/nextjs/src/app/[locale]/manage/integrations/page.tsx

@@ -41,6 +41,7 @@ import { CountBadge, IntegrationAvatar } from "@homarr/ui";
 import { ManageContainer } from "~/components/manage/manage-container";
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { NoResults } from "~/components/no-results";
+import { env } from "~/env";
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { DeleteIntegrationActionButton } from "./_integration-buttons";
 import { IntegrationCreateDropdownContent } from "./new/_integration-new-dropdown";
@@ -114,7 +115,7 @@ const IntegrationSelectMenu = ({ children }: PropsWithChildren) => {
     >
       {children}
       <MenuDropdown>
-        <IntegrationCreateDropdownContent />
+        <IntegrationCreateDropdownContent enableMockIntegration={env.UNSAFE_ENABLE_MOCK_INTEGRATION} />
       </MenuDropdown>
     </Menu>
   );

apps/nextjs/src/env.ts

@@ -0,0 +1,9 @@
+import { createEnv } from "@homarr/env";
+import { createBooleanSchema } from "@homarr/env/schemas";
+
+export const env = createEnv({
+  server: {
+    UNSAFE_ENABLE_MOCK_INTEGRATION: createBooleanSchema(false),
+  },
+  experimental__runtimeEnv: process.env,
+});