From ded9d863f017e48b16c68bfcd4280f4e5b8ba479 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Wed, 11 Sep 2019 03:01:18 -0700
Subject: [PATCH] MainSidebar

Summary: _typescript_

Reviewed By: jknoxville

Differential Revision: D17282353

fbshipit-source-id: 51c7a31dbbbc528952aa182f689f1f9862f10a38
---
 src/chrome/MainSidebar.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx
index b02e02a76..353c16df4 100644
--- a/src/chrome/MainSidebar.tsx
+++ b/src/chrome/MainSidebar.tsx
@@ -39,6 +39,7 @@ import {
   MAX_MINIMUM_PLUGINS,
   SHOW_REMAINING_PLUGIN_IF_LESS_THAN,
 } from '../Client';
+import {StyledOtherComponent} from 'create-emotion-styled';
 
 const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   paddingLeft: 10,
@@ -70,7 +71,7 @@ const SidebarHeader = styled(FlexBox)({
 });
 
 const PluginShape = styled(FlexBox)(
-  ({backgroundColor}: {backgroundColor: BackgroundColorProperty}) => ({
+  ({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
     marginRight: 5,
     backgroundColor,
     borderRadius: 3,
@@ -159,7 +160,7 @@ class PluginSidebarListItem extends Component<{
   render() {
     const {isActive, plugin} = this.props;
     const app = this.props.app || 'Facebook';
-    let iconColor = brandColors[app];
+    let iconColor: string | undefined = (brandColors as any)[app];
 
     if (!iconColor) {
       const pluginColors = [
@@ -195,7 +196,9 @@ const Spinner = centerInSidebar(LoadingIndicator);
 
 const ErrorIndicator = centerInSidebar(Glyph);
 
-function centerInSidebar(component) {
+function centerInSidebar(
+  component: StyledOtherComponent<any, {}, any> | React.ComponentType<any>,
+) {
   return styled(component)({
     marginTop: '10px',
     marginBottom: '10px',
@@ -224,9 +227,9 @@ type StateFromProps = {
 
 type DispatchFromProps = {
   selectPlugin: (payload: {
-    selectedPlugin: string | null | undefined;
-    selectedApp: string | null | undefined;
-    deepLinkPayload: string | null | undefined;
+    selectedPlugin: string | null;
+    selectedApp: string | null;
+    deepLinkPayload: string | null;
   }) => void;
 
   setActiveSheet: (activeSheet: ActiveSheet) => void;
@@ -253,8 +256,10 @@ class MainSidebar extends PureComponent<Props> {
       )
       .sort((a, b) => (a.query.app || '').localeCompare(b.query.app));
 
-    const byPluginNameOrId = (a, b) =>
-      (a.title || a.id) > (b.title || b.id) ? 1 : -1;
+    const byPluginNameOrId = (
+      a: typeof FlipperBasePlugin,
+      b: typeof FlipperBasePlugin,
+    ) => ((a.title || a.id) > (b.title || b.id) ? 1 : -1);
 
     return (
       <Sidebar