diff --git a/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx index f6aaee8a1..1066a28df 100644 --- a/src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx +++ b/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 jife; + } + + return ; + }; + return ( } + icon={} label="Service Icon" variant="default" defaultValue={form.values.appearance.iconUrl} - {...form.getInputProps('serviceIcon')} + {...form.getInputProps('appearance.iconUrl')} + withAsterisk + required /> ); }; + +const useStyles = createStyles(() => ({ + iconImage: { + objectFit: 'contain', + width: 20, + height: 20, + }, +})); diff --git a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx b/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx index cef289873..e7844ed35 100644 --- a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx +++ b/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) => ( - {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; diff --git a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/IntegrationTab.tsx b/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/IntegrationTab.tsx index ae5930eb9..46e399ee2 100644 --- a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/IntegrationTab.tsx +++ b/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 (