prettier 2

Summary: Quick notes: - This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it. - Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before. - I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself. Close https://github.com/facebook/flipper/pull/915 Reviewed By: jknoxville Differential Revision: D20594929 fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
2020-03-24 09:34:39 -07:00
parent d9d3be33b4
commit fc9ed65762
204 changed files with 877 additions and 864 deletions
--- a/desktop/plugins/cpu/index.tsx
+++ b/desktop/plugins/cpu/index.tsx
@@ -185,7 +185,7 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
    return (this.device as AndroidDevice).adb
      .shell(this.device.serial, command)
      .then(adb.util.readAll)
-      .then(function(output: {toString: () => {trim: () => string}}) {
+      .then(function (output: {toString: () => {trim: () => string}}) {
        return callback(output.toString().trim());
      });
  };
@@ -664,7 +664,7 @@ export default class CPUFrequencyTable extends FlipperDevicePlugin<
            floating={false}
            zebra={true}
            rows={this.frequencyRows(this.state.cpuFreq)}
-            onRowHighlighted={selectedIds => {
+            onRowHighlighted={(selectedIds) => {
              this.setState({
                selectedIds: selectedIds.map(parseInt),
              });
--- a/desktop/plugins/crash_reporter/index.js
+++ b/desktop/plugins/crash_reporter/index.js
@@ -378,11 +378,11 @@ function addFileWatcherForiOSCrashLogs(
      return;
    }
    const filepath = path.join(dir, filename);
-    promisify(fs.exists)(filepath).then(exists => {
+    promisify(fs.exists)(filepath).then((exists) => {
      if (!exists) {
        return;
      }
-      fs.readFile(filepath, 'utf8', function(err, data) {
+      fs.readFile(filepath, 'utf8', function (err, data) {
        if (store.getState().connections.selectedDevice?.os != 'iOS') {
          // If the selected device is not iOS don't show crash notifications
          return;
@@ -572,7 +572,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
  static getActiveNotifications = (
    persistedState: PersistedState,
  ): Array<Notification> => {
-    const filteredCrashes = persistedState.crashes.filter(crash => {
+    const filteredCrashes = persistedState.crashes.filter((crash) => {
      const ignore = !crash.name && !crash.reason;
      const unknownCrashCause = crash.reason === UNKNOWN_CRASH_REASON;
      if (ignore || unknownCrashCause) {
@@ -619,7 +619,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
      addFileWatcherForiOSCrashLogs(store, setPersistedState);
    } else {
      const referenceDate = new Date();
-      (function(
+      (function (
        store: Store,
        date: Date,
        setPersistedState: (
@@ -679,7 +679,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
    let deeplinkedCrash = null;
    if (this.props.deepLinkPayload) {
      const id = this.props.deepLinkPayload;
-      const index = this.props.persistedState.crashes.findIndex(elem => {
+      const index = this.props.persistedState.crashes.findIndex((elem) => {
        return elem.notificationID === id;
      });
      if (index >= 0) {
@@ -714,18 +714,18 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
      );

      const orderedIDs = crashes.map(
-        persistedCrash => persistedCrash.notificationID,
+        (persistedCrash) => persistedCrash.notificationID,
      );
      const selectedCrashID = crash.notificationID;
-      const onCrashChange = id => {
+      const onCrashChange = (id) => {
        const newSelectedCrash = crashes.find(
-          element => element.notificationID === id,
+          (element) => element.notificationID === id,
        );
        this.setState({crash: newSelectedCrash});
      };

      const callstackString = crash.callstack || '';
-      const children = callstackString.split('\n').map(str => {
+      const children = callstackString.split('\n').map((str) => {
        return {message: str};
      });
      const crashSelector: CrashSelectorProps = {
@@ -767,7 +767,7 @@ export default class CrashReporterPlugin extends FlipperDevicePlugin<
                },
              ]}>
              <Line />
-              {children.map(child => {
+              {children.map((child) => {
                return (
                  <StackTraceComponent
                    key={child.message}
--- a/desktop/plugins/databases/ClientProtocol.js
+++ b/desktop/plugins/databases/ClientProtocol.js
@@ -9,7 +9,7 @@

 import type {PluginClient, Value} from 'flipper';

-type ClientCall<Params, Response> = Params => Promise<Response>;
+type ClientCall<Params, Response> = (Params) => Promise<Response>;

 type DatabaseListRequest = {};

@@ -78,24 +78,22 @@ export class DatabaseClient {
    this.client = pluginClient;
  }

-  getDatabases: ClientCall<
-    DatabaseListRequest,
-    DatabaseListResponse,
-  > = params => this.client.call('databaseList', {});
+  getDatabases: ClientCall<DatabaseListRequest, DatabaseListResponse> = (
+    params,
+  ) => this.client.call('databaseList', {});

-  getTableData: ClientCall<QueryTableRequest, QueryTableResponse> = params =>
+  getTableData: ClientCall<QueryTableRequest, QueryTableResponse> = (params) =>
    this.client.call('getTableData', params);

  getTableStructure: ClientCall<
    GetTableStructureRequest,
    GetTableStructureResponse,
-  > = params => this.client.call('getTableStructure', params);
+  > = (params) => this.client.call('getTableStructure', params);

-  getExecution: ClientCall<ExecuteSqlRequest, ExecuteSqlResponse> = params =>
+  getExecution: ClientCall<ExecuteSqlRequest, ExecuteSqlResponse> = (params) =>
    this.client.call('execute', params);

-  getTableInfo: ClientCall<
-    GetTableInfoRequest,
-    GetTableInfoResponse,
-  > = params => this.client.call('getTableInfo', params);
+  getTableInfo: ClientCall<GetTableInfoRequest, GetTableInfoResponse> = (
+    params,
+  ) => this.client.call('getTableInfo', params);
 }
--- a/desktop/plugins/databases/index.js
+++ b/desktop/plugins/databases/index.js
@@ -250,7 +250,7 @@ function renderTable(page: ?Page, component: DatabasesPlugin) {
    <ManagedTable
      tableKey={`databases-${page.databaseId}-${page.table}`}
      floating={false}
-      columnOrder={page.columns.map(name => ({
+      columnOrder={page.columns.map((name) => ({
        key: name,
        visible: true,
      }))}
@@ -281,7 +281,7 @@ function renderDatabaseColumns(structure: ?Structure) {
    <FlexRow grow={true}>
      <ManagedTable
        floating={false}
-        columnOrder={structure.columns.map(name => ({
+        columnOrder={structure.columns.map((name) => ({
          key: name,
          visible: true,
        }))}
@@ -305,7 +305,7 @@ function renderDatabaseIndexes(structure: ?Structure) {
    <FlexRow grow={true}>
      <ManagedTable
        floating={false}
-        columnOrder={structure.indexesColumns.map(name => ({
+        columnOrder={structure.indexesColumns.map((name) => ({
          key: name,
          visible: true,
        }))}
@@ -401,8 +401,9 @@ class PageInfo extends Component<
        <Text>
          {this.props.count === this.props.totalRows
            ? `${this.props.count} `
-            : `${this.props.currentRow + 1}-${this.props.currentRow +
-                this.props.count} `}
+            : `${this.props.currentRow + 1}-${
+                this.props.currentRow + this.props.count
+              } `}
          of {this.props.totalRows} rows
        </Text>
        <div style={{flex: 1}} />
@@ -685,7 +686,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
              databaseId: state.selectedDatabase,
              value: this.state.query.value,
            })
-            .then(data => {
+            .then((data) => {
              this.setState({
                error: null,
                executionTime: Date.now() - timeBefore,
@@ -708,7 +709,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
                });
              }
            })
-            .catch(e => {
+            .catch((e) => {
              this.setState({error: e});
            });
        }
@@ -863,7 +864,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
          table: table,
          start: newState.pageRowNumber,
        })
-        .then(data => {
+        .then((data) => {
          this.dispatchAction({
            type: 'UpdatePage',
            databaseId: databaseId,
@@ -875,7 +876,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
            total: data.total,
          });
        })
-        .catch(e => {
+        .catch((e) => {
          this.setState({error: e});
        });
    }
@@ -890,7 +891,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
          databaseId: databaseId,
          table: table,
        })
-        .then(data => {
+        .then((data) => {
          this.dispatchAction({
            type: 'UpdateStructure',
            databaseId: databaseId,
@@ -901,7 +902,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
            indexesValues: data.indexesValues,
          });
        })
-        .catch(e => {
+        .catch((e) => {
          this.setState({error: e});
        });
    }
@@ -916,19 +917,19 @@ export default class DatabasesPlugin extends FlipperPlugin<
          databaseId: databaseId,
          table: table,
        })
-        .then(data => {
+        .then((data) => {
          this.dispatchAction({
            type: 'UpdateTableInfo',
            tableInfo: data.definition,
          });
        })
-        .catch(e => {
+        .catch((e) => {
          this.setState({error: e});
        });
    }

    if (!previousState.outdatedDatabaseList && newState.outdatedDatabaseList) {
-      this.databaseClient.getDatabases({}).then(databases => {
+      this.databaseClient.getDatabases({}).then((databases) => {
        this.dispatchAction({
          type: 'UpdateDatabases',
          databases,
@@ -939,7 +940,7 @@ export default class DatabasesPlugin extends FlipperPlugin<

  init() {
    this.databaseClient = new DatabaseClient(this.client);
-    this.databaseClient.getDatabases({}).then(databases => {
+    this.databaseClient.getDatabases({}).then((databases) => {
      this.dispatchAction({
        type: 'UpdateDatabases',
        databases,
@@ -986,7 +987,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
  };

  onDatabaseSelected = (selected: string) => {
-    const dbId = this.state.databases.find(x => x.name === selected)?.id || 0;
+    const dbId = this.state.databases.find((x) => x.name === selected)?.id || 0;
    this.dispatchAction({
      database: dbId,
      type: 'UpdateSelectedDatabase',
@@ -1163,7 +1164,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
          <ManagedTable
            floating={false}
            multiline={true}
-            columnOrder={columns.map(name => ({
+            columnOrder={columns.map((name) => ({
              key: name,
              visible: true,
            }))}
@@ -1174,7 +1175,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
            zebra={true}
            rows={rows}
            horizontallyScrollable={true}
-            onRowHighlighted={highlightedRows => {
+            onRowHighlighted={(highlightedRows) => {
              this.setState({
                queryResult: {
                  table: {
@@ -1266,7 +1267,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
            <BoldSpan style={{marginRight: 16}}>Database</BoldSpan>
            <Select
              options={this.state.databases
-                .map(x => x.name)
+                .map((x) => x.name)
                .reduce((obj, item) => {
                  obj[item] = item;
                  return obj;
@@ -1292,7 +1293,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
              <BoldSpan style={{marginRight: 16}}>Database</BoldSpan>
              <Select
                options={this.state.databases
-                  .map(x => x.name)
+                  .map((x) => x.name)
                  .reduce((obj, item) => {
                    obj[item] = item;
                    return obj;
@@ -1342,7 +1343,7 @@ export default class DatabasesPlugin extends FlipperPlugin<
                />
                {this.state.favorites !== null ? (
                  <Button
-                    dropdown={this.state.favorites.map(option => {
+                    dropdown={this.state.favorites.map((option) => {
                      return {
                        click: () => {
                          this.setState({
--- a/desktop/plugins/example/index.tsx
+++ b/desktop/plugins/example/index.tsx
@@ -102,7 +102,7 @@ export default class Example extends FlipperPlugin<State, any, PersistedState> {
        <Text>{this.state.prompt}</Text>
        <Input
          placeholder="Message"
-          onChange={event => {
+          onChange={(event) => {
            this.setState({message: event.target.value});
          }}
        />
--- a/desktop/plugins/fresco/ImagesCacheOverview.tsx
+++ b/desktop/plugins/fresco/ImagesCacheOverview.tsx
@@ -94,7 +94,7 @@ type ImagesCacheOverviewState = {
  size: number;
 };

-const StyledSelect = styled(Select)(props => ({
+const StyledSelect = styled(Select)((props) => ({
  marginLeft: 6,
  marginRight: 6,
  height: '100%',
@@ -307,7 +307,7 @@ class ImageGrid extends PureComponent<{
        onClear={this.props.onClear}
      />,
      <ImageGrid.Content key="content">
-        {images.map(imageId => (
+        {images.map((imageId) => (
          <ImageItem
            imageId={imageId}
            image={this.props.imagesMap[imageId]}
@@ -316,7 +316,8 @@ class ImageGrid extends PureComponent<{
            onSelected={onImageSelected}
            size={this.props.size}
            numberOfRequests={
-              this.props.events.filter(e => e.imageIds.includes(imageId)).length
+              this.props.events.filter((e) => e.imageIds.includes(imageId))
+                .length
            }
          />
        ))}
@@ -392,7 +393,7 @@ class ImageItem extends PureComponent<{
  size: number;
  numberOfRequests: number;
 }> {
-  static Container = styled(FlexBox)<{size: number}>(props => ({
+  static Container = styled(FlexBox)<{size: number}>((props) => ({
    float: 'left',
    alignItems: 'center',
    justifyContent: 'center',
@@ -416,7 +417,7 @@ class ImageItem extends PureComponent<{
    padding: '0 0',
  });

-  static SelectedHighlight = styled.div<{selected: boolean}>(props => ({
+  static SelectedHighlight = styled.div<{selected: boolean}>((props) => ({
    borderColor: colors.highlight,
    borderStyle: 'solid',
    borderWidth: props.selected ? 3 : 0,
@@ -430,7 +431,7 @@ class ImageItem extends PureComponent<{
  }));

  static HoverOverlay = styled(FlexColumn)<{selected: boolean; size: number}>(
-    props => ({
+    (props) => ({
      alignItems: 'center',
      backgroundColor: colors.whiteAlpha80,
      bottom: props.selected ? 4 : 0,
--- a/desktop/plugins/fresco/ImagesSidebar.tsx
+++ b/desktop/plugins/fresco/ImagesSidebar.tsx
@@ -47,7 +47,7 @@ export default class ImagesSidebar extends Component<
    return (
      <div>
        {this.renderUri()}
-        {this.props.events.map(e => (
+        {this.props.events.map((e) => (
          <EventDetails key={e.eventId} event={e} />
        ))}
      </div>
@@ -115,7 +115,7 @@ class EventDetails extends Component<{
          <DataDescription
            type="number"
            value={event.startTime}
-            setValue={function(path: Array<string>, val: any) {}}
+            setValue={function (path: Array<string>, val: any) {}}
          />
        </p>
        <p>
@@ -124,7 +124,7 @@ class EventDetails extends Component<{
          <DataDescription
            type="number"
            value={event.endTime}
-            setValue={function(path: Array<string>, val: any) {}}
+            setValue={function (path: Array<string>, val: any) {}}
          />
        </p>
        <p>
@@ -133,7 +133,7 @@ class EventDetails extends Component<{
          <DataDescription
            type="string"
            value={event.source}
-            setValue={function(path: Array<string>, val: any) {}}
+            setValue={function (path: Array<string>, val: any) {}}
          />
        </p>
        <p>
@@ -162,7 +162,7 @@ class EventDetails extends Component<{
        <DataDescription
          type="string"
          value={viewport.width + 'x' + viewport.height}
-          setValue={function(path: Array<string>, val: any) {}}
+          setValue={function (path: Array<string>, val: any) {}}
        />
      </p>
    );
--- a/desktop/plugins/fresco/MultipleSelect.tsx
+++ b/desktop/plugins/fresco/MultipleSelect.tsx
@@ -15,7 +15,7 @@ const Container = styled(Block)({
  marginLeft: '10px',
 });

-const List = styled(FlexColumn)<{visibleList: boolean}>(props => ({
+const List = styled(FlexColumn)<{visibleList: boolean}>((props) => ({
  display: props.visibleList ? 'flex' : 'none',
  position: 'absolute',
  top: '32px',
--- a/desktop/plugins/fresco/index.tsx
+++ b/desktop/plugins/fresco/index.tsx
@@ -145,7 +145,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
        };
      });
      const idSet: Set<string> = levels.reduce((acc, level: CacheInfo) => {
-        level.imageIds.forEach(id => {
+        level.imageIds.forEach((id) => {
          acc.add(id);
        });
        return acc;
@@ -243,7 +243,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
    isLeakTrackingEnabled = false,
  }: PersistedState): Array<Notification> =>
    closeableReferenceLeaks
-      .filter(_ => isLeakTrackingEnabled)
+      .filter((_) => isLeakTrackingEnabled)
      .map((event: AndroidCloseableReferenceLeakEvent) => ({
        id: event.identityHashCode,
        title: `Leaked CloseableReference: ${event.className}`,
@@ -288,7 +288,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
    }

    const imageList = images.map((image: CacheInfo) => {
-      const imageIdList = image.imageIds.filter(imageID => {
+      const imageIdList = image.imageIds.filter((imageID) => {
        const filteredEvents = events.filter((event: ImageEventWithId) => {
          const output =
            event.attribution &&
@@ -361,7 +361,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
  updateCaches = (reason: string) => {
    debugLog('Requesting images list (reason=' + reason + ')');
    this.client.call('listImages').then((response: ImagesListResponse) => {
-      response.levels.forEach(data =>
+      response.levels.forEach((data) =>
        this.imagePool ? this.imagePool.fetchImages(data.imageIds) : undefined,
      );
      this.props.setPersistedState({images: response.levels});
@@ -426,7 +426,7 @@ export default class FlipperImagesPlugin extends FlipperPlugin<
    }

    const maybeImage = this.props.persistedState.imagesMap[selectedImage];
-    const events = this.props.persistedState.events.filter(e =>
+    const events = this.props.persistedState.events.filter((e) =>
      e.imageIds.includes(selectedImage),
    );
    return <ImagesSidebar image={maybeImage} events={events} />;
--- a/desktop/plugins/kaios-allocations/index.tsx
+++ b/desktop/plugins/kaios-allocations/index.tsx
@@ -32,11 +32,11 @@ import extend from 'firefox-client/lib/extend';
 // This uses legacy `extend` from `firefox-client`, since this seems to be what the implementation expects
 // It's probably possible to rewrite this in a modern way and properly type it, but for now leaving this as it is
 const ClientMethods: any = extend(BaseClientMethods, {
-  initialize: function(client: any, actor: any) {
+  initialize: function (client: any, actor: any) {
    this.client = client;
    this.actor = actor;

-    this.cb = function(this: typeof ClientMethods, message: any) {
+    this.cb = function (this: typeof ClientMethods, message: any) {
      if (message.from === this.actor) {
        this.emit(message.type, message);
      }
@@ -45,7 +45,7 @@ const ClientMethods: any = extend(BaseClientMethods, {
    this.client.on('message', this.cb);
  },

-  disconnect: function() {
+  disconnect: function () {
    this.client.removeListener('message', this.cb);
  },
 });
@@ -57,32 +57,32 @@ function Memory(this: typeof ClientMethods, client: any, actor: any): any {
 // Repetitive, it is probably better to refactor this
 // to use API like `runCommand(commandName, params): Promise`
 Memory.prototype = extend(ClientMethods, {
-  attach: function(cb: any) {
-    this.request('attach', function(err: any, resp: any) {
+  attach: function (cb: any) {
+    this.request('attach', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  getState: function(cb: any) {
-    this.request('getState', function(err: any, resp: any) {
+  getState: function (cb: any) {
+    this.request('getState', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  takeCensus: function(cb: any) {
-    this.request('takeCensus', function(err: any, resp: any) {
+  takeCensus: function (cb: any) {
+    this.request('takeCensus', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  getAllocations: function(cb: any) {
-    this.request('getAllocations', function(err: any, resp: any) {
+  getAllocations: function (cb: any) {
+    this.request('getAllocations', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  startRecordingAllocations: function(options: any, cb: any) {
-    this.request('startRecordingAllocations', {options}, function(
+  startRecordingAllocations: function (options: any, cb: any) {
+    this.request('startRecordingAllocations', {options}, function (
      err: any,
      resp: any,
    ) {
@@ -90,20 +90,20 @@ Memory.prototype = extend(ClientMethods, {
    });
  },

-  stopRecordingAllocations: function(cb: any) {
-    this.request('stopRecordingAllocations', function(err: any, resp: any) {
+  stopRecordingAllocations: function (cb: any) {
+    this.request('stopRecordingAllocations', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  measure: function(cb: any) {
-    this.request('measure', function(err: any, resp: any) {
+  measure: function (cb: any) {
+    this.request('measure', function (err: any, resp: any) {
      cb(err, resp);
    });
  },

-  getAllocationsSettings: function(cb: any) {
-    this.request('getAllocationsSettings', function(err: any, resp: any) {
+  getAllocationsSettings: function (cb: any) {
+    this.request('getAllocationsSettings', function (err: any, resp: any) {
      cb(err, resp);
    });
  },
@@ -338,7 +338,7 @@ export default class AllocationsPlugin extends FlipperDevicePlugin<
  };

  buildMemRows = () => {
-    return this.state.allocationData.map(info => {
+    return this.state.allocationData.map((info) => {
      return {
        columns: {
          timestamp: {
--- a/desktop/plugins/kaios-ram/index.tsx
+++ b/desktop/plugins/kaios-ram/index.tsx
@@ -120,14 +120,14 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
    return (this.device as KaiOSDevice).adb
      .shell(this.device.serial, command)
      .then(adb.util.readAll)
-      .then(output => {
+      .then((output) => {
        return output.toString().trim();
      });
  };

  getMemory = () => {
-    return this.executeShell('b2g-info').then(output => {
-      const lines = output.split('\n').map(line => line.trim());
+    return this.executeShell('b2g-info').then((output) => {
+      const lines = output.split('\n').map((line) => line.trim());
      let freeMem = null;
      for (const line of lines) {
        // TODO: regex validation
@@ -161,7 +161,7 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
          const restOfTheFields = fields.slice(-appInfoSectionFieldsCount + 1);
          fields = [name, ...restOfTheFields];
          if (
-            EXCLUDE_PROCESS_NAME_SUBSTRINGS.some(excludeSubstr =>
+            EXCLUDE_PROCESS_NAME_SUBSTRINGS.some((excludeSubstr) =>
              name.includes(excludeSubstr),
            )
          ) {
@@ -216,7 +216,7 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
  updateFreeMem = () => {
    // This can be improved by using immutable.js
    // If more points are necessary
-    return this.getMemory().then(point => {
+    return this.getMemory().then((point) => {
      const points = [...this.state.points.slice(-MAX_POINTS + 1), point];
      const colors = this.getColors(point);
      let newState = {};
@@ -261,7 +261,7 @@ export default class KaiOSGraphs extends FlipperDevicePlugin<State, any, any> {
            <LineChart data={pointsToDraw}>
              <XAxis type="number" domain={[0, MAX_POINTS]} dataKey="idx" />
              <YAxis type="number" domain={[0, Y_AXIS_EXPECTED_MAX_MEM]} />
-              {names.map(name => (
+              {names.map((name) => (
                <Line
                  key={`line-${name}`}
                  type="linear"
--- a/desktop/plugins/layout/Inspector.tsx
+++ b/desktop/plugins/layout/Inspector.tsx
@@ -78,7 +78,7 @@ export default class Inspector extends Component<Props> {
    const elements: Array<Element> = Object.values(
      this.props.persistedState.AXelements,
    );
-    const focusedElement = elements.find(i =>
+    const focusedElement = elements.find((i) =>
      Boolean(
        i.data.Accessibility && i.data.Accessibility['accessibility-focused'],
      ),
@@ -115,7 +115,7 @@ export default class Inspector extends Component<Props> {
        nodes: Array<{id: ElementID; children: Array<ElementID>}>;
      }) => {
        const ids = nodes
-          .map(n => [n.id, ...(n.children || [])])
+          .map((n) => [n.id, ...(n.children || [])])
          .reduce((acc, cv) => acc.concat(cv), []);
        this.invalidate(ids);
      },
@@ -279,7 +279,7 @@ export default class Inspector extends Component<Props> {
          selected: false,
        },
      );
-      elements.forEach(e => this.updateElement(e.id, e));
+      elements.forEach((e) => this.updateElement(e.id, e));
      return elements;
    } else {
      return [];
@@ -287,7 +287,7 @@ export default class Inspector extends Component<Props> {
  }

  async getAndExpandPath(path: Array<ElementID>) {
-    await Promise.all(path.map(id => this.getChildren(id, {})));
+    await Promise.all(path.map((id) => this.getChildren(id, {})));
    this.onElementSelected(path[path.length - 1]);
  }

@@ -312,9 +312,9 @@ export default class Inspector extends Component<Props> {
    if (shouldExpand) {
      this.updateElement(id, {expanded: shouldExpand});
    }
-    this.getChildren(id, {}).then(children => {
+    this.getChildren(id, {}).then((children) => {
      if (deep) {
-        children.forEach(child =>
+        children.forEach((child) =>
          this.onElementExpanded(child.id, deep, shouldExpand),
        );
      }
--- a/desktop/plugins/layout/InspectorSidebar.tsx
+++ b/desktop/plugins/layout/InspectorSidebar.tsx
@@ -148,12 +148,12 @@ const Sidebar: React.FC<Props> = (props: Props) => {

  const sections: Array<React.ReactNode> = (
    (SidebarExtensions &&
-      SidebarExtensions.map(ext =>
+      SidebarExtensions.map((ext) =>
        ext(props.client, props.realClient, element.id, props.logger),
      )) ||
    []
  ).concat(
-    sectionDefs.map(def => (
+    sectionDefs.map((def) => (
      <InspectorSidebarSection
        tooltips={props.tooltips}
        key={def.key}
@@ -165,7 +165,7 @@ const Sidebar: React.FC<Props> = (props: Props) => {
  );

  useEffect(() => {
-    sectionKeys.map(key =>
+    sectionKeys.map((key) =>
      props.logger.track('usage', `layout-sidebar-extension:${key}:loaded`),
    );
  }, [props.element?.data]);
--- a/desktop/plugins/layout/Search.tsx
+++ b/desktop/plugins/layout/Search.tsx
@@ -99,7 +99,7 @@ export default class Search extends Component<Props, State> {
    } else {
      this.props.client
        .call('getSearchResults', {query, axEnabled: this.props.inAXMode})
-        .then(response =>
+        .then((response) =>
          this.displaySearchResults(response, this.props.inAXMode),
        );
    }
@@ -123,14 +123,14 @@ export default class Search extends Component<Props, State> {
    });

    const searchResults = this.getElementsFromSearchResultTree(results);
-    const searchResultIDs = new Set(searchResults.map(r => r.element.id));
+    const searchResultIDs = new Set(searchResults.map((r) => r.element.id));
    const elements: ElementMap = searchResults.reduce(
      (acc: ElementMap, {element}: SearchResultTree) => ({
        ...acc,
        [element.id]: {
          ...element,
          // expand all search results, that we have have children for
-          expanded: element.children.some(c => searchResultIDs.has(c)),
+          expanded: element.children.some((c) => searchResultIDs.has(c)),
        },
      }),
      this.props.persistedState.elements,
@@ -148,7 +148,7 @@ export default class Search extends Component<Props, State> {
            [axElement.id]: {
              ...axElement,
              // expand all search results, that we have have children for
-              expanded: axElement.children.some(c => searchResultIDs.has(c)),
+              expanded: axElement.children.some((c) => searchResultIDs.has(c)),
            },
          };
        },
@@ -160,7 +160,7 @@ export default class Search extends Component<Props, State> {

    this.props.onSearchResults({
      matches: new Set(
-        searchResults.filter(x => x.isMatch).map(x => x.element.id),
+        searchResults.filter((x) => x.isMatch).map((x) => x.element.id),
      ),
      query: query,
    });
--- a/desktop/plugins/layout/ToolbarIcon.tsx
+++ b/desktop/plugins/layout/ToolbarIcon.tsx
@@ -24,7 +24,7 @@ const ToolbarIcon = styled.div({
  position: 'relative', // for settings popover positioning
 });

-export default function(props: Props) {
+export default function (props: Props) {
  return (
    <ToolbarIcon onClick={props.onClick} title={props.title}>
      <Glyph
--- a/desktop/plugins/layout/index.tsx
+++ b/desktop/plugins/layout/index.tsx
@@ -177,16 +177,16 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {

    if (this.props.isArchivedDevice) {
      this.getDevice()
-        .then(d => {
+        .then((d) => {
          const handle = (d as ArchivedDevice).getArchivedScreenshotHandle();
          if (!handle) {
            throw new Error('No screenshot attached.');
          }
          return handle;
        })
-        .then(handle => getFlipperMediaCDN(handle, 'Image'))
-        .then(url => this.setState({visualizerScreenshot: url}))
-        .catch(_ => {
+        .then((handle) => getFlipperMediaCDN(handle, 'Image'))
+        .then((url) => this.setState({visualizerScreenshot: url}))
+        .catch((_) => {
          // Not all exports have screenshots. This is ok.
        });
    }
@@ -332,7 +332,7 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
    const inspector = (
      <Inspector
        {...inspectorProps}
-        onSelect={selectedElement => this.setState({selectedElement})}
+        onSelect={(selectedElement) => this.setState({selectedElement})}
        showsSidebar={!this.state.inAXMode}
      />
    );
@@ -340,7 +340,7 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
    const axInspector = this.state.inAXMode && (
      <Inspector
        {...inspectorProps}
-        onSelect={selectedAXElement => this.setState({selectedAXElement})}
+        onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
        showsSidebar={true}
        ax
      />
@@ -395,7 +395,7 @@ export default class Layout extends FlipperPlugin<State, any, PersistedState> {
                client={this.getClient()}
                setPersistedState={this.props.setPersistedState}
                persistedState={this.props.persistedState}
-                onSearchResults={searchResults =>
+                onSearchResults={(searchResults) =>
                  this.setState({searchResults})
                }
                inAXMode={this.state.inAXMode}
--- a/desktop/plugins/leak_canary/index.tsx
+++ b/desktop/plugins/leak_canary/index.tsx
@@ -193,7 +193,7 @@ export default class LeakCanary<PersistedState> extends FlipperPlugin<
                  floating={false}
                  accessory={leak.retainedSize}>
                  <ElementsInspector
-                    onElementSelected={eid => {
+                    onElementSelected={(eid) => {
                      this._selectElement(idx, eid);
                    }}
                    onElementHovered={() => {}}
--- a/desktop/plugins/logs/index.tsx
+++ b/desktop/plugins/logs/index.tsx
@@ -209,7 +209,7 @@ const LOG_TYPES: {
 const DEFAULT_FILTERS = [
  {
    type: 'enum',
-    enum: Object.keys(LOG_TYPES).map(value => ({
+    enum: Object.keys(LOG_TYPES).map((value) => ({
      label: LOG_TYPES[value].label,
      value,
    })),
@@ -474,14 +474,14 @@ export default class LogTable extends FlipperDevicePlugin<
    const supportedColumns = this.device.supportedColumns();
    this.columns = keepKeys(COLUMNS, supportedColumns);
    this.columnSizes = keepKeys(COLUMN_SIZE, supportedColumns);
-    this.columnOrder = INITIAL_COLUMN_ORDER.filter(obj =>
+    this.columnOrder = INITIAL_COLUMN_ORDER.filter((obj) =>
      supportedColumns.includes(obj.key),
    );

    const initialState = addEntriesToState(
      this.device
        .getLogs()
-        .map(log => processEntry(log, String(this.counter++))),
+        .map((log) => processEntry(log, String(this.counter++))),
      this.state,
    );
    this.state = {
@@ -502,7 +502,7 @@ export default class LogTable extends FlipperDevicePlugin<

  incrementCounterIfNeeded = (entry: DeviceLogEntry) => {
    let counterUpdated = false;
-    const counters = this.state.counters.map(counter => {
+    const counters = this.state.counters.map((counter) => {
      if (entry.message.match(counter.expression)) {
        counterUpdated = true;
        if (counter.notify) {
@@ -539,7 +539,7 @@ export default class LogTable extends FlipperDevicePlugin<
        const thisBatch = this.batch;
        this.batch = [];
        this.queued = false;
-        this.setState(state => addEntriesToState(thisBatch, state));
+        this.setState((state) => addEntriesToState(thisBatch, state));
      }, 100);
    }
  };
@@ -555,7 +555,7 @@ export default class LogTable extends FlipperDevicePlugin<
  }

  clearLogs = () => {
-    this.device.clearLogs().catch(e => {
+    this.device.clearLogs().catch((e) => {
      console.error('Failed to clear logs: ', e);
    });
    this.setState({
@@ -563,7 +563,7 @@ export default class LogTable extends FlipperDevicePlugin<
      rows: [],
      highlightedRows: new Set(),
      key2entry: {},
-      counters: this.state.counters.map(counter => ({
+      counters: this.state.counters.map((counter) => ({
        ...counter,
        count: 0,
      })),
@@ -574,13 +574,13 @@ export default class LogTable extends FlipperDevicePlugin<
    let paste = '';
    const mapFn = (row: TableBodyRow) =>
      Object.keys(COLUMNS)
-        .map(key => textContent(row.columns[key].value))
+        .map((key) => textContent(row.columns[key].value))
        .join('\t');

    if (this.state.highlightedRows.size > 0) {
      // create paste from selection
      paste = this.state.rows
-        .filter(row => this.state.highlightedRows.has(row.key))
+        .filter((row) => this.state.highlightedRows.has(row.key))
        .map(mapFn)
        .join('\n');
    } else {
@@ -611,7 +611,7 @@ export default class LogTable extends FlipperDevicePlugin<
    return (
      <LogWatcher
        counters={this.state.counters}
-        onChange={counters =>
+        onChange={(counters) =>
          this.setState({counters}, () =>
            window.localStorage.setItem(
              LOG_WATCHER_LOCAL_STORAGE_KEY,
--- a/desktop/plugins/navigation/tests/testAutoCompleteSearch.node.tsx
+++ b/desktop/plugins/navigation/tests/testAutoCompleteSearch.node.tsx
@@ -18,7 +18,7 @@ const stringCombination = (patterns: Array<string>, k: number) => {
  const returnArr: Array<string> = new Array(0);
  const args = new Array(k).fill(0).map((_, idx) => idx);
  (function build(args) {
-    const pattern = args.map(i => patterns[i]).join('');
+    const pattern = args.map((i) => patterns[i]).join('');
    returnArr.push(pattern);
    if (args[args.length - 1] < n - 1) {
      for (let i = args.length - 1; i >= 0; i--) {
@@ -55,7 +55,7 @@ const constructMatchPatterns: () => Map<string, URI> = () => {
    'yzyzyzyzyzyzyzyzyzyzyzyzy',
  ];

-  stringCombination(patterns, NUM_PATERNS_PER_ENTRY).forEach(pattern =>
+  stringCombination(patterns, NUM_PATERNS_PER_ENTRY).forEach((pattern) =>
    matchPatterns.set(pattern, pattern),
  );

--- a/desktop/plugins/navigation/components/IconButton.tsx
+++ b/desktop/plugins/navigation/components/IconButton.tsx
@@ -49,7 +49,7 @@ const IconButton = styled.div({
  },
 });

-export default function(props: Props) {
+export default function (props: Props) {
  return (
    <RippleEffect>
      <IconButton className="icon-button" onClick={props.onClick}>
--- a/desktop/plugins/navigation/components/Timeline.tsx
+++ b/desktop/plugins/navigation/components/Timeline.tsx
@@ -76,7 +76,7 @@ export default (props: Props) => {
                }
                className={event.className}
                uri={event.uri}
-                onNavigate={uri => {
+                onNavigate={(uri) => {
                  if (timelineRef.current != null) {
                    timelineRef.current.scrollTo(0, 0);
                  }
--- a/desktop/plugins/navigation/index.tsx
+++ b/desktop/plugins/navigation/index.tsx
@@ -106,7 +106,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
    const {selectedApp} = this.props;
    this.subscribeToNavigationEvents();
    this.getDevice()
-      .then(device => getAppMatchPatterns(selectedApp, device))
+      .then((device) => getAppMatchPatterns(selectedApp, device))
      .then((patterns: Array<AppMatchPattern>) => {
        this.props.setPersistedState({
          appMatchPatterns: patterns,
@@ -118,7 +118,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
      .catch(() => {
        /* Silently fail here. */
      });
-    readBookmarksFromDB().then(bookmarks => {
+    readBookmarksFromDB().then((bookmarks) => {
      this.props.setPersistedState({
        bookmarks: bookmarks,
        bookmarksProvider: bookmarksToAutoCompleteProvider(bookmarks),
--- a/desktop/plugins/navigation/util/autoCompleteProvider.tsx
+++ b/desktop/plugins/navigation/util/autoCompleteProvider.tsx
@@ -43,7 +43,7 @@ export const appMatchPatternsToAutoCompleteProvider = (
    icon: 'mobile',
    matchPatterns: new Map<string, URI>(),
  };
-  appMatchPatterns.forEach(appMatchPattern => {
+  appMatchPatterns.forEach((appMatchPattern) => {
    const matchPattern =
      appMatchPattern.className + ' - ' + appMatchPattern.pattern;
    autoCompleteProvider.matchPatterns.set(
--- a/desktop/plugins/navigation/util/indexedDB.tsx
+++ b/desktop/plugins/navigation/util/indexedDB.tsx
@@ -88,7 +88,7 @@ export const readBookmarksFromDB: () => Promise<Map<string, Bookmark>> = () => {
  });
 };

-export const removeBookmark: (uri: string) => Promise<void> = uri => {
+export const removeBookmark: (uri: string) => Promise<void> = (uri) => {
  return new Promise<void>((resolve, reject) => {
    openNavigationPluginDB()
      .then((db: IDBDatabase) => {
--- a/desktop/plugins/navigation/util/uri.tsx
+++ b/desktop/plugins/navigation/util/uri.tsx
@@ -25,10 +25,7 @@ export const filterOptionalParameters = (uri: string) => {

 export const parseURIParameters = (query: string) => {
  // get parameters from query string and store in Map
-  const parameters = query
-    .split('?')
-    .splice(1)
-    .join('');
+  const parameters = query.split('?').splice(1).join('');
  const parametersObj = querystring.parse(parameters);
  const parametersMap = new Map<string, string>();
  for (const key in parametersObj) {
--- a/desktop/plugins/network/ManageMockResponsePanel.tsx
+++ b/desktop/plugins/network/ManageMockResponsePanel.tsx
@@ -200,7 +200,7 @@ export function ManageMockResponsePanel(props: Props) {
          multiline={true}
          columnSizes={ColumnSizes}
          columns={Columns}
-          rows={_buildRows(routes, duplicatedIds, id => {
+          rows={_buildRows(routes, duplicatedIds, (id) => {
            networkRouteManager.removeRoute(id);
            setSelectedId(null);
          })}
@@ -208,7 +208,7 @@ export function ManageMockResponsePanel(props: Props) {
          autoHeight={false}
          floating={false}
          zebra={false}
-          onRowHighlighted={selectedIds => {
+          onRowHighlighted={(selectedIds) => {
            const newSelectedId =
              selectedIds.length === 1 ? selectedIds[0] : null;
            setSelectedId(newSelectedId);
--- a/desktop/plugins/network/MockResponseDetails.tsx
+++ b/desktop/plugins/network/MockResponseDetails.tsx
@@ -153,7 +153,7 @@ function HeaderInput(props: {
      placeholder="Name"
      value={value}
      style={props.isSelected ? selectedHighlight : undefined}
-      onChange={event => setValue(event.target.value)}
+      onChange={(event) => setValue(event.target.value)}
      onBlur={() => props.onUpdate(value)}
    />
  );
@@ -177,7 +177,7 @@ function _buildMockResponseHeaderRows(
              onUpdate={(newValue: string) => {
                const newHeaders = produce(
                  route.responseHeaders,
-                  draftHeaders => {
+                  (draftHeaders) => {
                    draftHeaders[id].key = newValue;
                  },
                );
@@ -196,7 +196,7 @@ function _buildMockResponseHeaderRows(
              onUpdate={(newValue: string) => {
                const newHeaders = produce(
                  route.responseHeaders,
-                  draftHeaders => {
+                  (draftHeaders) => {
                    draftHeaders[id].value = newValue;
                  },
                );
@@ -213,7 +213,7 @@ function _buildMockResponseHeaderRows(
              onClick={() => {
                const newHeaders = produce(
                  route.responseHeaders,
-                  draftHeaders => {
+                  (draftHeaders) => {
                    delete draftHeaders[id];
                  },
                );
@@ -257,7 +257,7 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
          type="text"
          placeholder="URL"
          value={requestUrl}
-          onChange={event =>
+          onChange={(event) =>
            networkRouteManager.modifyRoute(id, {
              requestUrl: event.target.value,
            })
@@ -275,7 +275,7 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
      <StyledText />
      <Tabs
        active={activeTab}
-        onActive={newActiveTab => {
+        onActive={(newActiveTab) => {
          if (newActiveTab != null) {
            setActiveTab(newActiveTab);
          }
@@ -287,7 +287,7 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
            autoComplete="off"
            spellCheck={false}
            value={responseData}
-            onChange={event =>
+            onChange={(event) =>
              networkRouteManager.modifyRoute(id, {
                responseData: event.target.value,
              })
--- a/desktop/plugins/network/RequestDetails.tsx
+++ b/desktop/plugins/network/RequestDetails.tsx
@@ -536,8 +536,8 @@ class JSONTextFormatter {
        // Multiple top level JSON roots, map them one by one
        return body
          .split('\n')
-          .map(json => JSON.parse(json))
-          .map(data => <JSONText>{data}</JSONText>);
+          .map((json) => JSON.parse(json))
+          .map((data) => <JSONText>{data}</JSONText>);
      }
    }
  };
@@ -603,7 +603,7 @@ class JSONFormatter {
          <ManagedDataInspector
            collapsed={true}
            expandRoot={true}
-            data={roots.map(json => JSON.parse(json))}
+            data={roots.map((json) => JSON.parse(json))}
          />
        );
      }
@@ -705,7 +705,7 @@ class GraphQLFormatter {
        const parsedResponses = body
          .replace(/}{/g, '}\r\n{')
          .split('\n')
-          .map(json => JSON.parse(json));
+          .map((json) => JSON.parse(json));
        return (
          <div>
            {this.parsedServerTimeForFirstFlush(parsedResponses)}
@@ -802,7 +802,7 @@ class InsightsInspector extends Component<{insights: Insights}> {
      buildRow('Post processing time', insights.postProcessingTime, formatTime),
      buildRow('Bytes transfered', insights.bytesTransfered, formatBytes),
      buildRow('Transfer speed', insights.transferSpeed, formatSpeed),
-    ].filter(r => r != null);
+    ].filter((r) => r != null);

    return rows.length > 0 ? (
      <ManagedTable
--- a/desktop/plugins/network/index.tsx
+++ b/desktop/plugins/network/index.tsx
@@ -131,7 +131,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
  networkRouteManager: NetworkRouteManager = nullNetworkRouteManager;

  static metricsReducer(persistedState: PersistedState) {
-    const failures = Object.values(persistedState.responses).reduce(function(
+    const failures = Object.values(persistedState.responses).reduce(function (
      previous,
      values,
    ) {
@@ -206,7 +206,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
  }

  init() {
-    this.client.supportsMethod('mockResponses').then(result =>
+    this.client.supportsMethod('mockResponses').then((result) =>
      this.setState({
        routes: {},
        isMockResponseSupported: result,
@@ -677,7 +677,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
        </NetworkTable.ContextMenu>
        {this.props.showMockResponseDialog ? (
          <Sheet>
-            {onHide => (
+            {(onHide) => (
              <MockResponseDialog
                routes={this.state.routes}
                onHide={() => {
--- a/desktop/plugins/network/utils.tsx
+++ b/desktop/plugins/network/utils.tsx
@@ -41,7 +41,7 @@ export function decodeBody(container: Request | Response): string {
 }

 function decompress(body: string): string {
-  const charArray = body.split('').map(x => x.charCodeAt(0));
+  const charArray = body.split('').map((x) => x.charCodeAt(0));

  const byteArray = new Uint8Array(charArray);

--- a/desktop/plugins/reactdevtools/index.tsx
+++ b/desktop/plugins/reactdevtools/index.tsx
@@ -77,9 +77,9 @@ const GrabMetroDevice = connect<
  ReduxState
 >(({connections: {devices}}) => ({
  metroDevice: devices.find(
-    device => device.os === 'Metro' && !device.isArchived,
+    (device) => device.os === 'Metro' && !device.isArchived,
  ) as MetroDevice,
-}))(function({
+}))(function ({
  metroDevice,
  onHasDevice,
 }: GrabMetroDeviceStoreProps & GrabMetroDeviceOwnProps) {
@@ -217,7 +217,7 @@ export default class ReactDevTools extends FlipperDevicePlugin<
        'Starting DevTools server on ' + port,
      );
      ReactDevToolsStandalone.setContentDOMNode(devToolsNode)
-        .setStatusListener(status => {
+        .setStatusListener((status) => {
          this.setStatus(ConnectionStatus.Initializing, status);
        })
        .startServer(port);
@@ -251,7 +251,7 @@ export default class ReactDevTools extends FlipperDevicePlugin<
        {!this.devtoolsHaveStarted() ? this.renderStatus() : null}
        <Container ref={this.containerRef} />
        <GrabMetroDevice
-          onHasDevice={device => {
+          onHasDevice={(device) => {
            this.metroDevice = device;
          }}
        />
--- a/desktop/plugins/sandbox/index.tsx
+++ b/desktop/plugins/sandbox/index.tsx
@@ -104,7 +104,7 @@ export default class SandboxView extends FlipperPlugin<
              placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
              key="sandbox-url"
              onChange={this.onChangeSandbox}
-              onKeyPress={event => {
+              onKeyPress={(event) => {
                if (event.key === 'Enter') {
                  this.onSendSandboxEnvironment(this.state.customSandbox);
                }
@@ -124,7 +124,7 @@ export default class SandboxView extends FlipperPlugin<
            Success!
          </SandboxView.FeedbackMessage>
        </SandboxView.TextInputLayout>
-        {this.state.sandboxes.map(sandbox => (
+        {this.state.sandboxes.map((sandbox) => (
          <ButtonContainer>
            <BigButton
              key={sandbox.value}
--- a/desktop/plugins/seamammals/index.tsx
+++ b/desktop/plugins/seamammals/index.tsx
@@ -105,7 +105,7 @@ class Card extends React.Component<
    selected: boolean;
  } & Row
 > {
-  static Container = styled(FlexColumn)<{selected?: boolean}>(props => ({
+  static Container = styled(FlexColumn)<{selected?: boolean}>((props) => ({
    margin: 10,
    borderRadius: 5,
    border: '2px solid black',
--- a/desktop/plugins/sections/DetailsPanel.js
+++ b/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}
--- a/desktop/plugins/sections/EventsTable.js
+++ b/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 ? (
--- a/desktop/plugins/sections/StackTrace.js
+++ b/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),
--- a/desktop/plugins/sections/Tree.js
+++ b/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>
--- a/desktop/plugins/sections/index.js
+++ b/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',