From 331ce510851aed6efcc2f32199fa810b3019a667 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 11 Sep 2023 02:57:32 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20Removes=20trailing=20slashes=20?= =?UTF-8?q?from=20URLs=20on=20save?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Modals/EditAppModal/EditAppModal.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx index c447115d6..b8d19ae29 100644 --- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx @@ -11,11 +11,12 @@ 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'; import { AppType } from '~/types/app'; + import { DebouncedImage } from '../../../IconSelector/DebouncedImage'; import { useEditModeStore } from '../../Views/useEditModeStore'; import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab'; @@ -90,6 +91,9 @@ export const EditAppModal = ({ return; } + values.url = removeTrailingSlash(values.url); + values.behaviour.externalUrl = removeTrailingSlash(values.behaviour.externalUrl); + updateConfig( configName, (previousConfig) => ({ From 3c015d297b13d256149b351862cca98882562e75 Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 11 Sep 2023 02:58:05 +0200 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20Add=20common=20troubleshooting?= =?UTF-8?q?=20prompt=20on=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/add-app.json | 13 +++++- .../Tabs/GeneralTab/GeneralTab.tsx | 46 +++++++++++++++++-- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json index afa4b7540..b9ecdd46b 100644 --- a/public/locales/en/layout/modals/add-app.json +++ b/public/locales/en/layout/modals/add-app.json @@ -13,7 +13,18 @@ }, "internalAddress": { "label": "Internal address", - "description": "Internal IP-address of the app." + "description": "Internal IP-address of the app.", + "troubleshoot": { + "label": "Common Troubleshooting", + "header": "This is a list of commonly made mistake and troubleshooting:", + "lines": { + "nothingAfterPort": "You should, in most if not all cases, not input anything after the port, even the '/admin' for pihole.", + "protocolCheck": "Always make sure that the URL is preceded by http or https, and to make sure you are using the right one.", + "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/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index 16d8f6194..979cfc1ae 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -1,9 +1,10 @@ -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 { IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; +import { useDisclosure } from '@mantine/hooks'; +import { IconAlertCircle, IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; - import { AppType } from '~/types/app'; + import { EditAppModalTab } from '../type'; interface GeneralTabProps { @@ -13,6 +14,16 @@ 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.iframe'), + t('general.internalAddress.troubleshoot.lines.clearCache'), + ]; + return ( @@ -46,12 +57,39 @@ 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://') && ( {t('behaviour.customProtocolWarning')} - )} + )} ); From 24024cc7f2539e292e1290048b763604ed29cbec Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Thu, 12 Oct 2023 19:23:16 +0200 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20Added=20troubleshoot=20steps?= =?UTF-8?q?=20+=20external=20address=20"/"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/add-app.json | 2 ++ src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx | 1 - .../Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx | 2 ++ 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json index b9ecdd46b..f975210f8 100644 --- a/public/locales/en/layout/modals/add-app.json +++ b/public/locales/en/layout/modals/add-app.json @@ -20,6 +20,8 @@ "lines": { "nothingAfterPort": "You should, in most if not all cases, not input anything after the port, even the '/admin' for pihole.", "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.", + "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." }, diff --git a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx index b8d19ae29..7ff6e3058 100644 --- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx @@ -92,7 +92,6 @@ export const EditAppModal = ({ } values.url = removeTrailingSlash(values.url); - values.behaviour.externalUrl = removeTrailingSlash(values.behaviour.externalUrl); updateConfig( configName, diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index 979cfc1ae..aa6f56f85 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -20,6 +20,8 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { 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.wget'), t('general.internalAddress.troubleshoot.lines.iframe'), t('general.internalAddress.troubleshoot.lines.clearCache'), ]; From 503b5b0b350b9bf65ff9cfc5a2c56b7caf39e9ac Mon Sep 17 00:00:00 2001 From: Tagaishi Date: Mon, 30 Oct 2023 19:57:44 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=92=84=20Moved=20button=20?= =?UTF-8?q?=F0=9F=92=AC=20Added=20troubleshoot=20steps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/locales/en/layout/modals/add-app.json | 7 ++++--- .../EditAppModal/Tabs/GeneralTab/GeneralTab.tsx | 13 ++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/public/locales/en/layout/modals/add-app.json b/public/locales/en/layout/modals/add-app.json index f975210f8..ce8d7f37c 100644 --- a/public/locales/en/layout/modals/add-app.json +++ b/public/locales/en/layout/modals/add-app.json @@ -15,12 +15,13 @@ "label": "Internal address", "description": "Internal IP-address of the app.", "troubleshoot": { - "label": "Common Troubleshooting", - "header": "This is a list of commonly made mistake and troubleshooting:", + "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 anything after the port, even the '/admin' for pihole.", + "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." diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx index aa6f56f85..2d7637751 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx +++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx @@ -1,7 +1,7 @@ import { Anchor, Button, Card, Collapse, Group, Stack, Tabs, Text, TextInput } from '@mantine/core'; import { UseFormReturnType } from '@mantine/form'; import { useDisclosure } from '@mantine/hooks'; -import { IconAlertCircle, IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; +import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react'; import { useTranslation } from 'next-i18next'; import { AppType } from '~/types/app'; @@ -21,6 +21,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { 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'), @@ -59,12 +60,6 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { {...form.getInputProps('behaviour.externalUrl')} /> - - - - {t('general.internalAddress.troubleshoot.header')} @@ -93,6 +88,10 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => { )} + + ); };