🐛 Fix nullable integration type

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

@@ -3,7 +3,6 @@ import { Group, Select, SelectItem, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { forwardRef } from 'react';
-import { IntegrationsType } from '../../../../../../../../types/integration';
 import {
   IntegrationField,
   integrationFieldDefinitions,
@@ -54,12 +53,15 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
     },
   ].filter((x) => Object.keys(integrationFieldProperties).includes(x.value));
 
-  const inputProps = form.getInputProps('integration.type');
-
   const getNewProperties = (value: string | null): ServiceIntegrationPropertyType[] => {
     if (!value) return [];
+    const integrationType = value as ServiceIntegrationType['type'];
+    if (integrationType === null) {
+      return [];
+    }
+
     const requiredProperties = Object.entries(integrationFieldDefinitions).filter(([k, v]) => {
-      const val = integrationFieldProperties[value as ServiceIntegrationType['type']];
+      const val = integrationFieldProperties[integrationType['type']];
       return val.includes(k as IntegrationField);
     })!;
     return requiredProperties.map(([k, value]) => ({
@@ -70,8 +72,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
     }));
   };
 
+  const inputProps = form.getInputProps('integration.type');
+
   return (
-    <>
     <Select
       label="Integration configuration"
       description="Treats this service as the selected integration and provides you with per-service configuration"
@@ -92,14 +95,13 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
           />
         )
       }
-        {...inputProps}
       onChange={(value) => {
         form.setFieldValue('integration.properties', getNewProperties(value));
         console.log(`changed to value ${value}`);
         inputProps.onChange(value);
       }}
+      {...inputProps}
     />
-    </>
   );
 };
 

src/types/service.ts

@@ -16,7 +16,7 @@ export interface ServiceType extends TileBaseType {
   behaviour: ServiceBehaviourType;
   network: ServiceNetworkType;
   appearance: ServiceAppearanceType;
-  integration?: ServiceIntegrationType | null;
+  integration: ServiceIntegrationType;
 }
 
 export type ConfigServiceType = Omit<ServiceType, 'integration'> & {
@@ -51,7 +51,7 @@ export type IntegrationType =
   | 'nzbGet';
 
 export type ServiceIntegrationType = {
-  type: IntegrationType;
+  type: IntegrationType | null;
   properties: ServiceIntegrationPropertyType[];
 };