refactor: simplify Link components by removing legacyBehavior prop (#1518)

brandon-pereira · web-flow · commit 840a1639f14d · 2025-12-22T23:52:59.000Z
This commit updates multiple components to streamline the usage of Link elements by removing the legacyBehavior and passHref props.

No functionality changes introduced.

Fixes HDX-3071
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
@@ -47,17 +47,8 @@ export const AppNavCloudBanner = () => {
     <div className="my-3 bg-muted rounded p-2 text-center">
       <span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
       <div className="mt-2 mb-2">
-        <Link
-          href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
-          passHref
-          legacyBehavior
-        >
-          <Button
-            variant="light"
-            size="xs"
-            component="a"
-            className="hover-color-white"
-          >
+        <Link href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud">
+          <Button variant="light" size="xs" className="hover-color-white">
             Get Started for Free
           </Button>
         </Link>
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -111,14 +111,25 @@ export const Table = ({
             const link = getRowSearchLink(row.original);
 
             if (!link) {
-              return formattedValue;
+              return (
+                <div
+                  className={cx('align-top overflow-hidden py-1 pe-3', {
+                    'text-break': wrapLinesEnabled,
+                    'text-truncate': !wrapLinesEnabled,
+                  })}
+                >
+                  {formattedValue}
+                </div>
+              );
             }
 
             return (
               <Link
                 href={link}
-                passHref
-                className={'align-top overflow-hidden py-1 pe-3'}
+                className={cx('align-top overflow-hidden py-1 pe-3', {
+                  'text-break': wrapLinesEnabled,
+                  'text-truncate': !wrapLinesEnabled,
+                })}
                 style={{
                   display: 'block',
                   color: 'inherit',
@@ -256,7 +267,6 @@ export const Table = ({
           )}
           {items.map(virtualRow => {
             const row = rows[virtualRow.index] as TableRow<any>;
-            const link = getRowSearchLink?.(row.original);
             return (
               <tr
                 key={virtualRow.key}
@@ -267,34 +277,9 @@ export const Table = ({
                 {row.getVisibleCells().map(cell => {
                   return (
                     <td key={cell.id} title={`${cell.getValue()}`}>
-                      {!link ? (
-                        <div
-                          className={cx('align-top overflow-hidden py-1 pe-3', {
-                            'text-break': wrapLinesEnabled,
-                            'text-truncate': !wrapLinesEnabled,
-                          })}
-                        >
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </div>
-                      ) : (
-                        <Link
-                          href={link}
-                          passHref
-                          className="align-top overflow-hidden py-1 pe-3"
-                          style={{
-                            display: 'block',
-                            color: 'inherit',
-                            textDecoration: 'none',
-                          }}
-                        >
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </Link>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
                       )}
                     </td>
                   );
diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
@@ -421,7 +421,11 @@ export const InfraPodsStatusTable = ({
                 {virtualItems.map(virtualRow => {
                   const pod = podsList[virtualRow.index];
                   return (
-                    <Link key={pod.id} href={getLink(pod.name)} legacyBehavior>
+                    <Link
+                      key={pod.id}
+                      href={getLink(pod.name)}
+                      style={{ display: 'contents' }}
+                    >
                       <Table.Tr
                         className="cursor-pointer"
                         ref={rowVirtualizer.measureElement}
@@ -657,9 +661,9 @@ const NodesTable = ({
                   const node = nodesList[virtualRow.index];
                   return (
                     <Link
-                      key={node.name}
                       href={getLink(node.name)}
-                      legacyBehavior
+                      key={node.name}
+                      style={{ display: 'contents' }}
                     >
                       <Table.Tr
                         className="cursor-pointer"
@@ -857,7 +861,7 @@ const NamespacesTable = ({
                     <Link
                       key={namespace.name}
                       href={getLink(namespace.name)}
-                      legacyBehavior
+                      style={{ display: 'contents' }}
                     >
                       <Table.Tr
                         className="cursor-pointer"
diff --git a/packages/app/src/LandingHeader.tsx b/packages/app/src/LandingHeader.tsx
@@ -80,25 +80,15 @@ export default function LandingHeader({
               {!isLoggedIn &&
                 activeKey !== '/register' &&
                 installation?.isTeamExisting === false && (
-                  <Link href="/register" passHref legacyBehavior>
-                    <Button
-                      component="a"
-                      variant="outline"
-                      color="green"
-                      size="sm"
-                    >
+                  <Link href="/register">
+                    <Button variant="outline" color="green" size="sm">
                       Setup Account
                     </Button>
                   </Link>
                 )}
               {isLoggedIn && (
-                <Link href="/search" passHref legacyBehavior>
-                  <Button
-                    component="a"
-                    variant="outline"
-                    color="green"
-                    size="sm"
-                  >
+                <Link href="/search">
+                  <Button variant="outline" color="green" size="sm">
                     Go to Search
                   </Button>
                 </Link>
@@ -135,27 +125,15 @@ export default function LandingHeader({
               {!isLoggedIn &&
                 activeKey !== '/register' &&
                 installation?.isTeamExisting === false && (
-                  <Link href="/register" passHref legacyBehavior>
-                    <Button
-                      component="a"
-                      variant="outline"
-                      color="green"
-                      size="sm"
-                      fullWidth
-                    >
+                  <Link href="/register">
+                    <Button variant="outline" color="green" size="sm" fullWidth>
                       Setup Account
                     </Button>
                   </Link>
                 )}
               {isLoggedIn && (
-                <Link href="/search" passHref legacyBehavior>
-                  <Button
-                    component="a"
-                    variant="outline"
-                    color="green"
-                    size="sm"
-                    fullWidth
-                  >
+                <Link href="/search">
+                  <Button variant="outline" color="green" size="sm" fullWidth>
                     Go to Search
                   </Button>
                 </Link>
diff --git a/packages/app/src/components/DBListBarChart.tsx b/packages/app/src/components/DBListBarChart.tsx
@@ -132,12 +132,7 @@ function ListBar({
           ) : null;
 
         return getRowSearchLink ? (
-          <Link
-            href={getRowSearchLink(row)}
-            passHref
-            legacyBehavior
-            key={group}
-          >
+          <Link href={getRowSearchLink(row)} key={group}>
             <Box
               mb="sm"
               td="none"
diff --git a/packages/app/src/components/EventTag.tsx b/packages/app/src/components/EventTag.tsx
@@ -113,11 +113,7 @@ export default function EventTag({
             </Button>
           )}
           {generateSearchUrl && (
-            <Link
-              href={generateSearchUrl(searchCondition, nameLanguage)}
-              passHref
-              legacyBehavior
-            >
+            <Link href={generateSearchUrl(searchCondition, nameLanguage)}>
               <Button
                 justify="space-between"
                 color="gray"
diff --git a/packages/app/src/components/KubeComponents.tsx b/packages/app/src/components/KubeComponents.tsx
@@ -130,10 +130,17 @@ const renderKubeEvent = (source: TSource) => (event: KubeEvent) => {
 
   return (
     <Timeline.Item key={event.id}>
-      <Link href={href} passHref legacyBehavior>
-        <Anchor size="xs" fz={11} title={event.timestamp}>
+      <Link href={href}>
+        <Text
+          size="xs"
+          fz={11}
+          title={event.timestamp}
+          c="green"
+          td="underline"
+          fw="bold"
+        >
           <FormatTime value={event.timestamp} />
-        </Anchor>
+        </Text>
       </Link>
       <Group gap="xs" my={4}>
         <Text size="sm" fz={12} c="white" fw="bold">
