feat: prompt 1.0 migration (#2320)

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

src/components/UpgradeModal/CheckUpgradeModal.tsx

@@ -0,0 +1,81 @@
+import { Anchor, Button, Group, Image, List, Modal, Text, ThemeIcon, Title } from '@mantine/core';
+import { IconBrandAbstract, IconLock, IconPlug, IconTestPipe } from '@tabler/icons-react';
+import { getCookie, setCookie } from 'cookies-next';
+import localFont from 'next/font/local';
+import { useState } from 'react';
+
+const poetsenOne = localFont({ src: '../../../public/PoetsenOne-Regular.ttf' });
+
+export const CheckUpgradeModal = () => {
+  const [isDismissed, setIsDismissed] = useState(getCookie('dismissed-upgrade-modal'));
+
+  const close = () => {
+    const sevenDays = 7 * 24 * 60 * 60; // 7 days in seconds
+    setCookie('dismissed-upgrade-modal', 'true', {
+      maxAge: sevenDays,
+      path: '/',
+    });
+    setIsDismissed(true);
+  };
+
+  return (
+    <Modal opened={!isDismissed} onClose={close} size={'xl'} radius={'xl'}>
+      <Image src={'/imgs/2340450-2.png'} alt={'Homarr illustration'} width={300} height={'auto'} ml={'auto'}
+             mr={'auto'} />
+      <Title order={2} align={'center'} color={'red'} weight={'bolder'} mb={'lg'} className={poetsenOne.className}>Taking
+        dashboards to<br />the next
+        level 🚀</Title>
+
+      <Text color={'#616161'}>Homarr just got the biggest update ever. It is a complete rewrite. Here's a short summary
+        of it:</Text>
+
+      <List my={'lg'} spacing={3}>
+        <List.Item
+          icon={
+            <ThemeIcon color={'red'} radius={'md'} variant={'light'}>
+              <IconPlug size={'1rem'} />
+            </ThemeIcon>}>
+          <b>Improved integrations</b> system with asynchronous fetching
+          system</List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color={'red'} radius={'md'} variant={'light'}>
+              <IconLock size={'1rem'} />
+            </ThemeIcon>}>
+          Detailed <b>permission system</b></List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color={'red'} radius={'md'} variant={'light'}>
+              <IconTestPipe size={'1rem'} />
+            </ThemeIcon>}>
+          Automatic <b>integration testing</b> and <b>centralized management</b> of apps and integrations</List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color={'red'} radius={'md'} variant={'light'}>
+              <IconBrandAbstract size={'1rem'} />
+            </ThemeIcon>}>
+          <b>Reimagined widgets</b> with better design, better UX and <b>more options</b>.</List.Item>
+      </List>
+
+
+      <Text color={'#616161'}>Since 1.0 is a <Anchor
+        href={'https://homarr.dev/blog/2024/09/23/version-1.0#breaking-changes'} target={'_blank'}>breaking
+        release</Anchor>, we require you to manually upgrade to 1.0 and migrate your data over.
+        Please read the migration guide carefully to avoid data loss. Depending in your installation method, you may
+        need to check the migration guides of them respectively. Please backup your data before attempting the
+        migration. <em>This message will not be displayed for the next 7 days, if you acknowledge and close</em>.</Text>
+
+      <Group mt={'xl'} grow>
+        <Button onClick={close} variant={'subtle'} color={'red'} radius={'xl'}>Acknowledge and close</Button>
+        <Button variant={'light'} color={'green'} component={'a'}
+                href={'https://homarr.dev/blog/2025/01/19/migration-guide-1.0'} target={'_blank'} radius={'xl'}>See 1.0
+          migration
+          guide</Button>
+      </Group>
+
+      <Text mt="lg" size="sm" color="dimmed" align="center">
+        You can permanently disable this message by setting the <b>DISABLE_UPGRADE_MODAL</b> environment variable to <b>true</b>.
+      </Text>
+    </Modal>
+  );
+};

src/components/layout/Templates/ManageLayout.tsx

