From 508fcb9861d56f84d027fc8c456d8841486fdf72 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Mon, 22 Jul 2024 21:00:14 +0200
Subject: [PATCH] feat: allow no secrets for integration (#856)

---
 .../new/_integration-new-form.tsx             | 20 ++++++++++++++++---
 packages/translation/src/lang/en.ts           |  4 ++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
index d7ab653e1..6d4ed9727 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -3,7 +3,8 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Button, Fieldset, Group, SegmentedControl, Stack, TextInput } from "@mantine/core";
+import { Alert, Button, Fieldset, Group, SegmentedControl, Stack, Text, TextInput } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
@@ -95,6 +96,11 @@ export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) =>
                 {...form.getInputProps(`secrets.${index}.value`)}
               />
             ))}
+            {form.values.secrets.length === 0 && (
+              <Alert icon={<IconInfoCircle size={"1rem"} />} color={"blue"}>
+                <Text c={"blue"}>{t("integration.secrets.noSecretsRequired.text")}</Text>
+              </Alert>
+            )}
           </Stack>
         </Fieldset>
 
@@ -120,12 +126,20 @@ const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmented
   const t = useScopedI18n("integration.secrets");
 
   const secretKindGroups = secretKinds.map((kinds) => ({
-    label: kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
-    value: kinds.join("-"),
+    label:
+      kinds.length === 0
+        ? t("noSecretsRequired.segmentTitle")
+        : kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
+    value: kinds.length === 0 ? "empty" : kinds.join("-"),
   }));
 
   const onChange = useCallback(
     (value: string) => {
+      if (value === "empty") {
+        form.setFieldValue("secrets", []);
+        return;
+      }
+
       const kinds = value.split("-") as IntegrationSecretKind[];
       const secrets = kinds.map((kind) => ({
         kind,
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 9a448e5b7..f46d6b7ba 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -470,6 +470,10 @@ export default {
         title: "Reset secret",
         message: "Are you sure you want to reset this secret?",
       },
+      noSecretsRequired: {
+        segmentTitle: "No secrets",
+        text: "No secrets required for this integration",
+      },
       kind: {
         username: {
           label: "Username",