🚧 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) => (
-  <Stack spacing="xs" mb="md">
-    {form.values.integration && Object.entries(form.values.integration.properties).map((entry) => {
-      const mapping = secretMappings.find((item) => item.label === entry[0]);
-      const isPresent = entry[1] !== undefined;
+export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererProps) => {
+  const selectedIntegration = form.values.integration?.type;
+
+  if (!selectedIntegration) return null;
+
+  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} />}
-            unsetIcon={<IconKeyOff size={18} />}
+            setIcon={mapping.icon}
+            unsetIcon={mapping.iconUnset}
           />
         );
-      }
-
-      return (
-        <GenericSecretInput
-          label={mapping.prettyName}
-          value={entry[1]}
-          secretIsPresent={isPresent}
-          setIcon={mapping.icon}
-          unsetIcon={mapping.iconUnset}
-        />
-      );
-    })}
-  </Stack>
-);
+      })}
+    </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">