Show empty sidebar when no node is selected

Summary: ^

Reviewed By: LukeDefeo

Differential Revision: D41549165

fbshipit-source-id: 7f6324c8e04b8c7db3afe1e4cc5e1cbe0c023b7c

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -34,20 +34,6 @@ export function Component() {
 
   const {ctrlPressed} = useKeyboardModifiers();
 
-  function renderSidebar(
-    node: UINode | undefined,
-    metadata: Map<MetadataId, Metadata>,
-  ) {
-    if (!node) {
-      return;
-    }
-    return (
-      <DetailSidebar width={350}>
-        <Inspector metadata={metadata} node={node} />
-      </DetailSidebar>
-    );
-  }
-
   if (showPerfStats) return <PerfStats events={instance.perfEvents} />;
 
   if (rootId) {
@@ -74,8 +60,12 @@ export function Component() {
             onSelectNode={setSelectedNode}
             modifierPressed={ctrlPressed}
           />
-
+          <DetailSidebar width={350}>
-          {selectedNode && renderSidebar(nodes.get(selectedNode), metadata)}
+            <Inspector
+              metadata={metadata}
+              node={selectedNode ? nodes.get(selectedNode) : undefined}
+            />
+          </DetailSidebar>
         </Layout.Horizontal>
       </Layout.Container>
     );

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -14,15 +14,18 @@ import {Layout, Tab, Tabs} from 'flipper-plugin';
 import {Metadata, MetadataId, UINode} from '../../types';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
-import {DocumentationInspector} from './inspector/DocumentationInspector';
 import {Tooltip} from 'antd';
+import {NoData} from './inspector/NoData';
 
 type Props = {
-  node: UINode;
+  node?: UINode;
   metadata: Map<MetadataId, Metadata>;
 };
 
 export const Inspector: React.FC<Props> = ({node, metadata}) => {
+  if (!node) {
+    return <NoData message="Please select a node to view its details" />;
+  }
   return (
     <Layout.Container gap pad>
       <Tabs grow centered>

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -33,8 +33,8 @@ import {
   RowStyle,
   TextAttributeValueStyle,
 } from './Styles';
-import {Glyph} from 'flipper';
 import {transform} from '../../../dataTransform';
+import {NoData} from './NoData';
 
 const NumberValue = styled.span(NumberAttributeValueStyle);
 const BooleanValue = styled.span(BooleanAttributeValueStyle);
@@ -274,12 +274,7 @@ export const AttributesInspector: React.FC<Props> = ({
     .filter((section) => section !== undefined);
 
   if (sections.length === 0) {
-    return (
+    return <NoData message="No data available in this section" />;
-      <div style={{textAlign: 'center'}}>
-        <Glyph name="stop" size={24} style={{margin: 20}} />
-        <p>No data is available</p>
-      </div>
-    );
   }
 
   return (

desktop/plugins/public/ui-debugger/components/sidebar/inspector/NoData.tsx

@@ -0,0 +1,24 @@
+/**
+ * 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 React from 'react';
+// eslint-disable-next-line rulesdir/no-restricted-imports-clone
+import {Glyph} from 'flipper';
+
+type NoDataProps = {
+  message: string;
+};
+export const NoData: React.FC<NoDataProps> = ({message}) => {
+  return (
+    <div style={{textAlign: 'center'}}>
+      <Glyph name="stop" size={24} style={{margin: 20}} />
+      <p>{message}</p>
+    </div>
+  );
+};