Merge pull request #1432 from Tagaishi/common-troubleshoot-and-auto-handling

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",

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) => ({

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 (
     <Tabs.Panel value="general" pt="sm">
       <Stack spacing="xs">
@@ -46,6 +60,27 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
           {...form.getInputProps('behaviour.externalUrl')}
         />
 
+        <Collapse in={opened}>
+          <Card withBorder>
+            <Text>{t('general.internalAddress.troubleshoot.header')}</Text>
+            {commonMistakes.map((value: string, key: number) => {
+              return (
+                <Group key={key} display="flex" style={{ alignItems: 'start' }}>
+                  <Text>•</Text>
+                  <Text style={{ flex: '1' }}>{value}</Text>
+                </Group>
+              );
+            })}
+            <Text>
+              {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[0]}
+              <Anchor href="https://discord.gg/aCsmEV5RgA" target="_blank">
+                Discord
+              </Anchor>
+              {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[1]}
+            </Text>
+          </Card>
+        </Collapse>
+
         {!form.values.behaviour.externalUrl.startsWith('https://') &&
           !form.values.behaviour.externalUrl.startsWith('http://') && (
             <Text color="red" mt="sm" size="sm">
@@ -53,6 +88,10 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
             </Text>
           )}
       </Stack>
+
+      <Button onClick={toggle} bottom={-68} left={0} color="yellow.7" variant="light">
+        {t('general.internalAddress.troubleshoot.label')}
+      </Button>
     </Tabs.Panel>
   );
 };