diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json index afa4b7540..ce8d7f37c 100644 --- a/public/locales/en/layout/modals/add-app.json +++ b/public/locales/en/layout/modals/add-app.json @@ -13,7 +13,21 @@ }, "internalAddress": { "label": "Internal address", - "description": "Internal IP-address of the app." + "description": "Internal IP-address of the app.", + "troubleshoot": { + "label": "Having issues?", + "header": "Here is a list of commonly made mistake and troubleshooting:", + "lines": { + "nothingAfterPort": "You should, in most if not all cases, not input any path after the port. (Even the '/admin' for pihole or '/web' for plex)", + "protocolCheck": "Always make sure that the URL is preceded by http or https, and to make sure you are using the right one.", + "preferIP": "It is recommended to use the direct ip of the machine or container you are trying to communicate with.", + "enablePings": "Check that the IP is right by enabling pings. Customize Board -> Layout -> Enable pings. A little red or green bubble will appear on your app tiles and hovering it will give you it's response code (A green bubble with code 200 is expected in most cases).", + "wget": "To make sure that homarr can communicate with the other apps, make sure to wget/curl/ping the app's IP:port.", + "iframe": "When it comes to iframes, those should always be using the same protocol (http/s) as Homarr.", + "clearCache": "Some informations are registered in cache, so an integration might not work unless you clear the cache in Homarr's general options." + }, + "footer": "For more troubleshooting, reach out on our {{discord}}." + } }, "externalAddress": { "label": "External address", diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx index faf612d4d..7ff6e3058 100644 --- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx @@ -11,6 +11,7 @@ import { IconPlug, } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; +import { removeTrailingSlash } from 'next/dist/shared/lib/router/utils/remove-trailing-slash'; import { useState } from 'react'; import { useConfigContext } from '~/config/provider'; import { useConfigStore } from '~/config/store'; @@ -90,6 +91,8 @@ export const EditAppModal = ({ return; } + values.url = removeTrailingSlash(values.url); + updateConfig( configName, (previousConfig) => ({ diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index 518646460..2d7637751 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -1,5 +1,6 @@ -import { Stack, Tabs, Text, TextInput } from '@mantine/core'; +import { Anchor, Button, Card, Collapse, Group, Stack, Tabs, Text, TextInput } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; +import { useDisclosure } from '@mantine/hooks'; import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; import { AppType } from '~/types/app'; @@ -13,6 +14,19 @@ interface GeneralTabProps { export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { const { t } = useTranslation('layout/modals/add-app'); + + const [opened, { toggle }] = useDisclosure(false); + + const commonMistakes = [ + t('general.internalAddress.troubleshoot.lines.nothingAfterPort'), + t('general.internalAddress.troubleshoot.lines.protocolCheck'), + t('general.internalAddress.troubleshoot.lines.preferIP'), + t('general.internalAddress.troubleshoot.lines.enablePings'), + t('general.internalAddress.troubleshoot.lines.wget'), + t('general.internalAddress.troubleshoot.lines.iframe'), + t('general.internalAddress.troubleshoot.lines.clearCache'), + ]; + return ( @@ -46,6 +60,27 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { {...form.getInputProps('behaviour.externalUrl')} /> + + + {t('general.internalAddress.troubleshoot.header')} + {commonMistakes.map((value: string, key: number) => { + return ( + + + {value} + + ); + })} + + {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[0]} + + Discord + + {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[1]} + + + + {!form.values.behaviour.externalUrl.startsWith('https://') && !form.values.behaviour.externalUrl.startsWith('http://') && ( @@ -53,6 +88,10 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { )} + + ); };