Fix Flipper lints #10

Summary:
Grey -> gray. "Cancelled" seems quite common in APIs though, so I disabled that.
A few promise cleanups

Reviewed By: aigoncharov

Differential Revision: D31323610

fbshipit-source-id: c8863d995936f451c24eb408fe5c26677187f089

desktop/.eslintrc.js

@@ -104,7 +104,7 @@ module.exports = {
     'flipper/no-relative-imports-across-packages': [2],
     'flipper/no-electron-remote-imports': [1],
     'flipper/no-console-error-without-context': [1],
-    'communist-spelling/communist-spelling': [1],
+    'communist-spelling/communist-spelling': [1, {allow: ['cancelled']}],
 
     // promise rules, see https://github.com/xjamundx/eslint-plugin-promise for details on each of them
     'promise/catch-or-return': 'warn',

desktop/app/src/ui/components/TooltipProvider.tsx

@@ -14,7 +14,7 @@ import {Property} from 'csstype';
 import React from 'react';
 
 const defaultOptions = {
-  backgroundColor: colors.blueGrey,
+  backgroundColor: colors.blueGray,
   position: 'below',
   color: colors.white,
   showTail: true,

desktop/app/src/ui/components/colors.tsx

@@ -87,15 +87,15 @@ export const colors = {
   dark90: '#191919', // Dark 90 – Nav Bar, Tab Bar, Cards - Nav bar, tab bar, cards
   dark95: '#0d0d0d', // Dark 95 – Background Wash - Background Wash
   // FIG Spectrum
-  blueGrey: '#5f6673', // Blue Grey
+  blueGray: '#5f6673', // Blue Grey
-  blueGreyDark3: '#23272f', // Blue Grey - Dark 3
+  blueGrayDark3: '#23272f', // Blue Grey - Dark 3
-  blueGreyDark2: '#303846', // Blue Grey - Dark 2
+  blueGrayDark2: '#303846', // Blue Grey - Dark 2
-  blueGreyDark1: '#4f5766', // Blue Grey - Dark 1
+  blueGrayDark1: '#4f5766', // Blue Grey - Dark 1
-  blueGreyTint15: '#777d88', // Blue Grey - Tint 15
+  blueGrayTint15: '#777d88', // Blue Grey - Tint 15
-  blueGreyTint30: '#8f949d', // Blue Grey - Tint 30
+  blueGrayTint30: '#8f949d', // Blue Grey - Tint 30
-  blueGreyTint50: '#afb3b9', // Blue Grey - Tint 50
+  blueGrayTint50: '#afb3b9', // Blue Grey - Tint 50
-  blueGreyTint70: '#cfd1d5', // Blue Grey - Tint 70
+  blueGrayTint70: '#cfd1d5', // Blue Grey - Tint 70
-  blueGreyTint90: '#eff0f1', // Blue Grey - Tint 90
+  blueGrayTint90: '#eff0f1', // Blue Grey - Tint 90
   slate: '#b9cad2', // Slate
   slateDark3: '#688694', // Slate - Dark 3
   slateDark2: '#89a1ac', // Slate - Dark 2

desktop/flipper-plugin/src/test-utils/test-utils.tsx

@@ -389,6 +389,7 @@ function createBasePluginResult(
     deactivate: () => pluginInstance.deactivate(),
     exportStateAsync: () =>
       pluginInstance.exportState(createStubIdler(), () => {}),
+    // eslint-disable-next-line node/no-sync
     exportState: () => pluginInstance.exportStateSync(),
     triggerDeepLink: async (deepLink: unknown) => {
       pluginInstance.triggerDeepLink(deepLink);

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

@@ -172,6 +172,7 @@ export function wrapInteractionHandler<T extends Function>(
     const initialEnd = Date.now();
     if (typeof res?.then === 'function' && typeof res?.catch === 'function') {
       // async / promise
+      // eslint-disable-next-line promise/catch-or-return
       res.then(
         () => r(initialEnd),
         (error: any) => r(initialEnd, error),

desktop/flipper-plugin/src/ui/__tests__/Tracked.node.tsx

@@ -7,6 +7,8 @@
  * @format
  */
 
+/* eslint-disable promise/catch-or-return */
+
 import {render, fireEvent} from '@testing-library/react';
 import {TestUtils} from '../../';
 import {sleep} from '../../utils/sleep';

desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx

@@ -27,7 +27,7 @@ export const presetColors = Object.values({
   blue: '#4267b2', // Blue - Active-state nav glyphs, nav bars, links, buttons
   green: '#42b72a', // Green - Confirmation, success, commerce and status
   red: '#FC3A4B', // Red - Badges, error states
-  blueGrey: '#5f6673', // Blue Grey
+  blueGray: '#5f6673', // Blue Grey
   slate: '#b9cad2', // Slate
   aluminum: '#a3cedf', // Aluminum
   seaFoam: '#54c7ec', // Sea Foam

desktop/plugins/public/navigation/components/NavigationInfoBox.tsx

@@ -37,7 +37,7 @@ const ScreenshotContainer = styled.div({
   width: 200,
   minWidth: 200,
   overflow: 'hidden',
-  borderLeft: `1px ${colors.blueGreyTint90} solid`,
+  borderLeft: `1px ${colors.blueGrayTint90} solid`,
   position: 'relative',
   height: '100%',
   borderRadius: 10,
@@ -61,7 +61,7 @@ const NavigationDataContainer = styled.div({
 const Footer = styled.div({
   width: '100%',
   padding: '10px',
-  borderTop: `1px ${colors.blueGreyTint90} solid`,
+  borderTop: `1px ${colors.blueGrayTint90} solid`,
   display: 'flex',
   alignItems: 'center',
 });
@@ -92,7 +92,7 @@ const Header = styled.div({
   userSelect: 'text',
   cursor: 'text',
   padding: 10,
-  borderBottom: `1px ${colors.blueGreyTint90} solid`,
+  borderBottom: `1px ${colors.blueGrayTint90} solid`,
   display: 'flex',
 });