Merge pull request #1837 from oasisprotocol/mz/roflInstances

ROFL app instances card

Author: buberdds

.changelog/1837.bugfix.md

@@ -0,0 +1 @@
+Create ROFL app instances card

src/app/pages/RoflAppDetailPage/InstancesCard.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Layer, useGetRuntimeRoflAppsIdInstances } from '../../../oasis-nexus/api'
+import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE as limit } from '../../config'
+import { instancesContainerId } from '../../utils/tabAnchors'
+import { LinkableCardLayout } from '../../components/LinkableCardLayout'
+import { CardEmptyState } from '../../components/CardEmptyState'
+import { useSearchParamsPagination } from '../../components/Table/useSearchParamsPagination'
+import { InstancesList } from './InstancesList'
+import { RoflAppDetailsContext } from './hooks'
+
+export const InstancesCard: FC<RoflAppDetailsContext> = context => {
+  return (
+    <LinkableCardLayout containerId={instancesContainerId} title="">
+      <InstancesView {...context} />
+    </LinkableCardLayout>
+  )
+}
+
+const InstancesView: FC<RoflAppDetailsContext> = ({ scope, id }) => {
+  const { t } = useTranslation()
+  const { network } = scope
+  const pagination = useSearchParamsPagination('page')
+  const offset = (pagination.selectedPage - 1) * limit
+  const instancesQuery = useGetRuntimeRoflAppsIdInstances(network, Layer.sapphire, id, {
+    limit,
+    offset,
+  })
+  const { isFetched, isLoading, data } = instancesQuery
+  const instances = data?.data.instances
+
+  return (
+    <>
+      {isFetched && !instances?.length && <CardEmptyState label={t('rofl.emptyInstancesList')} />}
+      <InstancesList
+        instances={instances}
+        isLoading={isLoading}
+        limit={limit}
+        pagination={{
+          selectedPage: pagination.selectedPage,
+          linkToPage: pagination.linkToPage,
+          totalCount: data?.data.total_count,
+          isTotalCountClipped: data?.data.is_total_count_clipped,
+          rowsPerPage: limit,
+        }}
+      />
+    </>
+  )
+}

src/app/pages/RoflAppDetailPage/InstancesList.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import { RoflInstance } from '../../../oasis-nexus/api'
+import { Table, TableCellAlign, TableColProps } from '../../components/Table'
+import { TablePaginationProps } from '../../components/Table/TablePagination'
+
+type InstancesListProps = {
+  instances: RoflInstance[] | undefined
+  isLoading: boolean
+  limit: number
+  pagination: false | TablePaginationProps
+}
+
+export const InstancesList: FC<InstancesListProps> = ({ isLoading, limit, pagination, instances }) => {
+  const { t } = useTranslation()
+  const tableColumns: TableColProps[] = [
+    { key: 'rak', content: t('rofl.rak') },
+    { key: 'node', content: t('rofl.nodeId') },
+    { key: 'expiration', content: t('rofl.expirationEpoch'), align: TableCellAlign.Right },
+  ]
+
+  const tableRows = instances?.map(instance => {
+    return {
+      key: instance.rak,
+      data: [
+        {
+          key: 'rak',
+          content: <Typography variant="mono">{instance.rak}</Typography>,
+        },
+        {
+          key: 'node',
+          content: <Typography variant="mono">{instance.endorsing_node_id}</Typography>,
+        },
+        {
+          key: 'expiration',
+          content: instance.expiration_epoch.toLocaleString(),
+          align: TableCellAlign.Right,
+        },
+      ],
+    }
+  })
+
+  return (
+    <Table
+      columns={tableColumns}
+      rows={tableRows}
+      rowsNumber={limit}
+      name={t('rofl.instances')}
+      isLoading={isLoading}
+      pagination={pagination}
+      extraHorizontalSpaceOnMobile
+    />
+  )
+}

src/app/pages/RoflAppDetailPage/hooks.tsx

@@ -0,0 +1,8 @@
+import { SearchScope } from '../../../types/searchScope'
+
+export type RoflAppDetailsContext = {
+  scope: SearchScope
+  id: string
+}
+
+// TOOD: Placeholder file for a hook used within a router. Add when details page is ready

src/app/utils/tabAnchors.ts

@@ -11,3 +11,4 @@ export const nftCollectionContainerId = 'nftCollection'
 export const transfersContainerId = 'transfers'
 export const tokenTransfersContainerId = 'tokenTransfers'
 export const tokenContainerId = 'tokens'
+export const instancesContainerId = 'instances'

src/locales/en/translation.json

@@ -665,7 +665,10 @@
     "created": "Date created",
     "instances": "Instances",
     "listTitle": "ROFL Apps",
-    "nameNotProvided": "Name not provided"
+    "nameNotProvided": "Name not provided",
+    "nodeId": "Node ID",
+    "expirationEpoch": "Expiration epoch",
+    "emptyInstancesList": "No ROFL app instances found."
   },
   "search": {
     "placeholder": "Address, Block, Contract, Transaction hash, Token name, etc.",