Back out "Upgrade Prettier from 1.17 to 2.0.2."

Differential Revision: D20639755

fbshipit-source-id: 5028563f9cf0527a30b4259daac50cdc03934bfd

desktop/plugins/sections/DetailsPanel.js

@@ -64,7 +64,7 @@ export default class DetailsPanel extends Component<Props> {
             floating={false}
             heading={'Changesets'}>
             <MarkerTimeline
-              points={changeSets.map(p => ({
+              points={changeSets.map((p) => ({
                 label:
                   p.type === 'CHANGESET_GENERATED' ? 'Generated' : 'Rendered',
                 time: Math.round((p.timestamp || 0) - firstChangeSet),
@@ -72,9 +72,9 @@ export default class DetailsPanel extends Component<Props> {
                   p.type === 'CHANGESET_GENERATED' ? colors.lemon : colors.teal,
                 key: p.identifier,
               }))}
-              onClick={ids =>
+              onClick={(ids) =>
                 this.props.onFocusChangeSet(
-                  changeSets.find(c => c.identifier === ids[0]),
+                  changeSets.find((c) => c.identifier === ids[0]),
                 )
               }
               selected={this.props.focusedChangeSet?.identifier}

desktop/plugins/sections/EventsTable.js

@@ -29,7 +29,7 @@ const Container = styled(FlexRow)({
   flexGrow: 1,
 });
 
-const SurfaceContainer = styled(FlexColumn)(props => ({
+const SurfaceContainer = styled(FlexColumn)((props) => ({
   position: 'relative',
   '::after': {
     display: props.scrolled ? 'block' : 'none',
@@ -50,7 +50,7 @@ const TimeContainer = styled(FlexColumn)({
   flexShrink: 1,
 });
 
-const Row = styled(FlexRow)(props => ({
+const Row = styled(FlexRow)((props) => ({
   alignItems: 'center',
   paddingBottom: 3,
   marginTop: 3,
@@ -174,7 +174,7 @@ export default class extends Component<Props, State> {
     let nextGenerationId = null;
 
     const index = this.props.generations.findIndex(
-      g => g.id === this.props.focusedGenerationId,
+      (g) => g.id === this.props.focusedGenerationId,
     );
 
     const direction = e.key === 'ArrowRight' ? 1 : -1;
@@ -206,14 +206,14 @@ export default class extends Component<Props, State> {
     return (
       <Container>
         <SurfaceContainer scrolled={this.state.scrolled}>
-          {[...surfaces].map(surface => (
+          {[...surfaces].map((surface) => (
             <Row key={surface}>
               <Label title={surface}>{surface}</Label>
             </Row>
           ))}
         </SurfaceContainer>
         <TimeContainer onScroll={this.onScroll}>
-          {[...surfaces].map(surface => (
+          {[...surfaces].map((surface) => (
             <Row key={surface} showTimeline>
               {this.props.generations.map((record: TreeGeneration) =>
                 record.surface_key === surface ? (

desktop/plugins/sections/StackTrace.js

@@ -30,7 +30,7 @@ export default class extends React.Component<Props> {
     if (this.props.skipStackTraceFormat) {
       return (
         <StackTrace backgroundColor={colors.white}>
-          {this.props.data.map(stack_trace_line => {
+          {this.props.data.map((stack_trace_line) => {
             return {
               caller: stack_trace_line,
             };
@@ -43,10 +43,10 @@ export default class extends React.Component<Props> {
       <StackTrace backgroundColor={colors.white}>
         {/* We need to filter out from the stack trace any reference to the plugin such that the information is more coincised and focused */}
         {this.props.data
-          .filter(stack_trace_line => {
+          .filter((stack_trace_line) => {
             return !stack_trace_line.includes('FlipperKitSectionsPlugin');
           })
-          .map(stack_trace_line => {
+          .map((stack_trace_line) => {
             const trace = REGEX.exec(stack_trace_line)?.groups;
             return {
               bold: !isSystemLibrary(trace?.library),

desktop/plugins/sections/Tree.js

@@ -13,7 +13,7 @@ import {Glyph, PureComponent, styled, Toolbar, Spacer, colors} from 'flipper';
 import {Tree} from 'react-d3-tree';
 import {Fragment} from 'react';
 
-const Legend = styled.div(props => ({
+const Legend = styled.div((props) => ({
   color: colors.dark50,
   marginLeft: 20,
   '&::before': {
@@ -98,7 +98,7 @@ class NodeLabel extends PureComponent<Props, State> {
     collapsed: false,
   };
 
-  showNodeData = e => {
+  showNodeData = (e) => {
     e.stopPropagation();
     this.props.onLabelClicked(this.props?.nodeData);
   };
@@ -136,7 +136,7 @@ class NodeLabel extends PureComponent<Props, State> {
 
 export default class extends PureComponent<Props, State> {
   treeFromFlatArray = (data: TreeData) => {
-    const tree = data.map(n => {
+    const tree = data.map((n) => {
       let fill = colors.blueGreyTint70;
       if (n.didTriggerStateUpdate) {
         fill = colors.lemon;
@@ -184,12 +184,12 @@ export default class extends PureComponent<Props, State> {
       }
     }, new Map());
 
-    tree.forEach(n => {
+    tree.forEach((n) => {
       n.children = parentMap.get(n.attributes.identifier) || [];
     });
 
     // find the root node
-    return tree.find(node => !node.attributes.parent);
+    return tree.find((node) => !node.attributes.parent);
   };
 
   treeFromHierarchy = (data: SectionComponentHierarchy): Object => {
@@ -244,7 +244,7 @@ export default class extends PureComponent<Props, State> {
     return (
       <Fragment>
         <Container
-          innerRef={ref => {
+          innerRef={(ref) => {
             this.treeContainer = ref;
           }}>
           <style>

desktop/plugins/sections/index.js

@@ -35,7 +35,7 @@ import {
   DetailSidebar,
 } from 'flipper';
 
-const Waiting = styled(FlexBox)(props => ({
+const Waiting = styled(FlexBox)((props) => ({
   width: '100%',
   height: '100%',
   flexGrow: 1,
@@ -45,14 +45,14 @@ const Waiting = styled(FlexBox)(props => ({
   textAlign: 'center',
 }));
 
-const InfoText = styled.div(props => ({
+const InfoText = styled.div((props) => ({
   marginTop: 10,
   marginBottom: 10,
   fontWeight: '500',
   color: colors.light30,
 }));
 
-const InfoBox = styled.div(props => ({
+const InfoBox = styled.div((props) => ({
   maxWidth: 400,
   margin: 'auto',
   textAlign: 'center',