Merge branch 'dev' into about-page

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

src/components/layout/Meta/CommonHead.tsx

@@ -9,7 +9,7 @@ export const CommonHead = () => {
       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       <link rel="shortcut icon" href="/imgs/favicon/favicon.svg" />
 
-      <link rel="manifest" href="/site.webmanifest" />
+      <link crossOrigin="use-credentials" rel="manifest" href="/site.webmanifest" />
 
       {/* configure apple splash screen & touch icon */}
       <link rel="apple-touch-icon" href="/imgs/favicon/favicon.svg" />

src/components/layout/Templates/BoardLayout.tsx

@@ -26,18 +26,17 @@ import { MainLayout } from './MainLayout';
 import { env } from 'process';
 
 type BoardLayoutProps = {
-  dockerEnabled: boolean;
   children: React.ReactNode;
 };
 
-export const BoardLayout = ({ children, dockerEnabled }: BoardLayoutProps) => {
+export const BoardLayout = ({ children }: BoardLayoutProps) => {
   const { config } = useConfigContext();
   const { data: session } = useSession();
 
   return (
     <MainLayout
       autoFocusSearch={session?.user.autoFocusSearch}
-      headerActions={<HeaderActions dockerEnabled={dockerEnabled} />}
+      headerActions={<HeaderActions />}
     >
       <BoardHeadOverride />
       <BackgroundImage />
@@ -47,36 +46,19 @@ export const BoardLayout = ({ children, dockerEnabled }: BoardLayoutProps) => {
   );
 };
 
-type HeaderActionProps = {
-  dockerEnabled: boolean;
-};
-
-export const HeaderActions = ({ dockerEnabled }: HeaderActionProps) => {
+export const HeaderActions = () => {
   const { data: sessionData } = useSession();
 
   if (!sessionData?.user?.isAdmin) return null;
 
   return (
     <>
-      {dockerEnabled && <DockerButton />}
       <ToggleEditModeButton />
       <CustomizeBoardButton />
     </>
   );
 };
 
-const DockerButton = () => {
-  const { t } = useTranslation('modules/docker');
-
-  return (
-    <Tooltip label={t('actionIcon.tooltip')}>
-      <HeaderActionButton component={Link} href="/manage/tools/docker">
-        <IconBrandDocker size={20} stroke={1.5} />
-      </HeaderActionButton>
-    </Tooltip>
-  );
-};
-
 const CustomizeBoardButton = () => {
   const { name } = useConfigContext();
   const { t } = useTranslation('boards/common');