🚧 New types for integration configuration

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -2,7 +2,7 @@
 import { Group, Select, SelectItem, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
-import { forwardRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { ServiceType } from '../../../../../../../../types/service';
 
 interface IntegrationSelectorProps {
@@ -46,8 +46,6 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
     },
   ];
 
-  const [selectedItem, setSelectedItem] = useState<SelectItem>();
-
   return (
     <>
       <Select
@@ -58,49 +56,11 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
         data={data}
         maxDropdownHeight={400}
         clearable
-        onSelect={(e) => {
-          const item = data.find((x) => x.label === e.currentTarget.value);
-
-          if (item === undefined) {
-            setSelectedItem(undefined);
-            return;
-          }
-
-          setSelectedItem(item);
-        }}
         variant="default"
         mb="md"
-        icon={selectedItem && <img src={selectedItem.image} alt="test" width={20} height={20} />}
+        icon={form.values.integration?.type && <img src={data.find(x => x.value === form.values.integration?.type)?.image} alt="test" width={20} height={20} />}
+        {...form.getInputProps('integration.type')}
       />
-
-      {/*
-      {selectedItem && (
-        <Card p="md" pt="sm" radius="sm">
-          <Text weight={500} mb="lg">
-            Integration Configuration
-          </Text>
-
-          <Group grow>
-            <TextInput
-              icon={<IconUser size={16} />}
-              label="Username"
-              description="Optional"
-              placeholder="deluge"
-              variant="default"
-              {...form.getInputProps('username')}
-            />
-
-            <PasswordInput
-              icon={<IconKey />}
-              label="Password"
-              description="Optional, never share this with anybody else"
-              variant="default"
-              {...form.getInputProps('password')}
-            />
-          </Group>
-        </Card>
-      )}
-      */}
     </>
   );
 };

src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx

@@ -1,7 +1,13 @@
 import { Stack } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconKey, IconKeyOff, IconLock, IconLockOff, IconUser, IconUserOff } from '@tabler/icons';
-import { ServiceType } from '../../../../../../../../types/service';
+import {
+  IntegrationField,
+  IntegrationFieldDefinitionType,
+  integrationFieldDefinitions,
+  integrationFieldProperties,
+  ServiceType,
+} from '../../../../../../../../types/service';
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';
 
 interface IntegrationOptionsRendererProps {
@@ -29,33 +35,43 @@ const secretMappings = [
   },
 ];
 
-export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererProps) => (
+export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererProps) => {
-  <Stack spacing="xs" mb="md">
+  const selectedIntegration = form.values.integration?.type;
-    {form.values.integration && Object.entries(form.values.integration.properties).map((entry) => {
+
-      const mapping = secretMappings.find((item) => item.label === entry[0]);
+  if (!selectedIntegration) return null;
-      const isPresent = entry[1] !== undefined;
+
+  const displayedProperties = integrationFieldProperties[selectedIntegration];
+
+  return (
+    <Stack spacing="xs" mb="md">
+      {displayedProperties.map((property) => {
+        const mapping = Object.entries(integrationFieldDefinitions).find(
+          ([key, value]) => key as IntegrationField === property
+        );
+        const isPresent = entry[1] !== undefined;
+
+        if (!mapping) {
+          return (
+            <GenericSecretInput
+              label={`${entry[0]} (potentionally unmapped)`}
+              value={entry[1]}
+              secretIsPresent={isPresent}
+              setIcon={<IconKey size={18} />}
+              unsetIcon={<IconKeyOff size={18} />}
+            />
+          );
+        }
 
-      if (!mapping) {
         return (
           <GenericSecretInput
-            label={`${entry[0]} (potentionally unmapped)`}
+            label={mapping.prettyName}
             value={entry[1]}
             secretIsPresent={isPresent}
-            setIcon={<IconKey size={18} />}
+            setIcon={mapping.icon}
-            unsetIcon={<IconKeyOff size={18} />}
+            unsetIcon={mapping.iconUnset}
           />
         );
-      }
+      })}
-
+    </Stack>
-      return (
+  );
-        <GenericSecretInput
+};
-          label={mapping.prettyName}
-          value={entry[1]}
-          secretIsPresent={isPresent}
-          setIcon={mapping.icon}
-          unsetIcon={mapping.iconUnset}
-        />
-      );
-    })}
-  </Stack>
-);

