Use eslint for linting UI code.

Summary: Fix all eslint errors.

Test Plan: typescript compiles

Reviewers: zasgar, michelle, #engineering

Reviewed By: zasgar, #engineering

JIRA Issues: PC-168

Differential Revision: https://phab.corp.pixielabs.ai/D4767

GitOrigin-RevId: 820a0dd488d7b89cc2bda6321a6f854779a79dc3

.arcconfig

@@ -5,6 +5,6 @@
   "base": "git:merge-base(origin/master), arc:prompt",
   "arc.feature.start.default": "origin/master",
     "load": ["./linters/arc-tslint", "./linters/arcanist-go",
-             "./linters/clang-format-linter", "./linters/shellcheck-linter", "./linters"],
+             "./linters/clang-format-linter", "./linters/shellcheck-linter", "./linters/pinterest", "./linters"],
   "unit.engine": "PLTestEngine"
 }

.arclint

@@ -172,32 +172,6 @@
         "(k8s/vizier/base/fluentbit/configmap.yaml)"
       ]
     },
-    "tslint-ui": {
-      "type": "tslint",
-      "tslint.config": "./src/ui/tslint.json",
-      "tslint.project": "./src/ui/tsconfig.json",
-      "include": [
-        "(src/ui/.*\\.(tsx)$)",
-        "(src/ui/.*\\.(ts)$)",
-        "(src/ui/.*\\.(js)$)"
-      ],
-      "exclude": [
-        "(^src/ui/pixie-components/)"
-      ]
-    },
-    "tslint-ui-pixie-components": {
-      "type": "tslint",
-      "tslint.config": "./src/ui/tslint.json",
-      "tslint.project": "./src/ui/pixie-components/tsconfig.json",
-      "include": [
-        "(src/ui/pixie-components/src/.*\\.(tsx)$)",
-        "(src/ui/pixie-components/src/.*\\.(ts)$)",
-        "(src/ui/pixie-components/src/.*\\.(js)$)"
-      ],
-      "exclude": [
-        "(^src/ui/pixie-components/dist/)"
-      ]
-    },
     "yaml": {
       "type": "script-and-regex",
       "script-and-regex.script": "yamllint",
@@ -209,6 +183,16 @@
       "exclude": [
         "(^demos/)"
       ]
+    },
+    "eslint-ui": {
+      "type": "eslint",
+      "bin": "./linters/eslint_ui.sh",
+      "eslint.config": ".eslintrc.json",
+      "include": [
+        "(src/ui/.*\\.(tsx)$)",
+        "(src/ui/.*\\.(ts)$)",
+        "(src/ui/.*\\.(js)$)"
+      ]
     }
   }
 }

linters/eslint_ui.sh

+#!/bin/bash
+set -e
+SCRIPTPATH="$( cd "$(dirname "$0")" >/dev/null 2>&1 ; pwd -P )"
+uipath="${SCRIPTPATH}/../src/ui"
+eslint=./node_modules/.bin/eslint
+
+cd "${uipath}"
+if [[ ! -x "${eslint}" ]]; then
+    yarn install
+fi
+
+
+"${eslint}" "$@"

linters/pinterest/.phutil_module_cache

+{"__symbol_cache_version__":11,"d6cb29b7620635c2d9a9f64854bbb18c":{"have":{"class":{"PrettierESLintLinter":694}},"need":{"function":{"pht":1018,"exec_manual":1381},"class":{"ArcanistExternalLinter":723,"ArcanistMissingLinterException":1572,"ArcanistLintMessage":4299,"Filesystem":2033,"ArcanistLintSeverity":4382}},"xmap":{"PrettierESLintLinter":["ArcanistExternalLinter"]}},"38f5b8aa1516732183cd024edbb8e95c":{"have":{"class":{"PrettierLinter":676}},"need":{"function":{"pht":933,"exec_manual":1332},"class":{"ArcanistExternalLinter":699,"ArcanistLintMessage":3151,"Filesystem":1233,"ArcanistLintSeverity":3230}},"xmap":{"PrettierLinter":["ArcanistExternalLinter"]}},"7d9e9b6dcfc87a98eceaf55637d6a9d8":{"have":{"class":{"ESLintLinter":674}},"need":{"function":{"pht":1013,"exec_manual":1393},"class":{"ArcanistExternalLinter":695,"ArcanistLintMessage":5074,"Filesystem":1294,"ArcanistLintSeverity":5675}},"xmap":{"ESLintLinter":["ArcanistExternalLinter"]}}}
\ No newline at end of file

linters/pinterest/LICENSE

+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

linters/pinterest/README.md

