persist favorites queries at localStorage. show parsed values from databases. (#738)

Summary:
on databases section, queries marked as "favorite", are not persisted. With this changes,  they will be saved at localStorage and persist from refresh.

Improves on parse json values from databases.

## Changelog
Pull Request resolved: https://github.com/facebook/flipper/pull/738

Reviewed By: mweststrate

Differential Revision: D19330218

Pulled By: passy

fbshipit-source-id: 673b2d0bbee9b3ef4544defaca0e3c5547a992a2

src/plugins/databases/index.js

@@ -212,6 +212,7 @@ type RefreshEvent = {
 
 type UpdateFavoritesEvent = {
   type: 'UpdateFavorites',
+  favorites: ?Array<string>,
 };
 
 type SortByChangedEvent = {
@@ -769,7 +770,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
         state: DatabasesPluginState,
         event: UpdateFavoritesEvent,
       ): DatabasesPluginState => {
-        let newFavorites = state.favorites;
+        let newFavorites = event.favorites || state.favorites;
         if (
           state.query &&
           state.query !== null &&
@@ -783,6 +784,10 @@ export default class DatabasesPlugin extends FlipperPlugin<
             newFavorites = state.favorites.concat(value);
           }
         }
+        window.localStorage.setItem(
+          'plugin-database-favorites-sql-queries',
+          JSON.stringify(newFavorites),
+        );
         return {
           ...state,
           favorites: newFavorites,
@@ -940,6 +945,12 @@ export default class DatabasesPlugin extends FlipperPlugin<
         databases,
       });
     });
+    this.dispatchAction({
+      type: 'UpdateFavorites',
+      favorites: JSON.parse(
+        localStorage.getItem('plugin-database-favorites-sql-queries') || '[]',
+      ),
+    });
   }
 
   onDataClicked = () => {
@@ -970,6 +981,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
   onFavoritesClicked = () => {
     this.dispatchAction({
       type: 'UpdateFavorites',
+      favorites: this.state.favorites,
     });
   };
 
@@ -1071,17 +1083,36 @@ export default class DatabasesPlugin extends FlipperPlugin<
   sidebarRows = (id: number, table: QueriedTable) => {
     const columns = table.columns;
     const row = table.rows[id];
+    if (columns.length === 1) {
       const sidebarArray = [];
-    for (let i = 0; i < columns.length; i++) {
+      // TODO(T60896483): Narrow the scope of this try/catch block.
+      try {
+        const parsed = JSON.parse(row.columns[columns[0]].value.props.children);
+        for (const key in parsed) {
           sidebarArray.push(
-        this.buildSidebarRow(columns[i], row.columns[columns[i]].value),
+            this.buildSidebarRow(key, {
+              props: {
+                children: parsed[key],
+              },
+            }),
+          );
+        }
+      } catch (e) {
+        sidebarArray.push(
+          this.buildSidebarRow(columns[0], row.columns[columns[0]].value),
         );
       }
       return sidebarArray;
+    } else {
+      return columns.map<Object>((column, i) =>
+        this.buildSidebarRow(columns[i], row.columns[columns[i]].value),
+      );
+    }
   };
 
   buildSidebarRow = (key: string, val: any) => {
     let output = '';
+    // TODO(T60896483): Narrow the scope of this try/catch block.
     try {
       const parsed = JSON.parse(val.props.children);
       for (const key in parsed) {
@@ -1089,7 +1120,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
           parsed[key] = JSON.parse(parsed[key]);
         } catch (err) {}
       }
-      output = <ManagedDataInspector data={parsed} expandRoot={true} />;
+      output = (
+        <ManagedDataInspector data={parsed} expandRoot={false} collapsed />
+      );
     } catch (error) {
       output = val;
     }