fix: nextjs 13 link errors (#3644)

infrahq · Nov 15, 2022 · 51051e6 · 51051e6
1 parent 49414a3
commit 51051e6
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 86 deletions.
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
@@ -1,7 +1,8 @@
 {
   "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"],
   "rules": {
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off"
   },
   "plugins": ["jest"],
   "globals": {

diff --git a/ui/components/layouts/dashboard-no-sidebar.js b/ui/components/layouts/dashboard-no-sidebar.js
@@ -8,10 +8,8 @@ import { useUser } from '../../lib/hooks'
 const NavLink = forwardRef(function NavLinkFunc(props, ref) {
   let { href, children, ...rest } = props
   return (
-    <Link href={href}>
-      <a ref={ref} {...rest}>
-        {children}
-      </a>
+    <Link href={href} ref={ref} {...rest}>
+      {children}
     </Link>
   )
 })

diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
@@ -17,10 +17,8 @@ import { useUser } from '../../lib/hooks'
 const NavLink = forwardRef(function NavLinkFunc(props, ref) {
   let { href, children, ...rest } = props
   return (
-    <Link href={href}>
-      <a ref={ref} {...rest}>
-        {children}
-      </a>
+    <Link ref={ref} {...rest} href={href}>
+      {children}
     </Link>
   )
 })
@@ -146,38 +144,36 @@ export default function Dashboard({ children }) {
       <>
         <div className='mb-2 flex flex-shrink-0 select-none items-center px-3'>
           <Link href='/destinations'>
-            <a>
-              <img className='my-2 h-7' src='/logo.svg' alt='Infra' />
-            </a>
+            <img className='my-2 h-7' src='/logo.svg' alt='Infra' />
           </Link>
         </div>
         <div className='mt-5 h-0 flex-1 overflow-y-auto'>
           <nav className='flex-1 space-y-1'>
             {navigation
               ?.filter(n => (n.admin ? isAdmin : true))
               .map(item => (
-                <Link key={item.name} href={item.href}>
-                  <a
-                    onClick={() => setSidebarOpen(false)}
-                    className={`
-                          ${
-                            router.asPath.startsWith(item.href)
-                              ? 'bg-gray-100/50 text-gray-800'
-                              : 'bg-transparent text-gray-500/75 hover:text-gray-500'
-                          }
-                        group flex items-center rounded-md py-1.5 px-3 text-sm font-medium`}
-                  >
-                    <item.icon
-                      className={`${
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  onClick={() => setSidebarOpen(false)}
+                  className={`
+                      ${
                         router.asPath.startsWith(item.href)
-                          ? 'fill-blue-100 text-blue-500'
-                          : 'fill-gray-50 text-gray-500/75 group-hover:text-gray-500'
+                          ? 'bg-gray-100/50 text-gray-800'
+                          : 'bg-transparent text-gray-500/75 hover:text-gray-500'
                       }
+                    group flex items-center rounded-md py-1.5 px-3 text-sm font-medium`}
+                >
+                  <item.icon
+                    className={`${
+                      router.asPath.startsWith(item.href)
+                        ? 'fill-blue-100 text-blue-500'
+                        : 'fill-gray-50 text-gray-500/75 group-hover:text-gray-500'
+                    }
                     mr-2 h-[18px] w-[18px] flex-shrink`}
-                      aria-hidden='true'
-                    />
-                    {item.name}
-                  </a>
+                    aria-hidden='true'
+                  />
+                  {item.name}
                 </Link>
               ))}
           </nav>

diff --git a/ui/components/scim-key.js b/ui/components/scim-key.js
@@ -53,10 +53,11 @@ export default function SCIMKey({ accessKey, errorMsg }) {
 
         {/* Finish */}
         <div className='my-10 flex justify-end'>
-          <Link href='/settings?tab=providers'>
-            <a className='flex-none items-center self-center rounded-md border border-transparent bg-black px-4 py-2 text-2xs font-medium text-white shadow-sm hover:bg-gray-800'>
-              Finish
-            </a>
+          <Link
+            href='/settings?tab=providers'
+            className='flex-none items-center self-center rounded-md border border-transparent bg-black px-4 py-2 text-2xs font-medium text-white shadow-sm hover:bg-gray-800'
+          >
+            Finish
           </Link>
         </div>
       </div>

diff --git a/ui/components/table.js b/ui/components/table.js
@@ -80,13 +80,15 @@ export default function Table({
                     key={cell.id}
                   >
                     {href ? (
-                      <Link href={href(row)}>
-                        <a tabIndex='-1' className='block px-5 py-2'>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </a>
+                      <Link
+                        href={href(row)}
+                        tabIndex='-1'
+                        className='block px-5 py-2'
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
                       </Link>
                     ) : (
                       flexRender(cell.column.columnDef.cell, cell.getContext())

diff --git a/ui/pages/destinations/[id]/index.js b/ui/pages/destinations/[id]/index.js
@@ -696,10 +696,11 @@ export default function DestinationDetail() {
       <header className='mt-6 mb-12 space-y-4'>
         <div className=' flex flex-col justify-between md:flex-row md:items-center'>
           <h1 className='flex max-w-[75%] truncate py-1 font-display text-xl font-medium'>
-            <Link href='/destinations'>
-              <a className='text-gray-500/75 hover:text-gray-600'>
-                Infrastructure
-              </a>
+            <Link
+              href='/destinations'
+              className='text-gray-500/75 hover:text-gray-600'
+            >
+              Infrastructure
             </Link>{' '}
             <span className='mx-3 font-light text-gray-400'> / </span>{' '}
             <div className='flex truncate'>

diff --git a/ui/pages/destinations/add.js b/ui/pages/destinations/add.js
@@ -122,12 +122,10 @@ export default function DestinationsAdd() {
           Connect Cluster
         </h1>
         <Link href='/destinations'>
-          <a>
-            <XMarkIcon
-              className='h-5 w-5 text-gray-500 hover:text-gray-800'
-              aria-hidden='true'
-            />
-          </a>
+          <XMarkIcon
+            className='h-5 w-5 text-gray-500 hover:text-gray-800'
+            aria-hidden='true'
+          />
         </Link>
       </div>
       <div className='flex w-full flex-col'>

diff --git a/ui/pages/destinations/index.js b/ui/pages/destinations/index.js
@@ -35,10 +35,11 @@ export default function Destinations() {
 
         {/* Add dialog */}
         {isAdmin && (
-          <Link href='/destinations/add'>
-            <a className='inline-flex items-center rounded-md border border-transparent bg-black  px-4 py-2 text-xs font-medium text-white shadow-sm hover:cursor-pointer hover:bg-gray-800'>
-              Connect cluster
-            </a>
+          <Link
+            href='/destinations/add'
+            className='inline-flex items-center rounded-md border border-transparent bg-black  px-4 py-2 text-xs font-medium text-white shadow-sm hover:cursor-pointer hover:bg-gray-800'
+          >
+            Connect cluster
           </Link>
         )}
       </header>

diff --git a/ui/pages/groups/[id].js b/ui/pages/groups/[id].js
@@ -133,8 +133,11 @@ export default function GroupDetails() {
       <header className='mt-6 mb-12 space-y-4'>
         <div className='flex flex-col justify-between md:flex-row md:items-center'>
           <h1 className='max-w-[75%] truncate py-1 font-display text-xl font-medium'>
-            <Link href='/groups'>
-              <a className='text-gray-500/75 hover:text-gray-600'>Groups</a>
+            <Link
+              href='/groups'
+              className='text-gray-500/75 hover:text-gray-600'
+            >
+              Groups
             </Link>{' '}
             <span className='mx-2 font-light text-gray-400'> / </span>{' '}
             {group?.name}

diff --git a/ui/pages/login/index.js b/ui/pages/login/index.js
@@ -217,10 +217,11 @@ export default function Login() {
             </div>
             {isEmailConfigured && (
               <div className='mt-4 flex items-center justify-end text-sm'>
-                <Link href='/password-reset'>
-                  <a className='font-medium text-blue-600 hover:text-blue-500'>
-                    Forgot your password?
-                  </a>
+                <Link
+                  href='/password-reset'
+                  className='font-medium text-blue-600 hover:text-blue-500'
+                >
+                  Forgot your password?
                 </Link>
               </div>
             )}

diff --git a/ui/pages/login/organizations.js b/ui/pages/login/organizations.js
@@ -55,11 +55,12 @@ export default function Organizations() {
       <div className='text-center text-xs text-gray-500'>
         Not seeing your organization?
       </div>
-      <Link href='/forgot-domain'>
-        <a className='my-1 inline-flex items-center text-xs font-semibold text-blue-500'>
-          Find my organization{' '}
-          <ChevronRightIcon className='mt-0.5 h-3 w-3 stroke-2' />
-        </a>
+      <Link
+        href='/forgot-domain'
+        className='my-1 inline-flex items-center text-xs font-semibold text-blue-500'
+      >
+        Find my organization{' '}
+        <ChevronRightIcon className='mt-0.5 h-3 w-3 stroke-2' />
       </Link>
     </div>
   )

diff --git a/ui/pages/settings/index.js b/ui/pages/settings/index.js
@@ -151,19 +151,16 @@ export default function Settings() {
                   pathname: `/settings/`,
                   query: { tab: t.name },
                 }}
-              >
-                <a
-                  className={`
+                className={`
                 ${
                   tab === t.name
                     ? 'border-blue-500 text-blue-600'
                     : 'border-transparent text-gray-500 hover:text-gray-600'
                 }
                  whitespace-nowrap border-b-2 py-2 px-5 text-sm font-medium capitalize transition-colors`}
-                  aria-current={tab.current ? 'page' : undefined}
-                >
-                  {t.title}
-                </a>
+                aria-current={tab.current ? 'page' : undefined}
+              >
+                {t.title}
               </Link>
             ))}
           </nav>
@@ -173,10 +170,11 @@ export default function Settings() {
             <>
               <header className='my-2 flex items-center justify-end'>
                 {/* Add dialog */}
-                <Link href='/settings/providers/add'>
-                  <a className='inline-flex items-center rounded-md border border-transparent bg-black  px-4 py-2 text-xs font-medium text-white shadow-sm hover:cursor-pointer hover:bg-gray-800'>
-                    Connect provider
-                  </a>
+                <Link
+                  href='/settings/providers/add'
+                  className='inline-flex items-center rounded-md border border-transparent bg-black  px-4 py-2 text-xs font-medium text-white shadow-sm hover:cursor-pointer hover:bg-gray-800'
+                >
+                  Connect provider
                 </Link>
               </header>
               <div className='mt-3 flex min-h-0 flex-1 flex-col'>

diff --git a/ui/pages/settings/providers/[id].js b/ui/pages/settings/providers/[id].js
@@ -183,8 +183,11 @@ export default function ProvidersEditDetails() {
       <header className='mt-6 mb-12 space-y-4'>
         <div className='flex flex-col justify-between md:flex-row md:items-center'>
           <h1 className='flex max-w-[75%] truncate py-1 font-display text-xl font-medium'>
-            <Link href='/settings?tab=providers'>
-              <a className='text-gray-500/75 hover:text-gray-600'>Providers</a>
+            <Link
+              href='/settings?tab=providers'
+              className='text-gray-500/75 hover:text-gray-600'
+            >
+              Providers
             </Link>{' '}
             <span className='mx-3 font-light text-gray-400'> / </span>{' '}
             <div className='flex truncate'>

diff --git a/ui/pages/settings/providers/add.js b/ui/pages/settings/providers/add.js
@@ -232,12 +232,10 @@ export default function ProvidersAddDetails() {
           Connect Provider
         </h1>
         <Link href='/settings?tab=providers'>
-          <a>
-            <XMarkIcon
-              className='h-5 w-5 text-gray-500 hover:text-gray-800'
-              aria-hidden='true'
-            />
-          </a>
+          <XMarkIcon
+            className='h-5 w-5 text-gray-500 hover:text-gray-800'
+            aria-hidden='true'
+          />
         </Link>
       </div>
       <div className='flex w-full flex-col'>