refactor: clickable entity table rows (#191)

gmolki · web-flow · commit 175aca27e9d1 · 2025-12-23T21:46:32.000+01:00
diff --git a/src/components/pages/console/confidential/ConfidentialsTabContent/cmp.tsx b/src/components/pages/console/confidential/ConfidentialsTabContent/cmp.tsx
@@ -1,5 +1,6 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { ConfidentialsTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import {
@@ -8,7 +9,8 @@ import {
   humanReadableSize,
 } from '@/helpers/utils'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
+import { Confidential } from '@/domain/confidential'
 
 const CreateConfidentialButton = ({
   children,
@@ -27,6 +29,13 @@ CreateConfidentialButton.displayName = 'CreateConfidentialButton'
 
 export const ConfidentialsTabContent = memo(
   ({ data }: ConfidentialsTabContentProps) => {
+    const router = useRouter()
+    const handleRowClick = useCallback(
+      (confidential: Confidential) => {
+        router.push(`/console/computing/confidential/${confidential.id}`)
+      },
+      [router],
+    )
     return (
       <>
         {data.length > 0 ? (
@@ -36,6 +45,8 @@ export const ConfidentialsTabContent = memo(
                 borderType="none"
                 rowNoise
                 rowKey={(row) => row.id}
+                rowProps={(row) => ({ onClick: () => handleRowClick(row) })}
+                clickableRows
                 data={data}
                 columns={[
                   {
@@ -78,13 +89,13 @@ export const ConfidentialsTabContent = memo(
                     label: '',
                     align: 'right',
                     render: (row) => (
-                      <ButtonLink
+                      <Button
                         kind="functional"
                         variant="secondary"
-                        href={`/console/computing/confidential/${row.id}`}
+                        onClick={() => handleRowClick(row)}
                       >
                         <Icon name="angle-right" size="lg" />
-                      </ButtonLink>
+                      </Button>
                     ),
                     cellProps: () => ({
                       css: tw`pl-3!`,
diff --git a/src/components/pages/console/domain/DomainsTabContent/cmp.tsx b/src/components/pages/console/domain/DomainsTabContent/cmp.tsx
@@ -1,18 +1,27 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { DomainsTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
 import IconText from '@/components/common/IconText'
 import { Text } from '../../common'
 import { EntityDomainType, EntityDomainTypeName } from '@/helpers/constants'
 import { useDomainsEntityNames } from '@/hooks/common/useDomainsEntityNames'
+import { Domain } from '@/domain/domain'
 
 export const DomainsTabContent = ({
   data,
   cta = true,
 }: DomainsTabContentProps) => {
+  const router = useRouter()
+  const handleRowClick = useCallback(
+    (domain: Domain) => {
+      router.push(`/console/settings/domain/${domain.id}`)
+    },
+    [router],
+  )
   const entityNames = useDomainsEntityNames(data)
 
   return (
@@ -24,8 +33,10 @@ export const DomainsTabContent = ({
           rowKey={(row) => row.id}
           data={data}
           rowProps={(row) => ({
+            onClick: () => handleRowClick(row),
             css: row.confirmed ? '' : tw`opacity-60`,
           })}
+          clickableRows
           columns={[
             {
               label: 'Name',
@@ -67,13 +78,13 @@ export const DomainsTabContent = ({
               label: '',
               align: 'right',
               render: (row) => (
-                <ButtonLink
+                <Button
                   kind="functional"
                   variant="secondary"
-                  href={`/console/settings/domain/${row.id}`}
+                  onClick={() => handleRowClick(row)}
                 >
                   <Icon name="angle-right" size="lg" />
-                </ButtonLink>
+                </Button>
               ),
               cellProps: () => ({
                 css: tw`pl-3!`,
diff --git a/src/components/pages/console/function/FunctionsTabContent/cmp.tsx b/src/components/pages/console/function/FunctionsTabContent/cmp.tsx
@@ -1,14 +1,25 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { FunctionsTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import { convertByteUnits, ellipseAddress } from '@/helpers/utils'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
 import { NAVIGATION_URLS } from '@/helpers/constants'
+import { Program } from '@/domain/program'
 
 export const FunctionsTabContent = React.memo(
   ({ data }: FunctionsTabContentProps) => {
+    const router = useRouter()
+    const handleRowClick = useCallback(
+      (program: Program) => {
+        router.push(
+          `${NAVIGATION_URLS.console.computing.functions.home}/${program.id}`,
+        )
+      },
+      [router],
+    )
     return (
       <>
         {data.length > 0 ? (
@@ -20,8 +31,10 @@ export const FunctionsTabContent = React.memo(
                 rowKey={(row) => row.id}
                 data={data}
                 rowProps={(row) => ({
+                  onClick: () => handleRowClick(row),
                   css: row.confirmed ? '' : tw`opacity-60`,
                 })}
+                clickableRows
                 columns={[
                   {
                     label: 'Name',
@@ -73,13 +86,13 @@ export const FunctionsTabContent = React.memo(
                     label: '',
                     align: 'right',
                     render: (row) => (
-                      <ButtonLink
+                      <Button
                         kind="functional"
                         variant="secondary"
-                        href={`${NAVIGATION_URLS.console.computing.functions.home}/${row.id}`}
+                        onClick={() => handleRowClick(row)}
                       >
                         <Icon name="angle-right" size="lg" />
-                      </ButtonLink>
+                      </Button>
                     ),
                     cellProps: () => ({
                       css: tw`pl-3!`,
diff --git a/src/components/pages/console/gpuInstance/GpuInstancesTabContent/cmp.tsx b/src/components/pages/console/gpuInstance/GpuInstancesTabContent/cmp.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { GpuInstancesTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import {
@@ -8,10 +9,18 @@ import {
   humanReadableSize,
 } from '@/helpers/utils'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
+import { GpuInstance } from '@/domain/gpuInstance'
 
 export const GpuInstancesTabContent = React.memo(
   ({ data }: GpuInstancesTabContentProps) => {
+    const router = useRouter()
+    const handleRowClick = useCallback(
+      (gpuInstance: GpuInstance) => {
+        router.push(`/console/computing/gpu-instance/${gpuInstance.id}`)
+      },
+      [router],
+    )
     return (
       <>
         {data.length > 0 ? (
@@ -21,6 +30,8 @@ export const GpuInstancesTabContent = React.memo(
                 borderType="none"
                 rowNoise
                 rowKey={(row) => row.id}
+                rowProps={(row) => ({ onClick: () => handleRowClick(row) })}
+                clickableRows
                 data={data}
                 columns={[
                   {
@@ -63,13 +74,13 @@ export const GpuInstancesTabContent = React.memo(
                     label: '',
                     align: 'right',
                     render: (row) => (
-                      <ButtonLink
+                      <Button
                         kind="functional"
                         variant="secondary"
-                        href={`/console/computing/gpu-instance/${row.id}`}
+                        onClick={() => handleRowClick(row)}
                       >
                         <Icon name="angle-right" size="lg" />
-                      </ButtonLink>
+                      </Button>
                     ),
                     cellProps: () => ({
                       css: tw`pl-3!`,
diff --git a/src/components/pages/console/instance/InstancesTabContent/cmp.tsx b/src/components/pages/console/instance/InstancesTabContent/cmp.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { InstancesTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import {
@@ -8,10 +9,19 @@ import {
   humanReadableSize,
 } from '@/helpers/utils'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
+import { Instance } from '@/domain/instance'
 
 export const InstancesTabContent = React.memo(
   ({ data }: InstancesTabContentProps) => {
+    const router = useRouter()
+    const handleRowClick = useCallback(
+      (instance: Instance) => {
+        router.push(`/console/computing/instance/${instance.id}`)
+      },
+      [router],
+    )
+
     return (
       <>
         {data.length > 0 ? (
@@ -21,6 +31,8 @@ export const InstancesTabContent = React.memo(
                 borderType="none"
                 rowNoise
                 rowKey={(row) => row.id}
+                rowProps={(row) => ({ onClick: () => handleRowClick(row) })}
+                clickableRows
                 data={data}
                 columns={[
                   {
@@ -63,13 +75,13 @@ export const InstancesTabContent = React.memo(
                     label: '',
                     align: 'right',
                     render: (row) => (
-                      <ButtonLink
+                      <Button
                         kind="functional"
                         variant="secondary"
-                        href={`/console/computing/instance/${row.id}`}
+                        onClick={() => handleRowClick(row)}
                       >
                         <Icon name="angle-right" size="lg" />
-                      </ButtonLink>
+                      </Button>
                     ),
                     cellProps: () => ({
                       css: tw`pl-3!`,
diff --git a/src/components/pages/console/sshKey/SSHKeysTabContent/cmp.tsx b/src/components/pages/console/sshKey/SSHKeysTabContent/cmp.tsx
@@ -1,12 +1,21 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { SSHKeysTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
 import { ellipseText } from '@/helpers/utils'
+import { SSHKey } from '@/domain/ssh'
 
 export const SSHKeysTabContent = ({ data }: SSHKeysTabContentProps) => {
+  const router = useRouter()
+  const handleRowClick = useCallback(
+    (sshKey: SSHKey) => {
+      router.push(`/console/settings/ssh/${sshKey.id}`)
+    },
+    [router],
+  )
   return (
     <>
       <div tw="overflow-auto max-w-full">
@@ -16,8 +25,10 @@ export const SSHKeysTabContent = ({ data }: SSHKeysTabContentProps) => {
           rowKey={(row) => row.key}
           data={data}
           rowProps={(row) => ({
+            onClick: () => handleRowClick(row),
             css: row.confirmed ? '' : tw`opacity-60`,
           })}
+          clickableRows
           columns={[
             {
               label: 'Label',
@@ -37,13 +48,13 @@ export const SSHKeysTabContent = ({ data }: SSHKeysTabContentProps) => {
               label: '',
               align: 'right',
               render: (row) => (
-                <ButtonLink
+                <Button
                   kind="functional"
                   variant="secondary"
-                  href={`/console/settings/ssh/${row.id}`}
+                  onClick={() => handleRowClick(row)}
                 >
                   <Icon name="angle-right" size="lg" />
-                </ButtonLink>
+                </Button>
               ),
               cellProps: () => ({
                 css: tw`pl-3!`,
diff --git a/src/components/pages/console/volume/VolumesTabContent/cmp.tsx b/src/components/pages/console/volume/VolumesTabContent/cmp.tsx
@@ -1,16 +1,27 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback } from 'react'
 import tw from 'twin.macro'
+import { useRouter } from 'next/router'
 import { VolumesTabContentProps } from './types'
 import ButtonLink from '@/components/common/ButtonLink'
 import { ellipseAddress, humanReadableSize } from '@/helpers/utils'
 import EntityTable from '@/components/common/EntityTable'
-import { Icon } from '@aleph-front/core'
+import { Button, Icon } from '@aleph-front/core'
 import { NAVIGATION_URLS } from '@/helpers/constants'
+import { Volume } from '@/domain/volume'
 
 export const VolumesTabContent = ({
   data,
   cta = true,
 }: VolumesTabContentProps) => {
+  const router = useRouter()
+  const handleRowClick = useCallback(
+    (volume: Volume) => {
+      router.push(
+        `${NAVIGATION_URLS.console.storage.volumes.home}/${volume.id}`,
+      )
+    },
+    [router],
+  )
   return (
     <>
       <div tw="overflow-auto max-w-full">
@@ -20,8 +31,10 @@ export const VolumesTabContent = ({
           rowKey={(row) => row.id}
           data={data}
           rowProps={(row) => ({
+            onClick: () => handleRowClick(row),
             css: row.confirmed ? '' : tw`opacity-60`,
           })}
+          clickableRows
           columns={[
             {
               label: 'Name',
@@ -45,13 +58,13 @@ export const VolumesTabContent = ({
               label: '',
               align: 'right',
               render: (row) => (
-                <ButtonLink
+                <Button
                   kind="functional"
                   variant="secondary"
-                  href={`${NAVIGATION_URLS.console.storage.volumes.home}/${row.id}`}
+                  onClick={() => handleRowClick(row)}
                 >
                   <Icon name="angle-right" size="lg" />
-                </ButtonLink>
+                </Button>
               ),
               cellProps: () => ({
                 css: tw`pl-3!`,
diff --git a/src/components/pages/console/website/WebsitesTabContent/cmp.tsx b/src/components/pages/console/website/WebsitesTabContent/cmp.tsx
