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

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>
   );
 };