Bloks debugger state deeplink from UIDebugger

Summary:
This adds a deeplink into bloks debugger from uidebugger for state events

changelog: UIDebugger - show bloks state & deeplink to bloks debugger

Reviewed By: lblasa

Differential Revision: D51349212

fbshipit-source-id: 6f7ca826228ce11a01fe5eb197f6ce092d2757a9

desktop/plugins/public/ui-debugger/ClientTypes.tsx

@@ -228,6 +228,7 @@ export type Inspectable =
   | InspectableSize
   | InspectableBounds
   | InspectableSpaceBox
+  | InspectablePluginDeepLink
   | InspectableUnknown;
 
 export type InspectableText = {
@@ -285,6 +286,13 @@ export type InspectableObject = {
   fields: Record<MetadataId, Inspectable>;
 };
 
+export type InspectablePluginDeepLink = {
+  type: 'pluginDeeplink';
+  label?: string;
+  pluginId: string;
+  deeplinkPayload: unknown;
+};
+
 export type InspectableArray = {
   type: 'array';
   items: Inspectable[];

desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx

@@ -16,6 +16,7 @@ import {
   Layout,
   styled,
   useLocalStorageState,
+  usePlugin,
 } from 'flipper-plugin';
 import React, {useState} from 'react';
 import {
@@ -33,6 +34,9 @@ import {any} from 'lodash/fp';
 import {InspectableColor} from '../../ClientTypes';
 import {transformAny} from '../../utils/dataTransform';
 import {SearchOutlined} from '@ant-design/icons';
+import {plugin} from '../../index';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import {Glyph} from 'flipper';
 
 type ModalData = {
   data: unknown;
@@ -433,6 +437,7 @@ function AttributeValue({
   name: string;
   inspectable: Inspectable;
 }) {
+  const instance = usePlugin(plugin);
   switch (inspectable.type) {
     case 'boolean':
       return (
@@ -551,6 +556,39 @@ function AttributeValue({
           </span>
         </Button>
       );
+    case 'pluginDeeplink':
+      return (
+        <Button
+          size="small"
+          onClick={() => {
+            instance.client.selectPlugin(
+              inspectable.pluginId,
+              inspectable.deeplinkPayload,
+            );
+          }}
+          style={{
+            height: 26,
+            boxSizing: 'border-box',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          type="ghost">
+          <span
+            style={{
+              marginTop: 2,
+              fontFamily: 'monospace',
+              color: theme.textColorSecondary,
+              fontSize: 'small',
+            }}>
+            {inspectable.label}
+          </span>
+          <Glyph
+            style={{marginLeft: 8, marginBottom: 2}}
+            size={12}
+            name="share-external"
+          />
+        </Button>
+      );
   }
   return null;
 }

desktop/plugins/public/ui-debugger/index.tsx

@@ -297,6 +297,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
     metadata,
     perfEvents,
     os: client.device.os,
+    client,
   };
 }