Enable route and link to instance details page

Author: buberdds

src/app/pages/RoflAppDetailsPage/InstancesCard.tsx

@@ -41,6 +41,8 @@ const InstancesView: FC<RoflAppDetailsContext> = ({ scope, id }) => {
         isTotalCountClipped: data?.data.is_total_count_clipped,
         rowsPerPage: limit,
       }}
+      appId={id}
+      scope={scope}
     />
   )
 }

src/app/pages/RoflAppDetailsPage/InstancesList.tsx

@@ -6,13 +6,19 @@ import { COLORS } from '../../../styles/theme/colors'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { TablePaginationProps } from '../../components/Table/TablePagination'
 import { RoflAppInstanceStatusBadge } from 'app/components/Rofl/RoflAppInstanceStatusBadge'
+import { RouteUtils } from 'app/utils/route-utils'
+import { Link as RouterLink } from 'react-router-dom'
+import Link from '@mui/material/Link'
+import { SearchScope } from '../../../types/searchScope'
 
 type InstancesListProps = {
   currentEpoch: number | undefined
   instances: RoflInstance[] | undefined
   isLoading: boolean
   limit: number
   pagination: false | TablePaginationProps
+  appId: string
+  scope: SearchScope
 }
 
 export const InstancesList: FC<InstancesListProps> = ({
@@ -21,6 +27,8 @@ export const InstancesList: FC<InstancesListProps> = ({
   pagination,
   instances,
   currentEpoch,
+  appId,
+  scope,
 }) => {
   const { t } = useTranslation()
   const tableColumns: TableColProps[] = [
@@ -34,14 +42,21 @@ export const InstancesList: FC<InstancesListProps> = ({
     currentEpoch !== undefined && instances
       ? instances?.map(instance => {
           const isActive = instance.expiration_epoch > currentEpoch
+          const to = RouteUtils.getRoflAppInstanceRoute(scope.network, appId, instance.rak)
 
           return {
             key: instance.rak,
             backgroundColor: isActive ? 'transparent' : COLORS.grayLight,
             data: [
               {
                 key: 'rak',
-                content: <Typography variant="mono">{instance.rak}</Typography>,
+                content: (
+                  <Typography variant="mono">
+                    <Link component={RouterLink} to={to}>
+                      {instance.rak}
+                    </Link>
+                  </Typography>
+                ),
               },
               {
                 key: 'node',

src/routes.tsx

@@ -74,6 +74,7 @@ import { InstancesCard } from './app/pages/RoflAppDetailsPage/InstancesCard'
 import { useRoflAppDetailsProps } from './app/pages/RoflAppDetailsPage/hooks'
 import { RoflAppUpdatesCard } from './app/pages/RoflAppDetailsPage/RoflAppUpdatesCard'
 import { RoflAppInstanceTransactionsCard } from 'app/pages/RoflAppDetailsPage/RoflAppInstanceTransactionsCard'
+import { RoflAppInstanceDetailsPage } from 'app/pages/RoflAppInstanceDetailsPage'
 
 const ScopeSpecificPart = () => {
   const { network, layer } = useRequiredScopeParam()
@@ -325,6 +326,11 @@ export const routes: RouteObject[] = [
               },
             ],
           },
+          {
+            path: `rofl/app/:id/instance/:rak`,
+            element: <RoflAppInstanceDetailsPage />,
+            loader: roflAppParamLoader(),
+          },
         ],
       },
     ],