🐛 Fix crash if integration is not defined

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

@@ -1,4 +1,4 @@
-import { Tabs, TextInput } from '@mantine/core';
+import { Tabs, TextInput, createStyles } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconPhoto } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
@@ -10,15 +10,37 @@ interface AppearanceTabProps {
 
 export const AppearanceTab = ({ form }: AppearanceTabProps) => {
   const { t } = useTranslation('');
+  const { classes } = useStyles();
+
+  const Image = () => {
+    if (form.values.appearance.iconUrl !== undefined) {
+      // disabled due to too many dynamic targets for next image cache
+      // eslint-disable-next-line @next/next/no-img-element
+      return <img className={classes.iconImage} src={form.values.appearance.iconUrl} alt="jife" />;
+    }
+
+    return <IconPhoto />;
+  };
+
   return (
     <Tabs.Panel value="appearance" pt="lg">
       <TextInput
-        icon={<IconPhoto />}
+        icon={<Image />}
         label="Service Icon"
         variant="default"
         defaultValue={form.values.appearance.iconUrl}
-        {...form.getInputProps('serviceIcon')}
+        {...form.getInputProps('appearance.iconUrl')}
+        withAsterisk
+        required
       />
     </Tabs.Panel>
   );
 };
+
+const useStyles = createStyles(() => ({
+  iconImage: {
+    objectFit: 'contain',
+    width: 20,
+    height: 20,
+  },
+}));

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

@@ -1,7 +1,7 @@
 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 { ServiceType } from '../../../../../../../../types/service';
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';
 
 interface IntegrationOptionsRendererProps {
@@ -31,7 +31,7 @@ const secretMappings = [
 
 export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererProps) => (
   <Stack spacing="xs" mb="md">
-    {Object.entries(form.values.integration.properties).map((entry) => {
+    {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;
 

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

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