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/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 (
-      <div style={{textAlign: 'center'}}>
-        <Glyph name="stop" size={24} style={{margin: 20}} />
-        <p>No data is available</p>
-      </div>
-    );
+    return <NoData message="No data available in this section" />;
   }
 
   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>
+  );
+};