Merge pull request #1841 from oasisprotocol/mz/roflAppDetails

ROFL app details card

Author: buberdds

.changelog/1841.bugfix.md

@@ -0,0 +1 @@
+Create ROFL app details card content

…ges/RoflAppDetailPage/EmptyStateCard.tsx …es/RoflAppDetailsPage/EmptyStateCard.tsxsrc/app/pages/RoflAppDetailPage/EmptyStateCard.tsx renamed to src/app/pages/RoflAppDetailsPage/EmptyStateCard.tsx src/app/pages/RoflAppDetailPage/EmptyStateCard.tsx renamed to src/app/pages/RoflAppDetailsPage/EmptyStateCard.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import { RoflAppPolicy } from '../../../oasis-nexus/api'
+import { CopyToClipboard } from 'app/components/CopyToClipboard'
+
+type EnclavesProps = {
+  policy: RoflAppPolicy
+}
+
+export const Enclaves: FC<EnclavesProps> = ({ policy }) => {
+  const { t } = useTranslation()
+
+  if (!policy.enclaves || policy.enclaves.length === 0) {
+    return <>{t('common.missing')}</>
+  }
+
+  return (
+    <table>
+      {policy.enclaves.map((enclave: string) => (
+        <tr key={enclave}>
+          <td>
+            <Typography variant="mono" component="span">
+              {enclave}
+            </Typography>
+          </td>
+          <td>
+            <CopyToClipboard value={enclave} />
+          </td>
+        </tr>
+      ))}
+    </table>
+  )
+}

src/app/pages/RoflAppDetailsPage/Enclaves.tsx

@@ -0,0 +1,53 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { RoflAppPolicy } from '../../../oasis-nexus/api'
+
+type EndorsementProps = {
+  policy: RoflAppPolicy
+}
+
+export const Endorsement: FC<EndorsementProps> = ({ policy }) => {
+  const { t } = useTranslation()
+
+  if (!policy.endorsements || policy.endorsements.length === 0) {
+    return <>{t('common.missing')}</>
+  }
+
+  // Nexus is not parsing ROFL app policy, but we can expect object to be similar to this:
+  // https://github.com/oasisprotocol/oasis-sdk/blob/41480106d585debd33391cb0dfcad32d2f3cdc9d/runtime-sdk/src/modules/rofl/policy.rs#L27
+
+  const getEndorsementLabel = (key: string): string => {
+    const labelMap: Record<string, string> = {
+      any: t('rofl.any'),
+      role_compute: t('rofl.roleCompute'),
+      role_observer: t('rofl.roleObserver'),
+      entity: t('rofl.entity'),
+      node: t('rofl.node'),
+    }
+    return labelMap[key] || key
+  }
+
+  return (
+    <>
+      {policy.endorsements.map((endorsement: { [key: string]: any }, index: number) => {
+        const key = Object.keys(endorsement)[0]
+        const value = endorsement[key]
+
+        return (
+          <Box key={index}>
+            {getEndorsementLabel(key)}
+            {(key === 'entity' || key === 'node') && value ? (
+              <>
+                : <Typography variant="mono">{value}</Typography>
+              </>
+            ) : (
+              ''
+            )}
+          </Box>
+        )
+      })}
+    </>
+  )
+}

src/app/pages/RoflAppDetailsPage/Endorsement.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Typography from '@mui/material/Typography'
+import { RoflAppSecrets } from '../../../oasis-nexus/api'
+
+type SecretsProps = {
+  secrets: RoflAppSecrets
+}
+
+export const Secrets: FC<SecretsProps> = ({ secrets }) => {
+  const { t } = useTranslation()
+
+  if (!secrets || secrets.length === 0) {
+    return <>{t('common.missing')}</>
+  }
+
+  return (
+    <table>
+      {Object.keys(secrets).map(key => (
+        <tr key={key}>
+          <td>
+            <Typography
+              variant="mono"
+              component="span"
+              sx={{
+                wordWrap: 'break-word',
+                pr: 5,
+              }}
+            >
+              {key}:
+            </Typography>
+          </td>
+          <td>
+            <Typography variant="mono">{secrets[key]}</Typography>
+          </td>
+        </tr>
+      ))}
+    </table>
+  )
+}