feat: add crud for integrations (#11)

* wip: add crud for services and integrations * feat: remove services * feat: move integration definitions to homarr/definitions, add temporary test connection solution without actual request * feat: add integration count badge * feat: add translation for integrations * feat: add notifications and translate them * feat: add notice to integration forms about test connection * chore: fix ci check issues * feat: add confirm modals for integration deletion and secret card cancellation, change ordering for list page, add name property to integrations * refactor: move revalidate path action * chore: fix ci check issues * chore: install missing dependencies * chore: fix ci check issues * chore: address pull request feedback
2024-01-02 17:12:26 +01:00
parent 2809e01b03
commit 367beb6759
52 changed files with 2164 additions and 23 deletions
--- a/apps/nextjs/src/app/[locale]/integrations/new/_dropdown.tsx
+++ b/apps/nextjs/src/app/[locale]/integrations/new/_dropdown.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+
+import { getIntegrationName, integrationKinds } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import {
+  Group,
+  IconSearch,
+  Menu,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+} from "@homarr/ui";
+
+import { IntegrationAvatar } from "../_avatar";
+
+export const IntegrationCreateDropdownContent = () => {
+  const t = useI18n();
+  const [search, setSearch] = useState("");
+
+  const filteredKinds = useMemo(() => {
+    return integrationKinds.filter((kind) =>
+      kind.includes(search.toLowerCase()),
+    );
+  }, [search]);
+
+  return (
+    <Stack>
+      <TextInput
+        leftSection={<IconSearch stroke={1.5} size={20} />}
+        placeholder={t("integration.page.list.search")}
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+
+      {filteredKinds.length > 0 ? (
+        <ScrollArea.Autosize mah={384}>
+          {filteredKinds.map((kind) => (
+            <Menu.Item
+              component={Link}
+              href={`/integrations/new?kind=${kind}`}
+              key={kind}
+            >
+              <Group>
+                <IntegrationAvatar kind={kind} size="sm" />
+                <Text size="sm">{getIntegrationName(kind)}</Text>
+              </Group>
+            </Menu.Item>
+          ))}
+        </ScrollArea.Autosize>
+      ) : (
+        <Menu.Item disabled>{t("common.noResults")}</Menu.Item>
+      )}
+    </Stack>
+  );
+};