feat: add Container Messages tab to dev panel (#384)

* restore trusted-author for StateAndTrust.Root * fix indent * dev panel tab for container messages * selection indicator * remove unused package * remove and ban console.log * feedback Co-authored-by: Pavel <[email protected]> * feedback --------- Co-authored-by: Pavel <[email protected]>
near · Mar 22, 2024 · 273954d · 273954d
1 parent 07226ef
commit 273954d
Show file tree

Hide file tree

Showing 11 changed files with 362 additions and 292 deletions.
diff --git a/apps/demos/src/StateAndTrust/Root.tsx b/apps/demos/src/StateAndTrust/Root.tsx
@@ -18,7 +18,7 @@ function StateAndTrust() {
         <div className={s.grid}>
           <TrustTree
             key="trusted"
-            bwe={{ trust: { mode: 'trusted' } }}
+            bwe={{ trust: { mode: 'trusted-author' } }}
             title="State across Trusted Components"
           />
           <TrustTree

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -29,6 +29,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
+    "react-json-tree": "^0.18.0",
     "react-syntax-highlighter": "^15.5.0",
     "uuid": "^9.0.0",
     "zustand": "^4.4.3"

diff --git a/apps/web/src/components/ComponentMonitor.tsx b/apps/web/src/components/ComponentMonitor.tsx
diff --git a/apps/web/src/components/Inspector.tsx b/apps/web/src/components/Inspector.tsx
@@ -6,8 +6,10 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import s from './Inspector.module.css';
 
+import { Messaging } from '@/components/Messaging';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { useComponentSourcesStore } from '@/stores/component-sources';
+import { useContainerMessagesStore } from '@/stores/container-messages';
 import { useFlagsStore } from '@/stores/flags';
 import { usePortalStore } from '@/stores/portal';
 
@@ -33,6 +35,10 @@ export function Inspector() {
     [componentSources]
   );
 
+  const containerMessages = useContainerMessagesStore(
+    (state) => state.messages
+  );
+
   // path of selected component, will need to be modified once we support version locking
   // since it will be possible to have multiple versions of the same component
   const [selectedComponent, setSelectedComponent] = useState<string>();
@@ -99,6 +105,7 @@ export function Inspector() {
       <Tabs.Root className={s.root} defaultValue="source">
         <Tabs.List className={s.tabsList}>
           <Tabs.Trigger value="source">Component Source</Tabs.Trigger>
+          <Tabs.Trigger value="messages">Container Messages</Tabs.Trigger>
           <Tabs.Trigger value="flags">Flags</Tabs.Trigger>
         </Tabs.List>
 
@@ -188,6 +195,10 @@ export function Inspector() {
           </div>
         </Tabs.Content>
 
+        <Tabs.Content value="messages">
+          <Messaging containerMessages={containerMessages} />
+        </Tabs.Content>
+
         <Tabs.Content value="flags">
           <div className={s.flagSet}>
             <form