index

Summary:
This converts the index file to TypeScript which is used as an export for all plugins. Alongside, I had to fix a couple of errors in various files to make sure everything works correctly.

For plugins using flow, we define an interface which uses the type definition for FlipperPlugin and types all UI components as `any`.

Reviewed By: passy

Differential Revision: D16936890

fbshipit-source-id: dacd9a63a82b9f0bbb530b06072186874cba7b6f

src/NotificationsHub.tsx

@@ -78,13 +78,11 @@ export default class Notifications<
         defaultFilters={[
           ...blacklistedPlugins.map(value => ({
             value,
-            invertible: false,
             type: 'exclude',
             key: 'plugin',
           })),
           ...blacklistedCategories.map(value => ({
             value,
-            invertible: false,
             type: 'exclude',
             key: 'category',
           })),
@@ -103,7 +101,7 @@ type OwnProps = {
   onClear: () => void;
   selectedID: string | null | undefined;
   logger: Logger;
-} & SearchableProps;
+} & Partial<SearchableProps>;
 
 type StateFromProps = {
   activeNotifications: Array<PluginNotification>;
@@ -200,7 +198,6 @@ class NotificationsTable extends Component<Props, State> {
       value: pluginId,
       type: 'exclude',
       key: 'plugin',
-      invertible: false,
     });
     this.props.updatePluginBlacklist(
       this.props.blacklistedPlugins.concat(pluginId),
@@ -213,7 +210,6 @@ class NotificationsTable extends Component<Props, State> {
       value: category,
       type: 'exclude',
       key: 'category',
-      invertible: false,
     });
     this.props.updatePluginBlacklist(
       this.props.blacklistedCategories.concat(category),
@@ -379,7 +375,13 @@ const SEVERITY_COLOR_MAP = {
   error: colors.red,
 };
 
-const NotificationBox = styled(FlexRow)(props => ({
+type NotificationBoxProps = {
+  inactive?: boolean;
+  isSelected?: boolean;
+  severity: keyof typeof SEVERITY_COLOR_MAP;
+};
+
+const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
   backgroundColor: props.inactive ? 'transparent' : colors.white,
   opacity: props.inactive ? 0.5 : 1,
   alignItems: 'flex-start',
@@ -418,15 +420,17 @@ const Title = styled('div')({
   fontSize: '1.1em',
 });
 
-const NotificationContent = styled(FlexColumn)(props => ({
-  marginLeft: 6,
-  marginRight: 10,
-  flexGrow: 1,
-  overflow: 'hidden',
-  maxHeight: props.isSelected ? 'none' : 56,
-  lineHeight: 1.4,
-  color: props.isSelected ? colors.light50 : colors.light30,
-}));
+const NotificationContent = styled(FlexColumn)(
+  (props: {isSelected?: boolean}) => ({
+    marginLeft: 6,
+    marginRight: 10,
+    flexGrow: 1,
+    overflow: 'hidden',
+    maxHeight: props.isSelected ? 'none' : 56,
+    lineHeight: 1.4,
+    color: props.isSelected ? colors.light50 : colors.light30,
+  }),
+);
 
 const Actions = styled(FlexRow)({
   alignItems: 'center',
@@ -537,7 +541,7 @@ class NotificationItem extends Component<
     }
   };
 
-  reportNotUseful = (e: UIEvent) => {
+  reportNotUseful = (e: React.MouseEvent<any>) => {
     e.preventDefault();
     e.stopPropagation();
     if (this.props.logger) {
@@ -550,7 +554,7 @@ class NotificationItem extends Component<
     this.setState({reportedNotHelpful: true});
   };
 
-  onHide = (e: UIEvent) => {
+  onHide = (e: React.MouseEvent<any>) => {
     e.preventDefault();
     e.stopPropagation();
     if (this.props.onHideCategory) {
@@ -572,7 +576,7 @@ class NotificationItem extends Component<
     const {action} = notification;
 
     return (
-      <ContextMenu
+      <ContextMenu<React.ComponentProps<typeof NotificationBox>>
         data-role="notification"
         component={NotificationBox}
         severity={notification.severity}
@@ -617,16 +621,16 @@ class NotificationItem extends Component<
         {action && !inactive && !isSelected && (
           <FlexColumn style={{alignSelf: 'center'}}>
             {action && (
-              <NotificationButton compact onClick={this.openDeeplink}>
+              <NotificationButton onClick={this.openDeeplink}>
                 Open
               </NotificationButton>
             )}
             {this.state.reportedNotHelpful ? (
-              <NotificationButton compact onClick={this.onHide}>
+              <NotificationButton onClick={this.onHide}>
                 Hide
               </NotificationButton>
             ) : (
-              <NotificationButton compact onClick={this.reportNotUseful}>
+              <NotificationButton onClick={this.reportNotUseful}>
                 Not helpful
               </NotificationButton>
             )}