feat: add support for multiple integration kind options (#127)

* feat: add support for multiple integration kind options

* fix: deepsource issue JS-0417 missing use callback

apps/nextjs/src/app/[locale]/(main)/integrations/edit/[id]/_integration-edit-form.tsx

@@ -5,7 +5,10 @@ import { useRouter } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { getSecretKinds } from "@homarr/definitions";
+import {
+  getAllSecretKindOptions,
+  getDefaultSecretKinds,
+} from "@homarr/definitions";
 import { useForm, zodResolver } from "@homarr/form";
 import {
   showErrorNotification,
@@ -32,7 +35,10 @@ interface EditIntegrationForm {
 
 export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   const t = useI18n();
-  const secretsKinds = getSecretKinds(integration.kind);
+  const secretsKinds =
+    getAllSecretKindOptions(integration.kind).find((x) =>
+      integration.secrets.every((y) => x.includes(y.kind)),
+    ) ?? getDefaultSecretKinds(integration.kind);
   const initialFormValues = {
     name: integration.name,
     url: integration.url,

apps/nextjs/src/app/[locale]/(main)/integrations/new/_integration-new-form.tsx

@@ -1,18 +1,30 @@
 "use client";
 
+import { useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
 import { clientApi } from "@homarr/api/client";
-import type { IntegrationKind } from "@homarr/definitions";
-import { getSecretKinds } from "@homarr/definitions";
+import type {
+  IntegrationKind,
+  IntegrationSecretKind,
+} from "@homarr/definitions";
+import { getAllSecretKindOptions } from "@homarr/definitions";
+import type { UseFormReturnType } from "@homarr/form";
 import { useForm, zodResolver } from "@homarr/form";
 import {
   showErrorNotification,
   showSuccessNotification,
 } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import { Button, Fieldset, Group, Stack, TextInput } from "@homarr/ui";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import {
+  Button,
+  Fieldset,
+  Group,
+  SegmentedControl,
+  Stack,
+  TextInput,
+} from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
@@ -34,11 +46,11 @@ export const NewIntegrationForm = ({
   searchParams,
 }: NewIntegrationFormProps) => {
   const t = useI18n();
-  const secretKinds = getSecretKinds(searchParams.kind);
+  const secretKinds = getAllSecretKindOptions(searchParams.kind);
   const initialFormValues = {
     name: searchParams.name ?? "",
     url: searchParams.url ?? "",
-    secrets: secretKinds.map((kind) => ({
+    secrets: secretKinds[0].map((kind) => ({
       kind,
       value: "",
     })),
@@ -99,7 +111,13 @@ export const NewIntegrationForm = ({
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
-            {secretKinds.map((kind, index) => (
+            {secretKinds.length > 1 && (
+              <SecretKindsSegmentedControl
+                secretKinds={secretKinds}
+                form={form}
+              />
+            )}
+            {form.values.secrets.map(({ kind }, index) => (
               <IntegrationSecretInput
                 key={kind}
                 kind={kind}
@@ -134,4 +152,41 @@ export const NewIntegrationForm = ({
   );
 };
 
+interface SecretKindsSegmentedControlProps {
+  secretKinds: IntegrationSecretKind[][];
+  form: UseFormReturnType<FormType, (values: FormType) => FormType>;
+}
+
+const SecretKindsSegmentedControl = ({
+  secretKinds,
+  form,
+}: SecretKindsSegmentedControlProps) => {
+  const t = useScopedI18n("integration.secrets");
+
+  const secretKindGroups = secretKinds.map((kinds) => ({
+    label: kinds.map((kind) => t(`kind.${kind}.label`)).join(" & "),
+    value: kinds.join("-"),
+  }));
+
+  const onChange = useCallback(
+    (value: string) => {
+      const kinds = value.split("-") as IntegrationSecretKind[];
+      const secrets = kinds.map((kind) => ({
+        kind,
+        value: "",
+      }));
+      form.setFieldValue("secrets", secrets);
+    },
+    [form],
+  );
+
+  return (
+    <SegmentedControl
+      fullWidth
+      data={secretKindGroups}
+      onChange={onChange}
+    ></SegmentedControl>
+  );
+};
+
 type FormType = Omit<z.infer<typeof validation.integration.create>, "kind">;