diff --git a/ui/src/components/Permissions.tsx b/ui/src/components/Permissions.tsx index f0a9607a..93996a2c 100644 --- a/ui/src/components/Permissions.tsx +++ b/ui/src/components/Permissions.tsx @@ -14,6 +14,7 @@ export const Permissions = () => { installStatus, passport, pike, + presentableSeal, ship, } = usePermissions(); @@ -40,6 +41,7 @@ export const Permissions = () => { ) : (
diff --git a/ui/src/permissions/PermissionsDialog.tsx b/ui/src/permissions/PermissionsDialog.tsx index 4a4678e3..43ade6aa 100644 --- a/ui/src/permissions/PermissionsDialog.tsx +++ b/ui/src/permissions/PermissionsDialog.tsx @@ -13,12 +13,14 @@ type ViewMode = 'Summary' | 'Source'; interface PermissionsDialogInnerProps { appName: string; passport: Passport; + presentableSeal: string[] | null; onInstall: () => void; } export function PermissionsDialogInner({ appName, passport, + presentableSeal, onInstall, }: PermissionsDialogInnerProps) { const [viewMode, setViewMode] = useState('Summary'); @@ -52,7 +54,6 @@ export function PermissionsDialogInner({ { viewMode === 'Summary' ? (
- {/* TODO: render app passport bucket */} { [...passport.sys, ...passport.any, ...passport.new, ...passport.rad].map(p => { return p.kind.pes.map((pe, i) => { @@ -62,10 +63,9 @@ export function PermissionsDialogInner({ }
) : ( -
-
-                {/* TODO: use real seal from scry; style to match wireframe */}
-                {fakeSeal}
+            
+
+                {presentableSeal?.map((s) => `${s}\n`)}
               
) diff --git a/ui/src/permissions/usePermissions.ts b/ui/src/permissions/usePermissions.ts index 9bedfdfa..cf35c938 100644 --- a/ui/src/permissions/usePermissions.ts +++ b/ui/src/permissions/usePermissions.ts @@ -3,6 +3,9 @@ import { useCharge, useTreaty, useRemoteDesk, useInstallStatus } from "@/state/d import { usePike } from "@/state/kiln"; import { useParams } from "react-router-dom"; import usePassport from "./usePassport"; +import { useCallback, useEffect, useState } from "react"; +import api from "@/api"; +import { scrySeal } from "@/gear"; export default function usePermissions() { const { host, desk } = useParams<{ desk: string, host: string }>(); @@ -14,6 +17,16 @@ export default function usePermissions() { const { passport } = usePassport(); // TODO: pass in desk const [ship,] = useRemoteDesk(docket, pike, treaty?.ship); const installStatus = useInstallStatus(docket); + const [presentableSeal, setPresentableSeal] = useState(null); + + const fetchSeal = useCallback(async () => { + const seal = await api.scry(scrySeal(ship, desk)); + setPresentableSeal(seal); + }, []); + + useEffect(() => { + fetchSeal(); + }, []); return { appName, @@ -24,6 +37,7 @@ export default function usePermissions() { installStatus, passport, pike, + presentableSeal, ship, treaty, } diff --git a/ui/src/stories/PermissionsDialog.stories.tsx b/ui/src/stories/PermissionsDialog.stories.tsx index ad1f8100..7d4a7d50 100644 --- a/ui/src/stories/PermissionsDialog.stories.tsx +++ b/ui/src/stories/PermissionsDialog.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { PermissionsDialogInner } from '@/permissions/PermissionsDialog'; import { Dialog, DialogContent } from '@/components/Dialog'; -import { fakePassport } from '@/permissions/temp'; +import { fakePassport, fakeSeal } from '@/permissions/temp'; import type { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { @@ -32,6 +32,7 @@ export const Default: Story = { args: { appName: 'Some Cool App', passport: fakePassport, + presentableSeal: fakeSeal.split('\n'), onInstall: () => { }, }, };