Convert UI to Sandy

Summary:
With proper notification, components and code clean up in place, time for the reward and giving the plugin a fresh look.

Changelog: CrashReporter plugin got a fresh look and several navigation issues were addressed.

Reviewed By: passy

Differential Revision: D28102398

fbshipit-source-id: 5721634e45c5b1fc5fba3fb0c0b8970635b80b46

desktop/flipper-plugin/src/ui/Toolbar.tsx

@@ -25,12 +25,17 @@ export function Toolbar({
   children,
   style,
   wash,
+  right,
 }: {
   children?: React.ReactNode;
   position?: 'bottom' | 'top';
   compact?: boolean;
   wash?: boolean;
   style?: React.CSSProperties;
+  /**
+   * Additional children that are always right-aligned
+   */
+  right?: React.ReactNode;
 }) {
   return (
     <SandyToolbarContainer
@@ -39,6 +44,12 @@ export function Toolbar({
       center
       wash={wash}>
       {children}
+      {right ? (
+        <>
+          <div style={{flexGrow: 1}}></div>
+          {right}
+        </>
+      ) : null}
     </SandyToolbarContainer>
   );
 }

desktop/flipper-plugin/src/ui/data-table/DataSourceRenderer.tsx

@@ -321,7 +321,7 @@ export const DataSourceRenderer: <T extends object, C>(
 }) as any;
 
 const TableContainer = styled.div({
-  overflowY: 'scroll',
+  overflowY: 'auto',
   overflowX: 'hidden',
   display: 'flex',
   flex: 1,

desktop/flipper-plugin/src/ui/data-table/TableRow.tsx

@@ -120,7 +120,7 @@ export const TableRow = memo(function TableRow<T>({
         .filter((col) => col.visible)
         .map((col) => {
           const value = col.onRender
-            ? (col as any).onRender(record, highlighted, itemIndex) // TODO: ever used?
+            ? (col as any).onRender(record, highlighted, itemIndex)
             : DataFormatter.format((record as any)[col.key], col.formatters);
 
           return (