@@ -9,7 +9,7 @@ import {
   NavLink,
   Navbar,
   Text,
-  ThemeIcon,
+  ThemeIcon, Alert, Anchor,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
@@ -44,6 +44,7 @@ import { ConditionalWrapper } from '~/utils/security';
 import { REPO_URL } from '../../../../data/constants';
 import { type navigation } from '../../../../public/locales/en/layout/manage.json';
 import { MainHeader } from '../header/Header';
+import { deleteCookie } from "cookies-next";
 
 interface ManageLayoutProps {
   children: ReactNode;
@@ -61,6 +62,7 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
       }).then((res) => res.json()),
   });
   const { attributes } = usePackageAttributesStore();
+  const router = useRouter();
   const newVersionAvailable =
     newVersion?.tag_name > `v${attributes.packageVersion}` ? newVersion?.tag_name : undefined;
 
@@ -247,6 +249,11 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
   const burgerMenu = screenLargerThanMd ? undefined : (
     <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
   );
+  
+  const showUpgradeInfo = () => {
+    deleteCookie('dismissed-upgrade-modal');
+    router.reload();
+  }
 
   return (
     <>
@@ -256,6 +263,11 @@ export const ManageLayout = ({ children }: ManageLayoutProps) => {
             <Navbar.Section pt="xs" grow>
               {navigationLinkComponents}
             </Navbar.Section>
+            <Navbar.Section p={"sm"}>
+              <Alert>
+                This old version of Homarr no longer receives updates. Migrate for updates. <Anchor onClick={showUpgradeInfo}>Click here for further details</Anchor>
+              </Alert>
+            </Navbar.Section>
           </Navbar>
         }
         header={<MainHeader showExperimental={false} logoHref="/b/" leftIcon={burgerMenu} />}

src/env.js

@@ -40,6 +40,7 @@ const env = createEnv({
     DOCKER_HOST: z.string().optional(),
     DOCKER_PORT: portSchema,
     DEMO_MODE: z.string().optional(),
+    DISABLE_UPGRADE_MODAL: zodParsedBoolean().default('false'),
     HOSTNAME: z.string().optional(),
 
     //regex allows number with extra letter as time multiplier, applied with secondsFromTimeString
@@ -165,6 +166,7 @@ const env = createEnv({
     AUTH_LOGOUT_REDIRECT_URL: process.env.AUTH_LOGOUT_REDIRECT_URL,
     AUTH_SESSION_EXPIRY_TIME: process.env.AUTH_SESSION_EXPIRY_TIME,
     DEMO_MODE: process.env.DEMO_MODE,
+    DISABLE_UPGRADE_MODAL: process.env.DISABLE_UPGRADE_MODAL,
   },
   skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });

src/pages/_app.tsx

@@ -34,6 +34,7 @@ import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
 
+import { CheckUpgradeModal } from '~/components/UpgradeModal/CheckUpgradeModal';
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
 import '../styles/global.scss';
@@ -50,6 +51,7 @@ function App(
     editModeEnabled: boolean;
     logoutUrl?: string;
     analyticsEnabled: boolean;
+    disableUpgradeModal: boolean;
     config?: ConfigType;
     primaryColor?: MantineTheme['primaryColor'];
     secondaryColor?: MantineTheme['primaryColor'];
@@ -103,6 +105,7 @@ function App(
   return (
     <>
       <CommonHead />
+      {!pageProps.disableUpgradeModal && <CheckUpgradeModal />}
       {pageProps.session && pageProps.session.user.language === 'cr' && (
         <>
           <Script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js" />
@@ -184,6 +187,7 @@ App.getInitialProps = async ({ ctx }: { ctx: GetServerSidePropsContext }) => {
       packageAttributes: getServiceSidePackageAttributes(),
       logoutUrl: env.AUTH_LOGOUT_REDIRECT_URL,
       analyticsEnabled,
+      disableUpgradeModal: env.DISABLE_UPGRADE_MODAL,
       session,
       locale: ctx.locale ?? 'en',
     },