Fix shared preference plugin display

Summary:
There seems to be an issue showing a ManagedTable within a Panel. The component was properly
receiving new changes etc, it just wasn't displaying due to a 0 height (I guess).

This diff fixes that + updates the layout so its not cramped.

Reviewed By: passy

Differential Revision: D9393882

fbshipit-source-id: a35f2a298106c4b2a48883822ef997e8499f1eec

src/plugins/shared_preferences/index.js

@@ -5,7 +5,15 @@
  * @format
  */
 
-import {ManagedTable, Text, Panel, colors, FlexRow, DataInspector} from 'sonar';
+import {
+  ManagedTable,
+  Text,
+  Heading,
+  FlexColumn,
+  colors,
+  FlexRow,
+  DataInspector,
+} from 'sonar';
 import {SonarPlugin} from 'sonar';
 
 const {clone} = require('lodash');
@@ -39,14 +47,24 @@ const CHANGELOG_COLUMNS = {
 };
 
 const CHANGELOG_COLUMN_SIZES = {
-  event: '20%',
+  event: '30%',
-  name: '40%',
+  name: '30%',
-  value: '40%',
+  value: '30%',
 };
 
 const UPDATED_LABEL = <Text color={colors.lime}>Updated</Text>;
 const DELETED_LABEL = <Text color={colors.cherry}>Deleted</Text>;
 
+const InspectorColumn = FlexColumn.extends({
+  flexGrow: 0.2,
+  padding: '16px',
+});
+
+const ChangelogColumn = FlexColumn.extends({
+  flexGrow: 0.8,
+  padding: '16px',
+});
+
 export default class extends SonarPlugin<SharedPreferencesState> {
   static title = 'Shared Preferences Viewer';
   static id = 'Preferences';
@@ -124,16 +142,19 @@ export default class extends SonarPlugin<SharedPreferencesState> {
 
     return (
       <FlexRow fill={true} scrollable={true}>
-        <Panel heading="Inspector">
+        <InspectorColumn>
+          <Heading>Inspector</Heading>
           <DataInspector
             data={this.state.sharedPreferences}
             setValue={this.onSharedPreferencesChanged}
           />
-        </Panel>
+        </InspectorColumn>
-        <Panel heading="Changelog">
+        <ChangelogColumn>
+          <Heading>Changelog</Heading>
           <ManagedTable
             columnSizes={CHANGELOG_COLUMN_SIZES}
             columns={CHANGELOG_COLUMNS}
+            rowLineHeight={26}
             rows={this.state.changesList.map((element, index) => {
               return {
                 columns: {
@@ -152,7 +173,7 @@ export default class extends SonarPlugin<SharedPreferencesState> {
               };
             })}
           />
-        </Panel>
+        </ChangelogColumn>
       </FlexRow>
     );
   }