fix: Migrate code to next 13 breaking changes

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/cypress/e2e/signInButton.spec.ts

@@ -36,7 +36,7 @@ describe('When logged-out ', () => {
           type: AuthProviderType.LOCAL
         }
       ])
-      cy.getByCypressId('sign-in-button').should('be.visible').should('have.attr', 'href', '/login')
+      cy.getByCypressId('sign-in-button').should('be.visible').parent().should('have.attr', 'href', '/login')
     })
 
     it('sign-in button points to login route: ldap', () => {
@@ -47,7 +47,7 @@ describe('When logged-out ', () => {
           providerName: 'cy LDAP'
         }
       ])
-      cy.getByCypressId('sign-in-button').should('be.visible').should('have.attr', 'href', '/login')
+      cy.getByCypressId('sign-in-button').should('be.visible').parent().should('have.attr', 'href', '/login')
     })
   })
 
@@ -60,6 +60,7 @@ describe('When logged-out ', () => {
       ])
       cy.getByCypressId('sign-in-button')
         .should('be.visible')
+        .parent()
         // The absolute URL is used because it is defined as API base URL absolute.
         .should('have.attr', 'href', '/auth/github')
     })
@@ -75,7 +76,7 @@ describe('When logged-out ', () => {
           type: AuthProviderType.GOOGLE
         }
       ])
-      cy.getByCypressId('sign-in-button').should('be.visible').should('have.attr', 'href', '/login')
+      cy.getByCypressId('sign-in-button').should('be.visible').parent().should('have.attr', 'href', '/login')
     })
   })
 
@@ -89,7 +90,7 @@ describe('When logged-out ', () => {
           type: AuthProviderType.LOCAL
         }
       ])
-      cy.getByCypressId('sign-in-button').should('be.visible').should('have.attr', 'href', '/login')
+      cy.getByCypressId('sign-in-button').should('be.visible').parent().should('have.attr', 'href', '/login')
     })
   })
 })

frontend/next.config.js

@@ -86,6 +86,7 @@ const rawNextConfig = {
     ])
   },
   output: 'standalone',
+  swcMinify: false, //Otherwise emoji picker is minified incorrectly
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../')
   }

frontend/src/components/common/links/internal-link.tsx

@@ -30,14 +30,12 @@ export const InternalLink: React.FC<LinkWithTextProps> = ({
   title
 }) => {
   return (
-    <Link href={href}>
+    <Link href={href} className={className} id={id} title={title}>
-      <a className={className} id={id} title={title}>
+      <ShowIf condition={!!icon}>
-        <ShowIf condition={!!icon}>
+        <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true} />
-          <ForkAwesomeIcon icon={icon as IconName} fixedWidth={true} />
+        &nbsp;
-          &nbsp;
+      </ShowIf>
-        </ShowIf>
+      {text}
-        {text}
-      </a>
     </Link>
   )
 }

frontend/src/components/common/redirect.tsx

@@ -31,10 +31,7 @@ export const Redirect: React.FC<RedirectProps> = ({ to }) => {
 
   return (
     <span {...testId('redirect')}>
-      Redirecting to{' '}
+      Redirecting to <Link href={to}>{to}</Link>
-      <Link href={to}>
-        <a>{to}</a>
-      </Link>
     </span>
   )
 }

frontend/src/components/editor-page/app-bar/navbar-branding.tsx

