perms: scry for seal + styling

tloncorp · Jun 16, 2023 · cfedddf · cfedddf
1 parent ad01f4e
commit cfedddf
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git 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 = () => {
             <PermissionsDialogInner
               appName={appName}
               passport={passport}
+              presentableSeal={presentableSeal}
               onInstall={onInstall}
             />) : (
             <div className="dialog-inner-container flex justify-center text-black">

diff --git 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<ViewMode>('Summary');
@@ -52,7 +54,6 @@ export function PermissionsDialogInner({
         {
           viewMode === 'Summary' ? (
             <div className="space-y-5">
-              {/* 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({
               }
             </div>
           ) : (
-            <div className="bg-gray-100 rounded-md p-4">
-              <pre className="text-xs font-mono text-gray-600">
-                {/* TODO: use real seal from scry; style to match wireframe */}
-                {fakeSeal}
+            <div className="bg-gray-50 rounded-md p-4">
+              <pre className="text-xs font-mono text-gray-800">
+                {presentableSeal?.map((s) => `${s}\n`)}
               </pre>
             </div>
           )

diff --git 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<string[] | null>(null);
+
+  const fetchSeal = useCallback(async () => {
+    const seal = await api.scry<string[]>(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
@@ -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<typeof PermissionsDialogInner> = {
@@ -32,6 +32,7 @@ export const Default: Story = {
   args: {
     appName: 'Some Cool App',
     passport: fakePassport,
+    presentableSeal: fakeSeal.split('\n'),
     onInstall: () => { },
   },
 };