✨ Add common troubleshooting prompt on button

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 (
     <Tabs.Panel value="general" pt="sm">
       <Stack spacing="xs">
@@ -46,12 +57,39 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
           {...form.getInputProps('behaviour.externalUrl')}
         />
 
+        <Group position="right" mt={22}>
+          <Button rightIcon={<IconAlertCircle />} onClick={toggle}>
+            {t('general.internalAddress.troubleshoot.label')}
+          </Button>
+        </Group>
+
+        <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">
               {t('behaviour.customProtocolWarning')}
             </Text>
-        )}
+          )}
       </Stack>
     </Tabs.Panel>
   );