New sidebar design 1/n

Summary: Added basic infra basic types

Reviewed By: lblasa

Differential Revision: D50595985

fbshipit-source-id: 48ebd74bd8ccebdd8a6d69dbda344b8d831dc04f

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

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {ClientNode, MetadataId, Metadata} from '../../ClientTypes';
+import {plugin} from '../../index';
+import React, {ReactNode} from 'react';
+import {Layout, Tab, Tabs, usePlugin, useValue} from 'flipper-plugin';
+import {NoData} from '../sidebar/inspector/NoData';
+import {Tooltip} from 'antd';
+import {AttributesInspector} from './AttributesInspector';
+import {FrameworkEventsInspector} from '../sidebar/inspector/FrameworkEventsInspector';
+import {theme} from 'flipper-plugin';
+// eslint-disable-next-line rulesdir/no-restricted-imports-clone
+import {Glyph} from 'flipper';
+
+type Props = {
+  selectedNode?: ClientNode;
+  metadata: Map<MetadataId, Metadata>;
+  showBottomPanel: (title: string, element: ReactNode) => void;
+};
+export function SidebarV2({selectedNode, metadata, showBottomPanel}: Props) {
+  const instance = usePlugin(plugin);
+
+  const frameworkEventMetadata = useValue(instance.frameworkEventMetadata);
+
+  if (!selectedNode) {
+    return <NoData message="Please select a node to view its details" />;
+  }
+  const selectedFrameworkEvents = selectedNode.id
+    ? instance.frameworkEvents.getAllRecordsByIndex({nodeId: selectedNode.id})
+    : [];
+
+  return (
+    <Layout.Container gap pad>
+      <Tabs
+        localStorageKeyOverride="sidebar-tabs"
+        grow
+        centered
+        key={selectedNode.id}>
+        <Tab
+          tab={
+            <Tooltip title="Attributes">
+              <Layout.Horizontal center>
+                <Glyph name="data-table" size={16} color={theme.primaryColor} />
+              </Layout.Horizontal>
+            </Tooltip>
+          }>
+          <AttributesInspector node={selectedNode} metadata={metadata} />
+        </Tab>
+        {selectedFrameworkEvents?.length > 0 && (
+          <Tab
+            key={'events'}
+            tab={
+              <Tooltip title="Events">
+                <Layout.Horizontal center>
+                  <Glyph
+                    name="weather-thunder"
+                    size={16}
+                    color={theme.primaryColor}
+                  />
+                </Layout.Horizontal>
+              </Tooltip>
+            }>
+            <FrameworkEventsInspector
+              onSetViewMode={instance.uiActions.onSetViewMode}
+              frameworkEventMetadata={frameworkEventMetadata}
+              node={selectedNode}
+              events={selectedFrameworkEvents}
+              showBottomPanel={showBottomPanel}
+            />
+          </Tab>
+        )}
+      </Tabs>
+    </Layout.Container>
+  );
+}