src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/IntegrationTab.tsx

@@ -13,7 +13,7 @@ interface IntegrationTabProps {
 export const IntegrationTab = ({ form }: IntegrationTabProps) => {
   const { t } = useTranslation('');
   const hasIntegrationSelected =
-    form.values.integration && Object.keys(form.values.integration.properties).length;
+    form.values.integration?.type;
 
   return (
     <Tabs.Panel value="integration" pt="lg">

src/types/service.ts

@@ -1,3 +1,12 @@
+import {
+  IconKey,
+  IconKeyOff,
+  IconLockOff,
+  IconPassword,
+  IconUser,
+  IconUserOff,
+  TablerIcon,
+} from '@tabler/icons';
 import { TileBaseType } from './tile';
 
 export interface ServiceType extends TileBaseType {
@@ -24,30 +33,70 @@ interface ServiceAppearanceType {
   iconUrl: string;
 }
 
-export type ServiceIntegrationType =
+type IntegrationType =
-  | ServiceIntegrationApiKeyType
+  | 'readarr'
-  | ServiceIntegrationPasswordType
+  | 'radarr'
-  | ServiceIntegrationUsernamePasswordType;
+  | 'sonarr'
+  | 'lidarr'
+  | 'sabnzbd'
+  | 'jellyseerr'
+  | 'overseerr'
+  | 'deluge'
+  | 'qBittorrent'
+  | 'transmission'
+  | 'nzbGet';
 
-// TODO: add nzbGet somewhere
+export type ServiceIntegrationType = {
-export interface ServiceIntegrationApiKeyType {
+  type: IntegrationType;
-  type: 'readarr' | 'radarr' | 'sonarr' | 'lidarr' | 'sabnzbd' | 'jellyseerr' | 'overseerr';
+  properties: ServiceIntegrationPropertyType[];
-  properties: {
+};
-    apiKey: string;
-  };
-}
 
-interface ServiceIntegrationPasswordType {
+type ServiceIntegrationPropertyType = {
-  type: 'deluge';
+  type: 'private' | 'public';
-  properties: {
+  field: IntegrationField;
-    password?: string;
+  value?: string;
-  };
+};
-}
 
-interface ServiceIntegrationUsernamePasswordType {
+export type IntegrationField = 'apiKey' | 'password' | 'username';
-  type: 'qBittorrent' | 'transmission' | 'nzbGet';
+
-  properties: {
+export const integrationFieldProperties: {
-    username?: string;
+  [key in ServiceIntegrationType['type']]: IntegrationField[];
-    password?: string;
+} = {
-  };
+  lidarr: ['apiKey'],
-}
+  radarr: ['apiKey'],
+  sonarr: ['apiKey'],
+  sabnzbd: ['apiKey'],
+  readarr: ['apiKey'],
+  overseerr: ['apiKey'],
+  jellyseerr: ['apiKey'],
+  deluge: ['password'],
+  nzbGet: ['username', 'password'],
+  qBittorrent: ['username', 'password'],
+  transmission: ['username', 'password'],
+};
+
+export type IntegrationFieldDefinitionType = {
+  icon: TablerIcon;
+  iconUnset: TablerIcon;
+  label: string;
+};
+
+export const integrationFieldDefinitions: {
+  [key in IntegrationField]: IntegrationFieldDefinitionType;
+} = {
+  apiKey: {
+    icon: IconKey,
+    iconUnset: IconKeyOff,
+    label: 'API Key',
+  },
+  username: {
+    icon: IconUser,
+    iconUnset: IconUserOff,
+    label: 'Username',
+  },
+  password: {
+    icon: IconPassword,
+    iconUnset: IconLockOff,
+    label: 'Password',
+  },
+};