Remove inline links from tables

pluralsh · Feb 7, 2023 · 5f2de5b · 5f2de5b
1 parent cc51ff7
commit 5f2de5b
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 80 deletions.
diff --git a/assets/src/components/apps/app/components/component/info/CronJob.tsx b/assets/src/components/apps/app/components/component/info/CronJob.tsx
@@ -1,14 +1,9 @@
 import { Card, Table, Tooltip } from '@pluralsh/design-system'
-import { createColumnHelper } from '@tanstack/react-table'
+import { Row, createColumnHelper } from '@tanstack/react-table'
 import { TableText } from 'components/cluster/TableElements'
 import PropWide from 'components/utils/PropWide'
-import {
-  A,
-  Div,
-  Flex,
-  H2,
-} from 'honorable'
-import { Link, useOutletContext, useParams } from 'react-router-dom'
+import { Div, Flex, H2 } from 'honorable'
+import { useNavigate, useOutletContext, useParams } from 'react-router-dom'
 
 import { DeleteJob } from './Job'
 
@@ -18,21 +13,12 @@ const columns = (namespace, refetch) => [
   columnHelper.accessor(row => row?.metadata?.name, {
     id: 'name',
     cell: (props => (
-      <TableText>
-        <Tooltip
-          label={props.getValue()}
-          placement="top-start"
-        >
-          <A
-            inline
-            display="inline"
-            as={Link}
-            to={`/apps/${namespace}/components/job/${props.getValue()}`}
-          >
-            {props.getValue()}
-          </A>
-        </Tooltip>
-      </TableText>
+      <Tooltip
+        label={props.getValue()}
+        placement="top-start"
+      >
+        <TableText>{props.getValue()}</TableText>
+      </Tooltip>
     )),
     header: 'Name',
   }),
@@ -84,10 +70,13 @@ const columns = (namespace, refetch) => [
 ]
 
 function CronJobJobs({ jobs, namespace, refetch }) {
+  const navigate = useNavigate()
+
   return (
     <Table
       data={jobs}
       columns={columns(namespace, refetch)}
+      onRowClick={(_e, { original }: Row<any>) => navigate(`/apps/${namespace}/components/job/${original?.metadata?.name}`)}
     />
   )
 }

diff --git a/assets/src/components/apps/app/components/component/info/Pods.tsx b/assets/src/components/apps/app/components/component/info/Pods.tsx
@@ -6,7 +6,7 @@ import {
   ColDelete,
   ColImages,
   ColMemoryReservation,
-  ColNameLink,
+  ColName,
   ColRestarts,
   PodsList,
 } from 'components/cluster/pods/PodsList'
@@ -17,7 +17,7 @@ export default function Pods({ pods }) {
   const { refetch } = useOutletContext<any>()
 
   const columns = useMemo(() => [
-    ColNameLink,
+    ColName,
     {
       ...ColMemoryReservation,
       meta: {

diff --git a/assets/src/components/cluster/containers/ContainersList.tsx b/assets/src/components/cluster/containers/ContainersList.tsx
@@ -290,7 +290,7 @@ export function ContainersList({
       data={tableData}
       columns={columns}
       enableColumnResizing
-      onRowClick={(e, { original }: Row<ContainerTableRow>) => original?.readiness === Readiness.Ready && navigate(`/pods/${namespace}/${podName}/shell/${original?.name}`)}
+      onRowClick={(_e, { original }: Row<ContainerTableRow>) => original?.readiness === Readiness.Ready && navigate(`/pods/${namespace}/${podName}/shell/${original?.name}`)}
       {...TABLE_HEIGHT}
     />
   )

diff --git a/assets/src/components/cluster/nodes/NodeInfo.tsx b/assets/src/components/cluster/nodes/NodeInfo.tsx
@@ -18,7 +18,7 @@ import {
   ColContainers,
   ColCpuReservation,
   ColMemoryReservation,
-  ColNameLink,
+  ColName,
   ColRestarts,
   PodsList,
 } from '../pods/PodsList'
@@ -49,7 +49,7 @@ export default function NodeInfo() {
   })
 
   const columns = useMemo(() => [
-    ColNameLink,
+    ColName,
     ColMemoryReservation,
     ColCpuReservation,
     ColRestarts,

diff --git a/assets/src/components/cluster/nodes/NodesList.tsx b/assets/src/components/cluster/nodes/NodesList.tsx
@@ -1,13 +1,13 @@
 import { useMemo, useState } from 'react'
 import { filesize } from 'filesize'
-import { A, Div, Flex } from 'honorable'
+import { Div, Flex } from 'honorable'
 import {
   IconFrame,
   Table,
   Tooltip,
   TrashCanIcon,
 } from '@pluralsh/design-system'
-import { Link, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { ColumnDef, Row, createColumnHelper } from '@tanstack/react-table'
 import { Node, NodeMetric } from 'generated/graphql'
 import { ReadinessT, nodeStatusToReadiness, readinessToLabel } from 'utils/status'
@@ -91,21 +91,12 @@ function DeleteNode({ name, refetch }) {
 const ColName = columnHelper.accessor(row => row.name, {
   id: 'name',
   enableSorting: true,
-  cell: ({ row: { original }, ...props }) => (
+  cell: props => (
     <Tooltip
       label={props.getValue()}
       placement="top"
     >
-      <TableText>
-        <A
-          inline
-          display="inline"
-          as={Link}
-          to={`/nodes/${original.name}`}
-        >
-          {props.getValue()}
-        </A>
-      </TableText>
+      <TableText> {props.getValue()} </TableText>
     </Tooltip>
   ),
   header: 'Name',
@@ -289,7 +280,7 @@ export function NodesList({
       loose
       data={tableData}
       columns={columns}
-      onRowClick={(e, { original }: Row<TableData>) => navigate(`/nodes/${original?.name}`)}
+      onRowClick={(_e, { original }: Row<TableData>) => navigate(`/nodes/${original?.name}`)}
     />
   )
 }
diff --git a/assets/src/components/cluster/pods/Pods.tsx b/assets/src/components/cluster/pods/Pods.tsx
@@ -42,7 +42,7 @@ import {
   ColCpuReservation,
   ColImages,
   ColMemoryReservation,
-  ColNameLink,
+  ColName,
   ColNamespace,
   ColRestarts,
   PodWithId,
@@ -117,7 +117,7 @@ export default function AllPods() {
 
   const columns = useMemo(() => [
     ColNamespace,
-    ColNameLink,
+    ColName,
     ColMemoryReservation,
     ColCpuReservation,
     ColRestarts,

diff --git a/assets/src/components/cluster/pods/PodsList.tsx b/assets/src/components/cluster/pods/PodsList.tsx
@@ -105,46 +105,17 @@ type PodTableRow = {
 }
 const columnHelper = createColumnHelper<PodTableRow>()
 
-export const ColNameLink = columnHelper.accessor(row => row.name, {
-  id: 'name-link',
-  enableGlobalFilter: true,
-  enableSorting: true,
-  cell: ({ row: { original }, ...props }) => (
-    <TableText>
-      <Tooltip
-        label={props.getValue()}
-        placement="top-start"
-      >
-        <A
-          inline
-          display="inline"
-          as={Link}
-          to={`/pods/${original.namespace}/${original.name}`}
-        >
-          {props.getValue()}
-        </A>
-      </Tooltip>
-    </TableText>
-  ),
-  header: 'Name',
-  meta: {
-    truncate: true,
-  },
-})
-
 export const ColName = columnHelper.accessor(row => row.name, {
   id: 'name',
   enableGlobalFilter: true,
   enableSorting: true,
   cell: props => (
-    <TableText>
-      <Tooltip
-        label={props.getValue()}
-        placement="top-start"
-      >
-        <span>{props.getValue()}</span>
-      </Tooltip>
-    </TableText>
+    <Tooltip
+      label={props.getValue()}
+      placement="top-start"
+    >
+      <TableText>{props.getValue()}</TableText>
+    </Tooltip>
   ),
   header: 'Name',
 })
@@ -372,7 +343,7 @@ export const PodsList = memo(({
       columns={columns}
       virtualizeRows
       {...props}
-      onRowClick={(e, { original }: Row<PodTableRow>) => navigate(`/pods/${original.namespace}/${original.name}`)}
+      onRowClick={(_e, { original }: Row<PodTableRow>) => navigate(`/pods/${original.namespace}/${original.name}`)}
     />
   )
 })