@@ -22,14 +22,12 @@ export const NavbarBranding: React.FC = () => {
 
   return (
     <Navbar.Brand>
-      <Link href='/intro'>
+      <Link href='/intro' className='text-secondary text-decoration-none d-flex align-items-center'>
-        <a className='text-secondary text-decoration-none d-flex align-items-center'>
+        <HedgeDocLogoWithText
-          <HedgeDocLogoWithText
+          logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
-            logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
+          size={HedgeDocLogoSize.SMALL}
-            size={HedgeDocLogoSize.SMALL}
+        />
-          />
+        <Branding inline={true} />
-          <Branding inline={true} />
-        </a>
       </Link>
     </Navbar.Brand>
   )

frontend/src/components/editor-page/app-bar/read-only-mode-button.tsx

@@ -18,16 +18,14 @@ export const ReadOnlyModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/s/${noteIdentifier}`}>
+    <Link href={`/s/${noteIdentifier}`} target='_blank'>
-      <a target='_blank'>
+      <Button
-        <Button
+        title={t('editor.documentBar.readOnlyMode') ?? undefined}
-          title={t('editor.documentBar.readOnlyMode') ?? undefined}
+        className='ms-2 text-secondary'
-          className='ms-2 text-secondary'
+        size='sm'
-          size='sm'
+        variant='outline-light'>
-          variant='outline-light'>
+        <ForkAwesomeIcon icon='file-text-o' />
-          <ForkAwesomeIcon icon='file-text-o' />
+      </Button>
-        </Button>
-      </a>
     </Link>
   )
 }

frontend/src/components/editor-page/app-bar/slide-mode-button.tsx

@@ -18,16 +18,14 @@ export const SlideModeButton: React.FC = () => {
   const noteIdentifier = useApplicationState((state) => state.noteDetails.primaryAddress)
 
   return (
-    <Link href={`/p/${noteIdentifier}`}>
+    <Link href={`/p/${noteIdentifier}`} target='_blank'>
-      <a target='_blank'>
+      <Button
-        <Button
+        title={t('editor.documentBar.slideMode') ?? undefined}
-          title={t('editor.documentBar.slideMode') ?? undefined}
+        className='ms-2 text-secondary'
-          className='ms-2 text-secondary'
+        size='sm'
-          size='sm'
+        variant='outline-light'>
-          variant='outline-light'>
+        <ForkAwesomeIcon icon='television' />
-          <ForkAwesomeIcon icon='television' />
+      </Button>
-        </Button>
-      </a>
     </Link>
   )
 }

frontend/src/components/history-page/history-card/history-card.tsx

@@ -63,22 +63,20 @@ export const HistoryCard: React.FC<HistoryEntryProps & HistoryEventHandlers> = (
           <div className={'d-flex flex-column'}>
             <PinButton isDark={false} isPinned={entry.pinStatus} onPinClick={onPinEntry} />
           </div>
-          <Link href={`/n/${entry.identifier}`}>
+          <Link href={`/n/${entry.identifier}`} className='text-decoration-none flex-fill text-dark'>
-            <a className='text-decoration-none flex-fill text-dark'>
+            <div className={'d-flex flex-column justify-content-between'}>
-              <div className={'d-flex flex-column justify-content-between'}>
+              <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
-                <Card.Title className='m-0 mt-1dot5' {...cypressId('history-entry-title')}>
+                {entryTitle}
-                  {entryTitle}
+              </Card.Title>
-                </Card.Title>
+              <div>
-                <div>
+                <div className='text-black-50 mt-2'>
-                  <div className='text-black-50 mt-2'>
+                  <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
-                    <ForkAwesomeIcon icon='clock-o' /> {DateTime.fromISO(entry.lastVisitedAt).toRelative()}
+                  <br />
-                    <br />
+                  {lastVisited}
-                    {lastVisited}
-                  </div>
-                  <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
                 </div>
+                <div className={`${styles['card-footer-min-height']} p-0`}>{tags}</div>
               </div>
-            </a>
+            </div>
           </Link>
           <div className={'d-flex flex-column'}>
             <EntryMenu

frontend/src/components/history-page/history-table/history-table-row.tsx

@@ -44,10 +44,8 @@ export const HistoryTableRow: React.FC<HistoryEntryProps & HistoryEventHandlers>
   return (
     <tr>
       <td>
-        <Link href={`/n/${entry.identifier}`}>
+        <Link href={`/n/${entry.identifier}`} className='text-light' {...cypressId('history-entry-title')}>
-          <a className='text-light' {...cypressId('history-entry-title')}>
+          {entryTitle}
-            {entryTitle}
-          </a>
         </Link>
       </td>
       <td>{formatHistoryDate(entry.lastVisitedAt)}</td>

frontend/src/components/landing-layout/navigation/header-bar/header-nav-link.tsx

@@ -32,10 +32,12 @@ export const HeaderNavLink: React.FC<PropsWithChildren<HeaderNavLinkProps>> = ({
 
   return (
     <Nav.Item>
-      <Link href={to} passHref={true}>
+      <Link
-        <a className={`nav-link text-light ${activeClass} ${styles['nav-link']}`} href={to} {...cypressId(props)}>
+        href={to}
-          {children}
+        passHref={true}
-        </a>
+        className={`nav-link text-light ${activeClass} ${styles['nav-link']}`}
+        {...cypressId(props)}>
+        {children}
       </Link>
     </Nav.Item>
   )