+# Arcanist Linters
+
+This is a collection of custom [Arcanist][] linters that we've written at
+Pinterest.
+
+- [Apache Thrift](#apache-thrift)
+- [Apache Thrift Generated](#apache-thrift-generated)
+- [Black](#black)
+- [Checkstyle](#checkstyle)
+- [ESLint](#eslint)
+- [Flake8](#flake8)
+- [Go Vet](#go-vet)
+- [Prettier](#prettier)
+- [Prettier ESLint](#prettier-eslint)
+- [Python Imports](#python-imports)
+- [Python isort](#python-isort)
+- [Python Requirements](#python-requirements)
+
+We also welcome additional [contributions](CONTRIBUTING.md).
+
+## Linters
+
+### Apache Thrift
+
+Lints for errors in [Apache Thrift][] IDL (schema) files using the `thrift`
+compiler.
+
+```json
+{
+    "type": "thrift",
+    "include": "(\\.thrift$)",
+    "flags": [
+        "--allow-64bit-consts"
+    ],
+    "version": ">= 0.9.0",
+    "thrift.generators": [
+        "py:dynamic,utf8strings,new_style,slots",
+        "java",
+        "go",
+        "erl"
+    ],
+    "thrift.includes": [
+        ".",
+        "common"
+    ]
+}
+```
+
+[Apache Thrift]: http://thrift.apache.org/
+
+### Apache Thrift Generated
+
+Lints files generated by the [Apache Thrift][] compiler to ensure they were
+generated using a supported Thrift compiler.
+
+```json
+{
+    "type": "thrift-gen",
+    "include": "(^schemas/.*\\.py$)",
+    "thrift-gen.version": ">=0.9.3"
+}
+```
+
+*Note:* Currently only generated Python files are supported.
+
+### Black
+
+Uses the [Black](https://black.readthedocs.io/) opinionated code formatter
+to normalize the format of Python code.
+
+```json
+{
+    "type": "black",
+    "include": "(\\.py$)",
+    "flags": ["-S", "--line-length=132"]
+}
+```
+
+### Checkstyle
+
+Uses the [Checkstyle](http://checkstyle.sourceforge.net/) tool to check Java
+code against a coding standard.
+
+```json
+{
+    "type": "checkstyle",
+    "include": "(\\.java$)",
+    "checkstyle.config": "google_check.xml"
+}
+```
+
+### ESLint
+
+Lints JavaScript and JSX files using [ESLint](https://eslint.org/).
+
+```json
+{
+    "type": "eslint",
+    "include": "(\\.js$)",
+    "bin": "./node_modules/.bin/eslint",
+    "eslint.config": "~/my-eslint.json",
+    "eslint.env": "browser,node"
+}
+```
+
+### Flake8
+
+Lints Python source files using [Flake8](http://flake8.pycqa.org/). This is an
+extended version of the stock `ArcanistFlake8Linter` that adds support for
+checking required Python and extension versions.
+
+```json
+{
+    "type": "flake8ext",
+    "include": "(\\.py$)",
+    "flake8.python": "< 3.0",
+    "flake8.extensions": {
+        "assertive": "1.0.1",
+        "naming": "0.7.0"
+    }
+}
+```
+
+### Go Vet
+
+Uses the [Go vet command](https://golang.org/cmd/vet/) to lint for suspicious
+code constructs.
+
+```json
+{
+    "type": "govet",
+    "include": "(^src/example.com/.*\\.go$)"
+}
+```
+
+### Prettier
+
+Formats JavaScript using [Prettier](https://prettier.io/).
+
+```json
+{
+    "type": "prettier",
+    "include": "(\\.js$)",
+    "bin": "./node_modules/.bin/prettier",
+    "prettier.cwd": "./"
+}
+```
+
+
+### Prettier ESLint
+
+Formats JavaScript using [Prettier](https://prettier.io/) and then fixes with [ESLint](https://eslint.org/).
+
+```json
+{
+    "type": "prettier-eslint",
+    "include": "(\\.js$)",
+    "bin": "./node_modules/.bin/prettier-eslint",
+    "prettier-eslint.cwd": "./"
+}
+```
+
+### Python Imports
+
+Lints for illegal Python module imports.
+
+```json
+{
+    "type": "python-imports",
+    "python-imports.pattern": "(mock)",
+    "include": "(\\.py$)",
+    "exclude": "(^tests/)"
+}
+```
+
+### Python isort
+
+Lints Python imports using [isort](https://github.com/timothycrosley/isort).
+
+```json
+{
+    "type": "isort",
+    "include": "(\\.py$)"
+}
+```
+
+### Python Requirements
+
+Ensures Python package requirements in [requirements.txt files][req-txt] are
+sorted, unique, and pinned to exact versions.
+
+```json
+{
+    "type": "requirements-txt",
+    "include": "(requirements.txt$)"
+}
+```
+
+Individual requirement lines can be excluded by adding a `# noqa` comment:
+
+```
+six>=1.10.0  # noqa: allow any recent version of six
+```
+
+[req-txt]: https://pip.readthedocs.org/en/latest/user_guide/#requirements-files
+
+## Installation
+
+In short, you'll need to add this repository to your local machine and tell
+Arcanist to load the extension. You either can do this globally or on a
+per-project basis.
+
+Once installed, the individual linters can be enabled and configured via the
+project's `.arclint` file. See the [Arcanist Lint User Guide][lint-guide] for
+details.
+
+## Global Installation
+
+Arcanist can load modules from an absolute path, but because it also searches
+for modules one level up from itself on the filesystem, it's convenient to
+clone this repository at the same level as `arcanist` and `libphutil`.
+
+```
+$ git clone https://github.com/pinterest/arcanist-linters.git pinterest-linters
+$ ls
+arcanist
+pinterest-linters
+libphutil
+```
+
+Then, tell Arcanist to load the module by editing `~/.arcconfig` (or
+`/etc/arcconfig`):
+
+```json
+{
+  "load": ["pinterest-linters"]
+}
+```
+
+## Project Installation
+
+You can also load `arcanist-linters` on a per-project basis. In that case,
+using a [git submodule](https://git-scm.com/docs/git-submodule) is probably
+the most convenient approach.
+
+```
+$ git submodule add https://github.com/pinterest/arcanist-linters.git .pinterest-linters
+$ git submodule update --init
+```
+
+Then, enable the module in your project-level `.arcconfig` file:
+
+```json
+{
+  "load": [".pinterest-linters"]
+}
+```
+
+[Arcanist]: https://secure.phabricator.com/book/phabricator/article/arcanist/
+[lint-guide]: https://secure.phabricator.com/book/phabricator/article/arcanist_lint/

linters/pinterest/__phutil_library_init__.php

+<?php
+
+phutil_register_library('pinterest-linters', __FILE__);

linters/pinterest/__phutil_library_map__.php

+<?php
+
+/**
+ * This file is automatically generated. Use 'arc liberate' to rebuild it.
+ *
+ * @generated
+ * @phutil-library-version 2
+ */
+phutil_register_library_map(array(
+  '__library_version__' => 2,
+  'class' => array(
+    'ESLintLinter' => 'src/ESLintLinter.php',
+    'PrettierESLintLinter' => 'src/PrettierESLintLinter.php',
+    'PrettierLinter' => 'src/PrettierLinter.php',
+  ),
+  'function' => array(),
+  'xmap' => array(
+    'ESLintLinter' => 'ArcanistExternalLinter',
+    'PrettierESLintLinter' => 'ArcanistExternalLinter',
+    'PrettierLinter' => 'ArcanistExternalLinter',
+  ),
+));

linters/pinterest/src/ESLintLinter.php

+<?php
+/**
+ * Copyright 2016 Pinterest, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Lints JavaScript and JSX files using ESLint
+ */
+final class ESLintLinter extends ArcanistExternalLinter {
+  const ESLINT_WARNING = '1';
+  const ESLINT_ERROR = '2';
+
+  private $cwd = '';
+  private $flags = array();
+
+  public function getInfoName() {
+    return 'ESLint';
+  }
+
+  public function getInfoURI() {
+    return 'https://eslint.org/';
+  }
+
+  public function getInfoDescription() {
+    return pht('The pluggable linting utility for JavaScript and JSX');
+  }
+
+  public function getLinterName() {
+    return 'ESLINT';
+  }
+
+  public function getLinterConfigurationName() {
+    return 'eslint';
+  }
+
+  public function getDefaultBinary() {
+    if ($this->cwd) {
+      $realCWD = Filesystem::resolvePath($this->cwd, $this->getProjectRoot());
+      list($err, $stdout, $stderr) = exec_manual('yarn -s --cwd %s bin eslint', $realCWD);
+      if ($stdout) {
+        return strtok($stdout, "\n");
+      }
+    } else {
+      $localBinaryPath = Filesystem::resolvePath('./node_modules/.bin/eslint');
+
+      if (Filesystem::binaryExists($localBinaryPath)) {
+        return $localBinaryPath;
+      }
+    }
+
+    // Fallback on global install & fallthrough to internal existence checks
+    return 'eslint';
+  }
+
+  public function getVersion() {
+    list($err, $stdout, $stderr) = exec_manual('%C -v', $this->getExecutableCommand());
+
+    $matches = array();
+    if (preg_match('/^v(\d\.\d\.\d)$/', $stdout, $matches)) {
+      return $matches[1];
+    } else {
+      return false;
+    }
+  }
+
+  protected function getMandatoryFlags() {
+    return array(
+      '--format=json',
+      '--no-color',
+    );
+  }
+
+  protected function getDefaultFlags() {
+    return $this->flags;
+  }
+
+  public function getLinterConfigurationOptions() {
+    $options = array(
+      'eslint.config' => array(
+        'type' => 'optional string',
+        'help' => pht('Use configuration from this file or shareable config. (https://eslint.org/docs/user-guide/command-line-interface#-c---config)'),
+      ),
+      'eslint.cwd' => array(
+        'type' => 'optional string',
+        'help' => pht('Specify a project sub-directory for both the local eslint-cli install and the sub-directory to lint within.'),
+      ),
+      'eslint.env' => array(
+        'type' => 'optional string',
+        'help' => pht('Specify environments. To specify multiple environments, separate them using commas. (https://eslint.org/docs/user-guide/command-line-interface#--env)'),
+      ),
+      'eslint.fix' => array(
+        'type' => 'optional bool',
+        'help' => pht('Specify whether eslint should autofix issues. (https://eslint.org/docs/user-guide/command-line-interface#fixing-problems)'),
+      ),
+    );
+    return $options + parent::getLinterConfigurationOptions();
+  }
+
+  public function setLinterConfigurationValue($key, $value) {
+    switch ($key) {
+      case 'eslint.config':
+        $this->flags[] = '--config';
+        $this->flags[] = $value;
+        return;
+      case 'eslint.cwd':
+        $this->cwd = $value;
+        return;
+      case 'eslint.env':
+        $this->flags[] = '--env ';
+        $this->flags[] = $value;
+        return;
+      case 'eslint.fix':
+        if ($value) {
+          $this->flags[] = '--fix ';
+        }
+        return;
+    }
+    return parent::setLinterConfigurationValue($key, $value);
+  }
+
+  public function getInstallInstructions() {
+    return pht(
+      "\n\t%s[%s globally] run: `%s`\n\t[%s locally] run either: `%s` OR `%s`",
+      $this->cwd ? pht("[%s globally] (required for %s) run: `%s`\n\t",
+        'yarn',
+        '--cwd',
+        'npm install --global yarn@1') : '',
+      'eslint',
+      'npm install --global eslint',
+      'eslint',
+      'npm install --save-dev eslint',
+      'yarn add --dev eslint'
+    );
+  }
+
+  protected function canCustomizeLintSeverities() {
+    return false;
+  }
+
+  protected function parseLinterOutput($path, $err, $stdout, $stderr) {
+    // Gate on $stderr b/c $err (exit code) is expected.
+    if ($stderr) {
+      return false;
+    }
+
+    $json = json_decode($stdout, true);
+    $messages = array();
+
+    foreach ($json as $file) {
+      foreach ($file['messages'] as $offense) {
+        // Skip file ignored warning: if a file is ignored by .eslintingore
+        // but linted explicitly (by arcanist), a warning will be reported,
+        // containing only: `{fatal:false,severity:1,message:...}`.
+        if (strpos($offense['message'], "File ignored ") === 0) {
+          continue;
+        }
+
+        $message = new ArcanistLintMessage();
+        $message->setPath($file['filePath']);
+        $message->setSeverity($this->mapSeverity($offense['severity']));
+        $message->setName($offense['ruleId'] || 'unknown');
+        $message->setDescription($offense['message']);
+        $message->setLine($offense['line']);
+        $message->setChar($offense['column']);
+        $message->setCode($this->getLinterName());
+        $messages[] = $message;
+      }
+    }
+
+    return $messages;
+  }
+
+  private function mapSeverity($eslintSeverity) {
+    switch($eslintSeverity) {
+      case '0':
+      case '1':
+        return ArcanistLintSeverity::SEVERITY_WARNING;
+      case '2':
+      default:
+        return ArcanistLintSeverity::SEVERITY_ERROR;
+    }
+  }
+}

linters/pinterest/src/PrettierESLintLinter.php

+<?php
+/**
+ * Copyright 2018 Pinterest, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Lints JavaScript and JSX files using Prettier & Eslint auto-fix
+ */
+final class PrettierESLintLinter extends ArcanistExternalLinter {
+  private $cwd = '';
+  private $flags = array();
+
+  public function getInfoName() {
+    return 'PrettierESLint';
+  }
+
+  public function getInfoURI() {
+    return 'https://github.com/prettier/prettier-eslint-cli';
+  }
+
+  public function getInfoDescription() {
+    return pht('A combo Prettier formatter & Eslint auto-fix linter');
+  }
+
+  public function getLinterName() {
+    return 'PRETTIERESLINT';
+  }
+
+  public function getLinterConfigurationName() {
+    return 'prettier-eslint';
+  }
+
+  public function shouldUseInterpreter() {
+    return true;
+  }
+
+  public function getDefaultInterpreter() {
+    list($err, $stdout, $stderr) = exec_manual('node -v');
+    preg_match('/^v([^\.]+)\..*$/', $stdout, $m);
+    if (empty($m)) {
+      // Copied from arcanist/master/src/lint/linter/ArcanistExternalLinter.php
+      throw new ArcanistMissingLinterException(
+        pht(
+          'Unable to locate interpreter "%s" to run linter %s. You may need '.
+          'to install the interpreter, or adjust your linter configuration.',
+          'node',
+          get_class($this)));
+    }
+    if ((int)$m[1] < 6) {
+      // Only used for node < 6
+      return __DIR__ . '/node4_proxy';
+    }
+    return 'node';
+  }
+
+  public function getDefaultBinary() {
+    if ($this->cwd) {
+      $realCWD = Filesystem::resolvePath($this->cwd, $this->getProjectRoot());
+      list($err, $stdout, $stderr) = exec_manual('yarn -s --cwd %s bin prettier-eslint', $realCWD);
+      if ($stdout) {
+        return strtok($stdout, "\n");
+      }
+    } else {
+      $localBinaryPath = Filesystem::resolvePath('./node_modules/.bin/prettier-eslint');
+
+      if (Filesystem::binaryExists($localBinaryPath)) {
+        return $localBinaryPath;
+      }
+    }
+
+    // Fallback on global install & fallthrough to internal existence checks
+    return 'prettier-eslint';
+  }
+
+  public function getVersion() {
+    list($err, $stdout, $stderr) = exec_manual('%C -v', $this->getExecutableCommand());
+    return $stdout;
+  }
+
+  protected function getMandatoryFlags() {
+    return array(
+      '--log-level=silent',
+    );
+  }
+
+  public function getLinterConfigurationOptions() {
+    $options = array(
+      'prettier-eslint.cwd' => array(
+        'type' => 'optional string',
+        'help' => pht('Specify a project sub-directory for both the local prettier-eslint-cli install and the sub-directory to lint within.'),
+      ),
+    );
+    return $options + parent::getLinterConfigurationOptions();
+  }
+
+  public function setLinterConfigurationValue($key, $value) {
+    switch ($key) {
+      case 'prettier-eslint.cwd':
+        $this->cwd = $value;
+        return;
+    }
+    return parent::setLinterConfigurationValue($key, $value);
+  }
+
+  public function getInstallInstructions() {
+    return pht(
+      "\n\t%s[%s globally] run: `%s`\n\t[%s locally] run either: `%s` OR `%s`",
+      $this->cwd ? pht("[%s globally] (required for %s) run: `%s`\n\t",
+        'yarn',
+        '--cwd',
+        'npm install --global yarn@1') : '',
+      'prettier-eslint',
+      'npm install --global prettier-eslint',
+      'prettier-eslint',
+      'npm install --save-dev prettier-eslint',
+      'yarn add --dev prettier-eslint'
+    );
+  }
+
+  protected function parseLinterOutput($path, $err, $stdout, $stderr) {
+    if ($err) {
+      return false;
+    }
+
+    if ($this->getData($path) == $stdout) {
+        return array();
+    }
+
+    $originalText = $this->getData($path);
+    $messages = array();
+
+    // Note: $stdout is empty for ignored files
+    if ($stdout && $stdout != $originalText) {
+      $message = new ArcanistLintMessage();
+      $message->setPath($path);
+      $message->setSeverity(ArcanistLintSeverity::SEVERITY_AUTOFIX);
+      $message->setName('Prettier-Eslint Format');
+      $message->setLine(1);
+      $message->setCode($this->getLinterName());
+      $message->setChar(1);
+      $message->setDescription('This file has not been prettier-eslint-ified');
+      $message->setOriginalText($originalText);
+      $message->setReplacementText($stdout);
+      $message->setBypassChangedLineFiltering(true);
+      $messages[] = $message;
+    }
+
+    return $messages;
+  }
+}

linters/pinterest/src/PrettierLinter.php

+<?php
+/**
+ * Copyright 2018 Pinterest, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Lints JavaScript and JSX files using Prettier
+ */
+final class PrettierLinter extends ArcanistExternalLinter {
+  private $cwd = '';
+
+  public function getInfoName() {
+    return 'Prettier';
+  }
+
+  public function getInfoURI() {
+    return 'https://prettier.io/';
+  }
+
+  public function getInfoDescription() {
+    return pht('An opinionated code formatter with canonicalized AST-derived output');
+  }
+
+  public function getLinterName() {
+    return 'PRETTIER';
+  }
+
+  public function getLinterConfigurationName() {
+    return 'prettier';
+  }
+
+  public function getDefaultBinary() {
+    if ($this->cwd) {
+      $realCWD = Filesystem::resolvePath($this->cwd, $this->getProjectRoot());
+      list($err, $stdout, $stderr) = exec_manual('yarn -s --cwd %s bin prettier', $realCWD);
+      if ($stdout) {
+        return strtok($stdout, "\n");
+      }
+    } else {
+      $localBinaryPath = Filesystem::resolvePath('./node_modules/.bin/prettier');
+
+      if (Filesystem::binaryExists($localBinaryPath)) {
+        return $localBinaryPath;
+      }
+    }
+
+    // Fallback on global install & fallthrough to internal existence checks
+    return 'prettier';
+  }
+
+  public function getVersion() {
+    list($err, $stdout, $stderr) = exec_manual('%C -v', $this->getExecutableCommand());
+    return $stdout;
+  }
+
+  public function getLinterConfigurationOptions() {
+    $options = array(
+      'prettier.cwd' => array(
+        'type' => 'optional string',
+        'help' => pht('Specify a project sub-directory for both the local prettier install and the sub-directory to lint within.'),
+      ),
+    );
+    return $options + parent::getLinterConfigurationOptions();
+  }
+
+  public function setLinterConfigurationValue($key, $value) {
+    switch ($key) {
+      case 'prettier.cwd':
+        $this->cwd = $value;
+        return;
+    }
+    return parent::setLinterConfigurationValue($key, $value);
+  }
+
+  public function getInstallInstructions() {
+    return pht(
+      "\n\t%s[%s globally] run: `%s`\n\t[%s locally] run either: `%s` OR `%s`",
+      $this->cwd ? pht("[%s globally] (required for %s) run: `%s`\n\t",
+        'yarn',
+        '--cwd',
+        'npm install --global yarn@1') : '',
+      'prettier',
+      'npm install --global prettier',
+      'prettier',
+      'npm install --save-dev prettier',
+      'yarn add --dev prettier'
+    );
+  }
+
+  protected function parseLinterOutput($path, $err, $stdout, $stderr) {
+    if ($err) {
+      return false;
+    }
+
+    if ($this->getData($path) == $stdout) {
+        return array();
+    }
+
+    $message = new ArcanistLintMessage();
+    $message->setPath($path);
+    $message->setSeverity(ArcanistLintSeverity::SEVERITY_AUTOFIX);
+    $message->setName('Prettier Format');
+    $message->setLine(1);
+    $message->setCode($this->getLinterName());
+    $message->setChar(1);
+    $message->setDescription('This file has not been prettier-ified');
+    $message->setOriginalText($this->getData($path));
+    $message->setReplacementText($stdout);
+    $message->setBypassChangedLineFiltering(true);
+    $messages[] = $message;
+
+    return $messages;
+  }
+}

src/ui/.eslintignore

+node_modules/*
+pixie-components/*
+src/types/generated/*
+src/segment.js

src/ui/.eslintrc.json

+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "globals": {
+    "BigInt": true,
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "rules": {
+    "quotes": [
+      "error",
+      "single",
+      "avoid-escape"
+    ],
+    "max-len": [
+      "error",
+      {
+        "code": 120
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "src/utils/env.tsx",
+        "*-test.ts",
+        "*-test.tsx",
+        "./*.js",
+        "src/testing/*"
+      ],
+      "env": {
+        "node": true,
+        "jest/globals": true
+      }
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "extends": [
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaFeatures": {
+          "jsx": true
+        },
+        "ecmaVersion": 2020,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
+      },
+      "plugins": [
+        "jest",
+        "react",
+        "@typescript-eslint"
+      ],
+      "rules": {
+        "react/jsx-filename-extension": [
+          "warn",
+          {
+            "extensions": [
+              ".tsx"
+            ]
+          }
+        ],
+        "react/prop-types": [
+          "error",
+          {
+            "skipUndeclared": true
+          }
+        ],
+        "jsx-quotes": [
+          "error",
+          "prefer-single"
+        ],
+        "no-useless-escape": "off",
+        "@typescript-eslint/camelcase": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
+}

src/ui/.jshintrc

 {
-  "esversion": 6
+  "esversion": 9
 }

src/ui/.prettierrc

+{
+  "endOfLine": "lf",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

src/ui/jest.config.js

@@ -3,10 +3,10 @@ module.exports = {
     window: true,
   },
   setupFiles: [
-    '<rootDir>/enzyme-setup.js',
+    '<rootDir>/src/testing/enzyme-setup.js',
   ],
   setupFilesAfterEnv: [
-    '<rootDir>/src/jest-test-setup.js',
+    '<rootDir>/src/testing/jest-test-setup.js',
   ],
   moduleFileExtensions: [
     'js',
@@ -21,7 +21,7 @@ module.exports = {
     '<rootDir>/src',
   ],
   moduleNameMapper: {
-    '^.+\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/file-mock.js',
+    '^.+.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/testing/file-mock.js',
     '(\\.css|\\.scss$)|(normalize.css/normalize)|(^exports-loader)': 'identity-obj-proxy',
   },
   resolver: null,

src/ui/package.json

@@ -7,6 +7,11 @@
     "pixie-components"
   ],
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-info": "^4.1.2",
+    "@storybook/addon-notes": "^4.1.2",
+    "@storybook/addons": "^4.1.2",
+    "@storybook/react": "^5.3.12",
     "@apollo/react-testing": "^3.1.4",
     "@babel/core": "^7.0.0-rc.2",
     "@babel/plugin-proposal-class-properties": "^7.0.0-rc.2",
@@ -15,22 +20,23 @@
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.0.0-rc.2",
     "@babel/runtime-corejs3": "^7.8.4",
-    "@storybook/addon-actions": "^5.3.12",
-    "@storybook/addon-info": "^4.1.2",
-    "@storybook/addon-notes": "^4.1.2",
-    "@storybook/addons": "^4.1.2",
-    "@storybook/react": "^5.3.12",
     "@types/auth0-lock": "^11.4.7",
     "@types/d3": "^5.7.2",
     "@types/dagre": "^0.7.42",
     "@types/enzyme": "^3.1.13",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "@types/graphlib-dot": "^0.6.1",
     "@types/jest": "24.0.18",
+    "@types/lodash": "^4.14.150",
     "@types/node": "12.7.8",
+    "@types/numeral": "^0.0.27",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.4",
     "@types/react-virtualized": "^9.21.8",
     "@types/segment-analytics": "^0.0.32",
+    "@typescript-eslint/eslint-plugin": "^2.30.0",
+    "@typescript-eslint/parser": "^2.30.0",
     "apollo-utilities": "^1.3.3",
     "awesome-typescript-loader": "^5.2.0",
     "axios-mock-adapter": "^1.17.0",
@@ -40,8 +46,13 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "core-js": "2.6.10",
     "css-loader": "^1.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
+    "eslint": "^6.8.0",
+    "eslint-plugin-enzyme": "^0.1.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "file-loader": "^3.0.1",
     "html-webpack-harddisk-plugin": "^0.2.0",
     "html-webpack-plugin": "^3.2.0",
@@ -50,7 +61,7 @@
     "jest-junit": "8.0.0",
     "jest-raw-loader": "^1.0.1",
     "node-sass": "^4.9.3",
-    "pixie-components": "1.0.0",
+    "prettier": "^2.0.5",
     "raw-loader": "^4.0.0",
     "react-dev-utils": "^5.0.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
@@ -106,8 +117,10 @@
     "history": "^4.10.1",
     "immutable-tuple": "^0.4.8",
     "license-checker": "^25.0.1",
+    "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "numeral": "^2.0.6",
+    "pixie-components": "1.0.0",
     "prism-react-renderer": "^1.0.2",
     "query-string": "^6.8.2",
     "react": "^16.12.0",
@@ -131,6 +144,7 @@
     "uuid": "^3.3.3",
     "vega": "^5.11.1",
     "vega-lite": "^4.0.2",
+    "vega-util": "^1.13.2",
     "whatwg-fetch": "^3.0.0",
     "yaml": "^1.6.0"
   },
@@ -143,6 +157,7 @@
     "dev": "./node_modules/.bin/webpack-dev-server",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook_static": "./node_modules/.bin/build-storybook -c .storybook -o storybook_static",
-    "license_check": "./node_modules/license-checker/bin/license-checker"
+    "license_check": "./node_modules/license-checker/bin/license-checker",
+    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}'"
   }
 }

src/ui/src/common/cloud-gql-client.tsx

-import {InMemoryCache, NormalizedCacheObject} from 'apollo-cache-inmemory';
-import {persistCache} from 'apollo-cache-persist';
-import {ApolloClient} from 'apollo-client';
-import {ApolloLink} from 'apollo-link';
-import {setContext} from 'apollo-link-context';
-import {onError} from 'apollo-link-error';
-import {createHttpLink} from 'apollo-link-http';
-import {ServerError} from 'apollo-link-http-common';
+import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory';
+import { persistCache } from 'apollo-cache-persist';
+import { ApolloClient } from 'apollo-client';
+import { ApolloLink } from 'apollo-link';
+import { setContext } from 'apollo-link-context';
+import { onError } from 'apollo-link-error';
+import { createHttpLink } from 'apollo-link-http';
+import { ServerError } from 'apollo-link-http-common';
 import gql from 'graphql-tag';
 import * as RedirectUtils from 'utils/redirect-utils';
-import {fetch} from 'whatwg-fetch';
+import { fetch } from 'whatwg-fetch';
 
-import {localGQLResolvers, localGQLTypeDef} from './local-gql';
+import { localGQLResolvers, localGQLTypeDef } from './local-gql';
 
 // Apollo link that adds cookies in the request.
 const cloudAuthLink = setContext((_, { headers }) => {
@@ -29,6 +29,23 @@ const loginRedirectLink = onError(({ networkError }) => {
   }
 });
 
+interface ClusterConnection {
+  ipAddress: string;
+  token: string;
+}
+
+interface GetClusterConnResults {
+  clusterConnection: ClusterConnection;
+}
+
+const GET_CLUSTER_CONN = gql`
+{
+  clusterConnection {
+    ipAddress
+    token
+  }
+}`;
+
 export class CloudClient {
   graphQL: ApolloClient<NormalizedCacheObject>;
 
@@ -64,7 +81,7 @@ export class CloudClient {
     return this.graphQL;
   }
 
-  async getClusterConnection(noCache: boolean = false) {
+  async getClusterConnection(noCache = false) {
     const { data } = await this.graphQL.query<GetClusterConnResults>({
       query: GET_CLUSTER_CONN,
       fetchPolicy: noCache ? 'network-only' : 'cache-first',
@@ -72,20 +89,3 @@ export class CloudClient {
     return data.clusterConnection;
   }
 }
-
-interface ClusterConnection {
-  ipAddress: string;
-  token: string;
-}
-
-interface GetClusterConnResults {
-  clusterConnection: ClusterConnection;
-}
-
-const GET_CLUSTER_CONN = gql`
-{
-  clusterConnection {
-    ipAddress
-    token
-  }
-}`;

src/ui/src/common/errors.tsx

 import * as React from 'react';
-import {Status} from 'types/generated/vizier_pb';
+import { Status } from 'types/generated/vizier_pb';
 
-import {createStyles, makeStyles, Theme, withStyles} from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles';
 
 export type VizierQueryErrorType = 'script' | 'vis' | 'execution' | 'server';
 
-export class VizierQueryError extends Error {
-  constructor(
-    public errType: VizierQueryErrorType,
-    public details?: string | string[],
-    public status?: Status) {
-    super(getUserFacingMessage(errType));
-  }
-}
-
 function getUserFacingMessage(errType: VizierQueryErrorType): string {
   switch (errType) {
     case 'vis':
@@ -30,6 +21,15 @@ function getUserFacingMessage(errType: VizierQueryErrorType): string {
   }
 }
 
+export class VizierQueryError extends Error {
+  constructor(
+    public errType: VizierQueryErrorType,
+    public details?: string | string[],
+    public status?: Status) {
+    super(getUserFacingMessage(errType));
+  }
+}
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     errorRow: {

src/ui/src/common/vizier-grpc-client.tsx

@@ -33,6 +33,19 @@ export interface VizierQueryFunc {
   args: VizierQueryArg[];
 }
 
+function getExecutionErrors(errList: ErrorDetails[]): string[] {
+  return errList.map((error) => {
+    switch (error.getErrorCase()) {
+      case ErrorDetails.ErrorCase.COMPILER_ERROR: {
+        const ce = error.getCompilerError();
+        return `Compiler error on line ${ce.getLine()}, column ${ce.getColumn()}: ${ce.getMessage()}.`;
+      }
+      default:
+        return `Unknown error type ${ErrorDetails.ErrorCase[error.getErrorCase()]}.`;
+    }
+  });
+}
+
 const VizierDeadlineSupportVersion = '>=0.2.2';
 
 export class VizierGRPCClient {
@@ -187,16 +200,3 @@ export class VizierGRPCClient {
     return { deadline: deadline.getTime().toString() };
   }
 }
-
-function getExecutionErrors(errList: ErrorDetails[]): string[] {
-  return errList.map((error) => {
-    switch (error.getErrorCase()) {
-      case ErrorDetails.ErrorCase.COMPILER_ERROR: {
-        const ce = error.getCompilerError();
-        return `Compiler error on line ${ce.getLine()}, column ${ce.getColumn()}: ${ce.getMessage()}.`;
-      }
-      default:
-        return `Unknown error type ${ErrorDetails.ErrorCase[error.getErrorCase()]}.`;
-    }
-  });
-}