diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..31f13de42
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,253 @@
+module.exports = {
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    env: {
+        browser: true,
+        es6: true,
+    },
+    extends: [
+        'plugin:react/recommended',
+        'prettier',
+        'prettier/@typescript-eslint',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        project: 'tsconfig.json',
+        sourceType: 'module',
+    },
+    plugins: [
+        'eslint-plugin-import',
+        'eslint-plugin-react',
+        'eslint-plugin-prefer-arrow',
+        'eslint-plugin-jsdoc',
+        '@typescript-eslint',
+        '@typescript-eslint/tslint',
+    ],
+    rules: {
+        '@typescript-eslint/adjacent-overload-signatures': 'error',
+        '@typescript-eslint/array-type': [
+            'error',
+            {
+                default: 'array-simple',
+            },
+        ],
+        '@typescript-eslint/ban-types': [
+            'error',
+            {
+                types: {
+                    Object: {
+                        message:
+                            'Avoid using the `Object` type. Did you mean `object`?',
+                    },
+                    Function: {
+                        message:
+                            'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
+                    },
+                    Boolean: {
+                        message:
+                            'Avoid using the `Boolean` type. Did you mean `boolean`?',
+                    },
+                    Number: {
+                        message:
+                            'Avoid using the `Number` type. Did you mean `number`?',
+                    },
+                    String: {
+                        message:
+                            'Avoid using the `String` type. Did you mean `string`?',
+                    },
+                    Symbol: {
+                        message:
+                            'Avoid using the `Symbol` type. Did you mean `symbol`?',
+                    },
+                },
+            },
+        ],
+        '@typescript-eslint/consistent-type-assertions': 'error',
+        '@typescript-eslint/consistent-type-definitions': 'error',
+        '@typescript-eslint/dot-notation': 'off',
+        '@typescript-eslint/explicit-member-accessibility': [
+            'error',
+            {
+                accessibility: 'explicit',
+            },
+        ],
+        '@typescript-eslint/member-delimiter-style': [
+            'off',
+            {
+                multiline: {
+                    delimiter: 'none',
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: 'semi',
+                    requireLast: false,
+                },
+            },
+        ],
+        '@typescript-eslint/member-ordering': 'error',
+        '@typescript-eslint/naming-convention': [
+            'error',
+            {
+                selector: 'variable',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+                leadingUnderscore: 'allow',
+            },
+            {
+                selector: ['method', 'function'],
+                format: ['camelCase', 'PascalCase'],
+                leadingUnderscore: 'allow',
+            },
+        ],
+        '@typescript-eslint/no-empty-function': 'error',
+        '@typescript-eslint/no-empty-interface': 'error',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-misused-new': 'error',
+        '@typescript-eslint/no-namespace': 'error',
+        '@typescript-eslint/no-parameter-properties': 'off',
+        '@typescript-eslint/no-this-alias': 'error',
+        '@typescript-eslint/no-unused-expressions': 'error',
+        '@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/prefer-for-of': 'error',
+        '@typescript-eslint/prefer-function-type': 'off',
+        '@typescript-eslint/prefer-namespace-keyword': 'error',
+        '@typescript-eslint/semi': ['off', null],
+        '@typescript-eslint/triple-slash-reference': [
+            'error',
+            {
+                path: 'always',
+                types: 'prefer-import',
+                lib: 'always',
+            },
+        ],
+        '@typescript-eslint/tslint/config': [
+            'error',
+            {
+                rules: {
+                    'prefer-conditional-expression': true,
+                },
+            },
+        ],
+        '@typescript-eslint/unified-signatures': 'error',
+        // '@typescript-eslint/no-shadow': ['error'],
+        'arrow-body-style': 'error',
+        'arrow-parens': ['off', 'always'],
+        'brace-style': ['off', 'off'],
+        complexity: 'off',
+        'constructor-super': 'error',
+        curly: 'error',
+        eqeqeq: ['error', 'smart'],
+        'guard-for-in': 'error',
+        'id-blacklist': [
+            'error',
+            'any',
+            'Number',
+            'number',
+            'String',
+            'string',
+            'Boolean',
+            'boolean',
+            'Undefined',
+            'undefined',
+        ],
+        'id-match': 'error',
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: false,
+            },
+        ],
+        'import/no-internal-modules': 'off',
+        'import/order': 'off',
+        'jsdoc/check-alignment': 'error',
+        'jsdoc/check-indentation': 'error',
+        'jsdoc/newline-after-description': 'error',
+        'max-classes-per-file': 'off',
+        'no-bitwise': 'error',
+        'no-caller': 'error',
+        'no-cond-assign': 'error',
+        'no-console': 'off',
+        'no-debugger': 'error',
+        'no-duplicate-case': 'error',
+        'no-duplicate-imports': 'error',
+        'no-empty': 'error',
+        'no-eval': 'error',
+        'no-extra-bind': 'error',
+        'no-fallthrough': 'off',
+        'no-invalid-this': 'off',
+        'no-irregular-whitespace': 'off',
+        'no-new-func': 'error',
+        'no-new-wrappers': 'error',
+        'no-redeclare': 'error',
+        'no-return-await': 'error',
+        'no-sequences': 'error',
+        'no-shadow': 'off',
+        'no-sparse-arrays': 'error',
+        'no-template-curly-in-string': 'error',
+        'no-throw-literal': 'error',
+        'no-undef-init': 'error',
+        'no-underscore-dangle': 'off',
+        'no-unsafe-finally': 'error',
+        'no-unused-labels': 'error',
+        'no-var': 'error',
+        'object-shorthand': 'error',
+        'one-var': ['error', 'never'],
+        'prefer-arrow/prefer-arrow-functions': [
+            'error',
+            { allowStandaloneDeclarations: true },
+        ],
+        'prefer-const': 'error',
+        'prefer-object-spread': 'error',
+        radix: 'error',
+        'react/display-name': 'off',
+        'react/jsx-boolean-value': 'off',
+        'react/jsx-curly-spacing': 'off',
+        'react/jsx-equals-spacing': 'off',
+        'react/jsx-key': 'error',
+        'react/jsx-no-bind': [
+            'error',
+            { allowArrowFunctions: true, allowBind: true },
+        ],
+        'react/jsx-no-comment-textnodes': 'error',
+        'react/jsx-no-duplicate-props': 'error',
+        'react/jsx-no-target-blank': 'error',
+        'react/jsx-no-undef': 'error',
+        'react/jsx-uses-react': 'error',
+        'react/jsx-uses-vars': 'error',
+        'react/jsx-wrap-multilines': 'off',
+        'react/no-children-prop': 'error',
+        'react/no-danger-with-children': 'error',
+        'react/no-deprecated': 'error',
+        'react/no-direct-mutation-state': 'error',
+        'react/no-find-dom-node': 'error',
+        'react/no-is-mounted': 'error',
+        'react/no-render-return-value': 'error',
+        'react/no-string-refs': 'error',
+        'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
+        'react/no-unknown-property': 'error',
+        'react/no-unsafe': 'off',
+        'react/prop-types': 'off',
+        'react/react-in-jsx-scope': 'error',
+        'react/require-render-return': 'error',
+        'react/self-closing-comp': [
+            'error',
+            {
+                component: true,
+                html: true,
+            },
+        ],
+        'space-in-parens': ['off', 'never'],
+        'spaced-comment': [
+            'error',
+            'always',
+            {
+                markers: ['/'],
+            },
+        ],
+        'use-isnan': 'error',
+        'valid-typeof': 'off',
+    },
+};
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index c9cf5bc5c..b49c89c52 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -1,43 +1,43 @@
 name: Tests
 on:
-  push:
-    branches:
-      - master
-  pull_request:
+    push:
+        branches:
+            - master
+    pull_request:
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  lint:
-    # The type of runner that the job will run on
-    runs-on: ubuntu-latest
+    # This workflow contains a single job called "build"
+    lint:
+        # The type of runner that the job will run on
+        runs-on: ubuntu-latest
 
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-    # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-    - name: Set up Python
-      uses: actions/setup-python@v1
-      with:
-        python-version: 3.7
-    - name: Set PY
-      run: |
-          echo 'PY<<EOF' >> $GITHUB_ENV
-          echo "$(python -c 'import hashlib, sys;print(hashlib.sha256(sys.version.encode()+sys.executable.encode()).hexdigest())')" >> $GITHUB_ENV
-          echo 'EOF' >> $GITHUB_ENV
-    - uses: actions/cache@v1
-      with:
-        path: ~/.cache/pre-commit
-        key: pre-commit|${{ env.PY }}|${{ hashFiles('.pre-commit-config.yaml') }}
-    - uses: pre-commit/action@v1.0.1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-  tests:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 1
-    - name: Run docker test
-      run: make unit_test
+        # Steps represent a sequence of tasks that will be executed as part of the job
+        steps:
+            # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+            - uses: actions/checkout@v2
+              with:
+                  fetch-depth: 1
+            - name: Set up Python
+              uses: actions/setup-python@v1
+              with:
+                  python-version: 3.7
+            - name: Set PY
+              run: |
+                  echo 'PY<<EOF' >> $GITHUB_ENV
+                  echo "$(python -c 'import hashlib, sys;print(hashlib.sha256(sys.version.encode()+sys.executable.encode()).hexdigest())')" >> $GITHUB_ENV
+                  echo 'EOF' >> $GITHUB_ENV
+            - uses: actions/cache@v1
+              with:
+                  path: ~/.cache/pre-commit
+                  key: pre-commit|${{ env.PY }}|${{ hashFiles('.pre-commit-config.yaml') }}
+            - uses: pre-commit/action@v1.0.1
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+    tests:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  fetch-depth: 1
+            - name: Run docker test
+              run: make test
diff --git a/Makefile b/Makefile
index 8dbf91ce1..07f97247a 100644
--- a/Makefile
+++ b/Makefile
@@ -55,7 +55,7 @@ remove_running_dev_image:
 	$(eval RUNNING_CONTAINERS=$(shell sh -c 'docker ps -q --filter name=datahub_devserver'))
 	docker kill $(RUNNING_CONTAINERS) || true
 
-unit_test: dev_image
+test: dev_image
 	docker-compose --file containers/docker-compose.test.yml up --abort-on-container-exit
 
 clean: clean_pyc clean_docker
diff --git a/containers/docker-compose.test.yml b/containers/docker-compose.test.yml
index 8eff0ca79..c47456e8e 100644
--- a/containers/docker-compose.test.yml
+++ b/containers/docker-compose.test.yml
@@ -4,4 +4,4 @@ services:
     test:
         container_name: datahub_test
         image: datahub-dev:latest
-        command: './datahub/scripts/run_unit_test'
+        command: './datahub/scripts/run_test'
diff --git a/datahub/scripts/run_unit_test b/datahub/scripts/run_test
similarity index 87%
rename from datahub/scripts/run_unit_test
rename to datahub/scripts/run_test
index 400d3b617..ed263486d 100755
--- a/datahub/scripts/run_unit_test
+++ b/datahub/scripts/run_test
@@ -21,13 +21,19 @@ run_js_unit_test() {
 
 run_ts_validation() {
     echo 'Start running ts validation  >>>>>>>>>>>>>>>>>>>>>>>>>>>>'
-    ./node_modules/.bin/tsc --noEmit
+    npm run tsc-check
+}
+
+run_eslint_validation() {
+    echo 'Start running eslint validation  >>>>>>>>>>>>>>>>>>>>>>>>>>>>'
+    npm run lint
 }
 
 tests=(
     "run_python_unit_test"
     "run_ts_validation"
     "run_js_unit_test"
+    "run_eslint_validation"
     "run_webpack_test"
 )
 
diff --git a/datahub/webapp/__tests__/lib/sql-helper/__snapshots__/sql-lexer.test.ts.snap b/datahub/webapp/__tests__/lib/sql-helper/__snapshots__/sql-lexer.test.ts.snap
index f4abba6e5..02b1a8aab 100644
--- a/datahub/webapp/__tests__/lib/sql-helper/__snapshots__/sql-lexer.test.ts.snap
+++ b/datahub/webapp/__tests__/lib/sql-helper/__snapshots__/sql-lexer.test.ts.snap
@@ -7,42 +7,42 @@ Array [
       "end": 10,
       "line": 1,
       "start": 4,
-      "string": "select",
+      "text": "select",
       "type": "KEYWORD",
     },
     Object {
       "end": 17,
       "line": 1,
       "start": 13,
-      "string": "from",
+      "text": "from",
       "type": "KEYWORD",
     },
     Object {
       "end": 23,
       "line": 1,
       "start": 18,
-      "string": "table",
+      "text": "table",
       "type": "KEYWORD",
     },
     Object {
       "end": 29,
       "line": 1,
       "start": 24,
-      "string": "where",
+      "text": "where",
       "type": "KEYWORD",
     },
     Object {
       "end": 36,
       "line": 1,
       "start": 30,
-      "string": "fielda",
+      "text": "fielda",
       "type": "VARIABLE",
     },
     Object {
       "end": 40,
       "line": 1,
       "start": 39,
-      "string": "5",
+      "text": "5",
       "type": "NUMBER",
     },
   ],
@@ -51,35 +51,35 @@ Array [
       "end": 10,
       "line": 2,
       "start": 4,
-      "string": "select",
+      "text": "select",
       "type": "KEYWORD",
     },
     Object {
       "end": 17,
       "line": 2,
       "start": 13,
-      "string": "from",
+      "text": "from",
       "type": "KEYWORD",
     },
     Object {
       "end": 23,
       "line": 2,
       "start": 18,
-      "string": "table",
+      "text": "table",
       "type": "KEYWORD",
     },
     Object {
       "end": 29,
       "line": 2,
       "start": 24,
-      "string": "where",
+      "text": "where",
       "type": "KEYWORD",
     },
     Object {
       "end": 36,
       "line": 2,
       "start": 30,
-      "string": "fieldb",
+      "text": "fieldb",
       "type": "VARIABLE",
     },
     Object {
@@ -87,63 +87,63 @@ Array [
       "end": 40,
       "line": 2,
       "start": 39,
-      "string": "(",
+      "text": "(",
       "type": "BRACKET",
     },
     Object {
       "end": 46,
       "line": 2,
       "start": 40,
-      "string": "select",
+      "text": "select",
       "type": "KEYWORD",
     },
     Object {
       "end": 53,
       "line": 2,
       "start": 47,
-      "string": "fielda",
+      "text": "fielda",
       "type": "VARIABLE",
     },
     Object {
       "end": 58,
       "line": 2,
       "start": 54,
-      "string": "from",
+      "text": "from",
       "type": "KEYWORD",
     },
     Object {
       "end": 64,
       "line": 2,
       "start": 59,
-      "string": "table",
+      "text": "table",
       "type": "KEYWORD",
     },
     Object {
       "end": 70,
       "line": 2,
       "start": 65,
-      "string": "where",
+      "text": "where",
       "type": "KEYWORD",
     },
     Object {
       "end": 77,
       "line": 2,
       "start": 71,
-      "string": "fieldb",
+      "text": "fieldb",
       "type": "VARIABLE",
     },
     Object {
       "end": 81,
       "line": 2,
       "start": 80,
-      "string": "5",
+      "text": "5",
       "type": "NUMBER",
     },
     Object {
       "end": 82,
       "line": 2,
       "start": 81,
-      "string": ")",
+      "text": ")",
       "type": "BRACKET",
     },
   ],
@@ -157,35 +157,35 @@ Array [
       "end": 6,
       "line": 0,
       "start": 0,
-      "string": "select",
+      "text": "select",
       "type": "KEYWORD",
     },
     Object {
       "end": 13,
       "line": 0,
       "start": 9,
-      "string": "from",
+      "text": "from",
       "type": "KEYWORD",
     },
     Object {
       "end": 19,
       "line": 0,
       "start": 14,
-      "string": "table",
+      "text": "table",
       "type": "KEYWORD",
     },
     Object {
       "end": 25,
       "line": 0,
       "start": 20,
-      "string": "where",
+      "text": "where",
       "type": "KEYWORD",
     },
     Object {
       "end": 33,
       "line": 0,
       "start": 26,
-      "string": "extract",
+      "text": "extract",
       "type": "KEYWORD",
     },
     Object {
@@ -193,42 +193,42 @@ Array [
       "end": 34,
       "line": 0,
       "start": 33,
-      "string": "(",
+      "text": "(",
       "type": "BRACKET",
     },
     Object {
       "end": 38,
       "line": 0,
       "start": 34,
-      "string": "year",
+      "text": "year",
       "type": "KEYWORD",
     },
     Object {
       "end": 43,
       "line": 0,
       "start": 39,
-      "string": "from",
+      "text": "from",
       "type": "KEYWORD",
     },
     Object {
       "end": 50,
       "line": 0,
       "start": 44,
-      "string": "fielda",
+      "text": "fielda",
       "type": "VARIABLE",
     },
     Object {
       "end": 51,
       "line": 0,
       "start": 50,
-      "string": ")",
+      "text": ")",
       "type": "BRACKET",
     },
     Object {
       "end": 55,
       "line": 0,
       "start": 54,
-      "string": "5",
+      "text": "5",
       "type": "NUMBER",
     },
   ],
@@ -241,63 +241,63 @@ Array [
     "end": 6,
     "line": 0,
     "start": 0,
-    "string": "select",
+    "text": "select",
     "type": "KEYWORD",
   },
   Object {
     "end": 8,
     "line": 0,
     "start": 7,
-    "string": "*",
+    "text": "*",
     "type": "OPERATOR",
   },
   Object {
     "end": 13,
     "line": 0,
     "start": 9,
-    "string": "from",
+    "text": "from",
     "type": "KEYWORD",
   },
   Object {
     "end": 19,
     "line": 0,
     "start": 14,
-    "string": "table",
+    "text": "table",
     "type": "KEYWORD",
   },
   Object {
     "end": 25,
     "line": 0,
     "start": 20,
-    "string": "where",
+    "text": "where",
     "type": "KEYWORD",
   },
   Object {
     "end": 27,
     "line": 0,
     "start": 26,
-    "string": "a",
+    "text": "a",
     "type": "KEYWORD",
   },
   Object {
     "end": 29,
     "line": 0,
     "start": 28,
-    "string": "=",
+    "text": "=",
     "type": "OPERATOR",
   },
   Object {
     "end": 31,
     "line": 0,
     "start": 30,
-    "string": "5",
+    "text": "5",
     "type": "NUMBER",
   },
   Object {
     "end": 32,
     "line": 0,
     "start": 31,
-    "string": ";",
+    "text": ";",
     "type": "SEMI",
   },
 ]
@@ -309,161 +309,161 @@ Array [
     "end": 6,
     "line": 1,
     "start": 0,
-    "string": "select",
+    "text": "select",
     "type": "KEYWORD",
   },
   Object {
     "end": 6,
     "line": 2,
     "start": 2,
-    "string": "aa.a",
+    "text": "aa.a",
     "type": "VARIABLE",
   },
   Object {
     "end": 7,
     "line": 2,
     "start": 6,
-    "string": ",",
+    "text": ",",
     "type": "COMMA",
   },
   Object {
     "end": 6,
     "line": 3,
     "start": 2,
-    "string": "aa.b",
+    "text": "aa.b",
     "type": "VARIABLE",
   },
   Object {
     "end": 4,
     "line": 4,
     "start": 0,
-    "string": "from",
+    "text": "from",
     "type": "KEYWORD",
   },
   Object {
     "end": 9,
     "line": 5,
     "start": 2,
-    "string": "table_a",
+    "text": "table_a",
     "type": "VARIABLE",
   },
   Object {
     "end": 12,
     "line": 5,
     "start": 10,
-    "string": "aa",
+    "text": "aa",
     "type": "VARIABLE",
   },
   Object {
     "end": 6,
     "line": 6,
     "start": 2,
-    "string": "join",
+    "text": "join",
     "type": "KEYWORD",
   },
   Object {
     "end": 14,
     "line": 6,
     "start": 7,
-    "string": "table_b",
+    "text": "table_b",
     "type": "VARIABLE",
   },
   Object {
     "end": 17,
     "line": 6,
     "start": 15,
-    "string": "bb",
+    "text": "bb",
     "type": "VARIABLE",
   },
   Object {
     "end": 20,
     "line": 6,
     "start": 18,
-    "string": "on",
+    "text": "on",
     "type": "KEYWORD",
   },
   Object {
     "end": 25,
     "line": 6,
     "start": 21,
-    "string": "aa.a",
+    "text": "aa.a",
     "type": "VARIABLE",
   },
   Object {
     "end": 27,
     "line": 6,
     "start": 26,
-    "string": "=",
+    "text": "=",
     "type": "OPERATOR",
   },
   Object {
     "end": 32,
     "line": 6,
     "start": 28,
-    "string": "bb.b",
+    "text": "bb.b",
     "type": "VARIABLE",
   },
   Object {
     "end": 5,
     "line": 7,
     "start": 0,
-    "string": "where",
+    "text": "where",
     "type": "KEYWORD",
   },
   Object {
     "end": 6,
     "line": 8,
     "start": 2,
-    "string": "aa.b",
+    "text": "aa.b",
     "type": "VARIABLE",
   },
   Object {
     "end": 8,
     "line": 8,
     "start": 7,
-    "string": "=",
+    "text": "=",
     "type": "OPERATOR",
   },
   Object {
     "end": 10,
     "line": 8,
     "start": 9,
-    "string": "3",
+    "text": "3",
     "type": "NUMBER",
   },
   Object {
     "end": 5,
     "line": 9,
     "start": 0,
-    "string": "order",
+    "text": "order",
     "type": "KEYWORD",
   },
   Object {
     "end": 8,
     "line": 9,
     "start": 6,
-    "string": "by",
+    "text": "by",
     "type": "KEYWORD",
   },
   Object {
     "end": 6,
     "line": 10,
     "start": 2,
-    "string": "bb.b",
+    "text": "bb.b",
     "type": "VARIABLE",
   },
   Object {
     "end": 5,
     "line": 11,
     "start": 0,
-    "string": "limit",
+    "text": "limit",
     "type": "KEYWORD",
   },
   Object {
     "end": 3,
     "line": 12,
     "start": 2,
-    "string": "5",
+    "text": "5",
     "type": "NUMBER",
   },
 ]
diff --git a/datahub/webapp/__tests__/lib/sql-helper/sql-formatter.test.ts b/datahub/webapp/__tests__/lib/sql-helper/sql-formatter.test.ts
index a261dbf2c..8027a6cc0 100644
--- a/datahub/webapp/__tests__/lib/sql-helper/sql-formatter.test.ts
+++ b/datahub/webapp/__tests__/lib/sql-helper/sql-formatter.test.ts
@@ -28,7 +28,7 @@ FROM
     );
 });
 test('formatting with templated hive query case', () => {
-    // tslint:disable-next-line
+    // eslint-disable-next-line
     expect(format('select * from ${ test };', 'hive')).toBe(
         `SELECT
   *
diff --git a/datahub/webapp/__tests__/ui/AsyncButton.test.js b/datahub/webapp/__tests__/ui/AsyncButton.test.js
index 914e50415..cfed612ae 100644
--- a/datahub/webapp/__tests__/ui/AsyncButton.test.js
+++ b/datahub/webapp/__tests__/ui/AsyncButton.test.js
@@ -11,17 +11,17 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <AsyncButton title="test" onClick={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - disbled', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <AsyncButton title="test" onClick={() => null} disabled />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Box.test.js b/datahub/webapp/__tests__/ui/Box.test.js
index caf401ab3..a955f8383 100644
--- a/datahub/webapp/__tests__/ui/Box.test.js
+++ b/datahub/webapp/__tests__/ui/Box.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Box>Test</Box>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Box>Test</Box>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Button.test.js b/datahub/webapp/__tests__/ui/Button.test.js
index 09307812a..77c00bd97 100644
--- a/datahub/webapp/__tests__/ui/Button.test.js
+++ b/datahub/webapp/__tests__/ui/Button.test.js
@@ -11,47 +11,47 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Button title="test" onClick={() => null} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Button title="test" onClick={() => null} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - disbled', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button title="test" onClick={() => null} disabled />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - typed', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button title="test" onClick={() => null} type="soft" />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - borderless', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button title="test" onClick={() => null} borderless />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - attachedRight', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button title="test" onClick={() => null} attachedRight />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - isLoading', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button title="test" onClick={() => null} isLoading />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - mixed', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Button
                 title="test"
                 onClick={() => null}
@@ -62,7 +62,7 @@ describe('matches enzyme snapshots', () => {
                 attachedLeft
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Card.test.js b/datahub/webapp/__tests__/ui/Card.test.js
index 71fa10e3d..54bfc23ea 100644
--- a/datahub/webapp/__tests__/ui/Card.test.js
+++ b/datahub/webapp/__tests__/ui/Card.test.js
@@ -14,16 +14,16 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Card title="test" onClick={() => null}>
                 Test Content
             </Card>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - height/width', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Card
                 title="test"
                 onClick={() => null}
@@ -35,7 +35,7 @@ describe('matches enzyme snapshots', () => {
                 Test Content
             </Card>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Center.test.js b/datahub/webapp/__tests__/ui/Center.test.js
index e81a99570..a0d4c89f6 100644
--- a/datahub/webapp/__tests__/ui/Center.test.js
+++ b/datahub/webapp/__tests__/ui/Center.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Center>Test</Center>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Center>Test</Center>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Checkbox.test.js b/datahub/webapp/__tests__/ui/Checkbox.test.js
index 9b52a95db..684b1c240 100644
--- a/datahub/webapp/__tests__/ui/Checkbox.test.js
+++ b/datahub/webapp/__tests__/ui/Checkbox.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Checkbox />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Checkbox />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Column.test.js b/datahub/webapp/__tests__/ui/Column.test.js
index 7fd098e97..004400606 100644
--- a/datahub/webapp/__tests__/ui/Column.test.js
+++ b/datahub/webapp/__tests__/ui/Column.test.js
@@ -16,13 +16,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Columns>
                 <Column>Test</Column>
                 <Column>Test</Column>
             </Columns>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Container.test.js b/datahub/webapp/__tests__/ui/Container.test.js
index 2c40eecff..b401e46eb 100644
--- a/datahub/webapp/__tests__/ui/Container.test.js
+++ b/datahub/webapp/__tests__/ui/Container.test.js
@@ -11,10 +11,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Container className="TestContainer">Test</Container>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Content.test.js b/datahub/webapp/__tests__/ui/Content.test.js
index 2e6657744..40260ec44 100644
--- a/datahub/webapp/__tests__/ui/Content.test.js
+++ b/datahub/webapp/__tests__/ui/Content.test.js
@@ -11,10 +11,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Content dangerouslySetInnerHTML={{ __html: '<p>test</p>' }} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/CopyButton.test.js b/datahub/webapp/__tests__/ui/CopyButton.test.js
index d2bf0a2b5..5ff6d3f3a 100644
--- a/datahub/webapp/__tests__/ui/CopyButton.test.js
+++ b/datahub/webapp/__tests__/ui/CopyButton.test.js
@@ -19,7 +19,7 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <CopyButton
                 borderless
                 small
@@ -28,7 +28,7 @@ describe('matches enzyme snapshots', () => {
                 title="Test Copy"
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/DAG.test.js b/datahub/webapp/__tests__/ui/DAG.test.js
index 5ce0cded8..6068f5cfb 100644
--- a/datahub/webapp/__tests__/ui/DAG.test.js
+++ b/datahub/webapp/__tests__/ui/DAG.test.js
@@ -10,10 +10,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <DAG nodes={[]} edges={[]} onNodeClick={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/DataHubLogo.test.js b/datahub/webapp/__tests__/ui/DataHubLogo.test.js
index 6f1161d66..7301cabd7 100644
--- a/datahub/webapp/__tests__/ui/DataHubLogo.test.js
+++ b/datahub/webapp/__tests__/ui/DataHubLogo.test.js
@@ -11,13 +11,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<DataHubLogo />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<DataHubLogo />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - size', () => {
-        let wrapper = shallow(<DataHubLogo size={8} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<DataHubLogo size={8} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/DebouncedInput.test.js b/datahub/webapp/__tests__/ui/DebouncedInput.test.js
index de2d9b9dc..60be85991 100644
--- a/datahub/webapp/__tests__/ui/DebouncedInput.test.js
+++ b/datahub/webapp/__tests__/ui/DebouncedInput.test.js
@@ -10,21 +10,21 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <DebouncedInput value="test" onChange={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - placeholder', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <DebouncedInput
                 value="test"
                 onChange={() => null}
                 inputProps={{ placeholder: 'test placeholder' }}
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/DisabledSection.test.js b/datahub/webapp/__tests__/ui/DisabledSection.test.js
index 407be368d..54610c4b8 100644
--- a/datahub/webapp/__tests__/ui/DisabledSection.test.js
+++ b/datahub/webapp/__tests__/ui/DisabledSection.test.js
@@ -15,21 +15,21 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <DisabledSection>
                 <input />
             </DisabledSection>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - false', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <DisabledSection disabled={false}>
                 <input />
             </DisabledSection>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Divider.test.js b/datahub/webapp/__tests__/ui/Divider.test.js
index 34b79c095..19c47d84d 100644
--- a/datahub/webapp/__tests__/ui/Divider.test.js
+++ b/datahub/webapp/__tests__/ui/Divider.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Divider />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Divider />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Dropdown.test.js b/datahub/webapp/__tests__/ui/Dropdown.test.js
index 13a5dc37d..562bc9930 100644
--- a/datahub/webapp/__tests__/ui/Dropdown.test.js
+++ b/datahub/webapp/__tests__/ui/Dropdown.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Dropdown />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Dropdown />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/EditableTextField.test.js b/datahub/webapp/__tests__/ui/EditableTextField.test.js
index aaafebd08..fd5a473ce 100644
--- a/datahub/webapp/__tests__/ui/EditableTextField.test.js
+++ b/datahub/webapp/__tests__/ui/EditableTextField.test.js
@@ -10,10 +10,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <EditableTextField value="test" onSave={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ErrorPage.test.js b/datahub/webapp/__tests__/ui/ErrorPage.test.js
index 0d82b9db2..6888e6e61 100644
--- a/datahub/webapp/__tests__/ui/ErrorPage.test.js
+++ b/datahub/webapp/__tests__/ui/ErrorPage.test.js
@@ -18,18 +18,18 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<ErrorPage />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<ErrorPage />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(<FourOhFour />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<FourOhFour />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(<FourOhThree />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<FourOhThree />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Form.test.js b/datahub/webapp/__tests__/ui/Form.test.js
index d9696ce94..6a316f187 100644
--- a/datahub/webapp/__tests__/ui/Form.test.js
+++ b/datahub/webapp/__tests__/ui/Form.test.js
@@ -34,13 +34,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<FormField />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<FormField />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(<FormWrapper />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<FormWrapper />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/FullHeight.test.js b/datahub/webapp/__tests__/ui/FullHeight.test.js
index 4fb568849..2f88939fd 100644
--- a/datahub/webapp/__tests__/ui/FullHeight.test.js
+++ b/datahub/webapp/__tests__/ui/FullHeight.test.js
@@ -11,10 +11,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <FullHeight className="TestFullHeight">Test</FullHeight>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Icon.test.js b/datahub/webapp/__tests__/ui/Icon.test.js
index bbfc3a7b4..da319fa24 100644
--- a/datahub/webapp/__tests__/ui/Icon.test.js
+++ b/datahub/webapp/__tests__/ui/Icon.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = mount(<Icon name="check" />);
-        let serialized = toJson(wrapper);
+        const wrapper = mount(<Icon name="check" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/IconButton.test.js b/datahub/webapp/__tests__/ui/IconButton.test.js
index 173064072..d082c4952 100644
--- a/datahub/webapp/__tests__/ui/IconButton.test.js
+++ b/datahub/webapp/__tests__/ui/IconButton.test.js
@@ -11,26 +11,26 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<IconButton icon="check" onClick={() => null} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<IconButton icon="check" onClick={() => null} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - disbled', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton icon="check" onClick={() => null} disabled />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - active', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton icon="check" onClick={() => null} active />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - with tooltip', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton
                 icon="check"
                 onClick={() => null}
@@ -38,25 +38,25 @@ describe('matches enzyme snapshots', () => {
                 tooltipPos="right"
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - with ping', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton icon="check" onClick={() => null} ping={true} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - with ping message', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton icon="check" onClick={() => null} ping="1" />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - mixed', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <IconButton
                 icon="check"
                 onClick={() => null}
@@ -65,7 +65,7 @@ describe('matches enzyme snapshots', () => {
                 ping="1"
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/InfoButton.test.js b/datahub/webapp/__tests__/ui/InfoButton.test.js
index 979ec6d42..2641f96ed 100644
--- a/datahub/webapp/__tests__/ui/InfoButton.test.js
+++ b/datahub/webapp/__tests__/ui/InfoButton.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<InfoButton>Test</InfoButton>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<InfoButton>Test</InfoButton>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/JsonViewer.test.js b/datahub/webapp/__tests__/ui/JsonViewer.test.js
index 968e97c85..6fb1aaf9a 100644
--- a/datahub/webapp/__tests__/ui/JsonViewer.test.js
+++ b/datahub/webapp/__tests__/ui/JsonViewer.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<JsonViewer value={{ test: 'test' }} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<JsonViewer value={{ test: 'test' }} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/KeyboardKey.test.js b/datahub/webapp/__tests__/ui/KeyboardKey.test.js
index 52500b6c6..a056ccfbe 100644
--- a/datahub/webapp/__tests__/ui/KeyboardKey.test.js
+++ b/datahub/webapp/__tests__/ui/KeyboardKey.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<KeyboardKey value="test" />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<KeyboardKey value="test" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Level.test.js b/datahub/webapp/__tests__/ui/Level.test.js
index a3776c65c..5444a8ae0 100644
--- a/datahub/webapp/__tests__/ui/Level.test.js
+++ b/datahub/webapp/__tests__/ui/Level.test.js
@@ -15,12 +15,12 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Level>
                 <LevelItem />
             </Level>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Link.test.js b/datahub/webapp/__tests__/ui/Link.test.js
index 8aa18422e..fb8056ef7 100644
--- a/datahub/webapp/__tests__/ui/Link.test.js
+++ b/datahub/webapp/__tests__/ui/Link.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Link to="https://test.com" />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Link to="https://test.com" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/LinkInput.test.js b/datahub/webapp/__tests__/ui/LinkInput.test.js
index 3a02202b1..605ac66e2 100644
--- a/datahub/webapp/__tests__/ui/LinkInput.test.js
+++ b/datahub/webapp/__tests__/ui/LinkInput.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<LinkInput />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<LinkInput />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ListMenu.test.js b/datahub/webapp/__tests__/ui/ListMenu.test.js
index 32b16f5c7..f9251fe53 100644
--- a/datahub/webapp/__tests__/ui/ListMenu.test.js
+++ b/datahub/webapp/__tests__/ui/ListMenu.test.js
@@ -13,8 +13,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<ListMenu items={items} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<ListMenu items={items} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Loader.test.js b/datahub/webapp/__tests__/ui/Loader.test.js
index 2296066cd..635ee3ec1 100644
--- a/datahub/webapp/__tests__/ui/Loader.test.js
+++ b/datahub/webapp/__tests__/ui/Loader.test.js
@@ -11,13 +11,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Loader />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Loader />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(<Loader item="test">children</Loader>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Loader item="test">children</Loader>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Loading.test.js b/datahub/webapp/__tests__/ui/Loading.test.js
index 4a3165e03..57ad0ae18 100644
--- a/datahub/webapp/__tests__/ui/Loading.test.js
+++ b/datahub/webapp/__tests__/ui/Loading.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Loading />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Loading />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Menu.test.js b/datahub/webapp/__tests__/ui/Menu.test.js
index 2b58e0eed..31ab88d5e 100644
--- a/datahub/webapp/__tests__/ui/Menu.test.js
+++ b/datahub/webapp/__tests__/ui/Menu.test.js
@@ -25,7 +25,7 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Menu>
                 <MenuItem>
                     <MenuItemPing />
@@ -34,7 +34,7 @@ describe('matches enzyme snapshots', () => {
                 <MenuInfoItem />
             </Menu>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Message.test.js b/datahub/webapp/__tests__/ui/Message.test.js
index 66e9e949b..85c44293f 100644
--- a/datahub/webapp/__tests__/ui/Message.test.js
+++ b/datahub/webapp/__tests__/ui/Message.test.js
@@ -16,12 +16,12 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Message>Test</Message>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Message>Test</Message>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - with options', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Message
                 title="Test Message"
                 message="this is a test message"
@@ -33,12 +33,12 @@ describe('matches enzyme snapshots', () => {
                 Test
             </Message>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - error', () => {
-        let wrapper = shallow(<ErrorMessage>Test</ErrorMessage>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<ErrorMessage>Test</ErrorMessage>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Overlay.test.js b/datahub/webapp/__tests__/ui/Overlay.test.js
index 5b95abee5..dd82d2e78 100644
--- a/datahub/webapp/__tests__/ui/Overlay.test.js
+++ b/datahub/webapp/__tests__/ui/Overlay.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Overlay>Test</Overlay>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Overlay>Test</Overlay>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Pagination.test.js b/datahub/webapp/__tests__/ui/Pagination.test.js
index a68ccef39..db87c2216 100644
--- a/datahub/webapp/__tests__/ui/Pagination.test.js
+++ b/datahub/webapp/__tests__/ui/Pagination.test.js
@@ -15,12 +15,12 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Pagination currentPage={1} totalPage={10} onPageClick={() => null}>
                 Test
             </Pagination>
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Popover.test.js b/datahub/webapp/__tests__/ui/Popover.test.js
index 2184d395f..650e885f5 100644
--- a/datahub/webapp/__tests__/ui/Popover.test.js
+++ b/datahub/webapp/__tests__/ui/Popover.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Popover onHide={() => null}>Test</Popover>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Popover onHide={() => null}>Test</Popover>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ResizableTextArea.test.js b/datahub/webapp/__tests__/ui/ResizableTextArea.test.js
index bc9f63500..034fcb923 100644
--- a/datahub/webapp/__tests__/ui/ResizableTextArea.test.js
+++ b/datahub/webapp/__tests__/ui/ResizableTextArea.test.js
@@ -11,10 +11,10 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <ResizableTextArea value={'test'} onChange={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Select.test.js b/datahub/webapp/__tests__/ui/Select.test.js
index 98535d5f2..27e5e79e6 100644
--- a/datahub/webapp/__tests__/ui/Select.test.js
+++ b/datahub/webapp/__tests__/ui/Select.test.js
@@ -10,15 +10,15 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Select value="test" onChange={() => null} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Select value="test" onChange={() => null} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - placeholder', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Select value="test" onChange={() => null} disabled />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ShowMoreText.test.js b/datahub/webapp/__tests__/ui/ShowMoreText.test.js
index 24c217d96..b7d7d1fde 100644
--- a/datahub/webapp/__tests__/ui/ShowMoreText.test.js
+++ b/datahub/webapp/__tests__/ui/ShowMoreText.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<ShowMoreText text="test" length={2} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<ShowMoreText text="test" length={2} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Sidebar.test.js b/datahub/webapp/__tests__/ui/Sidebar.test.js
index 543e70a8e..2cf5fa1b7 100644
--- a/datahub/webapp/__tests__/ui/Sidebar.test.js
+++ b/datahub/webapp/__tests__/ui/Sidebar.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Sidebar />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Sidebar />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/SimpleReactSelect.test.js b/datahub/webapp/__tests__/ui/SimpleReactSelect.test.js
index 23cdb493a..95cb059ae 100644
--- a/datahub/webapp/__tests__/ui/SimpleReactSelect.test.js
+++ b/datahub/webapp/__tests__/ui/SimpleReactSelect.test.js
@@ -13,14 +13,14 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <SimpleReactSelect
                 options={[]}
                 value="test"
                 onChange={() => null}
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/SmartForm.test.js b/datahub/webapp/__tests__/ui/SmartForm.test.js
index 4754218c3..bbd4a1f0f 100644
--- a/datahub/webapp/__tests__/ui/SmartForm.test.js
+++ b/datahub/webapp/__tests__/ui/SmartForm.test.js
@@ -23,7 +23,7 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <SmartForm
                 formField={{
                     of: {
@@ -36,7 +36,7 @@ describe('matches enzyme snapshots', () => {
                 onChange={() => null}
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/StatusIcon.test.js b/datahub/webapp/__tests__/ui/StatusIcon.test.js
index 8419ae85a..d2cb4753a 100644
--- a/datahub/webapp/__tests__/ui/StatusIcon.test.js
+++ b/datahub/webapp/__tests__/ui/StatusIcon.test.js
@@ -10,13 +10,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<StatusIcon status="success" />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<StatusIcon status="success" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - warning', () => {
-        let wrapper = shallow(<StatusIcon status="warning" />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<StatusIcon status="warning" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/StepsBar.test.js b/datahub/webapp/__tests__/ui/StepsBar.test.js
index 5b5c5210f..d3aa084ef 100644
--- a/datahub/webapp/__tests__/ui/StepsBar.test.js
+++ b/datahub/webapp/__tests__/ui/StepsBar.test.js
@@ -10,15 +10,15 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<StepsBar steps={[]} activeStep={0} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<StepsBar steps={[]} activeStep={0} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <StepsBar steps={['one', 'two']} activeStep={0} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Table.test.js b/datahub/webapp/__tests__/ui/Table.test.js
index 231cfac5a..a6cc60636 100644
--- a/datahub/webapp/__tests__/ui/Table.test.js
+++ b/datahub/webapp/__tests__/ui/Table.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Table rows={[1, 2]} cols={[1, 2]} />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Table rows={[1, 2]} cols={[1, 2]} />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Tabs.test.js b/datahub/webapp/__tests__/ui/Tabs.test.js
index 7f3f69af1..0b193916d 100644
--- a/datahub/webapp/__tests__/ui/Tabs.test.js
+++ b/datahub/webapp/__tests__/ui/Tabs.test.js
@@ -10,14 +10,14 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Tabs items={[{ key: 'test' }]} onSelect={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <Tabs
                 items={[{ name: 'test', icon: 'check', key: 'test' }]}
                 onSelect={() => null}
@@ -28,7 +28,7 @@ describe('matches enzyme snapshots', () => {
                 align="right"
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Tag.test.js b/datahub/webapp/__tests__/ui/Tag.test.js
index cc1aebbf8..7a6591075 100644
--- a/datahub/webapp/__tests__/ui/Tag.test.js
+++ b/datahub/webapp/__tests__/ui/Tag.test.js
@@ -10,13 +10,13 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Tag>test</Tag>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Tag>test</Tag>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot', () => {
-        let wrapper = shallow(<Tag highlighted>test</Tag>);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Tag highlighted>test</Tag>);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/Timer.test.js b/datahub/webapp/__tests__/ui/Timer.test.js
index deabcf6b4..b22166e36 100644
--- a/datahub/webapp/__tests__/ui/Timer.test.js
+++ b/datahub/webapp/__tests__/ui/Timer.test.js
@@ -10,8 +10,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<Timer />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<Timer />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ToggleButton.test.js b/datahub/webapp/__tests__/ui/ToggleButton.test.js
index 67ddcc149..4ff5bee59 100644
--- a/datahub/webapp/__tests__/ui/ToggleButton.test.js
+++ b/datahub/webapp/__tests__/ui/ToggleButton.test.js
@@ -12,21 +12,21 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <ToggleButton checked={true} onClick={() => null} title="Testing" />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - unchecked', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <ToggleButton
                 checked={false}
                 onClick={() => null}
                 title="Testing"
             />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ToggleSwitch.test.js b/datahub/webapp/__tests__/ui/ToggleSwitch.test.js
index 79d77921f..f5e10757e 100644
--- a/datahub/webapp/__tests__/ui/ToggleSwitch.test.js
+++ b/datahub/webapp/__tests__/ui/ToggleSwitch.test.js
@@ -10,17 +10,17 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <ToggleSwitch checked={true} onChange={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
     it('matches snapshot - unchecked', () => {
-        let wrapper = shallow(
+        const wrapper = shallow(
             <ToggleSwitch checked={false} onChange={() => null} />
         );
-        let serialized = toJson(wrapper);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/__tests__/ui/ToolBarButton.test.js b/datahub/webapp/__tests__/ui/ToolBarButton.test.js
index 2bbf4eb53..5089554a3 100644
--- a/datahub/webapp/__tests__/ui/ToolBarButton.test.js
+++ b/datahub/webapp/__tests__/ui/ToolBarButton.test.js
@@ -11,8 +11,8 @@ it('renders without crashing', () => {
 
 describe('matches enzyme snapshots', () => {
     it('matches snapshot', () => {
-        let wrapper = shallow(<ToolBarButton icon="check" />);
-        let serialized = toJson(wrapper);
+        const wrapper = shallow(<ToolBarButton icon="check" />);
+        const serialized = toJson(wrapper);
         expect(serialized).toMatchSnapshot();
     });
 });
diff --git a/datahub/webapp/components/AccessRequestButton/AccessRequestButton.tsx b/datahub/webapp/components/AccessRequestButton/AccessRequestButton.tsx
index b59cbd0dd..ab13919cc 100644
--- a/datahub/webapp/components/AccessRequestButton/AccessRequestButton.tsx
+++ b/datahub/webapp/components/AccessRequestButton/AccessRequestButton.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from 'ui/Button/Button';
-import { useState } from 'react';
 
 export const AccessRequestButton: React.FunctionComponent<{
     onAccessRequest: () => any;
diff --git a/datahub/webapp/components/AdminAppSidebar/AdminAppEntitySidebar.tsx b/datahub/webapp/components/AdminAppSidebar/AdminAppEntitySidebar.tsx
index 776c81f8f..04ec874aa 100644
--- a/datahub/webapp/components/AdminAppSidebar/AdminAppEntitySidebar.tsx
+++ b/datahub/webapp/components/AdminAppSidebar/AdminAppEntitySidebar.tsx
@@ -18,19 +18,17 @@ export const AdminAppEntitySidebar: React.FunctionComponent<IAdminAppEntitySideb
     selectedEntity,
     onSelectEntity,
 }) => {
-    const makeSidebarItem = (key: AdminEntity, icon: string) => {
-        return (
-            <div
-                className="AdminAppEntitySidebar-item flex-row"
-                onClick={() => onSelectEntity(key)}
-            >
-                <IconButton icon={icon} active={selectedEntity === key} />
-                <span className="AdminAppEntitySidebar-title">
-                    {adminEntityToTitle[key]}
-                </span>
-            </div>
-        );
-    };
+    const makeSidebarItem = (key: AdminEntity, icon: string) => (
+        <div
+            className="AdminAppEntitySidebar-item flex-row"
+            onClick={() => onSelectEntity(key)}
+        >
+            <IconButton icon={icon} active={selectedEntity === key} />
+            <span className="AdminAppEntitySidebar-title">
+                {adminEntityToTitle[key]}
+            </span>
+        </div>
+    );
     const divider = (
         <Divider
             marginTop="8px"
diff --git a/datahub/webapp/components/App/App.tsx b/datahub/webapp/components/App/App.tsx
index 44bd74ccd..e7b5fe9a6 100644
--- a/datahub/webapp/components/App/App.tsx
+++ b/datahub/webapp/components/App/App.tsx
@@ -18,7 +18,7 @@ import { reduxStore } from 'redux/store';
 
 // TODO: decouple this with App.tsx
 declare global {
-    /* tslint:disable:interface-name */
+    /* eslint-disable @typescript-eslint/naming-convention */
     interface Window {
         reduxStore?: typeof reduxStore;
         receiveChildMessage?: () => void;
diff --git a/datahub/webapp/components/AppAdmin/AdminAnnouncement.tsx b/datahub/webapp/components/AppAdmin/AdminAnnouncement.tsx
index c44263b89..264970ea5 100644
--- a/datahub/webapp/components/AppAdmin/AdminAnnouncement.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminAnnouncement.tsx
@@ -71,65 +71,59 @@ export const AdminAnnouncement: React.FunctionComponent = () => {
     );
 
     const deleteAnnouncement = React.useCallback(
-        (announcement: IAdminAnnouncement) => {
-            return ds.delete(`/admin/announcement/${announcement.id}/`);
-        },
+        (announcement: IAdminAnnouncement) =>
+            ds.delete(`/admin/announcement/${announcement.id}/`),
         []
     );
 
     const renderAnnouncementItem = (
         item: IAdminAnnouncement,
         onChange: (fieldName: string, fieldValue: any) => void
-    ) => {
-        return (
-            <div className="AdminForm">
-                <div className="AdminForm-main">
-                    <div className="AdminForm-left">
-                        <SimpleField
-                            stacked
-                            name="message"
-                            type="textarea"
-                            placeholder="Announcements can be written in markdown format."
-                        />
-                        <SimpleField
-                            stacked
-                            name="url_regex"
-                            type="input"
-                            help={
-                                'You can specify the url in which the announcement will be shown. ' +
-                                'Try using an environment name to announce to a specific environment ' +
-                                " (ex. '/default/')"
-                            }
-                        />
-                    </div>
-                    <div className="AdminForm-right">
-                        <SimpleField
-                            name="can_dismiss"
-                            type="toggle"
-                            help="Enabling will allow users to dismiss the announcement"
-                        />
-                    </div>
+    ) => (
+        <div className="AdminForm">
+            <div className="AdminForm-main">
+                <div className="AdminForm-left">
+                    <SimpleField
+                        stacked
+                        name="message"
+                        type="textarea"
+                        placeholder="Announcements can be written in markdown format."
+                    />
+                    <SimpleField
+                        stacked
+                        name="url_regex"
+                        type="input"
+                        help={
+                            'You can specify the url in which the announcement will be shown. ' +
+                            'Try using an environment name to announce to a specific environment ' +
+                            " (ex. '/default/')"
+                        }
+                    />
+                </div>
+                <div className="AdminForm-right">
+                    <SimpleField
+                        name="can_dismiss"
+                        type="toggle"
+                        help="Enabling will allow users to dismiss the announcement"
+                    />
                 </div>
             </div>
-        );
-    };
+        </div>
+    );
 
-    const getCardDOM = () => {
-        return announcements.map((ann) => {
-            return (
-                <Card key={ann.id} title="" width="100%" flexRow>
-                    <SingleCRUD
-                        item={ann}
-                        deleteItem={deleteAnnouncement}
-                        updateItem={saveAnnouncement(ann.id)}
-                        validationSchema={announcementSchema}
-                        renderItem={renderAnnouncementItem}
-                        onItemCUD={loadAnnouncements}
-                    />
-                </Card>
-            );
-        });
-    };
+    const getCardDOM = () =>
+        announcements.map((ann) => (
+            <Card key={ann.id} title="" width="100%" flexRow>
+                <SingleCRUD
+                    item={ann}
+                    deleteItem={deleteAnnouncement}
+                    updateItem={saveAnnouncement(ann.id)}
+                    validationSchema={announcementSchema}
+                    renderItem={renderAnnouncementItem}
+                    onItemCUD={loadAnnouncements}
+                />
+            </Card>
+        ));
 
     const getNewFormDOM = () => {
         if (displayNewForm) {
@@ -152,18 +146,17 @@ export const AdminAnnouncement: React.FunctionComponent = () => {
             return (
                 <Card
                     title=""
-                    children={
-                        <div className="AdminAnnouncement-new-msg flex-row">
-                            <Icon name="plus" />
-                            <span>create a new announcement</span>
-                        </div>
-                    }
                     width="100%"
                     flexRow
                     onClick={() => {
                         setDisplayNewForm(true);
                     }}
-                />
+                >
+                    <div className="AdminAnnouncement-new-msg flex-row">
+                        <Icon name="plus" />
+                        <span>create a new announcement</span>
+                    </div>
+                </Card>
             );
         }
     };
diff --git a/datahub/webapp/components/AppAdmin/AdminConfig.tsx b/datahub/webapp/components/AppAdmin/AdminConfig.tsx
index 0326579a2..5420d2a34 100644
--- a/datahub/webapp/components/AppAdmin/AdminConfig.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminConfig.tsx
@@ -4,7 +4,9 @@ import { Table } from 'ui/Table/Table';
 import { SearchBar } from 'ui/SearchBar/SearchBar';
 
 export const AdminConfig = ({}) => {
-    const { data: datahubConfig, isLoading } = useDataFetch<{}>({
+    const { data: datahubConfig, isLoading } = useDataFetch<
+        Record<string, unknown>
+    >({
         url: '/admin/datahub_config/',
     });
     const [filterStr, setFilterStr] = useState('');
diff --git a/datahub/webapp/components/AppAdmin/AdminEnvironment.tsx b/datahub/webapp/components/AppAdmin/AdminEnvironment.tsx
index 14eeef85c..3e5547020 100644
--- a/datahub/webapp/components/AppAdmin/AdminEnvironment.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminEnvironment.tsx
@@ -93,9 +93,8 @@ export const AdminEnvironment: React.FunctionComponent<IProps> = ({
     );
 
     const deleteEnvironment = React.useCallback(
-        (environment: IAdminEnvironment) => {
-            return ds.delete(`/admin/environment/${environment.id}/`);
-        },
+        (environment: IAdminEnvironment) =>
+            ds.delete(`/admin/environment/${environment.id}/`),
         []
     );
 
@@ -262,30 +261,26 @@ export const AdminEnvironment: React.FunctionComponent<IProps> = ({
             </div>
         );
     } else {
-        const getCardDOM = () => {
-            return clone(environments)
+        const getCardDOM = () =>
+            clone(environments)
                 .filter((env) => env.deleted_at == null)
                 .sort((env1, env2) => env1.id - env2.id)
                 .slice(0, 5)
-                .map((env) => {
-                    return (
-                        <Card
-                            key={env.id}
-                            title={env.name}
-                            children={
-                                <div className="AdminLanding-card-content">
-                                    {env.description}
-                                </div>
-                            }
-                            onClick={() =>
-                                history.push(`/admin/environment/${env.id}/`)
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                    );
-                });
-        };
+                .map((env) => (
+                    <Card
+                        key={env.id}
+                        title={env.name}
+                        onClick={() =>
+                            history.push(`/admin/environment/${env.id}/`)
+                        }
+                        height="160px"
+                        width="240px"
+                    >
+                        <div className="AdminLanding-card-content">
+                            {env.description}
+                        </div>
+                    </Card>
+                ));
         return (
             <div className="AdminEnvironment">
                 <div className="AdminLanding">
@@ -306,13 +301,14 @@ export const AdminEnvironment: React.FunctionComponent<IProps> = ({
                             {environments && getCardDOM()}
                             <Card
                                 title="+"
-                                children="create a new environment"
                                 onClick={() =>
                                     history.push('/admin/environment/new/')
                                 }
                                 height="160px"
                                 width="240px"
-                            />
+                            >
+                                create a new environment
+                            </Card>
                         </div>
                     </div>
                 </div>
@@ -381,38 +377,30 @@ const AdminEnvironmentQueryEngine: React.FC<{
         [queryEngines, environmentEngines]
     );
 
-    const getQueryEngineListDOM = () => {
-        return (
-            <DraggableList
-                items={environmentEngines ?? []}
-                renderItem={(index, engine) => {
-                    return (
-                        <div className="AdminEnvironment-engine horizontal-space-between">
-                            <div
-                                className="AdminEnvironment-engine-name"
-                                onClick={() =>
-                                    history.push(
-                                        `/admin/query_engine/${engine.id}`
-                                    )
-                                }
-                            >
-                                {engine.name}
-                            </div>
-                            <IconButton
-                                className="delete-query-engine-button"
-                                noPadding
-                                icon="x"
-                                onClick={() =>
-                                    handleDeleteQueryEngine(engine.id)
-                                }
-                            />
-                        </div>
-                    );
-                }}
-                onMove={handleSwapQueryEngine}
-            />
-        );
-    };
+    const getQueryEngineListDOM = () => (
+        <DraggableList
+            items={environmentEngines ?? []}
+            renderItem={(index, engine) => (
+                <div className="AdminEnvironment-engine horizontal-space-between">
+                    <div
+                        className="AdminEnvironment-engine-name"
+                        onClick={() =>
+                            history.push(`/admin/query_engine/${engine.id}`)
+                        }
+                    >
+                        {engine.name}
+                    </div>
+                    <IconButton
+                        className="delete-query-engine-button"
+                        noPadding
+                        icon="x"
+                        onClick={() => handleDeleteQueryEngine(engine.id)}
+                    />
+                </div>
+            )}
+            onMove={handleSwapQueryEngine}
+        />
+    );
 
     return (
         <div className="AdminForm-section">
diff --git a/datahub/webapp/components/AppAdmin/AdminMetastore.tsx b/datahub/webapp/components/AppAdmin/AdminMetastore.tsx
index f14797ab6..69fca06ff 100644
--- a/datahub/webapp/components/AppAdmin/AdminMetastore.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminMetastore.tsx
@@ -49,7 +49,7 @@ export interface IAdminMetastore {
     updated_at: number;
     deleted_at: number;
     name: string;
-    metastore_params: {};
+    metastore_params: Record<string, unknown>;
     loader: string;
     acl_control: IAdminACLControl;
 }
@@ -121,9 +121,8 @@ export const AdminMetastore: React.FunctionComponent<IProps> = ({
     );
 
     const deleteMetastore = React.useCallback(
-        async (metastore: IAdminMetastore) => {
-            return ds.delete(`/admin/query_metastore/${metastore.id}/`);
-        },
+        async (metastore: IAdminMetastore) =>
+            ds.delete(`/admin/query_metastore/${metastore.id}/`),
         []
     );
 
@@ -416,7 +415,10 @@ export const AdminMetastore: React.FunctionComponent<IProps> = ({
                 deleted_at: null,
                 name: '',
                 loader: defaultLoader.name,
-                metastore_params: getDefaultFormValue(defaultLoader.template),
+                // Only StructForm form for template
+                metastore_params: getDefaultFormValue(
+                    defaultLoader.template
+                ) as Record<string, unknown>,
                 acl_control: {},
             };
             return (
@@ -491,35 +493,32 @@ export const AdminMetastore: React.FunctionComponent<IProps> = ({
             return <Loading />;
         }
     } else {
-        const getCardDOM = () => {
-            return clone(metastores)
+        const getCardDOM = () =>
+            clone(metastores)
                 .filter((ms) => ms.deleted_at == null)
                 .sort((m1, m2) => m2.updated_at - m1.updated_at)
                 .slice(0, 5)
-                .map((m) => {
-                    return (
-                        <Card
-                            key={m.id}
-                            title={m.name}
-                            children={
-                                <div className="AdminLanding-card-content">
-                                    <div className="AdminLanding-card-content-top">
-                                        Last Updated
-                                    </div>
-                                    <div className="AdminLanding-card-content-date">
-                                        {generateFormattedDate(m.updated_at)}
-                                    </div>
-                                </div>
-                            }
-                            onClick={() =>
-                                history.push(`/admin/metastore/${m.id}/`)
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                    );
-                });
-        };
+                .map((m) => (
+                    <Card
+                        key={m.id}
+                        title={m.name}
+                        onClick={() =>
+                            history.push(`/admin/metastore/${m.id}/`)
+                        }
+                        height="160px"
+                        width="240px"
+                    >
+                        {' '}
+                        <div className="AdminLanding-card-content">
+                            <div className="AdminLanding-card-content-top">
+                                Last Updated
+                            </div>
+                            <div className="AdminLanding-card-content-date">
+                                {generateFormattedDate(m.updated_at)}
+                            </div>
+                        </div>
+                    </Card>
+                ));
         return (
             <div className="AdminMetastore">
                 <div className="AdminLanding">
@@ -538,13 +537,14 @@ export const AdminMetastore: React.FunctionComponent<IProps> = ({
                             {metastores && getCardDOM()}
                             <Card
                                 title="+"
-                                children="create a new metastore"
                                 onClick={() =>
                                     history.push('/admin/metastore/new/')
                                 }
                                 height="160px"
                                 width="240px"
-                            />
+                            >
+                                create a new metastore
+                            </Card>
                         </div>
                     </div>
                 </div>
diff --git a/datahub/webapp/components/AppAdmin/AdminQueryEngine.tsx b/datahub/webapp/components/AppAdmin/AdminQueryEngine.tsx
index 760da607f..d5eba0a1b 100644
--- a/datahub/webapp/components/AppAdmin/AdminQueryEngine.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminQueryEngine.tsx
@@ -146,9 +146,8 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
     );
 
     const deleteQueryEngine = React.useCallback(
-        (queryEngine: IAdminQueryEngine) => {
-            return ds.delete(`/admin/query_engine/${queryEngine.id}/`);
-        },
+        (queryEngine: IAdminQueryEngine) =>
+            ds.delete(`/admin/query_engine/${queryEngine.id}/`),
         []
     );
 
@@ -204,20 +203,18 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
             fieldValue: any,
             item?: IAdminQueryEngine
         ) => IAdminQueryEngine
-    ) => {
-        return (
-            <SmartForm
-                formField={template}
-                value={executorParams}
-                onChange={(path, value) =>
-                    onChange(
-                        'executor_params',
-                        updateValue(executorParams, path, value)
-                    )
-                }
-            />
-        );
-    };
+    ) => (
+        <SmartForm
+            formField={template}
+            value={executorParams}
+            onChange={(path, value) =>
+                onChange(
+                    'executor_params',
+                    updateValue(executorParams, path, value)
+                )
+            }
+        />
+    );
 
     const renderQueryEngineItem = (
         item: IAdminQueryEngine,
@@ -340,7 +337,7 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
                                     }
                                     item={executorTemplate[item.executor]}
                                     itemLoader={() => {
-                                        return;
+                                        /* do nothing */
                                     }}
                                 />
                             </div>
@@ -368,9 +365,13 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
                 description: '',
                 metastore_id: null,
                 executor: defaultExecutor,
-                executor_params:
-                    defaultExecutorTemplate &&
-                    getDefaultFormValue(defaultExecutorTemplate),
+
+                // Since defaultExecutorTemplate has to be StructForm
+                executor_params: (defaultExecutorTemplate &&
+                    getDefaultFormValue(defaultExecutorTemplate)) as Record<
+                    string,
+                    any
+                >,
                 status_checker: null,
             };
             return (
@@ -447,35 +448,31 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
             return <Loading />;
         }
     } else {
-        const getCardDOM = () => {
-            return clone(queryEngines)
+        const getCardDOM = () =>
+            clone(queryEngines)
                 .filter((eng) => eng.deleted_at == null)
                 .sort((e1, e2) => e2.updated_at - e1.updated_at)
                 .slice(0, 5)
-                .map((e) => {
-                    return (
-                        <Card
-                            key={e.id}
-                            title={e.name}
-                            children={
-                                <div className="AdminLanding-card-content">
-                                    <div className="AdminLanding-card-content-top">
-                                        Last Updated
-                                    </div>
-                                    <div className="AdminLanding-card-content-date">
-                                        {generateFormattedDate(e.updated_at)}
-                                    </div>
-                                </div>
-                            }
-                            onClick={() =>
-                                history.push(`/admin/query_engine/${e.id}/`)
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                    );
-                });
-        };
+                .map((e) => (
+                    <Card
+                        key={e.id}
+                        title={e.name}
+                        onClick={() =>
+                            history.push(`/admin/query_engine/${e.id}/`)
+                        }
+                        height="160px"
+                        width="240px"
+                    >
+                        <div className="AdminLanding-card-content">
+                            <div className="AdminLanding-card-content-top">
+                                Last Updated
+                            </div>
+                            <div className="AdminLanding-card-content-date">
+                                {generateFormattedDate(e.updated_at)}
+                            </div>
+                        </div>
+                    </Card>
+                ));
         return (
             <div className="AdminQueryEngine">
                 <div className="AdminLanding">
@@ -496,13 +493,14 @@ export const AdminQueryEngine: React.FunctionComponent<IProps> = ({
                             {queryEngines && getCardDOM()}
                             <Card
                                 title="+"
-                                children="create a new query engine"
                                 onClick={() =>
                                     history.push('/admin/query_engine/new/')
                                 }
                                 height="160px"
                                 width="240px"
-                            />
+                            >
+                                create a new query engine
+                            </Card>
                         </div>
                     </div>
                 </div>
diff --git a/datahub/webapp/components/AppAdmin/AdminTask.tsx b/datahub/webapp/components/AppAdmin/AdminTask.tsx
index 46b1fae75..7f8b66435 100644
--- a/datahub/webapp/components/AppAdmin/AdminTask.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminTask.tsx
@@ -54,7 +54,7 @@ const tableColumnAligns: Record<string, TableAlign> = {
     enabled: 'center',
 };
 
-export const AdminTask: React.FunctionComponent<{}> = () => {
+export const AdminTask: React.FC = () => {
     const { id: detailTaskId } = useParams();
 
     const [type, setType] = React.useState<TaskType>('prod');
@@ -66,13 +66,15 @@ export const AdminTask: React.FunctionComponent<{}> = () => {
         url: '/schedule/',
     });
 
-    const filteredTaskList = React.useMemo(() => {
-        return (taskList || []).filter(
-            (task) =>
-                task.task_type === type &&
-                task.name.includes(searchString.toLocaleLowerCase())
-        );
-    }, [taskList, searchString, type]);
+    const filteredTaskList = React.useMemo(
+        () =>
+            (taskList || []).filter(
+                (task) =>
+                    task.task_type === type &&
+                    task.name.includes(searchString.toLocaleLowerCase())
+            ),
+        [taskList, searchString, type]
+    );
 
     const handleChangeEnabled = React.useCallback(
         async (taskId: number, val: boolean) => {
@@ -144,9 +146,10 @@ export const AdminTask: React.FunctionComponent<{}> = () => {
         []
     );
 
-    const detailTask = React.useMemo(() => {
-        return taskList?.find((task) => task.id === Number(detailTaskId));
-    }, [taskList, detailTaskId]);
+    const detailTask = React.useMemo(
+        () => taskList?.find((task) => task.id === Number(detailTaskId)),
+        [taskList, detailTaskId]
+    );
     return (
         <div className="AdminTask">
             <div className="AdminLanding-top">
diff --git a/datahub/webapp/components/AppAdmin/AdminUserRole.tsx b/datahub/webapp/components/AppAdmin/AdminUserRole.tsx
index 72c03e713..134546f22 100644
--- a/datahub/webapp/components/AppAdmin/AdminUserRole.tsx
+++ b/datahub/webapp/components/AppAdmin/AdminUserRole.tsx
@@ -74,28 +74,26 @@ export const AdminUserRole: React.FunctionComponent = () => {
     }, [newUserRoleState, uid]);
 
     // TODO: make it work for multiple roles per user
-    const cardDOM = userRoles?.map((userRole) => {
-        return (
-            <Card
-                key={userRole.id}
-                title={<UserBadge uid={userRole.uid} />}
-                width="100%"
-                flexRow
-            >
-                <div className="AdminUserRole-card-roles flex-column">
-                    <div className="AdminUserRole-card-role">
-                        <div>{UserRoleType[userRole.role]}</div>
-                        <Button
-                            type="inlineText"
-                            borderless
-                            title="Remove Role"
-                            onClick={() => deleteUserRole(userRole.id)}
-                        />
-                    </div>
+    const cardDOM = userRoles?.map((userRole) => (
+        <Card
+            key={userRole.id}
+            title={<UserBadge uid={userRole.uid} />}
+            width="100%"
+            flexRow
+        >
+            <div className="AdminUserRole-card-roles flex-column">
+                <div className="AdminUserRole-card-role">
+                    <div>{UserRoleType[userRole.role]}</div>
+                    <Button
+                        type="inlineText"
+                        borderless
+                        title="Remove Role"
+                        onClick={() => deleteUserRole(userRole.id)}
+                    />
                 </div>
-            </Card>
-        );
-    });
+            </div>
+        </Card>
+    ));
 
     return (
         <div className="AdminUserRole">
diff --git a/datahub/webapp/components/AppAdmin/AppAdmin.tsx b/datahub/webapp/components/AppAdmin/AppAdmin.tsx
index 3f3c3123c..6dae8ed8b 100644
--- a/datahub/webapp/components/AppAdmin/AppAdmin.tsx
+++ b/datahub/webapp/components/AppAdmin/AppAdmin.tsx
@@ -118,69 +118,66 @@ export const AppAdmin: React.FunctionComponent = () => {
         [selectedEntity]
     );
 
-    const makeLandingPageDOM = () => {
-        return (
-            <div className="AdminLanding">
-                <div className="AdminLanding-top">
-                    <div className="AdminLanding-title">
-                        Welcome to the DataHub Admin App
-                    </div>
-                    <div className="AdminLanding-desc">
-                        All your settings are here.
-                    </div>
+    const makeLandingPageDOM = () => (
+        <div className="AdminLanding">
+            <div className="AdminLanding-top">
+                <div className="AdminLanding-title">
+                    Welcome to the DataHub Admin App
                 </div>
-                <div className="AdminLanding-content">
-                    <div className="AdminLanding-cards flex-row">
-                        <Card
-                            title={<Icon name="box" />}
-                            children="create a new environment"
-                            onClick={() =>
-                                history.push('/admin/environment/new/')
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                        <Card
-                            title={<Icon name="database" />}
-                            children="create a new metastore"
-                            onClick={() =>
-                                history.push('/admin/metastore/new/')
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                        <Card
-                            title={<Icon name="server" />}
-                            children="create a new query engine"
-                            onClick={() =>
-                                history.push('/admin/query_engine/new/')
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                        <Card
-                            title={<Icon name="users" />}
-                            children="create a new user role"
-                            onClick={() =>
-                                history.push('/admin/user_role/?new=true/')
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                        <Card
-                            title={<Icon name="clipboard" />}
-                            children="create a new announcement"
-                            onClick={() =>
-                                history.push('/admin/announcement/?new=true/')
-                            }
-                            height="160px"
-                            width="240px"
-                        />
-                    </div>
+                <div className="AdminLanding-desc">
+                    All your settings are here.
                 </div>
             </div>
-        );
-    };
+            <div className="AdminLanding-content">
+                <div className="AdminLanding-cards flex-row">
+                    <Card
+                        title={<Icon name="box" />}
+                        onClick={() => history.push('/admin/environment/new/')}
+                        height="160px"
+                        width="240px"
+                    >
+                        create a new environment
+                    </Card>
+                    <Card
+                        title={<Icon name="database" />}
+                        onClick={() => history.push('/admin/metastore/new/')}
+                        height="160px"
+                        width="240px"
+                    >
+                        create a new metastore
+                    </Card>
+                    <Card
+                        title={<Icon name="server" />}
+                        onClick={() => history.push('/admin/query_engine/new/')}
+                        height="160px"
+                        width="240px"
+                    >
+                        create a new query engine
+                    </Card>
+                    <Card
+                        title={<Icon name="users" />}
+                        onClick={() =>
+                            history.push('/admin/user_role/?new=true/')
+                        }
+                        height="160px"
+                        width="240px"
+                    >
+                        create a new user role
+                    </Card>
+                    <Card
+                        title={<Icon name="clipboard" />}
+                        onClick={() =>
+                            history.push('/admin/announcement/?new=true/')
+                        }
+                        height="160px"
+                        width="240px"
+                    >
+                        create a new announcement
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
 
     return isAdmin ? (
         <div className="AppAdmin">
diff --git a/datahub/webapp/components/AppDataDoc/AppDataDoc.tsx b/datahub/webapp/components/AppDataDoc/AppDataDoc.tsx
index 799910fc1..cc7dd82cf 100644
--- a/datahub/webapp/components/AppDataDoc/AppDataDoc.tsx
+++ b/datahub/webapp/components/AppDataDoc/AppDataDoc.tsx
@@ -8,12 +8,10 @@ import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
 
 import './AppDataDoc.scss';
 
-export const AppDataDoc: React.FunctionComponent<RouteComponentProps> = () => {
-    return (
-        <Switch>
-            <Route path="/:env/datadoc/:docId/" component={DataDocWrapper} />
-            <Route path="/:env/datadoc/" exact={true} component={Landing} />
-            <Route component={FourOhFour} />
-        </Switch>
-    );
-};
+export const AppDataDoc: React.FunctionComponent<RouteComponentProps> = () => (
+    <Switch>
+        <Route path="/:env/datadoc/:docId/" component={DataDocWrapper} />
+        <Route path="/:env/datadoc/" exact={true} component={Landing} />
+        <Route component={FourOhFour} />
+    </Switch>
+);
diff --git a/datahub/webapp/components/BoardCreateUpdateModal/BoardCreateUpdateModal.tsx b/datahub/webapp/components/BoardCreateUpdateModal/BoardCreateUpdateModal.tsx
index 3c37326e9..9463731d6 100644
--- a/datahub/webapp/components/BoardCreateUpdateModal/BoardCreateUpdateModal.tsx
+++ b/datahub/webapp/components/BoardCreateUpdateModal/BoardCreateUpdateModal.tsx
@@ -123,15 +123,10 @@ export const BoardCreateUpdateForm: React.FunctionComponent<IBoardCreateUpdateFo
 
 export const BoardCreateUpdateModal: React.FunctionComponent<
     IBoardCreateUpdateFormProps & IStandardModalProps
-> = ({ boardId, onComplete, ...modalProps }) => {
-    return (
-        <Modal {...modalProps}>
-            <div className="BoardCreateUpdateModal">
-                <BoardCreateUpdateForm
-                    boardId={boardId}
-                    onComplete={onComplete}
-                />
-            </div>
-        </Modal>
-    );
-};
+> = ({ boardId, onComplete, ...modalProps }) => (
+    <Modal {...modalProps}>
+        <div className="BoardCreateUpdateModal">
+            <BoardCreateUpdateForm boardId={boardId} onComplete={onComplete} />
+        </div>
+    </Modal>
+);
diff --git a/datahub/webapp/components/ChangeLog/ChangeLog.tsx b/datahub/webapp/components/ChangeLog/ChangeLog.tsx
index 3289e7a7a..2f2016c66 100644
--- a/datahub/webapp/components/ChangeLog/ChangeLog.tsx
+++ b/datahub/webapp/components/ChangeLog/ChangeLog.tsx
@@ -63,22 +63,18 @@ export const ChangeLog: React.FunctionComponent = () => {
     const changeLogListDOM = changeLogDate ? null : (
         <div className="ChangeLog-list">
             <div className="ChangeLog-list-title mt12">Change Logs</div>
-            {changeLogList.map((log) => {
-                return (
-                    <div
-                        className="ChangeLog-log-item horizontal-space-between mv8 mh12 pv12"
-                        key={log.date}
-                        onClick={() =>
-                            navigateWithinEnv(`/changelog/${log.date}/`)
-                        }
-                    >
-                        <div>{log.date}</div>
-                        <div className="ChangeLog-arrow">
-                            <Icon name="arrow-right" />
-                        </div>
+            {changeLogList.map((log) => (
+                <div
+                    className="ChangeLog-log-item horizontal-space-between mv8 mh12 pv12"
+                    key={log.date}
+                    onClick={() => navigateWithinEnv(`/changelog/${log.date}/`)}
+                >
+                    <div>{log.date}</div>
+                    <div className="ChangeLog-arrow">
+                        <Icon name="arrow-right" />
                     </div>
-                );
-            })}
+                </div>
+            ))}
         </div>
     );
 
diff --git a/datahub/webapp/components/CodeMirrorTooltip/index.tsx b/datahub/webapp/components/CodeMirrorTooltip/index.tsx
index efab29ac2..48059e419 100644
--- a/datahub/webapp/components/CodeMirrorTooltip/index.tsx
+++ b/datahub/webapp/components/CodeMirrorTooltip/index.tsx
@@ -87,17 +87,17 @@ export async function showTooltipFor(
     const hoveredNode = nodes.find((node) => isHovered(node));
     let tooltip = null;
 
-    function hideTooltip() {
+    const hideTooltip = () => {
         if (tooltip) {
             tooltip.removeEventListener('mouseenter', onMouseEnter);
             tooltip.removeEventListener('mouseleave', onMouseOut);
             unmountTooltip(tooltip);
             tooltip = null;
         }
-    }
+    };
     let hideTooltipTimeout: number;
 
-    function hideTooltipAndNode() {
+    const hideTooltipAndNode = () => {
         nodes.forEach((node) => {
             node.removeEventListener('mouseenter', onMouseEnter);
             node.removeEventListener('mouseleave', onMouseOut);
@@ -107,21 +107,21 @@ export async function showTooltipFor(
         if (onNodeHide) {
             onNodeHide();
         }
-    }
+    };
 
-    function onMouseOut(e) {
+    const onMouseOut = () => {
         if (hideTooltipTimeout) {
             clearTimeout(hideTooltipTimeout);
         }
         hideTooltipTimeout = setTimeout(hideTooltipAndNode, 300);
-    }
+    };
 
-    function onMouseEnter(e) {
+    const onMouseEnter = () => {
         if (hideTooltipTimeout) {
             clearTimeout(hideTooltipTimeout);
             hideTooltipTimeout = null;
         }
-    }
+    };
 
     tooltip = mountTooltip(hoveredNode, props, hideTooltipAndNode, direction);
 
diff --git a/datahub/webapp/components/DataDoc/DataDoc.tsx b/datahub/webapp/components/DataDoc/DataDoc.tsx
index e1760622e..a8de288b4 100644
--- a/datahub/webapp/components/DataDoc/DataDoc.tsx
+++ b/datahub/webapp/components/DataDoc/DataDoc.tsx
@@ -13,6 +13,7 @@ import {
     IDataDoc,
     IDataCell,
     DataCellUpdateFields,
+    IDataCellMeta,
 } from 'const/datadoc';
 import history from 'lib/router-history';
 import { sendConfirm, sendNotification, setBrowserTitle } from 'lib/dataHubUI';
@@ -98,71 +99,6 @@ class DataDocComponent extends React.Component<IProps, IState> {
     private searchAndReplaceRef = React.createRef<ISearchAndReplaceHandles>();
     private focusCellIndexAfterInsert: number = null;
 
-    public componentDidMount() {
-        this.autoFocusCell({}, this.props);
-        this.openDataDoc(this.props.docId);
-        if (this.props.dataDoc?.title != null) {
-            this.publishDataDocTitle(this.props.dataDoc.title);
-        }
-        window.addEventListener('keydown', this.onKeyDown, true);
-    }
-
-    public componentDidUpdate(prevProps) {
-        this.autoFocusCell(prevProps, this.props);
-
-        if (this.props.docId !== prevProps.docId) {
-            // No need to close because openDataDoc would auto-close
-            if (prevProps.docId != null) {
-                this.props.forceSaveDataDoc(prevProps.docId);
-
-                // Reset all the state variables
-                this.setState({
-                    defaultCollapseAllCells: null,
-                    focusedCellIndex: null,
-
-                    // Sharing State
-                    cellIdToExecutionId: {},
-                    highlightCellIndex: null,
-                });
-                // Reset search
-                this.searchAndReplaceRef.current?.reset();
-            }
-            this.openDataDoc(this.props.docId);
-        }
-
-        if (
-            this.props.dataDoc?.dataDocCells !== prevProps.dataDoc?.dataDocCells
-        ) {
-            const cells = this.props.dataDoc?.dataDocCells ?? [];
-            const previousCells = prevProps.dataDoc?.dataDocCells ?? [];
-            const someCellsContextChanged =
-                cells.length !== previousCells.length ||
-                cells.some(
-                    (cell, index) =>
-                        cell.context !== previousCells[index].context
-                );
-
-            if (someCellsContextChanged) {
-                this.searchAndReplaceRef.current?.performSearch();
-            }
-
-            // When a cell is inserted, the length will be changed
-            // during this time we will focus the new inserted cell
-            const cellLengthChanged = cells.length !== previousCells.length;
-            if (cellLengthChanged && this.focusCellIndexAfterInsert != null) {
-                this.focusCellAt(this.focusCellIndexAfterInsert);
-                this.focusCellIndexAfterInsert = null;
-            }
-        }
-
-        if (
-            this.props.dataDoc?.title !== prevProps.dataDoc?.title &&
-            this.props.dataDoc?.title
-        ) {
-            this.publishDataDocTitle(this.props.dataDoc.title);
-        }
-    }
-
     // Show data doc title in url and document title
     @decorate(memoizeOne)
     public publishDataDocTitle(title: string) {
@@ -176,11 +112,6 @@ class DataDocComponent extends React.Component<IProps, IState> {
         );
     }
 
-    public componentWillUnmount() {
-        this.closeDataDoc(this.props.docId);
-        window.removeEventListener('keydown', this.onKeyDown, true);
-    }
-
     @bind
     public async openDataDoc(docId: number) {
         try {
@@ -252,6 +183,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
         }
     }
 
+    @bind
     public autoFocusCell(props: Partial<IProps>, nextProps: Partial<IProps>) {
         const { dataDoc: oldDataDoc } = props;
         const { dataDoc } = nextProps;
@@ -264,9 +196,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
                 if (dataDoc.dataDocCells) {
                     const cellIndex = findIndex(
                         dataDoc.dataDocCells,
-                        (cell) => {
-                            return cell.id === cellId;
-                        }
+                        (cell) => cell.id === cellId
                     );
 
                     if (cellIndex >= 0) {
@@ -368,7 +298,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
         index: number,
         cellType: CELL_TYPE,
         context: string,
-        meta: {}
+        meta: IDataCellMeta
     ) {
         try {
             const dataDoc = this.props.dataDoc;
@@ -553,7 +483,8 @@ class DataDocComponent extends React.Component<IProps, IState> {
         };
     }
 
-    public onKeyDown = (event: KeyboardEvent) => {
+    @bind
+    public onKeyDown(event: KeyboardEvent) {
         let stopEvent = false;
 
         const repeat = event.repeat;
@@ -567,7 +498,7 @@ class DataDocComponent extends React.Component<IProps, IState> {
             event.stopPropagation();
             event.preventDefault();
         }
-    };
+    }
 
     @bind
     public renderLazyDataDocCell(
@@ -746,6 +677,76 @@ class DataDocComponent extends React.Component<IProps, IState> {
         );
     }
 
+    public componentDidMount() {
+        this.autoFocusCell({}, this.props);
+        this.openDataDoc(this.props.docId);
+        if (this.props.dataDoc?.title != null) {
+            this.publishDataDocTitle(this.props.dataDoc.title);
+        }
+        window.addEventListener('keydown', this.onKeyDown, true);
+    }
+
+    public componentDidUpdate(prevProps) {
+        this.autoFocusCell(prevProps, this.props);
+
+        if (this.props.docId !== prevProps.docId) {
+            // No need to close because openDataDoc would auto-close
+            if (prevProps.docId != null) {
+                this.props.forceSaveDataDoc(prevProps.docId);
+
+                // Reset all the state variables
+                this.setState({
+                    defaultCollapseAllCells: null,
+                    focusedCellIndex: null,
+
+                    // Sharing State
+                    cellIdToExecutionId: {},
+                    highlightCellIndex: null,
+                });
+                // Reset search
+                this.searchAndReplaceRef.current?.reset();
+            }
+            this.openDataDoc(this.props.docId);
+        }
+
+        if (
+            this.props.dataDoc?.dataDocCells !== prevProps.dataDoc?.dataDocCells
+        ) {
+            const cells = this.props.dataDoc?.dataDocCells ?? [];
+            const previousCells = prevProps.dataDoc?.dataDocCells ?? [];
+            const someCellsContextChanged =
+                cells.length !== previousCells.length ||
+                cells.some(
+                    (cell, index) =>
+                        cell.context !== previousCells[index].context
+                );
+
+            if (someCellsContextChanged) {
+                this.searchAndReplaceRef.current?.performSearch();
+            }
+
+            // When a cell is inserted, the length will be changed
+            // during this time we will focus the new inserted cell
+            const cellLengthChanged = cells.length !== previousCells.length;
+            if (cellLengthChanged && this.focusCellIndexAfterInsert != null) {
+                this.focusCellAt(this.focusCellIndexAfterInsert);
+                this.focusCellIndexAfterInsert = null;
+            }
+        }
+
+        if (
+            this.props.dataDoc?.title !== prevProps.dataDoc?.title &&
+            this.props.dataDoc?.title
+        ) {
+            this.publishDataDocTitle(this.props.dataDoc.title);
+        }
+    }
+
+    public componentWillUnmount() {
+        this.closeDataDoc(this.props.docId);
+        window.removeEventListener('keydown', this.onKeyDown, true);
+    }
+
     public render() {
         const { dataDoc } = this.props;
         const { errorObj } = this.state;
@@ -806,7 +807,7 @@ function mapDispatchToProps(dispatch: Dispatch, ownProps: IOwnProps) {
             );
         },
 
-        changeDataDocMeta: (docId: number, meta: {}) =>
+        changeDataDocMeta: (docId: number, meta: IDataCellMeta) =>
             dispatch(dataDocActions.updateDataDocField(docId, 'meta', meta)),
 
         cloneDataDoc: (docId: number) =>
@@ -817,7 +818,7 @@ function mapDispatchToProps(dispatch: Dispatch, ownProps: IOwnProps) {
             index: number,
             cellType: CELL_TYPE,
             context: string | ContentState,
-            meta: {}
+            meta: IDataCellMeta
         ) =>
             dispatch(
                 dataDocActions.insertDataDocCell(
diff --git a/datahub/webapp/components/DataDoc/DataDocCellControl.tsx b/datahub/webapp/components/DataDoc/DataDocCellControl.tsx
index d4c14e79e..718a8e834 100644
--- a/datahub/webapp/components/DataDoc/DataDocCellControl.tsx
+++ b/datahub/webapp/components/DataDoc/DataDocCellControl.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { titleize, sleep, copy } from 'lib/utils';
 
+import { IDataCellMeta } from 'const/datadoc';
 import { sendNotification } from 'lib/dataHubUI';
 import { AsyncButton } from 'ui/AsyncButton/AsyncButton';
 import { Button } from 'ui/Button/Button';
@@ -24,7 +25,7 @@ interface IProps {
         index: number,
         cellKey: string,
         context: string,
-        meta: {}
+        meta: IDataCellMeta
     ) => any;
     deleteCellAt?: (index: number) => any;
 
diff --git a/datahub/webapp/components/DataDocCell/DataDocCell.tsx b/datahub/webapp/components/DataDocCell/DataDocCell.tsx
index ff57677ec..8390926cf 100644
--- a/datahub/webapp/components/DataDocCell/DataDocCell.tsx
+++ b/datahub/webapp/components/DataDocCell/DataDocCell.tsx
@@ -67,18 +67,13 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> = ({
         fullScreenCellIndex,
     } = useContext(DataDocContext);
     const { cellIdtoUid, arrowKeysEnabled } = useSelector(
-        (state: IStoreState) => {
-            return {
-                cellIdtoUid: dataDocSelectors.dataDocCursorByCellIdSelector(
-                    state,
-                    {
-                        docId: dataDoc.id,
-                    }
-                ),
-                arrowKeysEnabled:
-                    state.user.computedSettings.datadoc_arrow_key === 'enabled',
-            };
-        }
+        (state: IStoreState) => ({
+            cellIdtoUid: dataDocSelectors.dataDocCursorByCellIdSelector(state, {
+                docId: dataDoc.id,
+            }),
+            arrowKeysEnabled:
+                state.user.computedSettings.datadoc_arrow_key === 'enabled',
+        })
     );
 
     const [showCollapsed, setShowCollapsed] = React.useState(undefined);
@@ -110,39 +105,44 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> = ({
         [cell]
     );
 
-    const deleteCellAt = React.useCallback(() => {
-        return new Promise((resolve) => {
-            const dataDocCells = dataDoc.dataDocCells;
-            const numberOfCells = (dataDocCells || []).length;
+    const deleteCellAt = React.useCallback(
+        () =>
+            new Promise((resolve) => {
+                const dataDocCells = dataDoc.dataDocCells;
+                const numberOfCells = (dataDocCells || []).length;
 
-            if (numberOfCells > 0) {
-                const deleteCell = async () => {
-                    try {
-                        await dataDocActions.deleteDataDocCell(
-                            dataDoc.id,
-                            index
-                        );
-                    } catch (e) {
-                        sendNotification(`Delete cell failed, reason: ${e}`);
-                    } finally {
-                        resolve();
-                    }
-                };
-                sendConfirm({
-                    header: 'Delete Cell?',
-                    message: 'Deleted cells cannot be recovered',
-                    onConfirm: deleteCell,
-                    onHide: resolve,
-                });
-            } else {
-                resolve();
-            }
-        });
-    }, [dataDoc]);
+                if (numberOfCells > 0) {
+                    const deleteCell = async () => {
+                        try {
+                            await dataDocActions.deleteDataDocCell(
+                                dataDoc.id,
+                                index
+                            );
+                        } catch (e) {
+                            sendNotification(
+                                `Delete cell failed, reason: ${e}`
+                            );
+                        } finally {
+                            resolve();
+                        }
+                    };
+                    sendConfirm({
+                        header: 'Delete Cell?',
+                        message: 'Deleted cells cannot be recovered',
+                        onConfirm: deleteCell,
+                        onHide: resolve,
+                    });
+                } else {
+                    resolve();
+                }
+            }),
+        [dataDoc]
+    );
 
-    const shareUrl = useMemo(() => {
-        return getShareUrl(cell.id, cellIdToExecutionId[cell.id]);
-    }, [cell.id, cellIdToExecutionId[cell.id]]);
+    const shareUrl = useMemo(
+        () => getShareUrl(cell.id, cellIdToExecutionId[cell.id]),
+        [cell.id, cellIdToExecutionId[cell.id]]
+    );
 
     const isFullScreen = index === fullScreenCellIndex;
     const toggleFullScreen = useCallback(() => {
@@ -216,33 +216,31 @@ export const DataDocCell: React.FunctionComponent<IDataDocCellProps> = ({
         return cellDOM;
     };
 
-    const renderCellControlDOM = (idx: number, isHeaderParam: boolean) => {
-        return (
-            <div className={'data-doc-cell-divider-container'}>
-                <DataDocCellControl
-                    index={idx}
-                    numberOfCells={dataDoc.dataDocCells.length}
-                    moveCellAt={dataDocActions.moveDataDocCell.bind(
-                        null,
-                        dataDoc.id
-                    )}
-                    pasteCellAt={pasteCellAt}
-                    copyCellAt={copyCellAt}
-                    insertCellAt={insertCellAt}
-                    deleteCellAt={deleteCellAt}
-                    isHeader={isHeaderParam}
-                    isEditable={isEditable}
-                    showCollapsed={showCollapsed}
-                    setShowCollapsed={setShowCollapsed}
-                    isCollapsedDefault={
-                        Boolean(cell.meta.collapsed) === showCollapsed
-                    }
-                    toggleDefaultCollapsed={handleDefaultCollapseChange}
-                    shareUrl={shareUrl}
-                />
-            </div>
-        );
-    };
+    const renderCellControlDOM = (idx: number, isHeaderParam: boolean) => (
+        <div className={'data-doc-cell-divider-container'}>
+            <DataDocCellControl
+                index={idx}
+                numberOfCells={dataDoc.dataDocCells.length}
+                moveCellAt={dataDocActions.moveDataDocCell.bind(
+                    null,
+                    dataDoc.id
+                )}
+                pasteCellAt={pasteCellAt}
+                copyCellAt={copyCellAt}
+                insertCellAt={insertCellAt}
+                deleteCellAt={deleteCellAt}
+                isHeader={isHeaderParam}
+                isEditable={isEditable}
+                showCollapsed={showCollapsed}
+                setShowCollapsed={setShowCollapsed}
+                isCollapsedDefault={
+                    Boolean(cell.meta.collapsed) === showCollapsed
+                }
+                toggleDefaultCollapsed={handleDefaultCollapseChange}
+                shareUrl={shareUrl}
+            />
+        </div>
+    );
     const uids = cellIdtoUid[cell.id] || [];
     const uidDOM = uids.map((uid) => <UserAvatar key={uid} uid={uid} tiny />);
     const dataDocCellClassName = showCollapsed
diff --git a/datahub/webapp/components/DataDocChartCell/DataDocChartCell.tsx b/datahub/webapp/components/DataDocChartCell/DataDocChartCell.tsx
index e6270a7c2..5baaea249 100644
--- a/datahub/webapp/components/DataDocChartCell/DataDocChartCell.tsx
+++ b/datahub/webapp/components/DataDocChartCell/DataDocChartCell.tsx
@@ -30,7 +30,7 @@ interface IProps {
 
     onChange: (fields: {
         context?: string | DraftJs.ContentState;
-        meta?: {};
+        meta?: IDataChartCellMeta;
     }) => any;
     onFocus?: () => any;
     onBlur?: () => any;
diff --git a/datahub/webapp/components/DataDocChartCell/DataDocChartCellTable.tsx b/datahub/webapp/components/DataDocChartCell/DataDocChartCellTable.tsx
index 46b149c88..35bd6bde5 100644
--- a/datahub/webapp/components/DataDocChartCell/DataDocChartCellTable.tsx
+++ b/datahub/webapp/components/DataDocChartCell/DataDocChartCellTable.tsx
@@ -11,19 +11,17 @@ interface IProps {
 export const DataDocChartCellTable: React.FunctionComponent<IProps> = ({
     title,
     data,
-}) => {
-    return (
-        <div>
-            {title?.length ? (
-                <Title size={6} className="mv4 center-align">
-                    {title}
-                </Title>
-            ) : null}
-            <StatementResultTable
-                data={data}
-                paginate={true}
-                maxNumberOfRowsToShow={20}
-            />
-        </div>
-    );
-};
+}) => (
+    <div>
+        {title?.length ? (
+            <Title size={6} className="mv4 center-align">
+                {title}
+            </Title>
+        ) : null}
+        <StatementResultTable
+            data={data}
+            paginate={true}
+            maxNumberOfRowsToShow={20}
+        />
+    </div>
+);
diff --git a/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx b/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
index 1b6c39124..f39460819 100644
--- a/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
+++ b/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
@@ -105,34 +105,36 @@ const DataDocChartComposerComponent: React.FunctionComponent<
         setDisplayStatementId
     );
 
-    const chartData = React.useMemo(() => {
-        return statementResultData
-            ? transformData(
-                  statementResultData,
-                  values.aggregate,
-                  values.switch,
-                  values.formatAggCol,
-                  values.formatSeriesCol,
-                  values.formatValueCols,
-                  values.aggSeries,
-                  values.sortIndex,
-                  values.sortAsc,
-                  values.xIndex
-              )
-            : null;
-    }, [
-        statementResultData,
-        values.aggregate,
-        values.switch,
-        values.formatAggCol,
-        values.formatSeriesCol,
-        values.formatValueCols,
-        values.aggType,
-        values.aggSeries,
-        values.sortIndex,
-        values.sortAsc,
-        values.xIndex,
-    ]);
+    const chartData = React.useMemo(
+        () =>
+            statementResultData
+                ? transformData(
+                      statementResultData,
+                      values.aggregate,
+                      values.switch,
+                      values.formatAggCol,
+                      values.formatSeriesCol,
+                      values.formatValueCols,
+                      values.aggSeries,
+                      values.sortIndex,
+                      values.sortAsc,
+                      values.xIndex
+                  )
+                : null,
+        [
+            statementResultData,
+            values.aggregate,
+            values.switch,
+            values.formatAggCol,
+            values.formatSeriesCol,
+            values.formatValueCols,
+            values.aggType,
+            values.aggSeries,
+            values.sortIndex,
+            values.sortAsc,
+            values.xIndex,
+        ]
+    );
 
     // getting redux state
     const queryCellOptions = useSelector((state: IStoreState) =>
@@ -1067,9 +1069,8 @@ function formValsToMeta(vals: IChartFormValues, meta: IDataChartCellMeta) {
 }
 
 export const DataDocChartComposer = withFormik<IProps, IChartFormValues>({
-    mapPropsToValues: ({ meta, cellAboveId }) => {
-        return mapMetaToFormVals(meta, cellAboveId);
-    },
+    mapPropsToValues: ({ meta, cellAboveId }) =>
+        mapMetaToFormVals(meta, cellAboveId),
 
     handleSubmit: (values, { props: { onUpdateChartConfig, meta } }) => {
         onUpdateChartConfig(formValsToMeta(values, meta));
diff --git a/datahub/webapp/components/DataDocLeftSidebar/DataDocLeftSidebar.tsx b/datahub/webapp/components/DataDocLeftSidebar/DataDocLeftSidebar.tsx
index 985b0d3e9..08373544b 100644
--- a/datahub/webapp/components/DataDocLeftSidebar/DataDocLeftSidebar.tsx
+++ b/datahub/webapp/components/DataDocLeftSidebar/DataDocLeftSidebar.tsx
@@ -38,12 +38,13 @@ export const DataDocLeftSidebar: React.FunctionComponent<IProps> = ({
         LeftSidebarContentState
     >('default');
 
-    useEffect(() => {
-        return () => {
+    useEffect(
+        () => () => {
             clearSidebarTableId();
             setContentState('default');
-        };
-    }, []);
+        },
+        []
+    );
     useEffect(() => {
         if (sidebarTableId != null) {
             setContentState('table');
diff --git a/datahub/webapp/components/DataDocNavigator/DataDocNavigator.tsx b/datahub/webapp/components/DataDocNavigator/DataDocNavigator.tsx
index 74e276a1e..d0642bfa0 100644
--- a/datahub/webapp/components/DataDocNavigator/DataDocNavigator.tsx
+++ b/datahub/webapp/components/DataDocNavigator/DataDocNavigator.tsx
@@ -29,7 +29,7 @@ import { DataDocDraggableType, BoardDraggableType } from './navigatorConst';
 import { IDragItem } from 'ui/DraggableList/types';
 import { IBoardItem } from 'const/board';
 
-export const DataDocNavigator: React.FC<{}> = ({}) => {
+export const DataDocNavigator: React.FC = () => {
     const loadedFilterModes = useSelector(
         (state: IStoreState) =>
             state.dataDoc.loadedEnvironmentFilterMode[
@@ -190,7 +190,7 @@ const FavoriteDataDocsSection: React.FC<ICommonSectionProps> = (props) => {
 
     const [{ isOver }, dropRef] = useDrop({
         accept: [BoardDraggableType, DataDocDraggableType],
-        drop(item: IDragItem<IDataDoc | IProcessedBoardItem>, monitor) {
+        drop: (item: IDragItem<IDataDoc | IProcessedBoardItem>, monitor) => {
             if (monitor.didDrop()) {
                 return;
             }
@@ -209,12 +209,13 @@ const FavoriteDataDocsSection: React.FC<ICommonSectionProps> = (props) => {
             }
         },
 
-        collect(monitor) {
+        collect: (monitor) => {
             const item: IDragItem = monitor.getItem();
             return {
                 isOver:
                     item?.type === BoardDraggableType &&
-                    (item?.itemInfo as IProcessedBoardItem).itemType === 'table'
+                    ((item?.itemInfo as unknown) as IProcessedBoardItem)
+                        .itemType === 'table'
                         ? false
                         : monitor.isOver(),
             };
diff --git a/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx b/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx
index 1bace5adf..af77973f1 100644
--- a/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx
+++ b/datahub/webapp/components/DataDocNavigator/DataDocNavigatorBoardSection.tsx
@@ -200,9 +200,8 @@ const NavigatorBoardView: React.FunctionComponent<{
     );
 
     const handleLocalMoveBoardItem = React.useCallback(
-        (fromIndex: number, toIndex: number) => {
-            return dispatch(moveBoardItem(board.id, fromIndex, toIndex));
-        },
+        (fromIndex: number, toIndex: number) =>
+            dispatch(moveBoardItem(board.id, fromIndex, toIndex)),
         [board]
     );
 
@@ -214,7 +213,7 @@ const NavigatorBoardView: React.FunctionComponent<{
 
     const [{ isOver }, dropRef] = useDrop({
         accept: [BoardDraggableType, DataDocDraggableType],
-        drop(item: IDragItem<IProcessedBoardItem | IDataDoc>, monitor) {
+        drop: (item: IDragItem<IProcessedBoardItem | IDataDoc>, monitor) => {
             // You shouldn't be able to drag and drop to your original board
             if (monitor.didDrop()) {
                 return;
@@ -222,7 +221,7 @@ const NavigatorBoardView: React.FunctionComponent<{
             onMoveBoardItem(item.type, item.itemInfo, id);
         },
 
-        collect(monitor) {
+        collect: (monitor) => {
             const item: IDragItem = monitor.getItem();
 
             return {
@@ -377,11 +376,12 @@ const BoardExpandableList: React.FunctionComponent<{
             filterString
                 ? new Set(
                       processedItems
-                          .filter((item) => {
-                              return !item.title
-                                  ?.toLowerCase()
-                                  .includes(filterString);
-                          })
+                          .filter(
+                              (item) =>
+                                  !item.title
+                                      ?.toLowerCase()
+                                      .includes(filterString)
+                          )
                           .map((item) => item.id)
                   )
                 : new Set(),
@@ -389,9 +389,8 @@ const BoardExpandableList: React.FunctionComponent<{
     );
 
     const canDrop = useCallback(
-        (item: IDragItem<IProcessedBoardItem>) => {
-            return item.itemInfo.boardId === boardId;
-        },
+        (item: IDragItem<IProcessedBoardItem>) =>
+            item.itemInfo.boardId === boardId,
         [boardId]
     );
 
diff --git a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
index bc6c21274..c1a7f7be3 100644
--- a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
+++ b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
@@ -69,7 +69,7 @@ interface IOwnProps {
 
     onChange: (fields: {
         context?: string | DraftJs.ContentState;
-        meta?: {};
+        meta?: IDataQueryCellMeta;
     }) => any;
     onFocus?: () => any;
     onBlur?: () => any;
@@ -108,7 +108,7 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         'Shift-Alt-D': this.props.onDeleteKeyPressed,
     };
 
-    constructor(props) {
+    public constructor(props) {
         super(props);
 
         this.state = {
@@ -121,32 +121,11 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         };
     }
 
+    @bind
     public get engineId() {
         return this.state.meta.engine;
     }
 
-    public componentDidMount() {
-        this.updateFocus();
-    }
-
-    public componentDidUpdate(prevProps, prevState) {
-        this.updateFocus();
-
-        if (
-            prevProps.query !== this.props.query ||
-            prevProps.meta !== this.props.meta
-        ) {
-            this.setState({
-                ...(prevProps.query !== this.props.query && {
-                    query: this.props.query,
-                }),
-                ...(prevProps.meta !== this.props.meta && {
-                    meta: this.props.meta,
-                }),
-            });
-        }
-    }
-
     @bind
     @debounce(ON_CHANGE_DEBOUNCE_MS)
     public onChangeDebounced(...args) {
@@ -250,6 +229,7 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         }
     }
 
+    @bind
     public focus() {
         if (
             !(
@@ -338,8 +318,11 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
             () => this.onChangeDebounced({ meta: newMeta })
         );
     }
-    public handleMetaTitleChange = (value: string) =>
-        this.handleMetaChange('title', value);
+
+    @bind
+    public handleMetaTitleChange(value: string) {
+        return this.handleMetaChange('title', value);
+    }
 
     @bind
     public getCurrentSelectedQuery() {
@@ -393,15 +376,6 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         }
     }
 
-    public additionalDropDownButtonFormatter() {
-        return (
-            <Icon
-                className="additional-dropdown-button flex-center"
-                name="more-vertical"
-            />
-        );
-    }
-
     @bind
     public toggleQueryCollapsing(forceCollapse: boolean) {
         const { isEditable } = this.props;
@@ -423,6 +397,7 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
             : isQueryCollapsedSavedValue;
     }
 
+    @bind
     public getAdditionalDropDownButtonDOM() {
         const { isEditable } = this.props;
 
@@ -497,6 +472,37 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         );
     }
 
+    public componentDidMount() {
+        this.updateFocus();
+    }
+
+    public componentDidUpdate(prevProps, prevState) {
+        this.updateFocus();
+
+        if (
+            prevProps.query !== this.props.query ||
+            prevProps.meta !== this.props.meta
+        ) {
+            this.setState({
+                ...(prevProps.query !== this.props.query && {
+                    query: this.props.query,
+                }),
+                ...(prevProps.meta !== this.props.meta && {
+                    meta: this.props.meta,
+                }),
+            });
+        }
+    }
+
+    public additionalDropDownButtonFormatter() {
+        return (
+            <Icon
+                className="additional-dropdown-button flex-center"
+                name="more-vertical"
+            />
+        );
+    }
+
     public get defaultCellTitle() {
         const { queryIndexInDoc } = this.props;
         return queryIndexInDoc == null
diff --git a/datahub/webapp/components/DataDocStatementExecution/DataDocStatementExecution.tsx b/datahub/webapp/components/DataDocStatementExecution/DataDocStatementExecution.tsx
index dfeea86ae..feaccf2c7 100644
--- a/datahub/webapp/components/DataDocStatementExecution/DataDocStatementExecution.tsx
+++ b/datahub/webapp/components/DataDocStatementExecution/DataDocStatementExecution.tsx
@@ -36,7 +36,7 @@ export class DataDocStatementExecution extends React.PureComponent<
     IProps,
     IState
 > {
-    constructor(props) {
+    public constructor(props) {
         super(props);
         this.state = {
             showInFullScreen: false,
@@ -45,6 +45,13 @@ export class DataDocStatementExecution extends React.PureComponent<
         this.loadStatementResult(this.props);
     }
 
+    @bind
+    public onFullscreenToggle() {
+        this.setState({
+            showInFullScreen: true,
+        });
+    }
+
     public componentDidUpdate(prevProps) {
         if (this.props.statementExecution !== prevProps.statementExecution) {
             this.loadStatementResult(this.props);
@@ -59,13 +66,6 @@ export class DataDocStatementExecution extends React.PureComponent<
         }
     }
 
-    @bind
-    public onFullscreenToggle() {
-        this.setState({
-            showInFullScreen: true,
-        });
-    }
-
     public makeLogDOM() {
         return (
             <StatementLogWrapper
diff --git a/datahub/webapp/components/DataDocStatementExecution/StatementResultColumnInfo.tsx b/datahub/webapp/components/DataDocStatementExecution/StatementResultColumnInfo.tsx
index 887651e06..3f92948d7 100644
--- a/datahub/webapp/components/DataDocStatementExecution/StatementResultColumnInfo.tsx
+++ b/datahub/webapp/components/DataDocStatementExecution/StatementResultColumnInfo.tsx
@@ -79,13 +79,11 @@ export const StatementResultColumnInfo: React.FC<{
     ) : null;
 
     const generateStatisticsDOM = () => {
-        const statsDOM = statistics.map(([key, name, stat]) => {
-            return (
-                <div key={key} className="result-statistic">
-                    {name}: {stat}
-                </div>
-            );
-        });
+        const statsDOM = statistics.map(([key, name, stat]) => (
+            <div key={key} className="result-statistic">
+                {name}: {stat}
+            </div>
+        ));
         return <div>{statsDOM}</div>;
     };
 
diff --git a/datahub/webapp/components/DataDocStatementExecutionBar/ResultExportDropdown.tsx b/datahub/webapp/components/DataDocStatementExecutionBar/ResultExportDropdown.tsx
index 8e10b34c7..b52542db2 100644
--- a/datahub/webapp/components/DataDocStatementExecutionBar/ResultExportDropdown.tsx
+++ b/datahub/webapp/components/DataDocStatementExecutionBar/ResultExportDropdown.tsx
@@ -52,23 +52,21 @@ function isPreviewFullResult(
 const UrlModal: React.FunctionComponent<{
     url: string;
     onHide: () => any;
-}> = ({ url, onHide }) => {
-    return (
-        <Modal onHide={onHide}>
-            <div className="flex-center mv24">
-                <Title size={5}>
-                    <Link to={url} newTab>
-                        View Export
-                    </Link>
-                </Title>
-            </div>
-        </Modal>
-    );
-};
+}> = ({ url, onHide }) => (
+    <Modal onHide={onHide}>
+        <div className="flex-center mv24">
+            <Title size={5}>
+                <Link to={url} newTab>
+                    View Export
+                </Link>
+            </Title>
+        </div>
+    </Modal>
+);
 
 const FormModal: React.FunctionComponent<{
     form: IStructFormField;
-    onSubmit: (data: {}) => any;
+    onSubmit: (data: Record<string, unknown>) => any;
     onHide: () => any;
 }> = ({ form, onSubmit, onHide }) => {
     const [formData, setFormData] = React.useState({});
@@ -140,7 +138,10 @@ export const ResultExportDropdown: React.FunctionComponent<IProps> = ({
     }, [statementId, statementResult, loadStatementResult]);
 
     const handleExport = React.useCallback(
-        async (exporter: IQueryResultExporter, formData?: {}) => {
+        async (
+            exporter: IQueryResultExporter,
+            formData?: Record<string, unknown>
+        ) => {
             try {
                 await getExporterAuthentication(exporter);
 
diff --git a/datahub/webapp/components/DataDocTextCell/DataDocTextCell.tsx b/datahub/webapp/components/DataDocTextCell/DataDocTextCell.tsx
index df65a4e3f..5cd402f3a 100644
--- a/datahub/webapp/components/DataDocTextCell/DataDocTextCell.tsx
+++ b/datahub/webapp/components/DataDocTextCell/DataDocTextCell.tsx
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 
 import { SearchAndReplaceContext } from 'context/searchAndReplace';
 import { DraftJsSearchHighlighter } from 'components/SearchAndReplace/DraftJsSearchHighlighter';
+import { IDataCellMetaBase } from 'const/datadoc';
 import { RichTextEditor } from 'ui/RichTextEditor/RichTextEditor';
 import { useDebounceState } from 'hooks/redux/useDebounceState';
 import './DataDocTextCell.scss';
@@ -20,14 +21,14 @@ interface IProps {
     cellId: number;
 
     context: DraftJs.ContentState;
-    meta: {};
+    meta: IDataCellMetaBase;
     isEditable: boolean;
 
     shouldFocus: boolean;
 
     onChange: (fields: {
         context?: string | DraftJs.ContentState;
-        meta?: {};
+        meta?: IDataCellMetaBase;
     }) => any;
     onDeleteKeyPressed?: () => any;
     onFocus?: () => any;
diff --git a/datahub/webapp/components/DataDocViewersBadge/DataDocViewersBadge.tsx b/datahub/webapp/components/DataDocViewersBadge/DataDocViewersBadge.tsx
index 3fff9c779..f3e220010 100644
--- a/datahub/webapp/components/DataDocViewersBadge/DataDocViewersBadge.tsx
+++ b/datahub/webapp/components/DataDocViewersBadge/DataDocViewersBadge.tsx
@@ -132,7 +132,7 @@ class DataDocViewersBadgeComponent extends React.Component<IProps, IState> {
                     readonly={readonly}
                     viewerInfos={viewerInfos}
                     accessRequestsByUid={accessRequestsByUid}
-                    isOwner={dataDoc.owner_uid == ownerId}
+                    isOwner={dataDoc.owner_uid === ownerId}
                     editorsByUid={editorsByUid}
                     dataDoc={dataDoc}
                     addDataDocEditor={addDataDocEditor}
diff --git a/datahub/webapp/components/DataDocViewersList/DataDocViewersList.tsx b/datahub/webapp/components/DataDocViewersList/DataDocViewersList.tsx
index 7a06f075f..a74be58d2 100644
--- a/datahub/webapp/components/DataDocViewersList/DataDocViewersList.tsx
+++ b/datahub/webapp/components/DataDocViewersList/DataDocViewersList.tsx
@@ -96,7 +96,7 @@ export const DataDocViewersList: React.FunctionComponent<IDataDocViewersListProp
                         isOwner={isOwner}
                         viewerInfo={info}
                         onPermissionChange={(permission) => {
-                            if (permission == DataDocPermission.OWNER) {
+                            if (permission === DataDocPermission.OWNER) {
                                 updateDataDocOwner(info.uid);
                             } else {
                                 const { read, write } = permissionToReadWrite(
diff --git a/datahub/webapp/components/DataTableNavigator/DataTableNavigator.tsx b/datahub/webapp/components/DataTableNavigator/DataTableNavigator.tsx
index 2255ec1e1..05187cfbb 100644
--- a/datahub/webapp/components/DataTableNavigator/DataTableNavigator.tsx
+++ b/datahub/webapp/components/DataTableNavigator/DataTableNavigator.tsx
@@ -55,7 +55,7 @@ class DataTableNavigatorComponent extends React.PureComponent<
     IDataTableNavigatorProps,
     IDataTableNavigatorState
 > {
-    constructor(props) {
+    public constructor(props) {
         super(props);
 
         const index = this.props.searchFilters['golden'] === true ? 0 : 1;
@@ -64,15 +64,6 @@ class DataTableNavigatorComponent extends React.PureComponent<
         };
     }
 
-    public componentDidMount() {
-        this.props.mapQueryParamToState();
-        this.setDefaultMetastoreForEnvironment();
-    }
-
-    public componentDidUpdate() {
-        this.setDefaultMetastoreForEnvironment();
-    }
-
     @bind
     public setDefaultMetastoreForEnvironment() {
         this._autoClearMetastoreResults(this.props.queryMetastores.length);
@@ -151,6 +142,15 @@ class DataTableNavigatorComponent extends React.PureComponent<
         this.props.updateSearchString(searchString);
     }
 
+    public componentDidMount() {
+        this.props.mapQueryParamToState();
+        this.setDefaultMetastoreForEnvironment();
+    }
+
+    public componentDidUpdate() {
+        this.setDefaultMetastoreForEnvironment();
+    }
+
     public render() {
         const {
             dataTables,
@@ -246,27 +246,23 @@ function mapStateToProps(state: IStoreState) {
     };
 }
 
-const mapDispatchToProps = (dispatch: Dispatch) => {
-    return {
-        mapQueryParamToState: () =>
-            dispatch(dataTableSearchActions.mapQueryParamToState()),
-        updateSearchString: (searchString: string) =>
-            dispatch(dataTableSearchActions.updateSearchString(searchString)),
-        updateSearchFilter<K extends keyof ITableSearchFilters>(
-            filterKey: K,
-            filterVal: ITableSearchFilters[K]
-        ) {
-            return dispatch(
-                dataTableSearchActions.updateSearchFilter(filterKey, filterVal)
-            );
-        },
-        selectMetastore: (metastoreId: number) =>
-            dispatch(dataTableSearchActions.selectMetastore(metastoreId)),
-        getMoreDataTable: () =>
-            dispatch(dataTableSearchActions.getMoreDataTable()),
-        resetSearch: () => dispatch(dataTableSearchActions.resetSearch()),
-    };
-};
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    mapQueryParamToState: () =>
+        dispatch(dataTableSearchActions.mapQueryParamToState()),
+    updateSearchString: (searchString: string) =>
+        dispatch(dataTableSearchActions.updateSearchString(searchString)),
+    updateSearchFilter: <K extends keyof ITableSearchFilters>(
+        filterKey: K,
+        filterVal: ITableSearchFilters[K]
+    ) =>
+        dispatch(
+            dataTableSearchActions.updateSearchFilter(filterKey, filterVal)
+        ),
+    selectMetastore: (metastoreId: number) =>
+        dispatch(dataTableSearchActions.selectMetastore(metastoreId)),
+    getMoreDataTable: () => dispatch(dataTableSearchActions.getMoreDataTable()),
+    resetSearch: () => dispatch(dataTableSearchActions.resetSearch()),
+});
 
 export const DataTableNavigator = withRouter<IDataTableNavigatorOwnProps>(
     connect(mapStateToProps, mapDispatchToProps)(DataTableNavigatorComponent)
diff --git a/datahub/webapp/components/DataTableTags/TableTagSelect.tsx b/datahub/webapp/components/DataTableTags/TableTagSelect.tsx
index 53e4f8e90..6d85d1f7c 100644
--- a/datahub/webapp/components/DataTableTags/TableTagSelect.tsx
+++ b/datahub/webapp/components/DataTableTags/TableTagSelect.tsx
@@ -18,10 +18,7 @@ interface IProps {
     existingTags?: string[];
 }
 
-const tagReactSelectStyle: {} = makeReactSelectStyle(
-    true,
-    miniReactSelectStyles
-);
+const tagReactSelectStyle = makeReactSelectStyle(true, miniReactSelectStyles);
 
 export const TableTagSelect: React.FunctionComponent<IProps> = ({
     onSelect,
@@ -38,15 +35,18 @@ export const TableTagSelect: React.FunctionComponent<IProps> = ({
         },
     });
 
-    const tagSuggestions = React.useMemo(() => {
-        return (rawTagSuggestions || []).filter(
-            (str) => !existingTags.includes(str)
-        );
-    }, [rawTagSuggestions, existingTags]);
+    const tagSuggestions = React.useMemo(
+        () =>
+            (rawTagSuggestions || []).filter(
+                (str) => !existingTags.includes(str)
+            ),
+        [rawTagSuggestions, existingTags]
+    );
 
-    const isValid = React.useMemo(() => {
-        return isTyping && isValidCheck ? isValidCheck(tagString) : true;
-    }, [isValidCheck, tagString]);
+    const isValid = React.useMemo(
+        () => (isTyping && isValidCheck ? isValidCheck(tagString) : true),
+        [isValidCheck, tagString]
+    );
 
     const handleSelect = React.useCallback(
         (val?: string) => {
diff --git a/datahub/webapp/components/DataTableView/DataTableView.tsx b/datahub/webapp/components/DataTableView/DataTableView.tsx
index 8800febc2..f0f60ee6f 100644
--- a/datahub/webapp/components/DataTableView/DataTableView.tsx
+++ b/datahub/webapp/components/DataTableView/DataTableView.tsx
@@ -87,20 +87,6 @@ class DataTableViewComponent extends React.PureComponent<
         selectedTabKey: this.getInitialTabKey(),
     };
 
-    public componentDidMount() {
-        this.props.getTable(this.props.tableId);
-        this.publishDataTableTitle(this.props.tableName);
-    }
-
-    public componentDidUpdate(prevProps) {
-        if (
-            this.props.tableName &&
-            prevProps.tableName !== this.props.tableName
-        ) {
-            this.publishDataTableTitle(this.props.tableName);
-        }
-    }
-
     @decorate(memoizeOne)
     public publishDataTableTitle(title: string) {
         if (title) {
@@ -115,20 +101,20 @@ class DataTableViewComponent extends React.PureComponent<
         }
     }
 
+    @bind
     public getInitialTabKey() {
         const queryParam = getQueryString();
         return queryParam['tab'] || snakeCase(tabDefinitions[0].key);
     }
 
+    @bind
     public getInitialTabs() {
         const tabs = tabDefinitions;
-        return tabs.map((tab) => {
-            return {
-                name: tab.name,
-                key: tab.key,
-                onClick: this.onTabSelected.bind(this, tab.key),
-            };
-        });
+        return tabs.map((tab) => ({
+            name: tab.name,
+            key: tab.key,
+            onClick: this.onTabSelected.bind(this, tab.key),
+        }));
     }
 
     @bind
@@ -283,6 +269,20 @@ class DataTableViewComponent extends React.PureComponent<
         );
     }
 
+    public componentDidMount() {
+        this.props.getTable(this.props.tableId);
+        this.publishDataTableTitle(this.props.tableName);
+    }
+
+    public componentDidUpdate(prevProps) {
+        if (
+            this.props.tableName &&
+            prevProps.tableName !== this.props.tableName
+        ) {
+            this.publishDataTableTitle(this.props.tableName);
+        }
+    }
+
     public render() {
         const { table, tableId, getTable } = this.props;
 
@@ -383,9 +383,8 @@ function mapStateToProps(state: IStoreState, ownProps) {
 
 function mapDispatchToProps(dispatch: Dispatch, ownProps) {
     return {
-        getTable: (tableId) => {
-            return dispatch(dataSourcesActions.fetchDataTableIfNeeded(tableId));
-        },
+        getTable: (tableId) =>
+            dispatch(dataSourcesActions.fetchDataTableIfNeeded(tableId)),
 
         loadDataJobMetadata: (dataJobMetadataId) => {
             dispatch(
@@ -395,20 +394,16 @@ function mapDispatchToProps(dispatch: Dispatch, ownProps) {
             );
         },
 
-        updateDataTable: (tableId, params) => {
-            return dispatch(
-                dataSourcesActions.updateDataTable(tableId, params)
-            );
-        },
+        updateDataTable: (tableId, params) =>
+            dispatch(dataSourcesActions.updateDataTable(tableId, params)),
 
-        updateDataColumnDescription: (columnId, description) => {
-            return dispatch(
+        updateDataColumnDescription: (columnId, description) =>
+            dispatch(
                 dataSourcesActions.updateDataColumnDescription(
                     columnId,
                     description
                 )
-            );
-        },
+            ),
         loadDataLineages: (tableId) =>
             dispatch(dataSourcesActions.fetchDataLineage(tableId)),
     };
diff --git a/datahub/webapp/components/DataTableViewLineage/DataTableViewLineage.tsx b/datahub/webapp/components/DataTableViewLineage/DataTableViewLineage.tsx
index e0d8815fc..569423fd9 100644
--- a/datahub/webapp/components/DataTableViewLineage/DataTableViewLineage.tsx
+++ b/datahub/webapp/components/DataTableViewLineage/DataTableViewLineage.tsx
@@ -147,7 +147,8 @@ export const DataTableViewLineage: React.FunctionComponent<IDataTableViewLineage
                 nodes={nodes}
                 edges={edges}
                 focusNode={focusNode}
-                onNodeClicked={(node: IDAGNode, d3) => {
+                onNodeClicked={(_node, d3) => {
+                    const node = (_node as unknown) as IDAGNode;
                     const newTableId = Number(node.id);
                     const prevSelectedNode =
                         selectedTableId && d3.select(`#node${selectedTableId}`);
diff --git a/datahub/webapp/components/DataTableViewMini/PanelSection.tsx b/datahub/webapp/components/DataTableViewMini/PanelSection.tsx
index 80cdcc32e..23f82de5b 100644
--- a/datahub/webapp/components/DataTableViewMini/PanelSection.tsx
+++ b/datahub/webapp/components/DataTableViewMini/PanelSection.tsx
@@ -84,8 +84,8 @@ const StyledSubPanelSection = styled.div`
 export const SubPanelSection: React.FunctionComponent<{
     title: string;
     hideIfNoContent?: boolean;
-}> = ({ title, children, hideIfNoContent }) => {
-    return hideIfNoContent && !children ? null : (
+}> = ({ title, children, hideIfNoContent }) =>
+    hideIfNoContent && !children ? null : (
         <StyledSubPanelSection>
             <div>
                 <SubPanelTitle>{title}</SubPanelTitle>
@@ -93,4 +93,3 @@ export const SubPanelSection: React.FunctionComponent<{
             <div>{children}</div>
         </StyledSubPanelSection>
     );
-};
diff --git a/datahub/webapp/components/DataTableViewMini/TablePanelView.tsx b/datahub/webapp/components/DataTableViewMini/TablePanelView.tsx
index f0b36c998..04ea4c0f3 100644
--- a/datahub/webapp/components/DataTableViewMini/TablePanelView.tsx
+++ b/datahub/webapp/components/DataTableViewMini/TablePanelView.tsx
@@ -35,9 +35,8 @@ export const TablePanelView: React.FunctionComponent<ITablePanelViewProps> = ({
 
     const dispatch = useDispatch();
 
-    const getTable = () => {
-        return dispatch(dataSourcesActions.fetchDataTableIfNeeded(tableId));
-    };
+    const getTable = () =>
+        dispatch(dataSourcesActions.fetchDataTableIfNeeded(tableId));
 
     const renderPanelView = () => {
         const overviewSection = (
diff --git a/datahub/webapp/components/DataTableViewOverview/DataTableViewOverviewSection.tsx b/datahub/webapp/components/DataTableViewOverview/DataTableViewOverviewSection.tsx
index f6ad7469b..f7cdac489 100644
--- a/datahub/webapp/components/DataTableViewOverview/DataTableViewOverviewSection.tsx
+++ b/datahub/webapp/components/DataTableViewOverview/DataTableViewOverviewSection.tsx
@@ -8,8 +8,8 @@ interface IProps {
 export const DataTableViewOverviewSection: React.FC<IProps> = ({
     title,
     children,
-}) => {
-    return children ? (
+}) =>
+    children ? (
         <div>
             <div className="overview-section-top">
                 <Title size={5}>{title}</Title>
@@ -19,4 +19,3 @@ export const DataTableViewOverviewSection: React.FC<IProps> = ({
             <br />
         </div>
     ) : null;
-};
diff --git a/datahub/webapp/components/DataTableViewSamples/DataTableViewSamples.tsx b/datahub/webapp/components/DataTableViewSamples/DataTableViewSamples.tsx
index 229647049..a10197d34 100644
--- a/datahub/webapp/components/DataTableViewSamples/DataTableViewSamples.tsx
+++ b/datahub/webapp/components/DataTableViewSamples/DataTableViewSamples.tsx
@@ -164,16 +164,17 @@ export const DataTableViewSamples: React.FunctionComponent<IDataTableViewSamples
         async (tableId, params: ITableSampleParams, language: string) => {
             const { data: query } = await ds.fetch<string>(
                 `/table/${tableId}/raw_samples_query/`,
-                params
+                params as Record<string, any>
             );
             setRawSamplesQuery(format(query, language));
         },
         []
     );
 
-    const pollDataTableSamples = React.useCallback(() => {
-        return dispatch(dataSourcesActions.pollDataTableSample(table.id));
-    }, [table.id]);
+    const pollDataTableSamples = React.useCallback(
+        () => dispatch(dataSourcesActions.pollDataTableSample(table.id)),
+        [table.id]
+    );
 
     const controlDOM = (
         <div className="samples-control">
@@ -185,13 +186,13 @@ export const DataTableViewSamples: React.FunctionComponent<IDataTableViewSamples
                     order_by: null,
                     order_by_asc: true,
                 }}
-                onSubmit={(values) => {
-                    return createDataTableSamples(
+                onSubmit={(values) =>
+                    createDataTableSamples(
                         table.id,
                         values.engineId,
                         valuesToParams(values)
-                    );
-                }}
+                    )
+                }
             >
                 {({ submitForm, isSubmitting, isValid, values }) => (
                     <div className="mb12">
@@ -368,7 +369,7 @@ const DataTableViewSamplesTable: React.FC<{
         <SamplesTableView tableName={tableName} samples={samples} />
     ) : (
         <div className="samples-not-found">
-            Samples not found, Click 'Generate' to create samples.
+            Samples not found, Click "Generate" to create samples.
         </div>
     );
 
diff --git a/datahub/webapp/components/DataTableViewWarnings/DataTableViewWarnings.tsx b/datahub/webapp/components/DataTableViewWarnings/DataTableViewWarnings.tsx
index 03a297afd..fb4fcb650 100644
--- a/datahub/webapp/components/DataTableViewWarnings/DataTableViewWarnings.tsx
+++ b/datahub/webapp/components/DataTableViewWarnings/DataTableViewWarnings.tsx
@@ -83,20 +83,17 @@ export const DataTableViewWarnings: React.FC<IProps> = ({
         </FormWrapper>
     );
 
-    const getCardsDOM = () => {
-        return tableWarnings.map((warning) => {
-            return (
-                <Card key={warning.id} title="" width="100%" flexRow>
-                    <SingleCRUD
-                        item={warning}
-                        deleteItem={deleteWarning}
-                        updateItem={updateWarning(warning.id)}
-                        renderItem={renderWarningDOM}
-                    />
-                </Card>
-            );
-        });
-    };
+    const getCardsDOM = () =>
+        tableWarnings.map((warning) => (
+            <Card key={warning.id} title="" width="100%" flexRow>
+                <SingleCRUD
+                    item={warning}
+                    deleteItem={deleteWarning}
+                    updateItem={updateWarning(warning.id)}
+                    renderItem={renderWarningDOM}
+                />
+            </Card>
+        ));
 
     const getNewFormDOM = () => {
         if (displayNewForm) {
@@ -117,18 +114,17 @@ export const DataTableViewWarnings: React.FC<IProps> = ({
             return (
                 <Card
                     title=""
-                    children={
-                        <div className=" flex-row">
-                            <Icon name="plus" className="mr8" />
-                            <span>create a new warning</span>
-                        </div>
-                    }
                     width="100%"
                     flexRow
                     onClick={() => {
                         setDisplayNewForm(true);
                     }}
-                />
+                >
+                    <div className=" flex-row">
+                        <Icon name="plus" className="mr8" />
+                        <span>create a new warning</span>
+                    </div>
+                </Card>
             );
         }
     };
diff --git a/datahub/webapp/components/EnvironmentAppSidebar/EntitySidebar.tsx b/datahub/webapp/components/EnvironmentAppSidebar/EntitySidebar.tsx
index b0ccb013f..72ee947c0 100644
--- a/datahub/webapp/components/EnvironmentAppSidebar/EntitySidebar.tsx
+++ b/datahub/webapp/components/EnvironmentAppSidebar/EntitySidebar.tsx
@@ -36,34 +36,32 @@ export const EntitySidebar: React.FunctionComponent<IEntitySidebarProps> = ({
         <div className="EntitySidebar">
             <div className="apps-list">
                 <Route
-                    render={({ location }) => {
-                        return (
-                            <>
-                                <Link to={`/${environment.name}/`}>
-                                    <IconButton
-                                        icon="home"
-                                        tooltip="Home"
-                                        tooltipPos="right"
-                                        active={
-                                            location.pathname ===
-                                            `/${environment.name}/`
-                                        }
-                                    />
-                                </Link>
+                    render={({ location }) => (
+                        <>
+                            <Link to={`/${environment.name}/`}>
+                                <IconButton
+                                    icon="home"
+                                    tooltip="Home"
+                                    tooltipPos="right"
+                                    active={
+                                        location.pathname ===
+                                        `/${environment.name}/`
+                                    }
+                                />
+                            </Link>
 
-                                <Link to={`/${environment.name}/adhoc/`}>
-                                    <IconButton
-                                        icon="edit"
-                                        tooltip={'Adhoc Query'}
-                                        tooltipPos="right"
-                                        active={location.pathname.startsWith(
-                                            `/${environment.name}/adhoc/`
-                                        )}
-                                    />
-                                </Link>
-                            </>
-                        );
-                    }}
+                            <Link to={`/${environment.name}/adhoc/`}>
+                                <IconButton
+                                    icon="edit"
+                                    tooltip={'Adhoc Query'}
+                                    tooltipPos="right"
+                                    active={location.pathname.startsWith(
+                                        `/${environment.name}/adhoc/`
+                                    )}
+                                />
+                            </Link>
+                        </>
+                    )}
                 />
                 <Divider
                     marginTop="8px"
diff --git a/datahub/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx b/datahub/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
index 856c5ca31..e14e7079b 100644
--- a/datahub/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
+++ b/datahub/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
@@ -51,11 +51,7 @@ class EnvironmentsRouterComponent extends React.PureComponent<
         environmentsLoaded: false,
     };
 
-    public componentDidMount() {
-        this.loadEnvironments();
-        this.loadInitialLoadItems();
-    }
-
+    @bind
     public async loadEnvironments() {
         try {
             await this.props.fetchEnvironments();
@@ -66,6 +62,7 @@ class EnvironmentsRouterComponent extends React.PureComponent<
         }
     }
 
+    @bind
     public loadInitialLoadItems() {
         // Load things that will only loaded once on start up here
         this.props.fetchExporters();
@@ -97,6 +94,11 @@ class EnvironmentsRouterComponent extends React.PureComponent<
         }
     }
 
+    public componentDidMount() {
+        this.loadEnvironments();
+        this.loadInitialLoadItems();
+    }
+
     public render() {
         const { environmentsLoaded } = this.state;
 
@@ -203,7 +205,7 @@ function mapStateToProps(state: IStoreState) {
     };
 }
 
-function mapDispatchToProps(dispatch: Dispatch, ownProps: {}) {
+function mapDispatchToProps(dispatch: Dispatch) {
     return {
         fetchEnvironments: () =>
             dispatch(EnvironmentActions.fetchEnvironments()),
diff --git a/datahub/webapp/components/Info/FAQ.tsx b/datahub/webapp/components/Info/FAQ.tsx
index 9515dbba2..ae35b1aac 100644
--- a/datahub/webapp/components/Info/FAQ.tsx
+++ b/datahub/webapp/components/Info/FAQ.tsx
@@ -7,24 +7,20 @@ import './FAQ.scss';
 
 const faqs = require('config/faqs.yaml').faqs;
 
-export const FAQ: React.FunctionComponent = () => {
-    return (
-        <div className="FAQ m12">
-            {faqs.map((faq, idx) => {
-                const [question, answer] = faq;
-                return (
-                    <div className="FAQ-item mb24" key={idx}>
-                        <Title subtitle size={4} className="FAQ-question">
-                            {question}
-                        </Title>
-                        <div className="FAQ-answer m12">
-                            <Content
-                                dangerouslySetInnerHTML={{ __html: answer }}
-                            />
-                        </div>
+export const FAQ: React.FunctionComponent = () => (
+    <div className="FAQ m12">
+        {faqs.map((faq, idx) => {
+            const [question, answer] = faq;
+            return (
+                <div className="FAQ-item mb24" key={idx}>
+                    <Title subtitle size={4} className="FAQ-question">
+                        {question}
+                    </Title>
+                    <div className="FAQ-answer m12">
+                        <Content dangerouslySetInnerHTML={{ __html: answer }} />
                     </div>
-                );
-            })}
-        </div>
-    );
-};
+                </div>
+            );
+        })}
+    </div>
+);
diff --git a/datahub/webapp/components/Info/Shortcut.tsx b/datahub/webapp/components/Info/Shortcut.tsx
index 01c25e5d7..9d315ccc6 100644
--- a/datahub/webapp/components/Info/Shortcut.tsx
+++ b/datahub/webapp/components/Info/Shortcut.tsx
@@ -10,42 +10,37 @@ const shortcuts: Array<{
     keys: Array<[string[], string]>;
 }> = require('config/shortcuts.yaml').shortcuts;
 
-export const Shortcut: React.FunctionComponent = () => {
-    return (
-        <div className="Shortcut">
-            {shortcuts.map((box) => (
-                <div className="Shortcut-box" key={box.title}>
-                    <Title subtitle size={3}>
-                        {box.title}
-                    </Title>
-                    {box.keys.map((shortcut, idx) => {
-                        const [keys, text] = shortcut;
-                        return (
-                            <div className="Shortcut-item" key={idx}>
-                                <div className="Shortcut-keys">
-                                    {keys.map((key, i) => {
-                                        if (i === 0) {
-                                            return (
-                                                <KeyboardKey
-                                                    value={key}
-                                                    key={i}
-                                                />
-                                            );
-                                        }
+export const Shortcut: React.FunctionComponent = () => (
+    <div className="Shortcut">
+        {shortcuts.map((box) => (
+            <div className="Shortcut-box" key={box.title}>
+                <Title subtitle size={3}>
+                    {box.title}
+                </Title>
+                {box.keys.map((shortcut, idx) => {
+                    const [keys, text] = shortcut;
+                    return (
+                        <div className="Shortcut-item" key={idx}>
+                            <div className="Shortcut-keys">
+                                {keys.map((key, i) => {
+                                    if (i === 0) {
                                         return (
-                                            <React.Fragment key={i}>
-                                                <span className="pr4">+</span>
-                                                <KeyboardKey value={key} />
-                                            </React.Fragment>
+                                            <KeyboardKey value={key} key={i} />
                                         );
-                                    })}
-                                </div>
-                                <div className="Shortcut-text">{text}</div>
+                                    }
+                                    return (
+                                        <React.Fragment key={i}>
+                                            <span className="pr4">+</span>
+                                            <KeyboardKey value={key} />
+                                        </React.Fragment>
+                                    );
+                                })}
                             </div>
-                        );
-                    })}
-                </div>
-            ))}
-        </div>
-    );
-};
+                            <div className="Shortcut-text">{text}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        ))}
+    </div>
+);
diff --git a/datahub/webapp/components/Landing/Landing.tsx b/datahub/webapp/components/Landing/Landing.tsx
index e1f9e313f..d2c089cbb 100644
--- a/datahub/webapp/components/Landing/Landing.tsx
+++ b/datahub/webapp/components/Landing/Landing.tsx
@@ -25,7 +25,7 @@ const datahubHints: string[] = require('config/loading_hints.yaml').hints;
 /*
  * TODO: clean up the urls so they are open source friendly
  */
-export const Landing: React.FunctionComponent<{}> = ({}) => {
+export const Landing: React.FunctionComponent = () => {
     useBrowserTitle();
 
     const {
@@ -58,32 +58,26 @@ export const Landing: React.FunctionComponent<{}> = ({}) => {
         navigateWithinEnv(`/datadoc/${docId}/`);
     }, []);
 
-    const getRecentDOM = () => {
-        return recentDataDocs.map((dataDoc) => {
-            return (
-                <div
-                    className="Landing-data-doc"
-                    onClick={() => onDataDocClick(dataDoc.id)}
-                    key={dataDoc.id}
-                >
-                    {dataDoc.title || 'Untitled'}
-                </div>
-            );
-        });
-    };
-    const getFavoriteDOM = () => {
-        return favoriteDataDocs.map((dataDoc) => {
-            return (
-                <div
-                    className="Landing-data-doc"
-                    onClick={() => onDataDocClick(dataDoc.id)}
-                    key={dataDoc.id}
-                >
-                    {dataDoc.title || 'Untitled'}
-                </div>
-            );
-        });
-    };
+    const getRecentDOM = () =>
+        recentDataDocs.map((dataDoc) => (
+            <div
+                className="Landing-data-doc"
+                onClick={() => onDataDocClick(dataDoc.id)}
+                key={dataDoc.id}
+            >
+                {dataDoc.title || 'Untitled'}
+            </div>
+        ));
+    const getFavoriteDOM = () =>
+        favoriteDataDocs.map((dataDoc) => (
+            <div
+                className="Landing-data-doc"
+                onClick={() => onDataDocClick(dataDoc.id)}
+                key={dataDoc.id}
+            >
+                {dataDoc.title || 'Untitled'}
+            </div>
+        ));
 
     const [hint] = React.useState(sample(datahubHints));
 
diff --git a/datahub/webapp/components/NotificationManager/Notification.tsx b/datahub/webapp/components/NotificationManager/Notification.tsx
index 82aaa3f5e..6473bc1f0 100644
--- a/datahub/webapp/components/NotificationManager/Notification.tsx
+++ b/datahub/webapp/components/NotificationManager/Notification.tsx
@@ -15,22 +15,20 @@ export const Notification: React.FunctionComponent<INotificationProps> = ({
     content,
     onHide,
     life,
-}) => {
-    return (
-        <div className="Notification">
-            <IconButton
-                onClick={onHide}
-                className="Notification-delete-btn"
-                icon="x"
-                noPadding
-            />
-            {content}
-            <animated.div
-                style={{
-                    right: `calc(${life * 100}%)`,
-                }}
-                className="notification-progress"
-            />
-        </div>
-    );
-};
+}) => (
+    <div className="Notification">
+        <IconButton
+            onClick={onHide}
+            className="Notification-delete-btn"
+            icon="x"
+            noPadding
+        />
+        {content}
+        <animated.div
+            style={{
+                right: `calc(${life * 100}%)`,
+            }}
+            className="notification-progress"
+        />
+    </div>
+);
diff --git a/datahub/webapp/components/QueryComposer/QueryComposer.tsx b/datahub/webapp/components/QueryComposer/QueryComposer.tsx
index 4c82c5834..0bc12a03b 100644
--- a/datahub/webapp/components/QueryComposer/QueryComposer.tsx
+++ b/datahub/webapp/components/QueryComposer/QueryComposer.tsx
@@ -134,7 +134,7 @@ const useQueryComposerSearchAndReplace = (
     };
 };
 
-export const QueryComposer: React.FC<{}> = () => {
+export const QueryComposer: React.FC = () => {
     useBrowserTitle('Adhoc Query');
 
     const dispatch: Dispatch = useDispatch();
diff --git a/datahub/webapp/components/QueryEditor/QueryEditor.tsx b/datahub/webapp/components/QueryEditor/QueryEditor.tsx
index 5f99e6072..bf81529b2 100644
--- a/datahub/webapp/components/QueryEditor/QueryEditor.tsx
+++ b/datahub/webapp/components/QueryEditor/QueryEditor.tsx
@@ -89,7 +89,7 @@ async function isTokenInTable(
 }
 
 export interface IQueryEditorProps extends IStyledQueryEditorProps {
-    options?: {};
+    options?: Record<string, unknown>;
     value?: string;
 
     lineWrapping?: boolean;
@@ -111,7 +111,7 @@ export interface IQueryEditorProps extends IStyledQueryEditorProps {
 }
 
 interface IState {
-    options: {};
+    options: Record<string, unknown>;
     fullScreen: boolean;
     lintingOn: boolean;
 }
@@ -137,7 +137,7 @@ export class QueryEditor extends React.PureComponent<
     private editor: CodeMirror.Editor = null;
     private autocomplete: SqlAutoCompleter = null;
 
-    constructor(props) {
+    public constructor(props) {
         super(props);
 
         this.state = {
@@ -147,26 +147,6 @@ export class QueryEditor extends React.PureComponent<
         };
     }
 
-    public componentDidMount() {
-        this.makeCodeAnalysis(this.props.value);
-        this.makeAutocompleter();
-    }
-
-    public componentDidUpdate(prevProps, prevState) {
-        const newOptions = this.createOptions();
-        if (newOptions !== this.state.options) {
-            this.setState({
-                options: newOptions,
-            });
-        }
-
-        if (this.state.fullScreen !== prevState.fullScreen) {
-            this.getEditor().refresh();
-        }
-
-        this.makeAutocompleter();
-    }
-
     @bind
     public createOptions() {
         const {
@@ -194,7 +174,7 @@ export class QueryEditor extends React.PureComponent<
 
     @decorate(memoizeOne)
     public _createOptions(
-        propsOptions: {},
+        propsOptions: Record<string, unknown>,
         lineWrapping: boolean,
         readOnly: boolean,
         theme: string,
@@ -281,6 +261,7 @@ export class QueryEditor extends React.PureComponent<
         }
     }
 
+    @bind
     public matchFunctionWithDefinition(functionName: string) {
         const { functionDocumentationByNameByLanguage, language } = this.props;
 
@@ -566,10 +547,12 @@ export class QueryEditor extends React.PureComponent<
         });
     }
 
+    @bind
     public getEditor() {
         return this.editor;
     }
 
+    @bind
     public getCodeAnalysis() {
         return this.codeAnalysis;
     }
@@ -592,6 +575,26 @@ export class QueryEditor extends React.PureComponent<
         }
     }
 
+    public componentDidMount() {
+        this.makeCodeAnalysis(this.props.value);
+        this.makeAutocompleter();
+    }
+
+    public componentDidUpdate(prevProps, prevState) {
+        const newOptions = this.createOptions();
+        if (newOptions !== this.state.options) {
+            this.setState({
+                options: newOptions,
+            });
+        }
+
+        if (this.state.fullScreen !== prevState.fullScreen) {
+            this.getEditor().refresh();
+        }
+
+        this.makeAutocompleter();
+    }
+
     public render() {
         const { height, fontSize, className } = this.props;
         const { fullScreen } = this.state;
diff --git a/datahub/webapp/components/QueryEngineStatusButton/QueryEngineStatusButton.tsx b/datahub/webapp/components/QueryEngineStatusButton/QueryEngineStatusButton.tsx
index 52aa83f51..5814c6382 100644
--- a/datahub/webapp/components/QueryEngineStatusButton/QueryEngineStatusButton.tsx
+++ b/datahub/webapp/components/QueryEngineStatusButton/QueryEngineStatusButton.tsx
@@ -78,9 +78,10 @@ export const QueryEngineStatusButton: React.FC<IProps> = ({
         [loadAllEngineStatus]
     );
 
-    const timerFormatter = useCallback((timestamp: number) => {
-        return `Next auto-refresh: ${timestamp}s`;
-    }, []);
+    const timerFormatter = useCallback(
+        (timestamp: number) => `Next auto-refresh: ${timestamp}s`,
+        []
+    );
 
     const onRefreshClick = useCallback(() => {
         loadAllEngineStatus(true);
@@ -89,25 +90,25 @@ export const QueryEngineStatusButton: React.FC<IProps> = ({
         }
     }, [loadAllEngineStatus, timerRef.current]);
 
-    const overallWorstQueryEngineStatus: QueryEngineStatus = useMemo(() => {
-        return Math.max(
-            ...queryEngineStatusAndEngineIds.map(([id, status]) =>
-                Number(status?.data?.status)
-            )
-        );
-    }, [queryEngineStatusAndEngineIds]);
+    const overallWorstQueryEngineStatus: QueryEngineStatus = useMemo(
+        () =>
+            Math.max(
+                ...queryEngineStatusAndEngineIds.map(([id, status]) =>
+                    Number(status?.data?.status)
+                )
+            ),
+        [queryEngineStatusAndEngineIds]
+    );
 
-    const getQueryEngineStatusModal = (engineId: string) => {
-        return (
-            <Modal
-                onHide={() => setShowStatusForEngineId(null)}
-                title="Query Engine Status"
-                className="with-padding"
-            >
-                <QueryEngineStatusViewer engineId={Number(engineId)} />
-            </Modal>
-        );
-    };
+    const getQueryEngineStatusModal = (engineId: string) => (
+        <Modal
+            onHide={() => setShowStatusForEngineId(null)}
+            title="Query Engine Status"
+            className="with-padding"
+        >
+            <QueryEngineStatusViewer engineId={Number(engineId)} />
+        </Modal>
+    );
 
     const getQueryEngineStatusPanelDOM = () => {
         const systemStatusDOM = queryEngineStatusAndEngineIds
diff --git a/datahub/webapp/components/QueryExecution/QueryError.tsx b/datahub/webapp/components/QueryExecution/QueryError.tsx
index 50d373834..5facbdd53 100644
--- a/datahub/webapp/components/QueryExecution/QueryError.tsx
+++ b/datahub/webapp/components/QueryExecution/QueryError.tsx
@@ -51,9 +51,7 @@ export const SyntaxQueryError: React.FunctionComponent<{
         line?: number;
         char?: number;
         message: string;
-    } = useMemo(() => {
-        return JSON.parse(errorMessage);
-    }, [errorMessage]);
+    } = useMemo(() => JSON.parse(errorMessage), [errorMessage]);
 
     const query = queryExecution.query;
     const failedStatement = statementExecutions[statementExecutions.length - 1];
diff --git a/datahub/webapp/components/QueryExecution/QueryExecution.tsx b/datahub/webapp/components/QueryExecution/QueryExecution.tsx
index 3b4533f23..7bd2223da 100644
--- a/datahub/webapp/components/QueryExecution/QueryExecution.tsx
+++ b/datahub/webapp/components/QueryExecution/QueryExecution.tsx
@@ -62,14 +62,6 @@ class QueryExecutionComponent extends React.Component<IProps, IState> {
         }
     }
 
-    public componentDidMount() {
-        this.pollQueryExecution(this.props.queryExecution);
-    }
-
-    public componentDidUpdate() {
-        this.pollQueryExecution(this.props.queryExecution);
-    }
-
     @bind
     public selectStatementTabIndex(index: number) {
         this.setState({
@@ -115,6 +107,89 @@ class QueryExecutionComponent extends React.Component<IProps, IState> {
         this.setState({ showStatementLogs });
     }
 
+    @bind
+    public renderQueryExecution() {
+        const {
+            queryExecution,
+            statementResultById,
+
+            loadS3Result,
+
+            changeCellContext,
+        } = this.props;
+        const {
+            selectedStatementTabIndex,
+            showExecutedQuery,
+            showStatementMeta,
+        } = this.state;
+        const { statement_executions: statementExecutionIds } = queryExecution;
+
+        const queryStepsDOM = <QuerySteps queryExecution={queryExecution} />;
+        if (
+            statementExecutionIds == null ||
+            queryExecution.status === QueryExecutionStatus.INITIALIZED
+        ) {
+            return <div className="QueryExecution ">{queryStepsDOM}</div>;
+        }
+
+        const statementExecution = this.getStatementExecution();
+        const statementExecutionId = statementExecution
+            ? statementExecution.id
+            : null;
+        const statementExecutionDOM = statementExecution ? (
+            <DataDocStatementExecution
+                key={statementExecutionId}
+                statementExecution={statementExecution}
+                statementResult={statementResultById[statementExecutionId]}
+                showStatementMeta={showStatementMeta}
+                loadS3Result={loadS3Result}
+                index={selectedStatementTabIndex}
+                showStatementLogs={this.state.showStatementLogs}
+            />
+        ) : queryExecution.status <= QueryExecutionStatus.RUNNING ? (
+            <Loading />
+        ) : null;
+
+        const executedQueryDOM = showExecutedQuery ? (
+            <ExecutedQueryCell
+                queryExecution={queryExecution}
+                highlightRange={
+                    statementExecution && {
+                        from: statementExecution.statement_range_start,
+                        to: statementExecution.statement_range_end,
+                    }
+                }
+                changeCellContext={changeCellContext}
+            />
+        ) : null;
+
+        const footerDOM = this.renderQueryExecutionFooter();
+
+        return (
+            <div className="QueryExecution ">
+                <div className="execution-wrapper">
+                    {queryStepsDOM}
+                    {this.renderQueryExecutionErrorDOM()}
+                    {this.renderStatementExecutionHeader()}
+                    {executedQueryDOM}
+                    <div className="query-execution-content">
+                        {statementExecutionDOM}
+                    </div>
+
+                    {footerDOM}
+                </div>
+            </div>
+        );
+    }
+
+    public componentDidMount() {
+        this.pollQueryExecution(this.props.queryExecution);
+    }
+
+    public componentDidUpdate() {
+        this.pollQueryExecution(this.props.queryExecution);
+    }
+
     public renderStatementExecutionHeader() {
         const {
             statementExecutions,
@@ -198,81 +273,6 @@ class QueryExecutionComponent extends React.Component<IProps, IState> {
         );
     }
 
-    @bind
-    public renderQueryExecution() {
-        const {
-            queryExecution,
-            statementResultById,
-
-            loadS3Result,
-
-            changeCellContext,
-        } = this.props;
-        const {
-            selectedStatementTabIndex,
-            showExecutedQuery,
-            showStatementMeta,
-        } = this.state;
-        const { statement_executions: statementExecutionIds } = queryExecution;
-
-        const queryStepsDOM = <QuerySteps queryExecution={queryExecution} />;
-        if (
-            statementExecutionIds == null ||
-            queryExecution.status === QueryExecutionStatus.INITIALIZED
-        ) {
-            return <div className="QueryExecution ">{queryStepsDOM}</div>;
-        }
-
-        const statementExecution = this.getStatementExecution();
-        const statementExecutionId = statementExecution
-            ? statementExecution.id
-            : null;
-        const statementExecutionDOM = statementExecution ? (
-            <DataDocStatementExecution
-                key={statementExecutionId}
-                statementExecution={statementExecution}
-                statementResult={statementResultById[statementExecutionId]}
-                showStatementMeta={showStatementMeta}
-                loadS3Result={loadS3Result}
-                index={selectedStatementTabIndex}
-                showStatementLogs={this.state.showStatementLogs}
-            />
-        ) : queryExecution.status <= QueryExecutionStatus.RUNNING ? (
-            <Loading />
-        ) : null;
-
-        const executedQueryDOM = showExecutedQuery ? (
-            <ExecutedQueryCell
-                queryExecution={queryExecution}
-                highlightRange={
-                    statementExecution && {
-                        from: statementExecution.statement_range_start,
-                        to: statementExecution.statement_range_end,
-                    }
-                }
-                changeCellContext={changeCellContext}
-            />
-        ) : null;
-
-        const footerDOM = this.renderQueryExecutionFooter();
-
-        return (
-            <div className="QueryExecution ">
-                <div className="execution-wrapper">
-                    {queryStepsDOM}
-                    {this.renderQueryExecutionErrorDOM()}
-                    {this.renderStatementExecutionHeader()}
-                    {executedQueryDOM}
-                    <div className="query-execution-content">
-                        {statementExecutionDOM}
-                    </div>
-
-                    {footerDOM}
-                </div>
-            </div>
-        );
-    }
-
     public render() {
         const { id, queryExecution, loadQueryExecutionIfNeeded } = this.props;
 
diff --git a/datahub/webapp/components/QueryExecutionButton/QueryExecutionButton.tsx b/datahub/webapp/components/QueryExecutionButton/QueryExecutionButton.tsx
index 1c3cd11fa..100d6f810 100644
--- a/datahub/webapp/components/QueryExecutionButton/QueryExecutionButton.tsx
+++ b/datahub/webapp/components/QueryExecutionButton/QueryExecutionButton.tsx
@@ -45,37 +45,21 @@ class QueryExecutionButtonComponent extends React.Component<IProps, IState> {
     private buttonRef = React.createRef<HTMLAnchorElement>();
     private mounted = false;
 
-    public componentDidMount() {
-        this.mounted = true;
-
-        this.props.fetchActiveQueryExecutionForUser(this.props.uid).then(() => {
-            if (this.mounted) {
-                this.setState({
-                    hasInitialLoadFinished: true,
-                });
-            }
-        });
-    }
-
-    public componentWillUnmount() {
-        this.mounted = false;
-    }
-
     // Extract this into a selector
     @decorate(memoizeOne)
     public _getActiveQueryExecutions(
         queryExecutionById: Record<number, IQueryExecution>,
         queryEnginesInEnv: number[]
     ) {
-        return Object.values(queryExecutionById).filter((queryExecution) => {
-            // filter by query executions only in the current environment
-            return (
+        return Object.values(queryExecutionById).filter(
+            (queryExecution) =>
+                // filter by query executions only in the current environment
                 queryEnginesInEnv.includes(queryExecution.engine_id) &&
                 queryExecution.status < QueryExecutionStatus.DONE
-            );
-        });
+        );
     }
 
+    @bind
     public getActiveQueryExecutions() {
         const { queryExecutionById, queryEnginesInEnv } = this.props;
 
@@ -104,6 +88,22 @@ class QueryExecutionButtonComponent extends React.Component<IProps, IState> {
         });
     }
 
+    public componentDidMount() {
+        this.mounted = true;
+
+        this.props.fetchActiveQueryExecutionForUser(this.props.uid).then(() => {
+            if (this.mounted) {
+                this.setState({
+                    hasInitialLoadFinished: true,
+                });
+            }
+        });
+    }
+
+    public componentWillUnmount() {
+        this.mounted = false;
+    }
+
     public render() {
         const {
             tooltipPos = 'right',
diff --git a/datahub/webapp/components/QueryRunButton/QueryRunButton.tsx b/datahub/webapp/components/QueryRunButton/QueryRunButton.tsx
index 8a80080d6..9eff872a2 100644
--- a/datahub/webapp/components/QueryRunButton/QueryRunButton.tsx
+++ b/datahub/webapp/components/QueryRunButton/QueryRunButton.tsx
@@ -105,18 +105,16 @@ export const QueryRunButton = React.forwardRef<
         const getEngineSelectorDOM = React.useCallback(() => {
             let engineButton = null;
             if (!disabled) {
-                const engineItems = queryEngines.map((engineInfo) => {
-                    return {
-                        name: (
-                            <span className="query-engine-name">
-                                {engineInfo.name}
-                            </span>
-                        ),
-                        onClick: onEngineIdSelect.bind(null, engineInfo.id),
-                        checked: engineInfo.id === engineId,
-                        tooltip: engineInfo.description,
-                    };
-                });
+                const engineItems = queryEngines.map((engineInfo) => ({
+                    name: (
+                        <span className="query-engine-name">
+                            {engineInfo.name}
+                        </span>
+                    ),
+                    onClick: onEngineIdSelect.bind(null, engineInfo.id),
+                    checked: engineInfo.id === engineId,
+                    tooltip: engineInfo.description,
+                }));
                 engineButton = (
                     <Dropdown
                         customButtonRenderer={getEngineSelectorButtonDOM}
diff --git a/datahub/webapp/components/QuerySnippetComposer/QuerySnippetComposer.tsx b/datahub/webapp/components/QuerySnippetComposer/QuerySnippetComposer.tsx
index 7431942ca..754faf53d 100644
--- a/datahub/webapp/components/QuerySnippetComposer/QuerySnippetComposer.tsx
+++ b/datahub/webapp/components/QuerySnippetComposer/QuerySnippetComposer.tsx
@@ -58,7 +58,7 @@ class QuerySnippetComposerComponent extends React.PureComponent<
     IProps,
     IState
 > {
-    constructor(props) {
+    public constructor(props) {
         super(props);
 
         this.state = {
@@ -72,49 +72,27 @@ class QuerySnippetComposerComponent extends React.PureComponent<
         };
     }
 
-    public componentDidMount() {
-        this.validateForm();
-
-        if (this.state.form) {
-            this.parseTemplatedQueries(this.state.form.context);
-        }
-    }
-
-    public componentDidUpdate(prevProps) {
-        if (this.props.querySnippet !== prevProps.querySnippet) {
-            this.setState(
-                {
-                    form: this.getFormFromSnippet(this.props.querySnippet),
-                },
-                () => {
-                    this.validateForm();
-                    if (this.state.form) {
-                        this.parseTemplatedQueries(this.state.form);
-                    }
-                }
-            );
-        }
-    }
-
+    @bind
     public getFormFromSnippet(snippet) {
         const {
             title,
             context,
-            engine_id,
+            engine_id: engineId,
             description,
-            is_public,
+            is_public: isPublic,
             golden,
         } = snippet;
         return {
             title,
             context,
-            engine_id,
+            engine_id: engineId,
             description,
-            is_public,
+            is_public: isPublic,
             golden,
         };
     }
 
+    @bind
     public getForm() {
         return {
             title: '',
@@ -126,6 +104,7 @@ class QuerySnippetComposerComponent extends React.PureComponent<
         };
     }
 
+    @bind
     public setFormState(key, value) {
         const { form } = this.state;
 
@@ -142,6 +121,7 @@ class QuerySnippetComposerComponent extends React.PureComponent<
         );
     }
 
+    @bind
     public isFormInvalid(form): [boolean, string] {
         if (form.title.length === 0) {
             return [true, 'Title must not be empty'];
@@ -246,6 +226,50 @@ class QuerySnippetComposerComponent extends React.PureComponent<
         this.setFormState('golden', golden);
     }
 
+    @bind
+    public handleDelete() {
+        return new Promise((resolve) => {
+            const { querySnippet } = this.props;
+
+            sendConfirm({
+                message: 'This template will be removed PERMANENTLY.',
+                onConfirm: async () => {
+                    try {
+                        await this.props.deleteQuerySnippet(querySnippet);
+                        history.push('/template/');
+                    } catch (error) {
+                        showErrorModal(error);
+                    }
+                    resolve();
+                },
+            });
+        });
+    }
+
+    public componentDidMount() {
+        this.validateForm();
+
+        if (this.state.form) {
+            this.parseTemplatedQueries(this.state.form.context);
+        }
+    }
+
+    public componentDidUpdate(prevProps) {
+        if (this.props.querySnippet !== prevProps.querySnippet) {
+            this.setState(
+                {
+                    form: this.getFormFromSnippet(this.props.querySnippet),
+                },
+                () => {
+                    this.validateForm();
+                    if (this.state.form) {
+                        this.parseTemplatedQueries(this.state.form);
+                    }
+                }
+            );
+        }
+    }
+
     public getSnippetUpdateInfoDOM() {
         const { querySnippet } = this.props;
 
@@ -437,26 +461,6 @@ class QuerySnippetComposerComponent extends React.PureComponent<
         }
     };
 
-    @bind
-    public handleDelete() {
-        return new Promise((resolve) => {
-            const { querySnippet } = this.props;
-
-            sendConfirm({
-                message: 'This template will be removed PERMANENTLY.',
-                onConfirm: async () => {
-                    try {
-                        await this.props.deleteQuerySnippet(querySnippet);
-                        history.push('/template/');
-                    } catch (error) {
-                        showErrorModal(error);
-                    }
-                    resolve();
-                },
-            });
-        });
-    }
-
     public render() {
         const { querySnippet, user } = this.props;
 
@@ -527,24 +531,20 @@ class QuerySnippetComposerComponent extends React.PureComponent<
     }
 }
 
-const mapStateToProps = (state: IStoreState, ownProps) => {
-    return {
-        queryEngines: queryEngineSelector(state),
-        queryEngineById: queryEngineByIdEnvSelector(state),
-        user: state.user.myUserInfo,
-    };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        saveQuerySnippet: (snippet: IQueryForm) =>
-            dispatch(querySnippetsActions.saveQuerySnippet(snippet)),
-        updateQuerySnippet: (snippet: IQueryForm) =>
-            dispatch(querySnippetsActions.updateQuerySnippet(snippet)),
-        deleteQuerySnippet: (snippet: IQuerySnippet) =>
-            dispatch(querySnippetsActions.deleteQuerySnippet(snippet)),
-    };
-};
+const mapStateToProps = (state: IStoreState, ownProps) => ({
+    queryEngines: queryEngineSelector(state),
+    queryEngineById: queryEngineByIdEnvSelector(state),
+    user: state.user.myUserInfo,
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    saveQuerySnippet: (snippet: IQueryForm) =>
+        dispatch(querySnippetsActions.saveQuerySnippet(snippet)),
+    updateQuerySnippet: (snippet: IQueryForm) =>
+        dispatch(querySnippetsActions.updateQuerySnippet(snippet)),
+    deleteQuerySnippet: (snippet: IQuerySnippet) =>
+        dispatch(querySnippetsActions.deleteQuerySnippet(snippet)),
+});
 
 export const QuerySnippetComposer = connect(
     mapStateToProps,
diff --git a/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetInsertionModal.tsx b/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetInsertionModal.tsx
index be9662b83..2f0cbfb7c 100644
--- a/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetInsertionModal.tsx
+++ b/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetInsertionModal.tsx
@@ -44,6 +44,7 @@ class QuerySnippetInsertionModalComponent extends React.Component<
         editSnippetMode: false,
     };
 
+    @bind
     public fetchQuerySnippet(id: number) {
         if (id) {
             this.setState(
@@ -155,19 +156,15 @@ class QuerySnippetInsertionModalComponent extends React.Component<
     }
 }
 
-const mapStateToProps = (state: IStoreState, ownProps: IOwnProps) => {
-    return {
-        querySnippetById: state.querySnippets.querySnippetById,
-        queryEngineById: queryEngineByIdEnvSelector(state),
-    };
-};
+const mapStateToProps = (state: IStoreState, ownProps: IOwnProps) => ({
+    querySnippetById: state.querySnippets.querySnippetById,
+    queryEngineById: queryEngineByIdEnvSelector(state),
+});
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    return {
-        fetchQuerySnippetIfNeeded: (id: number) =>
-            dispatch(querySnippetsActions.fetchQuerySnippetIfNeeded(id)),
-    };
-};
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    fetchQuerySnippetIfNeeded: (id: number) =>
+        dispatch(querySnippetsActions.fetchQuerySnippetIfNeeded(id)),
+});
 
 export const QuerySnippetInsertionModal = connect(
     mapStateToProps,
diff --git a/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetView.tsx b/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetView.tsx
index fa19624d5..edc44fc7b 100644
--- a/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetView.tsx
+++ b/datahub/webapp/components/QuerySnippetInsertionModal/QuerySnippetView.tsx
@@ -43,18 +43,6 @@ export class QuerySnippetView extends React.Component<
         templatedVariables: [],
     };
 
-    public componentDidMount() {
-        this.getTemplatedVariables(this.props.querySnippet.context);
-    }
-    public componentDidUpdate(prevProps) {
-        if (this.props.querySnippet !== prevProps.querySnippet) {
-            this.setState({
-                templatedQueryForm: {},
-            });
-            this.getTemplatedVariables(this.props.querySnippet.context);
-        }
-    }
-
     @decorate(memoizeOne)
     public async getTemplatedVariables(context: string) {
         this.setState({
@@ -72,6 +60,36 @@ export class QuerySnippetView extends React.Component<
         }));
     }
 
+    @bind
+    public async handleQuerySnippetInsert() {
+        const context = this.props.querySnippet.context;
+        const { templatedVariables } = this.state;
+
+        let renderedQuery = context;
+        if (templatedVariables.length) {
+            renderedQuery = await renderTemplatedQuery(
+                context,
+                this.state.templatedQueryForm
+            );
+        }
+
+        if (this.props.onInsert) {
+            this.props.onInsert(renderedQuery);
+        }
+    }
+
+    public componentDidMount() {
+        this.getTemplatedVariables(this.props.querySnippet.context);
+    }
+    public componentDidUpdate(prevProps) {
+        if (this.props.querySnippet !== prevProps.querySnippet) {
+            this.setState({
+                templatedQueryForm: {},
+            });
+            this.getTemplatedVariables(this.props.querySnippet.context);
+        }
+    }
+
     public getTemplatedVariableEditorDOM(context: string) {
         const { templatedQueryForm, templatedVariables } = this.state;
 
@@ -96,30 +114,12 @@ export class QuerySnippetView extends React.Component<
         );
     }
 
-    @bind
-    public async handleQuerySnippetInsert() {
-        const context = this.props.querySnippet.context;
-        const { templatedVariables } = this.state;
-
-        let renderedQuery = context;
-        if (templatedVariables.length) {
-            renderedQuery = await renderTemplatedQuery(
-                context,
-                this.state.templatedQueryForm
-            );
-        }
-
-        if (this.props.onInsert) {
-            this.props.onInsert(renderedQuery);
-        }
-    }
-
     public render() {
         const { querySnippet, queryEngineById } = this.props;
 
         const {
             title,
-            engine_id,
+            engine_id: engineId,
             description,
             golden,
             context,
@@ -131,7 +131,7 @@ export class QuerySnippetView extends React.Component<
             updated_at: updatedAt,
         } = querySnippet;
 
-        const engine = queryEngineById[engine_id];
+        const engine = queryEngineById[engineId];
 
         const publicTag = <Tag>{isPublic ? 'public' : 'private'}</Tag>;
 
diff --git a/datahub/webapp/components/QuerySnippetNavigator/QuerySnippetNavigator.tsx b/datahub/webapp/components/QuerySnippetNavigator/QuerySnippetNavigator.tsx
index cb45ba4f5..3de05fa73 100644
--- a/datahub/webapp/components/QuerySnippetNavigator/QuerySnippetNavigator.tsx
+++ b/datahub/webapp/components/QuerySnippetNavigator/QuerySnippetNavigator.tsx
@@ -77,10 +77,12 @@ class QuerySnippetNavigatorComponent extends React.PureComponent<
 
     private filterButton = React.createRef<HTMLAnchorElement>();
 
+    @bind
     public getInitialSearchFilters() {
         return {};
     }
 
+    @bind
     public searchQuerySnippets() {
         const { filters, selectedTabKey } = this.state;
 
@@ -112,15 +114,6 @@ class QuerySnippetNavigatorComponent extends React.PureComponent<
         );
     }
 
-    public componentDidMount() {
-        this.setState(
-            {
-                filters: this.getInitialSearchFilters(),
-            },
-            this.searchQuerySnippets
-        );
-    }
-
     @bind
     @decorate(memoizeOne)
     public getQuerySnippets(
@@ -226,6 +219,15 @@ class QuerySnippetNavigatorComponent extends React.PureComponent<
         });
     }
 
+    public componentDidMount() {
+        this.setState(
+            {
+                filters: this.getInitialSearchFilters(),
+            },
+            this.searchQuerySnippets
+        );
+    }
+
     public makeSearchFilterDOM() {
         const { titleFilter } = this.state;
 
diff --git a/datahub/webapp/components/QueryView/QueryViewEditorShareButton.tsx b/datahub/webapp/components/QueryView/QueryViewEditorShareButton.tsx
index 7ec7a4beb..70e756504 100644
--- a/datahub/webapp/components/QueryView/QueryViewEditorShareButton.tsx
+++ b/datahub/webapp/components/QueryView/QueryViewEditorShareButton.tsx
@@ -1,6 +1,5 @@
 import { QueryExecutionAccessList } from 'components/QueryExecutionAccessList/QueryExecutionAccessList';
-import { useRef, useState } from 'react';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { Button } from 'ui/Button/Button';
 import { Popover } from 'ui/Popover/Popover';
 import { IQueryExecution } from 'redux/queryExecutions/types';
diff --git a/datahub/webapp/components/QueryViewNavigator/QueryViewFilter.tsx b/datahub/webapp/components/QueryViewNavigator/QueryViewFilter.tsx
index 8732e87f9..0f09c68f6 100644
--- a/datahub/webapp/components/QueryViewNavigator/QueryViewFilter.tsx
+++ b/datahub/webapp/components/QueryViewNavigator/QueryViewFilter.tsx
@@ -33,14 +33,12 @@ export class QueryViewFilter extends React.PureComponent<
     private engineOptions: IOptions;
     private statusOptions: IOptions;
 
-    constructor(props: IQueryViewFilterProps) {
+    public constructor(props: IQueryViewFilterProps) {
         super(props);
-        this.engineOptions = props.queryEngines.map((queryEngine) => {
-            return {
-                label: queryEngine.name,
-                value: queryEngine.id,
-            };
-        });
+        this.engineOptions = props.queryEngines.map((queryEngine) => ({
+            label: queryEngine.name,
+            value: queryEngine.id,
+        }));
 
         this.statusOptions = getEnumEntries(QueryExecutionStatus).map(
             ([status, statusEnum]) => ({
@@ -56,11 +54,9 @@ export class QueryViewFilter extends React.PureComponent<
 
     @bind
     public toggleFilterPicker() {
-        this.setState((state) => {
-            return {
-                showFilterPicker: !state.showFilterPicker,
-            };
-        });
+        this.setState((state) => ({
+            showFilterPicker: !state.showFilterPicker,
+        }));
     }
 
     public render() {
diff --git a/datahub/webapp/components/QueryViewNavigator/QueryViewNavigator.tsx b/datahub/webapp/components/QueryViewNavigator/QueryViewNavigator.tsx
index 43682013c..6f6df1269 100644
--- a/datahub/webapp/components/QueryViewNavigator/QueryViewNavigator.tsx
+++ b/datahub/webapp/components/QueryViewNavigator/QueryViewNavigator.tsx
@@ -29,7 +29,7 @@ export type IProps = IOwnProps & StateProps & DispatchProps;
 class QueryViewNavigatorComponent extends React.PureComponent<IProps> {
     private navigatorScrollRef = React.createRef<HTMLDivElement>();
 
-    constructor(props) {
+    public constructor(props) {
         super(props);
 
         this.state = {
@@ -37,17 +37,7 @@ class QueryViewNavigatorComponent extends React.PureComponent<IProps> {
         };
     }
 
-    public componentDidMount() {
-        this.props.initializeFromQueryParam();
-        this.setupPolling(this.props.queryResults);
-    }
-
-    public componentDidUpdate(prevProps) {
-        if (this.props.queryResults !== prevProps.queryResults) {
-            this.setupPolling(this.props.queryResults);
-        }
-    }
-
+    @bind
     public setupPolling(queryExecutions: IQueryExecution[]) {
         for (const queryExecution of queryExecutions) {
             if (queryExecution.status < QueryExecutionStatus.DONE) {
@@ -77,6 +67,17 @@ class QueryViewNavigatorComponent extends React.PureComponent<IProps> {
         }
     }
 
+    public componentDidMount() {
+        this.props.initializeFromQueryParam();
+        this.setupPolling(this.props.queryResults);
+    }
+
+    public componentDidUpdate(prevProps) {
+        if (this.props.queryResults !== prevProps.queryResults) {
+            this.setupPolling(this.props.queryResults);
+        }
+    }
+
     public render() {
         const {
             onQueryExecutionClick,
@@ -101,16 +102,14 @@ class QueryViewNavigatorComponent extends React.PureComponent<IProps> {
             />
         );
 
-        const queryResultsListDOM = queryResults.map((queryResult, index) => {
-            return (
-                <QueryResult
-                    key={queryResult.id}
-                    queryExecution={queryResult}
-                    queryEngineById={queryEngineById}
-                    onClick={onQueryExecutionClick}
-                />
-            );
-        });
+        const queryResultsListDOM = queryResults.map((queryResult, index) => (
+            <QueryResult
+                key={queryResult.id}
+                queryExecution={queryResult}
+                queryEngineById={queryEngineById}
+                onClick={onQueryExecutionClick}
+            />
+        ));
 
         const loadingDOM = isLoadingQueries ? (
             <div className="loading-queries-message flex-center">
@@ -141,34 +140,28 @@ class QueryViewNavigatorComponent extends React.PureComponent<IProps> {
     }
 }
 
-const mapStateToProps = (state: IStoreState, ownProps: IOwnProps) => {
-    return {
-        queryResults: queryExecutionResultSelector(state),
-        isLoadingQueries: state.queryView.isLoading,
-        queryViewFilters: state.queryView.filters,
-        queryEngines: queryEngineSelector(state),
-        queryEngineById: queryEngineByIdEnvSelector(state),
-    };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch, ownProps: IOwnProps) => {
-    return {
-        updateFilter: (filterKey, filterValue) => {
-            dispatch(queryViewActions.updateFilter(filterKey, filterValue));
-        },
-
-        initializeFromQueryParam: () =>
-            dispatch(queryViewActions.mapQueryParamToState()),
-
-        loadQueries: () => dispatch(queryViewActions.searchQueries()),
-
-        pollQueryExecution: (queryExecutionId) => {
-            dispatch(
-                queryExecutionsActions.pollQueryExecution(queryExecutionId)
-            );
-        },
-    };
-};
+const mapStateToProps = (state: IStoreState, ownProps: IOwnProps) => ({
+    queryResults: queryExecutionResultSelector(state),
+    isLoadingQueries: state.queryView.isLoading,
+    queryViewFilters: state.queryView.filters,
+    queryEngines: queryEngineSelector(state),
+    queryEngineById: queryEngineByIdEnvSelector(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: IOwnProps) => ({
+    updateFilter: (filterKey, filterValue) => {
+        dispatch(queryViewActions.updateFilter(filterKey, filterValue));
+    },
+
+    initializeFromQueryParam: () =>
+        dispatch(queryViewActions.mapQueryParamToState()),
+
+    loadQueries: () => dispatch(queryViewActions.searchQueries()),
+
+    pollQueryExecution: (queryExecutionId) => {
+        dispatch(queryExecutionsActions.pollQueryExecution(queryExecutionId));
+    },
+});
 
 export const QueryViewNavigator = connect(
     mapStateToProps,
diff --git a/datahub/webapp/components/Search/SearchContainer.tsx b/datahub/webapp/components/Search/SearchContainer.tsx
index 48c525350..e05365ce9 100644
--- a/datahub/webapp/components/Search/SearchContainer.tsx
+++ b/datahub/webapp/components/Search/SearchContainer.tsx
@@ -4,7 +4,7 @@ import { IconButton } from 'ui/Button/IconButton';
 import './SearchContainer.scss';
 import { navigateWithinEnv } from 'lib/utils/query-string';
 
-export const SearchContainer: React.FunctionComponent<{}> = ({}) => {
+export const SearchContainer: React.FC = () => {
     const navigateToSearch = React.useCallback(() => {
         navigateWithinEnv('/search/', { isModal: true });
     }, []);
diff --git a/datahub/webapp/components/Search/SearchOverview.tsx b/datahub/webapp/components/Search/SearchOverview.tsx
index ad20be0f4..649b7538d 100644
--- a/datahub/webapp/components/Search/SearchOverview.tsx
+++ b/datahub/webapp/components/Search/SearchOverview.tsx
@@ -52,10 +52,7 @@ const getFormattedDateFromSeconds = (
         ? moment(parseInt(seconds as string, 10) * 1000).format(format)
         : '';
 
-const userReactSelectStyle: {} = makeReactSelectStyle(
-    true,
-    miniReactSelectStyles
-);
+const userReactSelectStyle = makeReactSelectStyle(true, miniReactSelectStyles);
 export const SearchOverview: React.FunctionComponent = () => {
     const {
         resultByPage,
@@ -72,14 +69,12 @@ export const SearchOverview: React.FunctionComponent = () => {
         searchRequest,
         queryMetastores,
         metastoreId,
-    } = useSelector((state: IStoreState) => {
-        return {
-            ...state.search,
-            environment: currentEnvironmentSelector(state),
-            queryMetastores: queryMetastoresSelector(state),
-            metastoreId: state.dataTableSearch.metastoreId,
-        };
-    });
+    } = useSelector((state: IStoreState) => ({
+        ...state.search,
+        environment: currentEnvironmentSelector(state),
+        queryMetastores: queryMetastoresSelector(state),
+        metastoreId: state.dataTableSearch.metastoreId,
+    }));
 
     const results = resultByPage[currentPage] || [];
     const isLoading = !!searchRequest;
@@ -288,27 +283,26 @@ export const SearchOverview: React.FunctionComponent = () => {
                     onChange={handleMetastoreChange}
                     transparent
                 >
-                    {queryMetastores.map((metastore) => {
-                        return (
-                            <option key={metastore.id} value={metastore.id}>
-                                {metastore.name}
-                            </option>
-                        );
-                    })}
+                    {queryMetastores.map((metastore) => (
+                        <option key={metastore.id} value={metastore.id}>
+                            {metastore.name}
+                        </option>
+                    ))}
                 </Select>
             </div>
         ) : null;
 
-    const orderByButtonFormatter = React.useCallback(() => {
-        return (
+    const orderByButtonFormatter = React.useCallback(
+        () => (
             <span>
                 {searchOrder === SearchOrder.Recency
                     ? 'Most recent'
                     : 'Most relevant'}
                 <i className="fa fa-caret-down caret-icon ml8" />
             </span>
-        );
-    }, [searchOrder]);
+        ),
+        [searchOrder]
+    );
 
     const orderByDOM = (
         <Dropdown customButtonRenderer={orderByButtonFormatter} isRight>
diff --git a/datahub/webapp/components/SearchAndReplace/SearchAndReplace.tsx b/datahub/webapp/components/SearchAndReplace/SearchAndReplace.tsx
index ec6dc7de7..9b41e3c71 100644
--- a/datahub/webapp/components/SearchAndReplace/SearchAndReplace.tsx
+++ b/datahub/webapp/components/SearchAndReplace/SearchAndReplace.tsx
@@ -115,37 +115,39 @@ export function useSearchAndReplace({
         }));
     }, []);
 
-    const moveResultIndex = useCallback((delta: number) => {
-        return new Promise((resolve) => {
-            setSearchState((oldSearchState) => {
-                const resultLen = oldSearchState.searchResults.length;
-                if (!resultLen) {
-                    resolve();
-                    return oldSearchState;
-                }
+    const moveResultIndex = useCallback(
+        (delta: number) =>
+            new Promise((resolve) => {
+                setSearchState((oldSearchState) => {
+                    const resultLen = oldSearchState.searchResults.length;
+                    if (!resultLen) {
+                        resolve();
+                        return oldSearchState;
+                    }
 
-                const currIndex = oldSearchState.currentSearchResultIndex;
-                let newIndex = currIndex + delta;
-                // Clip new index to be between [0, searchState.searchResults.length)
-                newIndex =
-                    (newIndex < 0 ? newIndex + resultLen : newIndex) %
-                    resultLen;
+                    const currIndex = oldSearchState.currentSearchResultIndex;
+                    let newIndex = currIndex + delta;
+                    // Clip new index to be between [0, searchState.searchResults.length)
+                    newIndex =
+                        (newIndex < 0 ? newIndex + resultLen : newIndex) %
+                        resultLen;
 
-                if (jumpToResult) {
-                    jumpToResult(
-                        oldSearchState.searchResults[newIndex]
-                    ).then(() => resolve());
-                } else {
-                    resolve();
-                }
+                    if (jumpToResult) {
+                        jumpToResult(
+                            oldSearchState.searchResults[newIndex]
+                        ).then(() => resolve());
+                    } else {
+                        resolve();
+                    }
 
-                return {
-                    ...oldSearchState,
-                    currentSearchResultIndex: newIndex,
-                };
-            });
-        });
-    }, []);
+                    return {
+                        ...oldSearchState,
+                        currentSearchResultIndex: newIndex,
+                    };
+                });
+            }),
+        []
+    );
 
     const onReplace = useCallback(
         (all: boolean = false) => {
diff --git a/datahub/webapp/components/SearchAndReplace/SearchHighlightDecorator.tsx b/datahub/webapp/components/SearchAndReplace/SearchHighlightDecorator.tsx
index f09d4a19b..b9f9e4d93 100644
--- a/datahub/webapp/components/SearchAndReplace/SearchHighlightDecorator.tsx
+++ b/datahub/webapp/components/SearchAndReplace/SearchHighlightDecorator.tsx
@@ -12,6 +12,6 @@ export function makeSearchHighlightDecorator(
     };
 }
 
-const SearchHighlight: React.FC = ({ children }) => {
-    return <span className="search-highlight">{children}</span>;
-};
+const SearchHighlight: React.FC = ({ children }) => (
+    <span className="search-highlight">{children}</span>
+);
diff --git a/datahub/webapp/components/Task/TaskEditor.tsx b/datahub/webapp/components/Task/TaskEditor.tsx
index e371416c4..c46c2d166 100644
--- a/datahub/webapp/components/Task/TaskEditor.tsx
+++ b/datahub/webapp/components/Task/TaskEditor.tsx
@@ -453,93 +453,88 @@ export const TaskEditor: React.FunctionComponent<IProps> = ({
                 onSubmit={handleTaskEditSubmit}
                 enableReinitialize
             >
-                {({ values, errors, setFieldValue, isValid, submitForm }) => {
-                    return (
-                        <>
-                            {task.id ? (
-                                <>
-                                    <div className="TaskEditor-top horizontal-space-between mv24 mh36">
-                                        <div className="TaskEditor-info">
-                                            <Title size={3} weight="bold">
-                                                {values.name}
-                                            </Title>
+                {({ values, errors, setFieldValue, isValid, submitForm }) => (
+                    <>
+                        {task.id ? (
+                            <>
+                                <div className="TaskEditor-top horizontal-space-between mv24 mh36">
+                                    <div className="TaskEditor-info">
+                                        <Title size={3} weight="bold">
+                                            {values.name}
+                                        </Title>
 
-                                            <div className="mb16">
-                                                {values.task}
-                                            </div>
-
-                                            <>
-                                                <div>
-                                                    Last Run:{' '}
-                                                    {generateFormattedDate(
-                                                        task.last_run_at,
-                                                        'X'
-                                                    )}
-                                                    ,{' '}
-                                                    {moment
-                                                        .utc(
-                                                            task.last_run_at,
-                                                            'X'
-                                                        )
-                                                        .fromNow()}
-                                                </div>
-                                                <div>
-                                                    Total Run Count:{' '}
-                                                    {task.total_run_count}
-                                                </div>
-                                            </>
+                                        <div className="mb16">
+                                            {values.task}
                                         </div>
-                                        <div className="TaskEditor-controls vertical-space-between">
-                                            <AdminAuditLogButton
-                                                itemType="task"
-                                                itemId={task.id}
-                                            />
-                                            <div className="TaskEditor-run">
-                                                <AsyncButton
-                                                    title="Run Task"
-                                                    icon="play"
-                                                    onClick={runTask}
-                                                    type="inlineText"
-                                                    borderless
-                                                />
+
+                                        <>
+                                            <div>
+                                                Last Run:{' '}
+                                                {generateFormattedDate(
+                                                    task.last_run_at,
+                                                    'X'
+                                                )}
+                                                ,{' '}
+                                                {moment
+                                                    .utc(task.last_run_at, 'X')
+                                                    .fromNow()}
                                             </div>
-                                        </div>
+                                            <div>
+                                                Total Run Count:{' '}
+                                                {task.total_run_count}
+                                            </div>
+                                        </>
                                     </div>
-                                    <Tabs
-                                        selectedTabKey={tab}
-                                        className="mh16 mb16"
-                                        items={[
-                                            { name: 'Edit', key: 'edit' },
-                                            { name: 'History', key: 'history' },
-                                        ]}
-                                        onSelect={(key: TaskEditorTabs) => {
-                                            setTab(key);
-                                        }}
-                                    />
-                                </>
-                            ) : null}
-                            <div className="TaskEditor-content m24">
-                                {tab === 'edit' ? (
-                                    getEditDOM(
-                                        values,
-                                        errors,
-                                        setFieldValue,
-                                        isValid,
-                                        submitForm
-                                    )
-                                ) : (
-                                    <div className="TaskEditor-history">
-                                        <TaskStatus
-                                            taskId={task.id}
-                                            taskName={task.name}
-                                            taskRunCount={task.total_run_count}
+                                    <div className="TaskEditor-controls vertical-space-between">
+                                        <AdminAuditLogButton
+                                            itemType="task"
+                                            itemId={task.id}
                                         />
+                                        <div className="TaskEditor-run">
+                                            <AsyncButton
+                                                title="Run Task"
+                                                icon="play"
+                                                onClick={runTask}
+                                                type="inlineText"
+                                                borderless
+                                            />
+                                        </div>
                                     </div>
-                                )}
-                            </div>
-                        </>
-                    );
-                }}
+                                </div>
+                                <Tabs
+                                    selectedTabKey={tab}
+                                    className="mh16 mb16"
+                                    items={[
+                                        { name: 'Edit', key: 'edit' },
+                                        { name: 'History', key: 'history' },
+                                    ]}
+                                    onSelect={(key: TaskEditorTabs) => {
+                                        setTab(key);
+                                    }}
+                                />
+                            </>
+                        ) : null}
+                        <div className="TaskEditor-content m24">
+                            {tab === 'edit' ? (
+                                getEditDOM(
+                                    values,
+                                    errors,
+                                    setFieldValue,
+                                    isValid,
+                                    submitForm
+                                )
+                            ) : (
+                                <div className="TaskEditor-history">
+                                    <TaskStatus
+                                        taskId={task.id}
+                                        taskName={task.name}
+                                        taskRunCount={task.total_run_count}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </>
+                )}
             </Formik>
         </div>
     );
diff --git a/datahub/webapp/components/TemplateDataDocButton/DataDocTemplateVarForm.tsx b/datahub/webapp/components/TemplateDataDocButton/DataDocTemplateVarForm.tsx
index a26ee5625..150dc1bab 100644
--- a/datahub/webapp/components/TemplateDataDocButton/DataDocTemplateVarForm.tsx
+++ b/datahub/webapp/components/TemplateDataDocButton/DataDocTemplateVarForm.tsx
@@ -24,138 +24,134 @@ export const DataDocTemplateVarForm: React.FunctionComponent<IDataDocTemplateVar
     onSave,
     templatedVariables,
     isEditable,
-}) => {
-    return (
-        <Formik
-            validationSchema={templatedVarSchema}
-            initialValues={{
-                variables: Object.entries(templatedVariables),
-            }}
-            onSubmit={({ variables }) =>
-                onSave(
-                    variables.reduce((hash, [name, value]) => {
-                        hash[name] = value;
-                        return hash;
-                    }, {})
-                )
-            }
-            render={({ handleSubmit, isSubmitting, isValid, values }) => {
-                const variablesField = (
-                    <FieldArray
-                        name="variables"
-                        render={(arrayHelpers) => {
-                            const fields = values.variables.length
-                                ? values.variables.map((ignore, index) => (
-                                      <div
-                                          key={index}
-                                          className="horizontal-space-between template-key-value-row"
-                                      >
-                                          <FormField>
-                                              <FormFieldInputSection>
-                                                  <Field
-                                                      name={`variables.${index}[0]`}
-                                                      placeholder="Insert name"
-                                                  />
-                                              </FormFieldInputSection>
-                                              <FormFieldInputSection>
-                                                  <Field
-                                                      name={`variables.${index}[1]`}
-                                                      placeholder="Insert value"
-                                                  />
-                                              </FormFieldInputSection>
-                                          </FormField>
-                                          <div>
-                                              <IconButton
-                                                  disabled={!isEditable}
-                                                  icon="x"
-                                                  onClick={() =>
-                                                      arrayHelpers.remove(index)
-                                                  }
+}) => (
+    <Formik
+        validationSchema={templatedVarSchema}
+        initialValues={{
+            variables: Object.entries(templatedVariables),
+        }}
+        onSubmit={({ variables }) =>
+            onSave(
+                variables.reduce((hash, [name, value]) => {
+                    hash[name] = value;
+                    return hash;
+                }, {})
+            )
+        }
+        render={({ handleSubmit, isSubmitting, isValid, values }) => {
+            const variablesField = (
+                <FieldArray
+                    name="variables"
+                    render={(arrayHelpers) => {
+                        const fields = values.variables.length
+                            ? values.variables.map((ignore, index) => (
+                                  <div
+                                      key={index}
+                                      className="horizontal-space-between template-key-value-row"
+                                  >
+                                      <FormField>
+                                          <FormFieldInputSection>
+                                              <Field
+                                                  name={`variables.${index}[0]`}
+                                                  placeholder="Insert name"
                                               />
-                                          </div>
+                                          </FormFieldInputSection>
+                                          <FormFieldInputSection>
+                                              <Field
+                                                  name={`variables.${index}[1]`}
+                                                  placeholder="Insert value"
+                                              />
+                                          </FormFieldInputSection>
+                                      </FormField>
+                                      <div>
+                                          <IconButton
+                                              disabled={!isEditable}
+                                              icon="x"
+                                              onClick={() =>
+                                                  arrayHelpers.remove(index)
+                                              }
+                                          />
                                       </div>
-                                  ))
-                                : null;
-                            const controlDOM = isEditable && (
-                                <div className="flex-right">
-                                    <Button
-                                        title="Add New Variable"
-                                        onClick={() =>
-                                            arrayHelpers.push(['', ''])
-                                        }
-                                    />
-                                    <Button
-                                        onClick={() => handleSubmit()}
-                                        title="Save"
-                                        disabled={isSubmitting || !isValid}
-                                    />
-                                </div>
-                            );
+                                  </div>
+                              ))
+                            : null;
+                        const controlDOM = isEditable && (
+                            <div className="flex-right">
+                                <Button
+                                    title="Add New Variable"
+                                    onClick={() => arrayHelpers.push(['', ''])}
+                                />
+                                <Button
+                                    onClick={() => handleSubmit()}
+                                    title="Save"
+                                    disabled={isSubmitting || !isValid}
+                                />
+                            </div>
+                        );
 
-                            return (
-                                <div className="DataDocTemplateVarForm-content">
-                                    <fieldset
-                                        disabled={!isEditable}
-                                        className="mb8"
-                                    >
-                                        {fields}
-                                    </fieldset>
-                                    {controlDOM}
-                                </div>
-                            );
-                        }}
-                    />
-                );
+                        return (
+                            <div className="DataDocTemplateVarForm-content">
+                                <fieldset
+                                    disabled={!isEditable}
+                                    className="mb8"
+                                >
+                                    {fields}
+                                </fieldset>
+                                {controlDOM}
+                            </div>
+                        );
+                    }}
+                />
+            );
 
-                return (
-                    <div className="DataDocTemplateVarForm">
-                        <Form>
-                            <div className="horizontal-space-between">
-                                <div>
-                                    <Title>Templated Variables</Title>
-                                </div>
-                                <div>
-                                    <InfoButton layout={['bottom', 'right']}>
-                                        <div>
-                                            <p>
-                                                {'Put {{variable_name}} in your query and it will get substituted with ' +
-                                                    'variable_value. Some variables are provided automatically. Such as:'}
-                                                <ul>
-                                                    <li>
-                                                        {
-                                                            '{{today}} which maps to todays date in yyyy-mm-dd'
-                                                        }
-                                                    </li>
-                                                    <li>
-                                                        {
-                                                            "{{yesterday}} which maps to yesterday's date"
-                                                        }
-                                                    </li>
-                                                </ul>
-                                            </p>
-                                            <p>
-                                                {
-                                                    'You can also put variable definitions in variables for recursive rendering.'
-                                                }
-                                            </p>
-                                            <p>
-                                                <Link
-                                                    to={
-                                                        'https://jinja.palletsprojects.com/en/2.11.x/templates/'
+            return (
+                <div className="DataDocTemplateVarForm">
+                    <Form>
+                        <div className="horizontal-space-between">
+                            <div>
+                                <Title>Templated Variables</Title>
+                            </div>
+                            <div>
+                                <InfoButton layout={['bottom', 'right']}>
+                                    <div>
+                                        <p>
+                                            {'Put {{variable_name}} in your query and it will get substituted with ' +
+                                                'variable_value. Some variables are provided automatically. Such as:'}
+                                            <ul>
+                                                <li>
+                                                    {
+                                                        '{{today}} which maps to todays date in yyyy-mm-dd'
+                                                    }
+                                                </li>
+                                                <li>
+                                                    {
+                                                        "{{yesterday}} which maps to yesterday's date"
                                                     }
-                                                >
-                                                    See complete guide here.
-                                                </Link>
-                                            </p>
-                                        </div>
-                                    </InfoButton>
-                                </div>
+                                                </li>
+                                            </ul>
+                                        </p>
+                                        <p>
+                                            {
+                                                'You can also put variable definitions in variables for recursive rendering.'
+                                            }
+                                        </p>
+                                        <p>
+                                            <Link
+                                                to={
+                                                    'https://jinja.palletsprojects.com/en/2.11.x/templates/'
+                                                }
+                                            >
+                                                See complete guide here.
+                                            </Link>
+                                        </p>
+                                    </div>
+                                </InfoButton>
                             </div>
-                            {variablesField}
-                        </Form>
-                    </div>
-                );
-            }}
-        />
-    );
-};
+                        </div>
+                        {variablesField}
+                    </Form>
+                </div>
+            );
+        }}
+    />
+);
diff --git a/datahub/webapp/components/UIGuide/DataDocUIGuide.tsx b/datahub/webapp/components/UIGuide/DataDocUIGuide.tsx
index 35edfc29b..10c942ff7 100644
--- a/datahub/webapp/components/UIGuide/DataDocUIGuide.tsx
+++ b/datahub/webapp/components/UIGuide/DataDocUIGuide.tsx
@@ -86,7 +86,7 @@ export const DataDocTourSteps: ReactourStep[] = [
                 </p>
                 <hr />
                 <p>
-                    For example, if you have a template named 'today', you can:
+                    For example, if you have a template named "today", you can:
                 </p>
                 <pre>dt=&#123;&#123;today&#125;&#125;</pre>
             </>
diff --git a/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx b/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx
index 95ddac85c..3bbca9fa9 100644
--- a/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx
+++ b/datahub/webapp/components/UIGuide/DataHubSidebarUIGuide.tsx
@@ -183,7 +183,7 @@ export const DataHubSidebarTourSteps: ReactourStep[] = [
     },
 ];
 
-export const DataHubSidebarUIGuide: React.FunctionComponent<{}> = ({}) => {
+export const DataHubSidebarUIGuide: React.FC = () => {
     const location = useLocation();
     const { tour } = React.useMemo(() => getQueryString(), [location.search]);
     const [isOpen, setIsOpen] = React.useState(false);
diff --git a/datahub/webapp/components/UserBadge/UserBadge.tsx b/datahub/webapp/components/UserBadge/UserBadge.tsx
index 32e3bea70..dddb87e74 100644
--- a/datahub/webapp/components/UserBadge/UserBadge.tsx
+++ b/datahub/webapp/components/UserBadge/UserBadge.tsx
@@ -33,13 +33,15 @@ export const UserBadge: React.FunctionComponent<IProps> = ({
         />
     );
 
-    const userName = useMemo(() => {
-        return userInfo
-            ? userInfo.username
-            : name
-            ? `Unknown (${name})`
-            : 'Unknown';
-    }, [userInfo?.username, name]);
+    const userName = useMemo(
+        () =>
+            userInfo
+                ? userInfo.username
+                : name
+                ? `Unknown (${name})`
+                : 'Unknown',
+        [userInfo?.username, name]
+    );
 
     if (mini) {
         return (
diff --git a/datahub/webapp/components/UserBadge/types.ts b/datahub/webapp/components/UserBadge/types.ts
index 97418f99f..fbb9ef6f6 100644
--- a/datahub/webapp/components/UserBadge/types.ts
+++ b/datahub/webapp/components/UserBadge/types.ts
@@ -1,5 +1,3 @@
-import { string } from 'yup';
-
 interface IPropsWithUid {
     uid: number;
     name?: string;
diff --git a/datahub/webapp/components/UserLoader/UserLoader.tsx b/datahub/webapp/components/UserLoader/UserLoader.tsx
index 3c5814c5b..ec6d3f216 100644
--- a/datahub/webapp/components/UserLoader/UserLoader.tsx
+++ b/datahub/webapp/components/UserLoader/UserLoader.tsx
@@ -30,13 +30,13 @@ export const UserLoader: React.FunctionComponent = ({ children }) => {
             if (e?.response?.status === 401) {
                 try {
                     const {
-                        data: { has_login, has_signup },
+                        data: { has_login: hasLogin, has_signup: hasSignup },
                     } = await ds.fetch<{
                         has_login: boolean;
                         has_signup: boolean;
                     }>(`/user/login_method/`);
-                    setShowSignup(has_signup);
-                    setShowUnauth(has_login);
+                    setShowSignup(hasLogin);
+                    setShowUnauth(hasSignup);
                 } catch (e2) {
                     setFetchError(e2);
                 }
diff --git a/datahub/webapp/components/UserSelect/UserSelect.tsx b/datahub/webapp/components/UserSelect/UserSelect.tsx
index 719c50992..eef8fbfde 100644
--- a/datahub/webapp/components/UserSelect/UserSelect.tsx
+++ b/datahub/webapp/components/UserSelect/UserSelect.tsx
@@ -52,7 +52,7 @@ export const UserSelect: React.FunctionComponent<IUserSelectProps> = ({
 }) => {
     const [searchText, setSearchText] = React.useState('');
     const asyncSelectProps: Partial<AsyncProps<any>> = {};
-    const userReactSelectStyle: {} = makeReactSelectStyle(usePortalMenu);
+    const userReactSelectStyle = makeReactSelectStyle(usePortalMenu);
     if (usePortalMenu) {
         asyncSelectProps.menuPortalTarget = overlayRoot;
     }
diff --git a/datahub/webapp/components/UserSettingsMenu/UserSettingsMenu.tsx b/datahub/webapp/components/UserSettingsMenu/UserSettingsMenu.tsx
index 2db877a2c..7dc4d83cd 100644
--- a/datahub/webapp/components/UserSettingsMenu/UserSettingsMenu.tsx
+++ b/datahub/webapp/components/UserSettingsMenu/UserSettingsMenu.tsx
@@ -30,7 +30,7 @@ const userSettingConfig: Record<
     }
 > = require('config/user_setting.yaml');
 
-export const UserSettingsMenu: React.FunctionComponent<{}> = () => {
+export const UserSettingsMenu: React.FC = () => {
     const userSettingByKey = useSelector(
         (state: IStoreState) => state.user.rawSettings
     );
diff --git a/datahub/webapp/hooks/chart/useChartSource.ts b/datahub/webapp/hooks/chart/useChartSource.ts
index bb2714b3c..d825156de 100644
--- a/datahub/webapp/hooks/chart/useChartSource.ts
+++ b/datahub/webapp/hooks/chart/useChartSource.ts
@@ -129,22 +129,26 @@ export function useChartSource(
         }
     }, [statementId]);
 
-    const queryExecutions = React.useMemo(() => {
-        return (executionIdList || [])
-            .map((id) => queryExecutionById[id])
-            .filter((queryExecution) => queryExecution);
-    }, [queryExecutionById, executionIdList]);
+    const queryExecutions = React.useMemo(
+        () =>
+            (executionIdList || [])
+                .map((id) => queryExecutionById[id])
+                .filter((queryExecution) => queryExecution),
+        [queryExecutionById, executionIdList]
+    );
 
-    const statementExecutions = React.useMemo(() => {
-        return (statementIdList || [])
-            .map((sid) => statementExecutionById[sid])
-            .filter(
-                (statementExecution) =>
-                    statementExecution.status ===
-                        StatementExecutionStatus.DONE &&
-                    statementExecution.result_row_count > 0
-            );
-    }, [statementIdList, statementExecutionById]);
+    const statementExecutions = React.useMemo(
+        () =>
+            (statementIdList || [])
+                .map((sid) => statementExecutionById[sid])
+                .filter(
+                    (statementExecution) =>
+                        statementExecution.status ===
+                            StatementExecutionStatus.DONE &&
+                        statementExecution.result_row_count > 0
+                ),
+        [statementIdList, statementExecutionById]
+    );
 
     return {
         statementResultData,
diff --git a/datahub/webapp/hooks/redux/useAnnouncements.ts b/datahub/webapp/hooks/redux/useAnnouncements.ts
index 56650bfd3..6384da36b 100644
--- a/datahub/webapp/hooks/redux/useAnnouncements.ts
+++ b/datahub/webapp/hooks/redux/useAnnouncements.ts
@@ -8,16 +8,18 @@ export const useAnnouncements = () => {
     const location = useLocation();
     const visibleAnnouncements = useSelector(visibleAnnouncementSelector);
 
-    return useMemo(() => {
-        return visibleAnnouncements.filter((a) => {
-            if (a.url_regex) {
-                const regexPattern = new RegExp(a.url_regex);
-                const regexMatched = location.pathname.match(regexPattern);
-                if (!regexMatched) {
-                    return false;
+    return useMemo(
+        () =>
+            visibleAnnouncements.filter((a) => {
+                if (a.url_regex) {
+                    const regexPattern = new RegExp(a.url_regex);
+                    const regexMatched = location.pathname.match(regexPattern);
+                    if (!regexMatched) {
+                        return false;
+                    }
                 }
-            }
-            return true;
-        });
-    }, [location, visibleAnnouncements]);
+                return true;
+            }),
+        [location, visibleAnnouncements]
+    );
 };
diff --git a/datahub/webapp/hooks/useBrowserTitle.ts b/datahub/webapp/hooks/useBrowserTitle.ts
index 661f9e212..07a697b77 100644
--- a/datahub/webapp/hooks/useBrowserTitle.ts
+++ b/datahub/webapp/hooks/useBrowserTitle.ts
@@ -8,9 +8,10 @@ export function useBrowserTitle(title = '') {
     }, [title]);
 
     // Unset the title when unmounting
-    useEffect(() => {
-        return () => {
+    useEffect(
+        () => () => {
             setBrowserTitle(oldTitle.current, false);
-        };
-    }, []);
+        },
+        []
+    );
 }
diff --git a/datahub/webapp/hooks/useDataFetch.ts b/datahub/webapp/hooks/useDataFetch.ts
index 313c44206..05a9beae0 100644
--- a/datahub/webapp/hooks/useDataFetch.ts
+++ b/datahub/webapp/hooks/useDataFetch.ts
@@ -44,7 +44,7 @@ function dataFetchReducer<T>(state: IDataFetchState<T>, action) {
 
 interface IFetchArgs {
     url?: string;
-    params?: {};
+    params?: Record<string | number, unknown>;
     cancelFetch?: boolean;
     fetchOnMount?: boolean;
 
@@ -120,7 +120,6 @@ export function useDataFetch<T = any>(args: IFetchArgs = {}) {
                 request.cancel();
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringify(fetchParams.params), fetchParams.url, version]);
 
     // const doFetch = (url = ,params = {}, cancelFetch = false) => {
diff --git a/datahub/webapp/hooks/useModalRoute.ts b/datahub/webapp/hooks/useModalRoute.ts
index af65b0f34..a7d7bd90c 100644
--- a/datahub/webapp/hooks/useModalRoute.ts
+++ b/datahub/webapp/hooks/useModalRoute.ts
@@ -2,7 +2,7 @@ import { Location } from 'history';
 import { useSelector } from 'react-redux';
 import { IStoreState } from 'redux/store/types';
 
-export function useModalRoute(location: Location) {
+export function useModalRoute(location: Location<{ isModal: boolean }>) {
     const disableModal = useSelector(
         (state: IStoreState) =>
             state.user.computedSettings.show_full_view === 'enabled'
diff --git a/datahub/webapp/hooks/usePaginatedFetch.ts b/datahub/webapp/hooks/usePaginatedFetch.ts
index eb0220d87..3aff86342 100644
--- a/datahub/webapp/hooks/usePaginatedFetch.ts
+++ b/datahub/webapp/hooks/usePaginatedFetch.ts
@@ -55,7 +55,7 @@ function dataFetchReducer<T>(state: IDataFetchState<T>, action) {
 
 interface IFetchArgs {
     url: string;
-    params?: {};
+    params?: Record<string | number, unknown>;
     type?: 'fetch' | 'save' | 'delete' | 'update';
     initialOffset?: number;
     batchSize?: number;
@@ -133,7 +133,6 @@ export function usePaginatedFetch<T>({
                 request.cancel();
             }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringify(params), url, type, batchSize, offset, shouldFetch, version]);
 
     const fetchMore = useCallback(async () => {
diff --git a/datahub/webapp/lib/batch/batch-manager.ts b/datahub/webapp/lib/batch/batch-manager.ts
index f89e4b7d8..eb4dcd59e 100644
--- a/datahub/webapp/lib/batch/batch-manager.ts
+++ b/datahub/webapp/lib/batch/batch-manager.ts
@@ -14,9 +14,10 @@ export function pickLastMergeFunction<T, M>(changes: Array<IBatchPromise<T>>) {
     return (changes[changes.length - 1] as unknown) as IBatchPromise<M>;
 }
 
-export function spreadMergeFunction<T = {}, M = {}>(
-    changes: Array<IBatchPromise<T>>
-) {
+export function spreadMergeFunction<
+    T = Record<string | number, unknown>,
+    M = Record<string | number, unknown>
+>(changes: Array<IBatchPromise<T>>) {
     const mergedData = (changes.reduce(
         (hash, change) => ({
             ...hash,
@@ -52,7 +53,7 @@ export class BatchManager<T, M> {
         changes: Array<IBatchPromise<T>>
     ) => IBatchPromise<M>;
 
-    constructor(options: IBatchManagerOptions<T, M>) {
+    public constructor(options: IBatchManagerOptions<T, M>) {
         const {
             processFunction,
             mergeFunction = pickLastMergeFunction,
diff --git a/datahub/webapp/lib/batch/datadoc-save-manager.ts b/datahub/webapp/lib/batch/datadoc-save-manager.ts
index f73fde3da..29e5a65c9 100644
--- a/datahub/webapp/lib/batch/datadoc-save-manager.ts
+++ b/datahub/webapp/lib/batch/datadoc-save-manager.ts
@@ -1,5 +1,6 @@
 import { convertToRaw, ContentState } from 'draft-js';
 
+import { IDataCellMeta } from 'const/datadoc';
 import ds from 'lib/datasource';
 import { BatchManager, spreadMergeFunction } from 'lib/batch/batch-manager';
 import dataDocSocket from 'lib/data-doc/datadoc-socketio';
@@ -44,7 +45,7 @@ export class DataDocSaveManager {
 
 interface IUpdateDataCell {
     context?: string | ContentState;
-    meta?: {};
+    meta?: IDataCellMeta;
 }
 
 export class DataCellSaveManager {
@@ -57,7 +58,7 @@ export class DataCellSaveManager {
         docId: number,
         cellId: number,
         context?: string | ContentState,
-        meta?: {},
+        meta?: IDataCellMeta,
         frequency: number = 2000
     ) {
         if (!(cellId in this.itemSaverByCellId)) {
diff --git a/datahub/webapp/lib/chart/chart-data-transformation.ts b/datahub/webapp/lib/chart/chart-data-transformation.ts
index b42b1ee2a..1fce53894 100644
--- a/datahub/webapp/lib/chart/chart-data-transformation.ts
+++ b/datahub/webapp/lib/chart/chart-data-transformation.ts
@@ -6,6 +6,7 @@ import { isNumeric } from 'lib/utils/number';
 import { sortTable, getValueDataType } from './chart-utils';
 
 const emptyCellValue = null;
+const UNDEFINED = 'undefined';
 
 // from: https://stackoverflow.com/questions/4492678/swap-rows-with-columns-transposition-of-a-matrix-in-javascript
 function switchData(data: readonly any[][]) {
@@ -59,7 +60,7 @@ class PivotReducer<T> {
     public reducerFunction: (agg: T, val: any) => T;
     public endReducerFunction?: (agg: T) => any;
 
-    constructor(
+    public constructor(
         initialValue: T,
         reducerFunction: (agg: T, val: any) => T,
         endReducerFunction: (agg: T) => any = null
@@ -95,9 +96,7 @@ const ChartReducers = {
             agg.push(val);
             return agg;
         },
-        (values) => {
-            return getMedian(getFilterNumberArr(values));
-        }
+        (values) => getMedian(getFilterNumberArr(values))
     ),
     sum: new PivotReducer(0, (agg, val) =>
         isNumeric(val) ? agg + Number(val) : agg
@@ -179,13 +178,13 @@ function aggregateData(
                 ? getDistinctValuesAndIndexMap(
                       rows.map((row) => row[aggColIndex])
                   )
-                : [[undefined], { undefined: 0 }];
+                : [[undefined], { [UNDEFINED]: 0 }];
         const [distinctRowValues, distinctRowValToIndex] =
             aggRowIndex != null
                 ? getDistinctValuesAndIndexMap(
                       rows.map((row) => row[aggRowIndex])
                   )
-                : [[undefined], { undefined: 0 }];
+                : [[undefined], { [UNDEFINED]: 0 }];
 
         const aggValColName = data[0][aggValueIndex[0]];
 
@@ -281,7 +280,7 @@ export function transformData(
     aggSeries: {
         [seriesIdx: number]: ChartDataAggType;
     } = {},
-    // tslint:disable-next-line: no-unnecessary-initializer
+    // eslint-disable-next-line no-undef-init
     sortIdx: number = undefined,
     sortAsc: boolean = true,
     xAxisIdx: number = 0
diff --git a/datahub/webapp/lib/chart/chart-meta-processing.ts b/datahub/webapp/lib/chart/chart-meta-processing.ts
index e4464b6ca..7c2dc9cc3 100644
--- a/datahub/webapp/lib/chart/chart-meta-processing.ts
+++ b/datahub/webapp/lib/chart/chart-meta-processing.ts
@@ -219,9 +219,8 @@ export function mapMetaToChartOptions(
                     currentValue
                 )} (${percentage}%)`;
             },
-            title: (tooltipItem, chartData) => {
-                return String(chartData.labels[tooltipItem[0].index]);
-            },
+            title: (tooltipItem, chartData) =>
+                String(chartData.labels[tooltipItem[0].index]),
         };
     } else {
         optionsObj.tooltips['callbacks'] = {
diff --git a/datahub/webapp/lib/codemirror/codemirror-hover.ts b/datahub/webapp/lib/codemirror/codemirror-hover.ts
index 61ade43fa..c6ae4f940 100644
--- a/datahub/webapp/lib/codemirror/codemirror-hover.ts
+++ b/datahub/webapp/lib/codemirror/codemirror-hover.ts
@@ -20,7 +20,7 @@ class TextHoverState {
     private cm;
     private node;
 
-    constructor(cm, options) {
+    public constructor(cm, options) {
         this.options = options;
         this.cm = cm;
         this.node = null;
diff --git a/datahub/webapp/lib/data-doc/datadoc-socketio.ts b/datahub/webapp/lib/data-doc/datadoc-socketio.ts
index dbc48f1e1..ba85d5f55 100644
--- a/datahub/webapp/lib/data-doc/datadoc-socketio.ts
+++ b/datahub/webapp/lib/data-doc/datadoc-socketio.ts
@@ -1,7 +1,6 @@
 import SocketIOManager from 'lib/socketio-manager';
-import { IDataDocEditor } from 'const/datadoc';
+import { IDataDocEditor, IDataCellMeta } from 'const/datadoc';
 import { IAccessRequest } from 'const/accessRequest';
-
 import { IQueryExecution } from 'redux/queryExecutions/types';
 
 interface IDataDocSocketEventPromise<A = () => any, R = (e) => any> {
@@ -154,7 +153,7 @@ export class DataDocSocket {
     public updateDataCell = (
         docId: number,
         cellId: number,
-        fields: { meta?: {}; context?: string }
+        fields: { meta?: IDataCellMeta; context?: string }
     ) => {
         this.socket.emit('update_data_cell', docId, cellId, fields);
         return this.makePromise('updateDataCell');
@@ -189,7 +188,7 @@ export class DataDocSocket {
         index: number,
         cellType: string,
         context: string,
-        meta: {}
+        meta: IDataCellMeta
     ) => {
         this.socket.emit(
             'insert_data_cell',
diff --git a/datahub/webapp/lib/data-doc/search.ts b/datahub/webapp/lib/data-doc/search.ts
index fe31b0207..f08ffb3ec 100644
--- a/datahub/webapp/lib/data-doc/search.ts
+++ b/datahub/webapp/lib/data-doc/search.ts
@@ -15,7 +15,7 @@ export function searchText(
     }
 
     let match: RegExpExecArray;
-    // tslint:disable-next-line
+    // eslint-disable-next-line
     while ((match = searchRegex.exec(text)) !== null) {
         results.push({
             from: match.index,
@@ -41,7 +41,7 @@ export function searchDataDocCells(
         if (cell.cell_type === 'query') {
             const content = cell.context;
             let match: RegExpExecArray;
-            // tslint:disable-next-line
+            // eslint-disable-next-line
             while ((match = searchRegex.exec(content)) !== null) {
                 results.push({
                     cellId: cell.id,
@@ -54,7 +54,7 @@ export function searchDataDocCells(
             content.getBlockMap().map((contentBlock) => {
                 let match: RegExpExecArray;
                 const blockText = contentBlock.getText();
-                // tslint:disable-next-line
+                // eslint-disable-next-line
                 while ((match = searchRegex.exec(blockText)) !== null) {
                     results.push({
                         cellId: cell.id,
@@ -133,7 +133,7 @@ export const findSearchEntities = (
 
         let match: RegExpExecArray;
         const blockText = contentBlock.getText();
-        // tslint:disable-next-line
+        // eslint-disable-next-line
         while ((match = searchRegex.exec(blockText)) !== null) {
             callback(match.index, match.index + match[0].length);
         }
diff --git a/datahub/webapp/lib/dataHubUI.ts b/datahub/webapp/lib/dataHubUI.ts
index 58f59cc14..1b206c18e 100644
--- a/datahub/webapp/lib/dataHubUI.ts
+++ b/datahub/webapp/lib/dataHubUI.ts
@@ -55,9 +55,7 @@ export function setupOnDataHubClose() {
         const state = reduxStore.getState();
         const { dataDocSavePromiseById } = state.dataDoc;
         const hasUnsavedChanges = Object.values(dataDocSavePromiseById).some(
-            (savePromise) => {
-                return Object.keys(savePromise.itemToSave).length > 0;
-            }
+            (savePromise) => Object.keys(savePromise.itemToSave).length > 0
         );
 
         if (!hasUnsavedChanges) {
diff --git a/datahub/webapp/lib/datasource.ts b/datahub/webapp/lib/datasource.ts
index b619b1a12..9705a226a 100644
--- a/datahub/webapp/lib/datasource.ts
+++ b/datahub/webapp/lib/datasource.ts
@@ -23,7 +23,7 @@ function handleRequestException(error: any, notifyOnError?: boolean) {
 function syncDatasource<T = any>(
     method: string,
     urlOrOptions: UrlOrOptions,
-    data?: {},
+    data?: Record<string, unknown>,
     notifyOnError?: boolean
 ): ICancelablePromise<{ data: T }> {
     const url =
@@ -66,9 +66,7 @@ function syncDatasource<T = any>(
                 return handleRequestException(resp, notifyOnError);
             }
         },
-        (rej) => {
-            return handleRequestException(rej, notifyOnError);
-        }
+        (rej) => handleRequestException(rej, notifyOnError)
     );
 
     request.cancel = cancel;
@@ -78,7 +76,7 @@ function syncDatasource<T = any>(
 
 function fetchDatasource<T = any>(
     urlOrOptions: UrlOrOptions,
-    data?: {},
+    data?: Record<string, unknown>,
     notifyOnError = false
 ) {
     return syncDatasource<T>('GET', urlOrOptions, data, notifyOnError);
@@ -86,7 +84,7 @@ function fetchDatasource<T = any>(
 
 function saveDatasource<T = any>(
     urlOrOptions: UrlOrOptions,
-    data?: {},
+    data?: Record<string, unknown>,
     notifyOnError = true
 ) {
     return syncDatasource<T>('POST', urlOrOptions, data, notifyOnError);
@@ -94,14 +92,14 @@ function saveDatasource<T = any>(
 
 function updateDatasource<T = any>(
     urlOrOptions: UrlOrOptions,
-    data?: {},
+    data?: Record<string, unknown>,
     notifyOnError = true
 ) {
     return syncDatasource<T>('PUT', urlOrOptions, data, notifyOnError);
 }
 function deleteDatasource<T = any>(
     urlOrOptions: UrlOrOptions,
-    data?: {},
+    data?: Record<string, unknown>,
     notifyOnError = true
 ) {
     return syncDatasource<T>('DELETE', urlOrOptions, data, notifyOnError);
diff --git a/datahub/webapp/lib/query-result/analyzer.ts b/datahub/webapp/lib/query-result/analyzer.ts
index df23e7ee9..075491f50 100644
--- a/datahub/webapp/lib/query-result/analyzer.ts
+++ b/datahub/webapp/lib/query-result/analyzer.ts
@@ -13,9 +13,10 @@ export const columnStatsAnalyzers: IColumnStatsAnalyzer[] = [
         appliesToType: ['number'],
         generator: (values: any[]) => {
             const bigNumberArray = arrToBigNumber(values);
-            const sum = bigNumberArray.reduce((s, value) => {
-                return s.plus(value);
-            }, new BigNumber(0));
+            const sum = bigNumberArray.reduce(
+                (s, value) => s.plus(value),
+                new BigNumber(0)
+            );
             const average = sum.dividedBy(bigNumberArray.length);
             return average.toFormat(2);
         },
@@ -25,9 +26,9 @@ export const columnStatsAnalyzers: IColumnStatsAnalyzer[] = [
         name: 'Median',
         appliesToType: ['number'],
         generator: (values: any[]) => {
-            const sortedArray = arrToBigNumber(values).sort((a, b) => {
-                return a.comparedTo(b);
-            });
+            const sortedArray = arrToBigNumber(values).sort((a, b) =>
+                a.comparedTo(b)
+            );
             const length = sortedArray.length;
             if (length === 0) {
                 return 'None';
@@ -45,27 +46,25 @@ export const columnStatsAnalyzers: IColumnStatsAnalyzer[] = [
         key: 'min',
         name: 'Min',
         appliesToType: ['number'],
-        generator: (values: any[]) => {
-            return BigNumber.min(...arrToBigNumber(values)).toFormat(2);
-        },
+        generator: (values: any[]) =>
+            BigNumber.min(...arrToBigNumber(values)).toFormat(2),
     },
     {
         key: 'max',
         name: 'Max',
         appliesToType: ['number'],
-        generator: (values: any[]) => {
-            return BigNumber.max(...arrToBigNumber(values)).toFormat(2);
-        },
+        generator: (values: any[]) =>
+            BigNumber.max(...arrToBigNumber(values)).toFormat(2),
     },
     {
         key: 'num_of_unique_values',
         name: '# of Unique Values',
         appliesToType: ['number', 'string', 'id'],
-        generator: (values: any[]) => {
-            return values.reduce((set: Set<any>, current) => {
-                return set.add(current);
-            }, new Set()).size;
-        },
+        generator: (values: any[]) =>
+            values.reduce(
+                (set: Set<any>, current) => set.add(current),
+                new Set()
+            ).size,
     },
     {
         key: 'common_values',
diff --git a/datahub/webapp/lib/query-result/detector.ts b/datahub/webapp/lib/query-result/detector.ts
index 0f22007d5..fe4f9cb3c 100644
--- a/datahub/webapp/lib/query-result/detector.ts
+++ b/datahub/webapp/lib/query-result/detector.ts
@@ -6,19 +6,17 @@ const columnDetectors: IColumnDetector[] = [
     {
         type: 'string',
         priority: 0,
-        checker: (colName: string, values: any[]) => {
-            return detectTypeForValues(values, (v) => {
+        checker: (colName: string, values: any[]) =>
+            detectTypeForValues(values, (v) => {
                 const vType = typeof v;
                 return vType === 'string';
-            });
-        },
+            }),
     },
     {
         type: 'number',
         priority: 1,
-        checker: (colName: string, values: any[]) => {
-            return detectTypeForValues(values, isNumeric);
-        },
+        checker: (colName: string, values: any[]) =>
+            detectTypeForValues(values, isNumeric),
     },
     {
         type: 'id',
diff --git a/datahub/webapp/lib/query-result/transformer.tsx b/datahub/webapp/lib/query-result/transformer.tsx
index 40bb52796..7a7a83073 100644
--- a/datahub/webapp/lib/query-result/transformer.tsx
+++ b/datahub/webapp/lib/query-result/transformer.tsx
@@ -15,9 +15,7 @@ const queryResultTransformers: IColumnTransformer[] = [
         appliesToType: ['number'],
         priority: 1,
         auto: false,
-        transform: (v: any): React.ReactNode => {
-            return formatNumber(v);
-        },
+        transform: (v: any): React.ReactNode => formatNumber(v),
     },
     {
         key: 'dollar-format',
@@ -25,7 +23,7 @@ const queryResultTransformers: IColumnTransformer[] = [
         appliesToType: ['number'],
         priority: 0,
         auto: false,
-        transform: (v: any): React.ReactNode => {
+        transform: (v: any) => {
             const num = Number(v);
             if (!isNumeric(num)) {
                 return v;
@@ -54,9 +52,7 @@ const queryResultTransformers: IColumnTransformer[] = [
         appliesToType: ['string'],
         priority: 0,
         auto: false,
-        transform: (v: string): React.ReactNode => {
-            return v.toLocaleUpperCase();
-        },
+        transform: (v: string): React.ReactNode => v.toLocaleUpperCase(),
     },
 ]
     .concat(window.CUSTOM_COLUMN_TRANSFORMERS ?? [])
diff --git a/datahub/webapp/lib/sql-helper/sql-autocompleter.ts b/datahub/webapp/lib/sql-helper/sql-autocompleter.ts
index 17b9890fc..e8b55c905 100644
--- a/datahub/webapp/lib/sql-helper/sql-autocompleter.ts
+++ b/datahub/webapp/lib/sql-helper/sql-autocompleter.ts
@@ -12,8 +12,8 @@ interface ILineAnalysis {
 }
 
 interface ICompletionRow {
-    string: string;
-    text: string;
+    searchText: string;
+    displayText: string;
     label: string;
     tooltip: string;
     render: (element: HTMLElement, self: any, data: ICompletionRow) => void;
@@ -125,7 +125,7 @@ export class SqlAutoCompleter {
     private keywords?: string[];
     private type: AutoCompleteType;
 
-    constructor(
+    public constructor(
         codeMirrorInstance: typeof CodeMirror,
         language: string,
         metastoreId: number = null,
@@ -334,19 +334,19 @@ export class SqlAutoCompleter {
             tooltip === 'table'
                 ? data.label
                       .split('.')
-                      .map((word, index) => {
+                      .map((word, index) =>
                           // this case is for schemaName.tableName case
-                          return index === 1
+                          index === 1
                               ? word.replace(
-                                    data.string,
-                                    `<b style='font-weight: bold'>${data.string}</b>`
+                                    data.searchText,
+                                    `<b style='font-weight: bold'>${data.searchText}</b>`
                                 )
-                              : word;
-                      })
+                              : word
+                      )
                       .join('.')
                 : data.label.replace(
-                      data.string,
-                      `<b style='font-weight: bold'>${data.string}</b>`
+                      data.searchText,
+                      `<b style='font-weight: bold'>${data.searchText}</b>`
                   );
 
         const isGoldenItem = data.isGoldenItem;
@@ -414,8 +414,8 @@ export class SqlAutoCompleter {
             const upperCasedString = text.toUpperCase();
             const score = -upperCasedWord.length;
             return {
-                string: upperCasedString,
-                text: upperCasedWord,
+                searchText: upperCasedString,
+                displayText: upperCasedWord,
                 label: upperCasedWord,
                 tooltip: 'keyword',
                 render: this.autoSuggestionRenderer,
@@ -429,8 +429,8 @@ export class SqlAutoCompleter {
             // we should give it a better rank
             const isGoldenItem = false;
             return {
-                string: text,
-                text: word,
+                searchText: text,
+                displayText: word,
                 label: word,
                 tooltip: context,
                 render: this.autoSuggestionRenderer,
@@ -441,8 +441,8 @@ export class SqlAutoCompleter {
         const hierarchicalFormatter: Formatter = (context, word, label) => {
             const isGoldenItem = false;
             return {
-                string: text,
-                text: word,
+                searchText: text,
+                displayText: word,
                 label,
                 tooltip: context,
                 render: this.autoSuggestionRenderer,
@@ -460,7 +460,9 @@ export class SqlAutoCompleter {
 
     private getSqlHint(
         editor: CodeMirror.Editor,
-        options: {}
+        options: {
+            passive?: boolean;
+        }
     ): Promise<IAutoCompleteResult | null> {
         if (this.type === 'none') {
             return Promise.resolve(null);
diff --git a/datahub/webapp/lib/sql-helper/sql-context-free-linter.ts b/datahub/webapp/lib/sql-helper/sql-context-free-linter.ts
index 6e75ee6d8..45ed0b120 100644
--- a/datahub/webapp/lib/sql-helper/sql-context-free-linter.ts
+++ b/datahub/webapp/lib/sql-helper/sql-context-free-linter.ts
@@ -30,7 +30,7 @@ const contextFreeLinterWarningsByLanguage: Record<
             }
 
             for (const [tokenIdx, token] of statement.entries()) {
-                if (token.type === 'KEYWORD' && token.string === 'count') {
+                if (token.type === 'KEYWORD' && token.text === 'count') {
                     const countDistinctTokens = statement.slice(
                         tokenIdx,
                         tokenIdx + 3
@@ -39,9 +39,9 @@ const contextFreeLinterWarningsByLanguage: Record<
                         const [_, bracket, distinct] = countDistinctTokens;
                         if (
                             bracket.type === 'BRACKET' &&
-                            bracket.string === '(' &&
+                            bracket.text === '(' &&
                             distinct.type === 'KEYWORD' &&
-                            distinct.string === 'distinct'
+                            distinct.text === 'distinct'
                         ) {
                             warnings.push({
                                 message:
@@ -71,10 +71,7 @@ const contextFreeLinterWarningsByLanguage: Record<
             }
 
             const firstToken = statement[0];
-            if (
-                firstToken.type === 'KEYWORD' &&
-                firstToken.string === 'select'
-            ) {
+            if (firstToken.type === 'KEYWORD' && firstToken.text === 'select') {
                 // SELECT statement
 
                 // Must have limit check
@@ -84,7 +81,7 @@ const contextFreeLinterWarningsByLanguage: Record<
 
                     const isLimitToken =
                         limitToken.type === 'KEYWORD' &&
-                        limitToken.string === 'limit';
+                        limitToken.text === 'limit';
                     const isNumberToken = numberToken.type === 'NUMBER';
 
                     if (!isLimitToken || !isNumberToken) {
diff --git a/datahub/webapp/lib/sql-helper/sql-formatter.ts b/datahub/webapp/lib/sql-helper/sql-formatter.ts
index e49fb5d59..964e0241c 100644
--- a/datahub/webapp/lib/sql-helper/sql-formatter.ts
+++ b/datahub/webapp/lib/sql-helper/sql-formatter.ts
@@ -35,12 +35,12 @@ function tokensToText(tokens: IToken[]) {
         }
 
         if (skipTokenType.has(token.type)) {
-            if (!(token.string in templateTagToId)) {
-                templateTagToId[token.string] = uniqueId('__TEMPLATED_TAG_');
+            if (!(token.text in templateTagToId)) {
+                templateTagToId[token.text] = uniqueId('__TEMPLATED_TAG_');
             }
-            statementText += templateTagToId[token.string];
+            statementText += templateTagToId[token.text];
         } else {
-            statementText += token.string;
+            statementText += token.text;
         }
         lastToken = token;
     }
@@ -73,9 +73,9 @@ export function format(
     tokens.reduce((statement, token, index) => {
         if (token.type === 'KEYWORD' && options.case) {
             if (options.case === 'lower') {
-                token.string = token.string.toLocaleLowerCase();
+                token.text = token.text.toLocaleLowerCase();
             } else if (options.case === 'upper') {
-                token.string = token.string.toLocaleUpperCase();
+                token.text = token.text.toLocaleUpperCase();
             }
         }
 
@@ -134,7 +134,7 @@ export function format(
             let formattedStatement = statementText;
             if (
                 firstKeyWord &&
-                allowedStatement.has(firstKeyWord.string.toLocaleLowerCase())
+                allowedStatement.has(firstKeyWord.text.toLocaleLowerCase())
             ) {
                 formattedStatement = SqlFormattor.format(statementText, {
                     indent: options.indent,
@@ -152,7 +152,9 @@ export function format(
             return formattedStatement;
         }
     );
-    return formattedStatements.reduce((acc, statement, index) => {
-        return acc + '\n'.repeat(newLineBetweenStatement[index]) + statement;
-    }, '');
+    return formattedStatements.reduce(
+        (acc, statement, index) =>
+            acc + '\n'.repeat(newLineBetweenStatement[index]) + statement,
+        ''
+    );
 }
diff --git a/datahub/webapp/lib/sql-helper/sql-lexer.ts b/datahub/webapp/lib/sql-helper/sql-lexer.ts
index fe2b5678f..f1dcfeee8 100644
--- a/datahub/webapp/lib/sql-helper/sql-lexer.ts
+++ b/datahub/webapp/lib/sql-helper/sql-lexer.ts
@@ -180,30 +180,30 @@ export interface ICodeAnalysis {
 }
 
 class StringStream {
-    public string: string;
+    public text: string;
     public pos: number;
 
-    constructor(s: string) {
-        this.string = s;
+    public constructor(s: string) {
+        this.text = s;
         this.pos = 0;
     }
 
     public next() {
         if (!this.eol()) {
-            return this.string.charAt(this.pos++);
+            return this.text.charAt(this.pos++);
         }
     }
 
     public peek() {
-        return this.string.charAt(this.pos);
+        return this.text.charAt(this.pos);
     }
 
     public eol() {
-        return this.pos >= this.string.length;
+        return this.pos >= this.text.length;
     }
 
     public match(pattern, consume = false) {
-        const match = this.string.slice(this.pos).match(pattern);
+        const match = this.text.slice(this.pos).match(pattern);
         if (match && consume) {
             this.pos += match.index + match[0].length;
         }
@@ -212,20 +212,20 @@ class StringStream {
 
     public eatSpace() {
         const start = this.pos;
-        while (/\s/.test(this.string.charAt(this.pos))) {
+        while (/\s/.test(this.text.charAt(this.pos))) {
             this.pos++;
         }
         return this.pos - start;
     }
 
     public goToEnd() {
-        this.pos = this.string.length;
+        this.pos = this.text.length;
     }
 }
 
 export interface IToken {
     type: TokenType;
-    string: string;
+    text: string;
     line: number;
     start: number;
     end: number;
@@ -239,7 +239,7 @@ export class TableToken {
     public start: number;
     public end: number;
 
-    constructor(schema, table, token) {
+    public constructor(schema: string, table: string, token: IToken) {
         this.schema = schema;
         this.name = table;
         this.line = token.line;
@@ -252,14 +252,14 @@ class Line {
     public statements: Array<[number, number]>;
     public contexts: Array<[number, string]>;
 
-    constructor(initialStatement: number, initialContext: string) {
+    public constructor(initialStatement: number, initialContext: string) {
         this.statements = [[0, initialStatement]];
         this.contexts = [[0, initialContext]];
     }
 }
 
 function sanitizeTable(tableToken: IToken, defaultSchema: string) {
-    const stream = new StringStream(tableToken.string);
+    const stream = new StringStream(tableToken.text);
     const parts = [];
     while (!stream.eol()) {
         const match = stream.match(/^([_\w\d]+|`.*`)\.?/, true);
@@ -298,10 +298,10 @@ function sanitizeTable(tableToken: IToken, defaultSchema: string) {
 
 function categorizeWord(token: IToken, language: string) {
     const languageSetting = getLanguageSetting(language);
-    const s = token.string.toLowerCase();
+    const s = token.text.toLowerCase();
     if (languageSetting.keywords.has(s)) {
         token.type = 'KEYWORD';
-        token.string = s;
+        token.text = s;
     } else if (languageSetting.bool.has(s)) {
         token.type = 'BOOL';
     } else if (languageSetting.type.has(s)) {
@@ -313,14 +313,14 @@ function categorizeWord(token: IToken, language: string) {
 
 function makeTokenizer(language: string) {
     const tokenTypes = getTokenTypeMatcher(language);
-    function tokenizeString(
+    const tokenizeString = (
         token: IToken,
         stream: StringStream,
         tokens: IToken[],
         lineNum: number
-    ) {
+    ) => {
         let previousEscape = false;
-        const quote = token.string.charAt(0);
+        const quote = token.text.charAt(0);
         const start = stream.pos;
         while (!stream.eol()) {
             const ch = stream.next();
@@ -328,8 +328,7 @@ function makeTokenizer(language: string) {
                 if (ch === quote) {
                     // End
                     const end = stream.pos;
-                    token.string =
-                        token.string + stream.string.slice(start, end);
+                    token.text = token.text + stream.text.slice(start, end);
                     token.end = end;
                     tokens.push(token);
 
@@ -342,22 +341,22 @@ function makeTokenizer(language: string) {
             }
         }
 
-        token.string = token.string + stream.string.slice(start) + '\n';
+        token.text = token.text + stream.text.slice(start) + '\n';
         return tokenizeString.bind(null, token);
-    }
+    };
 
-    function tokenizeComment(
+    const tokenizeComment = (
         token: IToken,
         stream: StringStream,
         tokens: IToken[],
         lineNum: number
-    ) {
+    ) => {
         const start = stream.pos;
         if (!stream.eol()) {
             const match = stream.match(/\*\//, true);
             if (match) {
                 const end = stream.pos;
-                token.string = token.string + stream.string.slice(start, end);
+                token.text = token.text + stream.text.slice(start, end);
                 token.end = end;
                 tokens.push(token);
 
@@ -365,22 +364,22 @@ function makeTokenizer(language: string) {
             }
         }
 
-        token.string = token.string + stream.string.slice(start) + '\n';
+        token.text = token.text + stream.text.slice(start) + '\n';
         stream.goToEnd();
         return tokenizeComment.bind(null, token);
-    }
+    };
 
-    function tokenizeBase(
+    const tokenizeBase = (
         stream: StringStream,
         tokens: IToken[],
         lineNum: number
-    ) {
+    ) => {
         stream.eatSpace();
 
         let token: IToken = null;
         const tokenFound = tokenTypes.some(
-            ({ name: tokenType, regex: tokenRegexs }) => {
-                return tokenRegexs.some((tokenRegex) => {
+            ({ name: tokenType, regex: tokenRegexs }) =>
+                tokenRegexs.some((tokenRegex) => {
                     const match = stream.match(tokenRegex, true);
                     if (match) {
                         const end = stream.pos;
@@ -388,25 +387,24 @@ function makeTokenizer(language: string) {
 
                         token = {
                             type: tokenType,
-                            string: match[0],
+                            text: match[0],
                             line: lineNum,
                             start,
                             end,
                         };
                         return true;
                     }
-                });
-            }
+                })
         );
 
         if (tokenFound) {
             if (token.type === 'WORD') {
                 categorizeWord(token, language);
-            } else if (token.type === 'STRING' && token.string.length === 1) {
+            } else if (token.type === 'STRING' && token.text.length === 1) {
                 // Multi-line string!
                 // Change the mode to tokenizeString instead!
                 return tokenizeString.bind(null, token);
-            } else if (token.type === 'COMMENT' && token.string === '/*') {
+            } else if (token.type === 'COMMENT' && token.text === '/*') {
                 return tokenizeComment.bind(null, token);
             }
 
@@ -416,7 +414,7 @@ function makeTokenizer(language: string) {
         }
 
         return tokenizeBase;
-    }
+    };
 
     return tokenizeBase;
 }
@@ -443,7 +441,7 @@ export function simpleParse(tokens: IToken[]) {
         if (keepTokenType.has(token.type)) {
             if (token.type === 'BRACKET') {
                 statement.push(token);
-                if (token.string === '(' || token.string === '[') {
+                if (token.text === '(' || token.text === '[') {
                     bracketStack.push(token);
                 } else if (bracketStack.length > 0) {
                     // ) or ]
@@ -586,7 +584,7 @@ function findWithStatementPlaceholder(statement: IToken[]) {
             placeholders.push(token);
         } else if (token.type === 'BRACKET' && token.bracketIndex) {
             tokenIndex = token.bracketIndex + 1;
-        } else if (token.type === 'KEYWORD' && dmlKeyWord.has(token.string)) {
+        } else if (token.type === 'KEYWORD' && dmlKeyWord.has(token.text)) {
             break;
         }
     }
@@ -611,7 +609,7 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
         // ignore that word and skip again to the rest
         if (
             firstToken.type === 'KEYWORD' &&
-            firstToken.string === 'explain' &&
+            firstToken.text === 'explain' &&
             statement.length > 1
         ) {
             firstToken = statement[tokenCounter++];
@@ -619,22 +617,22 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
 
         if (
             firstToken.type !== 'KEYWORD' ||
-            !initialStatementKeyWord.has(firstToken.string)
+            !initialStatementKeyWord.has(firstToken.text)
         ) {
             return;
         }
 
-        if (firstToken.string === 'use') {
+        if (firstToken.text === 'use') {
             const secondToken = statement[tokenCounter++];
             if (secondToken && secondToken.type === 'VARIABLE') {
-                defaultSchema = secondToken.string;
+                defaultSchema = secondToken.text;
             }
         } else {
             let placeholders: Set<string> = null;
-            if (firstToken.string === 'with') {
+            if (firstToken.text === 'with') {
                 placeholders = new Set(
                     findWithStatementPlaceholder(statement).map(
-                        (token) => token.string
+                        (token) => token.text
                     )
                 );
             }
@@ -651,7 +649,7 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
 
             statement.forEach((token, tokenIndex) => {
                 if (token.type === 'BRACKET') {
-                    if (token.string === '(' || token.string === '[') {
+                    if (token.text === '(' || token.text === '[') {
                         const nextToken = statement[tokenIndex + 1];
                         if (!nextToken) {
                             // no need for more analysis if the loop is going to end
@@ -659,7 +657,7 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
                         }
                         bracketQueryContext.push(
                             nextToken.type === 'KEYWORD' &&
-                                initialStatementKeyWord.has(nextToken.string)
+                                initialStatementKeyWord.has(nextToken.text)
                         );
                         tableSearchMode = false;
                     } else {
@@ -676,20 +674,20 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
                 }
 
                 if (token.type === 'KEYWORD') {
-                    if (tableKeyWord.has(token.string)) {
+                    if (tableKeyWord.has(token.text)) {
                         tableSearchMode = true;
                     } else if (
                         tokenIndex === 0 &&
-                        initialStatementTableKeyWord.has(token.string)
+                        initialStatementTableKeyWord.has(token.text)
                     ) {
                         tableSearchMode = true;
-                    } else if (!continueTableSearchKeyWord.has(token.string)) {
+                    } else if (!continueTableSearchKeyWord.has(token.text)) {
                         tableSearchMode = false;
                     }
                 } else if (token.type === 'VARIABLE') {
                     if (tableSearchMode) {
                         const isActualTable = !(
-                            placeholders && placeholders.has(token.string)
+                            placeholders && placeholders.has(token.text)
                         );
                         if (isActualTable) {
                             tables.push(token);
@@ -703,17 +701,17 @@ export function findTableReferenceAndAlias(statements: IToken[][]) {
                         // example: select * from table_a as aa;
                         const hasAsAlias =
                             prevToken.type === 'KEYWORD' &&
-                            prevToken.string === 'AS' &&
+                            prevToken.text === 'AS' &&
                             lastTableIndex + 2 === tokenIndex;
                         // example: select * from table_a aa;
                         const hasSpaceAlias = lastTableIndex + 1 === tokenIndex;
                         if (hasAsAlias || hasSpaceAlias) {
                             const tableToken = tables[tables.length - 1];
                             const isActualTable = !(
-                                placeholders && placeholders.has(token.string)
+                                placeholders && placeholders.has(token.text)
                             );
                             if (isActualTable) {
-                                tableAlias[token.string] = tableToken;
+                                tableAlias[token.text] = tableToken;
                             }
                         }
                     }
@@ -781,16 +779,16 @@ export function getEditorLines(statements: IToken[][]) {
             let needToUpdateLine = false;
             if (
                 token.type === 'KEYWORD' &&
-                token.string in contextSensitiveKeyWord
+                token.text in contextSensitiveKeyWord
             ) {
-                context = contextSensitiveKeyWord[token.string];
+                context = contextSensitiveKeyWord[token.text];
                 tokenPosition += 1;
                 needToUpdateLine = true;
             } else if (token.type === 'SEMI') {
                 context = 'none';
                 needToUpdateLine = true;
             } else if (token.type === 'BRACKET') {
-                if (token.string === '(' || token.string === '[') {
+                if (token.text === '(' || token.text === '[') {
                     contextStack.push(context);
                     // However context don't change because there may be the case of
                     // select count(* <---)
diff --git a/datahub/webapp/lib/typescript.ts b/datahub/webapp/lib/typescript.ts
index e09c18ad6..a14086ad7 100644
--- a/datahub/webapp/lib/typescript.ts
+++ b/datahub/webapp/lib/typescript.ts
@@ -6,9 +6,9 @@ export type HTMLElementEvent<T extends HTMLElement> = Event & {
     // currentTarget: T;
 };
 
-export function getEnumEntries(enumDefObjectType: {}): Array<
-    [string, string | number]
-> {
+export function getEnumEntries(
+    enumDefObjectType: Record<string, unknown>
+): Array<[string, string | number]> {
     // Somehow Enum is not the same as Record<string, string | number>
     const enumDef = enumDefObjectType as Record<string, string | number>;
     return Object.entries(enumDef).filter(([name]) => isNaN(name as any));
diff --git a/datahub/webapp/lib/utils/index.ts b/datahub/webapp/lib/utils/index.ts
index 5737eff29..29ef2dfa0 100644
--- a/datahub/webapp/lib/utils/index.ts
+++ b/datahub/webapp/lib/utils/index.ts
@@ -2,10 +2,10 @@ import { escape, unescape } from 'lodash';
 import { PickType } from 'lib/typescript';
 
 // from: https://stackoverflow.com/questions/286141/remove-blank-attributes-from-an-object-in-javascript
-export function removeEmpty(obj: {}) {
+export function removeEmpty(obj: Record<string, unknown>) {
     Object.entries(obj).forEach(([key, val]) => {
         if (val && typeof val === 'object') {
-            removeEmpty(val);
+            removeEmpty(val as Record<string, unknown>);
         } else if (val == null) {
             delete obj[key];
         }
@@ -215,8 +215,7 @@ export function smoothScroll(
         const yDiff = finalScrollTop - startingY;
         let startTime: number;
 
-        // Bootstrap our animation - it will get called right before next frame shall be rendered.
-        window.requestAnimationFrame(function step(timestamp: number) {
+        const step = (timestamp: number) => {
             if (!startTime) {
                 startTime = timestamp;
             }
@@ -234,7 +233,10 @@ export function smoothScroll(
             } else {
                 resolve();
             }
-        });
+        };
+
+        // Bootstrap our animation - it will get called right before next frame shall be rendered.
+        window.requestAnimationFrame(step);
     });
 }
 
@@ -306,7 +308,10 @@ export function sanitizeUrlTitle(title: string) {
         .replace(/[^\-A-Za-z0-9]/g, '');
 }
 
-export function getChangedObject(orig: {}, changed: {}) {
+export function getChangedObject(
+    orig: Record<any, unknown>,
+    changed: Record<any, unknown>
+) {
     const ret = {};
 
     for (const [key, value] of Object.entries(changed)) {
diff --git a/datahub/webapp/lib/utils/query-string.ts b/datahub/webapp/lib/utils/query-string.ts
index 4a49ce3ec..6e72d943c 100644
--- a/datahub/webapp/lib/utils/query-string.ts
+++ b/datahub/webapp/lib/utils/query-string.ts
@@ -8,7 +8,10 @@ export function getQueryString(): Record<string, any> {
     return qs.parse(location.search.slice(1));
 }
 
-export function replaceQueryString(params: {}, navigate: boolean = false) {
+export function replaceQueryString(
+    params: Record<string, any>,
+    navigate: boolean = false
+) {
     const mergedParams = {
         ...getQueryString(),
         ...params,
diff --git a/datahub/webapp/lib/utils/react-select.ts b/datahub/webapp/lib/utils/react-select.ts
index bac60c074..3a1f8c218 100644
--- a/datahub/webapp/lib/utils/react-select.ts
+++ b/datahub/webapp/lib/utils/react-select.ts
@@ -96,17 +96,15 @@ export const defaultReactSelectStyles = {
         color: 'var(--title-color)',
         ...(data.color ? dot(data.color) : {}),
     }),
-    multiValue: (styles, { data }) => {
-        return {
-            ...styles,
-            backgroundColor: data.color || 'var(--light-bg-color)',
-            color: data.color ? '#000' : 'var(--text-color)',
-            ':hover': {
-                backgroundColor: 'var(--hover-bg-color)',
-                color: 'var(--text-color)',
-            },
-        };
-    },
+    multiValue: (styles, { data }) => ({
+        ...styles,
+        backgroundColor: data.color || 'var(--light-bg-color)',
+        color: data.color ? '#000' : 'var(--text-color)',
+        ':hover': {
+            backgroundColor: 'var(--hover-bg-color)',
+            color: 'var(--text-color)',
+        },
+    }),
     multiValueLabel: (styles) => ({
         ...styles,
         color: 'inherit',
@@ -151,8 +149,11 @@ export const miniReactSelectStyles = {
     }),
 };
 
-export function makeReactSelectStyle(modalMenu?: boolean, style?: {}) {
-    let styles: {} = style ?? defaultReactSelectStyles;
+export function makeReactSelectStyle(
+    modalMenu?: boolean,
+    style?: Record<string, unknown>
+) {
+    let styles: Record<string, unknown> = style ?? defaultReactSelectStyles;
     if (modalMenu) {
         styles = {
             ...styles,
diff --git a/datahub/webapp/redux/adhocQuery/reducer.ts b/datahub/webapp/redux/adhocQuery/reducer.ts
index 4a31543f9..1f7b4be28 100644
--- a/datahub/webapp/redux/adhocQuery/reducer.ts
+++ b/datahub/webapp/redux/adhocQuery/reducer.ts
@@ -12,8 +12,8 @@ const initialState: Readonly<IAdhocQueryState> = {
 export default (
     state = initialState,
     action: AdhocQueryAction | EnvironmentAction
-) => {
-    return produce(state, (draft) => {
+) =>
+    produce(state, (draft) => {
         switch (action.type) {
             case '@@adhocQuery/RECEIVE_ADHOC_QUERY': {
                 draft.query = action.payload.query;
@@ -32,4 +32,3 @@ export default (
             }
         }
     });
-};
diff --git a/datahub/webapp/redux/board/reducer.ts b/datahub/webapp/redux/board/reducer.ts
index b2153755a..1c561080a 100644
--- a/datahub/webapp/redux/board/reducer.ts
+++ b/datahub/webapp/redux/board/reducer.ts
@@ -7,7 +7,7 @@ const initialState: Readonly<IBoardState> = {
     boardItemById: {},
 };
 
-function board(state = initialState, action: BoardAction) {
+export default function (state = initialState, action: BoardAction) {
     return produce(state, (draft) => {
         switch (action.type) {
             case '@@board/RECEIVE_BOARDS': {
@@ -95,5 +95,3 @@ function board(state = initialState, action: BoardAction) {
         }
     });
 }
-
-export default board;
diff --git a/datahub/webapp/redux/dataDoc/action.ts b/datahub/webapp/redux/dataDoc/action.ts
index 456eb80b9..101577e9e 100644
--- a/datahub/webapp/redux/dataDoc/action.ts
+++ b/datahub/webapp/redux/dataDoc/action.ts
@@ -9,6 +9,7 @@ import {
     IDataDoc,
     CELL_TYPE,
     IDataDocEditor,
+    IDataCellMeta,
 } from 'const/datadoc';
 import { IAccessRequest } from 'const/accessRequest';
 
@@ -37,14 +38,13 @@ export const dataDocCellSchema = new schema.Entity(
     'dataDocCell',
     {},
     {
-        processStrategy(value, parent, key) {
-            return parent
+        processStrategy: (value, parent, key) =>
+            parent
                 ? {
                       ...value,
                       docId: parent.id,
                   }
-                : value;
-        },
+                : value,
     }
 );
 export const dataDocSchema = new schema.Entity('dataDoc', {
@@ -123,14 +123,14 @@ export function updateDataDocOwner(
         dispatch({
             type: '@@dataDoc/REMOVE_DATA_DOC_EDITOR',
             payload: {
-                docId: docId,
+                docId,
                 uid: nextOwnerId,
             },
         });
         dispatch({
             type: '@@dataDoc/UPDATE_DATA_DOC_FIELD',
             payload: {
-                docId: docId,
+                docId,
                 fieldName: 'owner_uid',
                 fieldVal: nextOwnerId,
             },
@@ -173,7 +173,7 @@ export function receiveDataDocs(
     };
 }
 
-export function fetchDataDoc(docId: number): ThunkResult<Promise<{}>> {
+export function fetchDataDoc(docId: number): ThunkResult<Promise<any>> {
     return async (dispatch) => {
         const { data: rawDataDoc } = await ds.fetch(`/datadoc/${docId}/`);
 
@@ -287,7 +287,7 @@ export function insertDataDocCell(
     index: number,
     cellType: CELL_TYPE,
     context: string | ContentState,
-    meta: {}
+    meta: IDataCellMeta
 ): ThunkResult<Promise<any>> {
     return (dispatch, getState) => {
         const state = getState();
@@ -330,7 +330,10 @@ export function insertDataDocCell(
     };
 }
 
-export function deleteDataDocCell(docId: number, index: number): Promise<{}> {
+export function deleteDataDocCell(
+    docId: number,
+    index: number
+): Promise<Record<string, unknown>> {
     return dataDocSocket.deleteDataCell(docId, index);
 }
 
@@ -362,7 +365,7 @@ export function updateDataDocCell(
     docId: number,
     id: number,
     context?: string | ContentState,
-    meta?: {}
+    meta?: IDataCellMeta
 ): ThunkResult<Promise<void>> {
     return (dispatch) => {
         dispatch({
@@ -666,7 +669,7 @@ export function rejectDataDocAccessRequest(
         ] || {})[uid];
         if (accessRequest) {
             await ds.delete(`/datadoc/${docId}/access_request/`, {
-                uid: uid,
+                uid,
                 originator: dataDocSocket.getSocketId(),
             });
 
diff --git a/datahub/webapp/redux/dataDoc/reducer.ts b/datahub/webapp/redux/dataDoc/reducer.ts
index 69e0fff3a..764685e49 100644
--- a/datahub/webapp/redux/dataDoc/reducer.ts
+++ b/datahub/webapp/redux/dataDoc/reducer.ts
@@ -22,7 +22,7 @@ const initialState: Readonly<IDataDocState> = {
     accessRequestsByDocIdUserId: {},
 };
 
-function loadedEnvironmentFilterMode(
+function loadedEnvironmentFilterModeReducer(
     state = initialState.loadedEnvironmentFilterMode,
     action: DataDocAction | EnvironmentAction
 ) {
@@ -65,7 +65,7 @@ function removeDocFromCells(
     }, {});
 }
 
-function dataDocCellById(
+function dataDocCellByIdReducer(
     state = initialState.dataDocCellById,
     action: DataDocAction
 ) {
@@ -133,7 +133,10 @@ function dataDocCellsArrayHelper(cells: number[] = [], action: DataDocAction) {
     }
 }
 
-function dataDocById(state = initialState.dataDocById, action: DataDocAction) {
+function dataDocByIdReducer(
+    state = initialState.dataDocById,
+    action: DataDocAction
+) {
     return produce(state, (draft) => {
         switch (action.type) {
             case '@@dataDoc/RECEIVE_DATA_DOCS': {
@@ -196,7 +199,7 @@ function dataDocById(state = initialState.dataDocById, action: DataDocAction) {
     });
 }
 
-function favoriteDataDocIds(
+function favoriteDataDocIdsReducer(
     state = initialState.favoriteDataDocIds,
     action: DataDocAction
 ) {
@@ -226,7 +229,7 @@ function favoriteDataDocIds(
     }
 }
 
-function recentDataDocIds(
+function recentDataDocIdsReducer(
     state = initialState.recentDataDocIds,
     action: DataDocAction
 ) {
@@ -250,7 +253,7 @@ function recentDataDocIds(
     }
 }
 
-function docIdToQueryExecution(
+function docIdToQueryExecutionReducer(
     state = initialState.docIdToQueryExecution,
     action: DataDocAction
 ) {
@@ -275,7 +278,7 @@ function docIdToQueryExecution(
     });
 }
 
-function dataDocSavePromiseById(
+function dataDocSavePromiseByIdReducer(
     state = initialState.dataDocSavePromiseById,
     action: DataDocAction
 ) {
@@ -318,7 +321,7 @@ function dataDocSavePromiseById(
     });
 }
 
-function sessionByDocId(
+function sessionByDocIdReducer(
     state = initialState.sessionByDocId,
     action: DataDocAction
 ) {
@@ -374,7 +377,7 @@ function sessionByDocId(
     });
 }
 
-function accessRequestsByDocIdUserId(
+function accessRequestsByDocIdUserIdReducer(
     state = initialState.accessRequestsByDocIdUserId,
     action: DataDocAction
 ) {
@@ -404,7 +407,7 @@ function accessRequestsByDocIdUserId(
     });
 }
 
-function editorsByDocIdUserId(
+function editorsByDocIdUserIdReducer(
     state = initialState.editorsByDocIdUserId,
     action: DataDocAction
 ) {
@@ -436,15 +439,15 @@ function editorsByDocIdUserId(
 }
 
 export default combineReducers({
-    dataDocById,
-    dataDocCellById,
-    loadedEnvironmentFilterMode,
-    favoriteDataDocIds,
-    recentDataDocIds,
-
-    docIdToQueryExecution,
-    dataDocSavePromiseById,
-    sessionByDocId,
-    editorsByDocIdUserId,
-    accessRequestsByDocIdUserId,
+    dataDocById: dataDocByIdReducer,
+    dataDocCellById: dataDocCellByIdReducer,
+    loadedEnvironmentFilterMode: loadedEnvironmentFilterModeReducer,
+    favoriteDataDocIds: favoriteDataDocIdsReducer,
+    recentDataDocIds: recentDataDocIdsReducer,
+
+    docIdToQueryExecution: docIdToQueryExecutionReducer,
+    dataDocSavePromiseById: dataDocSavePromiseByIdReducer,
+    sessionByDocId: sessionByDocIdReducer,
+    editorsByDocIdUserId: editorsByDocIdUserIdReducer,
+    accessRequestsByDocIdUserId: accessRequestsByDocIdUserIdReducer,
 });
diff --git a/datahub/webapp/redux/dataDoc/types.ts b/datahub/webapp/redux/dataDoc/types.ts
index 70ae4f110..2ad1c1e24 100644
--- a/datahub/webapp/redux/dataDoc/types.ts
+++ b/datahub/webapp/redux/dataDoc/types.ts
@@ -5,7 +5,12 @@ import {
 } from 'redux-thunk';
 import { ContentState } from 'draft-js';
 
-import { IDataDoc, IDataCell, IDataDocEditor } from 'const/datadoc';
+import {
+    IDataDoc,
+    IDataCell,
+    IDataDocEditor,
+    IDataCellMeta,
+} from 'const/datadoc';
 import { IAccessRequest } from 'const/accessRequest';
 import { IStoreState } from '../store/types';
 
@@ -92,7 +97,7 @@ export interface IUpdateDataDocCellDataAction extends Action {
         cellId: number;
 
         context?: string | ContentState;
-        meta?: {};
+        meta?: IDataCellMeta;
     };
 }
 
diff --git a/datahub/webapp/redux/dataSources/action.ts b/datahub/webapp/redux/dataSources/action.ts
index a09c23231..ca53cea05 100644
--- a/datahub/webapp/redux/dataSources/action.ts
+++ b/datahub/webapp/redux/dataSources/action.ts
@@ -39,14 +39,13 @@ const dataTableColumnSchema = new schema.Entity(
     'dataColumn',
     {},
     {
-        processStrategy(value, parent, key) {
-            return parent
+        processStrategy: (value, parent, key) =>
+            parent
                 ? {
                       ...value,
                       table: parent.id,
                   }
-                : value;
-        },
+                : value,
     }
 );
 const dataSchemaSchema = new schema.Entity('dataSchema');
@@ -79,7 +78,7 @@ export function fetchQueryMetastore(): ThunkResult<Promise<IQueryMetastore[]>> {
     };
 }
 
-export function fetchDataTable(tableId): ThunkResult<Promise<any>> {
+export function fetchDataTable(tableId: number): ThunkResult<Promise<any>> {
     return async (dispatch, getState) => {
         const { data } = await ds.fetch(`/table/${tableId}/`);
         const normalizedData = normalize(data, dataTableSchema);
@@ -299,7 +298,9 @@ export function fetchDataLineage(tableId): ThunkResult<Promise<any[]>> {
     };
 }
 
-export function fetchParentDataLineage(tableId): ThunkResult<Promise<void>> {
+export function fetchParentDataLineage(
+    tableId: number
+): ThunkResult<Promise<void>> {
     return async (dispatch, getState) => {
         const state = getState().dataSources.dataLineages.parentLineage[
             tableId
diff --git a/datahub/webapp/redux/dataSources/reducer.ts b/datahub/webapp/redux/dataSources/reducer.ts
index 07fadc978..de89a4236 100644
--- a/datahub/webapp/redux/dataSources/reducer.ts
+++ b/datahub/webapp/redux/dataSources/reducer.ts
@@ -33,7 +33,7 @@ const initialState: IDataSourcesState = {
     },
 };
 
-function dataTableNameToId(
+function dataTableNameToIdReducer(
     state = initialState.dataTableNameToId,
     action: DataSourcesAction
 ) {
@@ -57,7 +57,7 @@ function dataTableNameToId(
     });
 }
 
-function functionDocumentationByNameByLanguage(
+function functionDocumentationByNameByLanguageReducer(
     state = initialState.functionDocumentationByNameByLanguage,
     action: DataSourcesAction
 ) {
@@ -81,7 +81,7 @@ function functionDocumentationByNameByLanguage(
     });
 }
 
-function dataColumnsById(
+function dataColumnsByIdReducer(
     state = initialState.dataColumnsById,
     action: DataSourcesAction
 ) {
@@ -101,7 +101,7 @@ function dataColumnsById(
     });
 }
 
-function dataTablesById(
+function dataTablesByIdReducer(
     state = initialState.dataTablesById,
     action: DataSourcesAction
 ) {
@@ -135,7 +135,7 @@ function dataTablesById(
     });
 }
 
-function dataSchemasById(
+function dataSchemasByIdReducer(
     state = initialState.dataSchemasById,
     action: DataSourcesAction
 ) {
@@ -154,7 +154,7 @@ function dataSchemasById(
     }
 }
 
-function dataTableWarningById(
+function dataTableWarningByIdReducer(
     state = initialState.dataTableWarningById,
     action: DataSourcesAction
 ) {
@@ -185,7 +185,7 @@ function dataTableWarningById(
     }
 }
 
-function dataTableOwnershipByTableId(
+function dataTableOwnershipByTableIdReducer(
     state = initialState.dataTableOwnershipByTableId,
     action: DataSourcesAction
 ) {
@@ -220,7 +220,7 @@ function dataTableOwnershipByTableId(
     }
 }
 
-function dataJobMetadataById(
+function dataJobMetadataByIdReducer(
     state = initialState.dataJobMetadataById,
     action: DataSourcesAction
 ) {
@@ -239,7 +239,7 @@ function dataJobMetadataById(
     return state;
 }
 
-function dataTablesSamplesById(
+function dataTablesSamplesByIdReducer(
     state = initialState.dataTablesSamplesById,
     action: DataSourcesAction
 ) {
@@ -255,7 +255,7 @@ function dataTablesSamplesById(
     return state;
 }
 
-function dataTablesSamplesPollingById(
+function dataTablesSamplesPollingByIdReducer(
     state = initialState.dataTablesSamplesPollingById,
     action: DataSourcesAction
 ) {
@@ -278,7 +278,7 @@ function dataTablesSamplesPollingById(
     });
 }
 
-function queryExampleIdsById(
+function queryExampleIdsByIdReducer(
     state = initialState.queryExampleIdsById,
     action: DataSourcesAction
 ) {
@@ -310,7 +310,7 @@ function queryExampleIdsById(
     });
 }
 
-function queryTopUsersByTableId(
+function queryTopUsersByTableIdReducer(
     state = initialState.queryTopUsersByTableId,
     action: DataSourcesAction
 ) {
@@ -325,7 +325,7 @@ function queryTopUsersByTableId(
     });
 }
 
-function goldenTableNameToId(
+function goldenTableNameToIdReducer(
     state = initialState.goldenTableNameToId,
     action: DataSourcesAction
 ) {
@@ -342,7 +342,7 @@ function goldenTableNameToId(
     return state;
 }
 
-function dataLineages(
+function dataLineagesReducer(
     state = initialState.dataLineages,
     action: DataSourcesAction
 ) {
@@ -377,7 +377,7 @@ function dataLineages(
     return state;
 }
 
-function queryMetastoreById(
+function queryMetastoreByIdReducer(
     state = initialState.queryMetastoreById,
     action: DataSourcesAction
 ) {
@@ -392,7 +392,7 @@ function queryMetastoreById(
     return state;
 }
 
-function dataTableStatByTableId(
+function dataTableStatByTableIdReducer(
     state = initialState.dataTableStatByTableId,
     action: DataSourcesAction
 ) {
@@ -408,20 +408,20 @@ function dataTableStatByTableId(
 }
 
 export default combineReducers({
-    queryMetastoreById,
-    goldenTableNameToId,
-    dataTableNameToId,
-    functionDocumentationByNameByLanguage,
-    dataColumnsById,
-    dataTablesById,
-    dataSchemasById,
-    dataJobMetadataById,
-    dataTablesSamplesById,
-    dataTablesSamplesPollingById,
-    queryExampleIdsById,
-    queryTopUsersByTableId,
-    dataLineages,
-    dataTableWarningById,
-    dataTableOwnershipByTableId,
-    dataTableStatByTableId,
+    queryMetastoreById: queryMetastoreByIdReducer,
+    goldenTableNameToId: goldenTableNameToIdReducer,
+    dataTableNameToId: dataTableNameToIdReducer,
+    functionDocumentationByNameByLanguage: functionDocumentationByNameByLanguageReducer,
+    dataColumnsById: dataColumnsByIdReducer,
+    dataTablesById: dataTablesByIdReducer,
+    dataSchemasById: dataSchemasByIdReducer,
+    dataJobMetadataById: dataJobMetadataByIdReducer,
+    dataTablesSamplesById: dataTablesSamplesByIdReducer,
+    dataTablesSamplesPollingById: dataTablesSamplesPollingByIdReducer,
+    queryExampleIdsById: queryExampleIdsByIdReducer,
+    queryTopUsersByTableId: queryTopUsersByTableIdReducer,
+    dataLineages: dataLineagesReducer,
+    dataTableWarningById: dataTableWarningByIdReducer,
+    dataTableOwnershipByTableId: dataTableOwnershipByTableIdReducer,
+    dataTableStatByTableId: dataTableStatByTableIdReducer,
 });
diff --git a/datahub/webapp/redux/dataTableSearch/types.ts b/datahub/webapp/redux/dataTableSearch/types.ts
index 3476840cd..ab434703c 100644
--- a/datahub/webapp/redux/dataTableSearch/types.ts
+++ b/datahub/webapp/redux/dataTableSearch/types.ts
@@ -49,7 +49,7 @@ export interface IDataTableSearchFailedAction extends Action {
 export interface IDataTableSearchReceiveQueryParamAction extends Action {
     type: '@@dataTableSearch/DATA_TABLE_SEARCH_RECEIVE_QUERY_PARAM';
     payload: {
-        queryParam: {};
+        queryParam: Record<string, unknown>;
     };
 }
 
diff --git a/datahub/webapp/redux/queryExecutions/action.ts b/datahub/webapp/redux/queryExecutions/action.ts
index 310296ac0..490cf055b 100644
--- a/datahub/webapp/redux/queryExecutions/action.ts
+++ b/datahub/webapp/redux/queryExecutions/action.ts
@@ -69,7 +69,7 @@ export function rejectQueryExecutionAccessRequest(
             .accessRequestsByExecutionIdUserId[executionId] || {})[uid];
         if (accessRequest) {
             await ds.delete(`/query_execution/${executionId}/access_request/`, {
-                uid: uid,
+                uid,
             });
 
             dispatch({
@@ -96,7 +96,7 @@ export function addQueryExecutionViewer(
         }: {
             data: IQueryExecutionViewer;
         } = await ds.save(`/query_execution/${executionId}/viewer/`, {
-            uid: uid,
+            uid,
         });
         if (request) {
             dispatch({
@@ -518,10 +518,10 @@ export function fetchLog(
         const statementExecution =
             state.queryExecutions.statementExecutionById[statementExecutionId];
         if (statementExecution) {
-            const { id, has_log } = statementExecution;
+            const { id, has_log: hasLog } = statementExecution;
             const statementLog =
                 state.queryExecutions.statementLogById[statementExecutionId];
-            if (has_log && (!statementLog || statementLog.isPartialLog)) {
+            if (hasLog && (!statementLog || statementLog.isPartialLog)) {
                 try {
                     const { data } = await ds.fetch(
                         `/statement_execution/${id}/log/`
diff --git a/datahub/webapp/redux/queryExecutions/reducer.ts b/datahub/webapp/redux/queryExecutions/reducer.ts
index 7c61d3418..ef7fba3ea 100644
--- a/datahub/webapp/redux/queryExecutions/reducer.ts
+++ b/datahub/webapp/redux/queryExecutions/reducer.ts
@@ -20,7 +20,7 @@ const initialState: IQueryExecutionState = {
     accessRequestsByExecutionIdUserId: {},
 };
 
-function dataCellIdQueryExecution(
+function dataCellIdQueryExecutionReducer(
     state = initialState.dataCellIdQueryExecution,
     action: QueryExecutionAction
 ) {
@@ -59,7 +59,7 @@ function dataCellIdQueryExecution(
     });
 }
 
-function statementExecutionById(
+function statementExecutionByIdReducer(
     state = initialState.statementExecutionById,
     action: QueryExecutionAction
 ) {
@@ -110,7 +110,7 @@ function statementExecutionById(
     });
 }
 
-function queryExecutionById(
+function queryExecutionByIdReducer(
     state = initialState.queryExecutionById,
     action: QueryExecutionAction
 ) {
@@ -172,7 +172,7 @@ function getPartialLogHeader() {
     ];
 }
 
-function statementLogById(
+function statementLogByIdReducer(
     state = initialState.statementLogById,
     action: QueryExecutionAction
 ) {
@@ -251,7 +251,7 @@ function statementLogById(
     });
 }
 
-function statementResultById(
+function statementResultByIdReducer(
     state = initialState.statementResultById,
     action: QueryExecutionAction
 ) {
@@ -278,7 +278,7 @@ function statementResultById(
     return state;
 }
 
-function queryErrorById(
+function queryErrorByIdReducer(
     state = initialState.queryErrorById,
     action: QueryExecutionAction
 ) {
@@ -305,7 +305,7 @@ function queryErrorById(
     });
 }
 
-function accessRequestsByExecutionIdUserId(
+function accessRequestsByExecutionIdUserIdReducer(
     state = initialState.accessRequestsByExecutionIdUserId,
     action: QueryExecutionAction
 ) {
@@ -335,7 +335,7 @@ function accessRequestsByExecutionIdUserId(
     });
 }
 
-function viewersByExecutionIdUserId(
+function viewersByExecutionIdUserIdReducer(
     state = initialState.viewersByExecutionIdUserId,
     action: QueryExecutionAction
 ) {
@@ -365,7 +365,7 @@ function viewersByExecutionIdUserId(
     });
 }
 
-function statementExporters(
+function statementExportersReducer(
     state = initialState.statementExporters,
     action: QueryExecutionAction
 ) {
@@ -378,14 +378,14 @@ function statementExporters(
 }
 
 export default combineReducers({
-    dataCellIdQueryExecution,
-    statementExecutionById,
-    queryExecutionById,
+    dataCellIdQueryExecution: dataCellIdQueryExecutionReducer,
+    statementExecutionById: statementExecutionByIdReducer,
+    queryExecutionById: queryExecutionByIdReducer,
 
-    statementResultById,
-    statementLogById,
-    queryErrorById,
-    statementExporters,
-    accessRequestsByExecutionIdUserId,
-    viewersByExecutionIdUserId,
+    statementResultById: statementResultByIdReducer,
+    statementLogById: statementLogByIdReducer,
+    queryErrorById: queryErrorByIdReducer,
+    statementExporters: statementExportersReducer,
+    accessRequestsByExecutionIdUserId: accessRequestsByExecutionIdUserIdReducer,
+    viewersByExecutionIdUserId: viewersByExecutionIdUserIdReducer,
 });
diff --git a/datahub/webapp/redux/querySnippets/action.ts b/datahub/webapp/redux/querySnippets/action.ts
index 97163c555..a531d3562 100644
--- a/datahub/webapp/redux/querySnippets/action.ts
+++ b/datahub/webapp/redux/querySnippets/action.ts
@@ -57,8 +57,8 @@ export function updateQuerySnippet(
             context,
             title,
             description,
-            engine_id,
-            is_public,
+            engine_id: engineId,
+            is_public: isPublic,
             golden,
         } = querySnippet;
 
@@ -66,8 +66,8 @@ export function updateQuerySnippet(
             context,
             title,
             description,
-            engine_id,
-            is_public,
+            engine_id: engineId,
+            is_public: isPublic,
             golden,
         };
 
@@ -88,7 +88,10 @@ export function saveQuerySnippet(
 ): ThunkResult<Promise<IQuerySnippet>> {
     return async (dispatch) => {
         const params = querySnippet;
-        const { data } = await ds.save('/query_snippet/', params);
+        const { data } = await ds.save(
+            '/query_snippet/',
+            (params as unknown) as Record<string, unknown>
+        );
         dispatch({
             type: '@@querySnippets/RECEIVE_QUERY_SNIPPET',
             payload: {
diff --git a/datahub/webapp/redux/querySnippets/reducer.ts b/datahub/webapp/redux/querySnippets/reducer.ts
index 7443fc747..2d1eabfb0 100644
--- a/datahub/webapp/redux/querySnippets/reducer.ts
+++ b/datahub/webapp/redux/querySnippets/reducer.ts
@@ -8,10 +8,7 @@ const initialState: IQuerySnippetsState = {
     querySnippetIds: [],
 };
 
-export default function querySnippets(
-    state = initialState,
-    action: QuerySnippetsAction
-) {
+export default function (state = initialState, action: QuerySnippetsAction) {
     return produce(state, (draft) => {
         switch (action.type) {
             case '@@querySnippets/RECEIVE_QUERY_SNIPPET': {
diff --git a/datahub/webapp/redux/search/types.ts b/datahub/webapp/redux/search/types.ts
index b5020301e..445c6ec11 100644
--- a/datahub/webapp/redux/search/types.ts
+++ b/datahub/webapp/redux/search/types.ts
@@ -70,7 +70,7 @@ export interface ISearchFailedAction extends Action {
 export interface ISearchReceiveQueryParamAction extends Action {
     type: '@@search/SEARCH_RECEIVE_QUERY_PARAM';
     payload: {
-        queryParam: {};
+        queryParam: Record<string, unknown>;
     };
 }
 
diff --git a/datahub/webapp/redux/user/action.ts b/datahub/webapp/redux/user/action.ts
index d7a6fecc2..2d937b9fe 100644
--- a/datahub/webapp/redux/user/action.ts
+++ b/datahub/webapp/redux/user/action.ts
@@ -49,9 +49,7 @@ export function loginUser(): ThunkResult<Promise<void>> {
 }
 
 export function getUser(uid: number): ThunkResult<Promise<void>> {
-    return (dispatch) => {
-        return userLoadManager.loadUser(uid, dispatch);
-    };
+    return (dispatch) => userLoadManager.loadUser(uid, dispatch);
 }
 
 export function getUserByName(name: string): ThunkResult<Promise<void>> {
diff --git a/datahub/webapp/ui/AsyncButton/AsyncButton.tsx b/datahub/webapp/ui/AsyncButton/AsyncButton.tsx
index ced513514..bfc3b17a8 100644
--- a/datahub/webapp/ui/AsyncButton/AsyncButton.tsx
+++ b/datahub/webapp/ui/AsyncButton/AsyncButton.tsx
@@ -20,7 +20,7 @@ export class AsyncButton extends React.PureComponent<
     };
     private canSetState: boolean = true;
 
-    constructor(props: IAsyncButtonProps) {
+    public constructor(props: IAsyncButtonProps) {
         super(props);
 
         this.state = {
diff --git a/datahub/webapp/ui/CodeHighlight/CodeHighlight.tsx b/datahub/webapp/ui/CodeHighlight/CodeHighlight.tsx
index 72ea40e35..341de0dfc 100644
--- a/datahub/webapp/ui/CodeHighlight/CodeHighlight.tsx
+++ b/datahub/webapp/ui/CodeHighlight/CodeHighlight.tsx
@@ -40,12 +40,12 @@ export class CodeHighlight extends React.PureComponent<IProps> {
     public getStyledTokens(value: string, language: string, prefix: string) {
         let lastStyle = null;
         let tokenBuffer = '';
-        const styledTokens = [];
+        const styledTokens: Array<{ className: string; text: string }> = [];
 
-        const pushStyleToken = (str, style) =>
+        const pushStyleToken = (text: string, style: string) =>
             styledTokens.push({
                 className: style ? prefix + style : '',
-                string: str,
+                text,
             });
 
         CodeMirror.runMode(value, language, (token, style) => {
@@ -78,11 +78,11 @@ export class CodeHighlight extends React.PureComponent<IProps> {
         const styledTokens = this.getStyledTokens(value, language, prefix);
 
         const codeElements = styledTokens.map((token, index) => {
-            const { string: str, className: tokenClassName } = token;
+            const { text, className: tokenClassName } = token;
 
             return (
                 <span className={tokenClassName} key={index}>
-                    {str}
+                    {text}
                 </span>
             );
         });
diff --git a/datahub/webapp/ui/Container/Container.tsx b/datahub/webapp/ui/Container/Container.tsx
index 932a8aa05..c47c1e405 100644
--- a/datahub/webapp/ui/Container/Container.tsx
+++ b/datahub/webapp/ui/Container/Container.tsx
@@ -5,12 +5,10 @@ import './Container.scss';
 
 export const Container: React.FC<
     React.HTMLProps<HTMLDivElement> & IFullHeightProps
-> = ({ children, flex, ...props }) => {
-    return (
-        <div {...props} className={(props.className || '') + ' Container'}>
-            <FullHeight flex={flex} className="Container-content">
-                {children}
-            </FullHeight>
-        </div>
-    );
-};
+> = ({ children, flex, ...props }) => (
+    <div {...props} className={(props.className || '') + ' Container'}>
+        <FullHeight flex={flex} className="Container-content">
+            {children}
+        </FullHeight>
+    </div>
+);
diff --git a/datahub/webapp/ui/Content/Content.tsx b/datahub/webapp/ui/Content/Content.tsx
index 499cafae2..81aca2c36 100644
--- a/datahub/webapp/ui/Content/Content.tsx
+++ b/datahub/webapp/ui/Content/Content.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import './Content.scss';
 
-export const Content = styled.div.attrs<{}>({
+export const Content = styled.div.attrs({
     className: 'Content',
 })``;
diff --git a/datahub/webapp/ui/DAG/DAG.tsx b/datahub/webapp/ui/DAG/DAG.tsx
index 693c90a38..730489993 100644
--- a/datahub/webapp/ui/DAG/DAG.tsx
+++ b/datahub/webapp/ui/DAG/DAG.tsx
@@ -26,8 +26,8 @@ interface IProps {
     edges: IDAGEdge[];
     // If provided, zoom will zoom to this focusNode
     focusNode?: IDAGNode;
-    customNodeRender?: (node: IDAGNode) => object;
-    onNodeClicked?: (node: object, d3: any) => void;
+    customNodeRender?: (node: IDAGNode) => Record<string, unknown>;
+    onNodeClicked?: (node: Record<string, unknown>, d3: any) => void;
     // Multi Graph allows multiple edges between same node pair
     // and edge lbaelling
     isMultiGraph?: boolean;
@@ -57,9 +57,7 @@ export const DAG: React.FunctionComponent<IProps> = ({
             .setGraph({
                 rankdir: rankDir || 'LR',
             })
-            .setDefaultEdgeLabel(() => {
-                return {};
-            });
+            .setDefaultEdgeLabel(() => ({}));
 
         for (const [index, node] of nodes.entries()) {
             const nodeColor = node.color || 'var(--icon-color)';
@@ -95,9 +93,7 @@ export const DAG: React.FunctionComponent<IProps> = ({
         const svgGroup = svg.append('g');
         render(d3.select(`#${graphId} svg g`) as any, g);
         // Give each node a unique id ('node' + node.id) for referencing
-        svg.selectAll('g.node').attr('id', (__, idx) => {
-            return `node${nodes[idx].id}`;
-        });
+        svg.selectAll('g.node').attr('id', (__, idx) => `node${nodes[idx].id}`);
         // Rendering is now complete
 
         // setup zoom behavior
diff --git a/datahub/webapp/ui/DataHubLogo/DataHubLogo.tsx b/datahub/webapp/ui/DataHubLogo/DataHubLogo.tsx
index aa1599225..59393c97b 100644
--- a/datahub/webapp/ui/DataHubLogo/DataHubLogo.tsx
+++ b/datahub/webapp/ui/DataHubLogo/DataHubLogo.tsx
@@ -23,11 +23,9 @@ const StyledDataHubLogo = styled.span`
 
 export const DataHubLogo: React.SFC<{
     size?: number;
-}> = ({ size = 2 }) => {
-    return (
-        <StyledDataHubLogo size={size}>
-            <span className="datahub-title-first-part">Data</span>
-            <span className="datahub-title-last-part">Hub</span>
-        </StyledDataHubLogo>
-    );
-};
+}> = ({ size = 2 }) => (
+    <StyledDataHubLogo size={size}>
+        <span className="datahub-title-first-part">Data</span>
+        <span className="datahub-title-last-part">Hub</span>
+    </StyledDataHubLogo>
+);
diff --git a/datahub/webapp/ui/DraggableList/DraggableItem.tsx b/datahub/webapp/ui/DraggableList/DraggableItem.tsx
index 5a083c217..75ec68d62 100644
--- a/datahub/webapp/ui/DraggableList/DraggableItem.tsx
+++ b/datahub/webapp/ui/DraggableList/DraggableItem.tsx
@@ -17,7 +17,7 @@ interface IDraggableItemProps<T> {
     draggableItemType: string;
     resetHoverItems: () => void;
     // the raw item
-    itemInfo: {};
+    itemInfo: Record<string, unknown>;
     canDrop?: (item: IDragItem<T>, monitor: DropTargetMonitor) => boolean;
 }
 
@@ -47,10 +47,10 @@ export function DraggableItem<T extends { id: any }>({
     const [, drop] = useDrop({
         accept: draggableItemType,
         canDrop,
-        drop(item: IDragItem) {
+        drop: (item: IDragItem) => {
             onMove(item.originalIndex, item.index);
         },
-        hover(item: IDragItem, monitor: DropTargetMonitor) {
+        hover: (item: IDragItem, monitor: DropTargetMonitor) => {
             if (!ref.current) {
                 return;
             }
diff --git a/datahub/webapp/ui/DraggableList/types.ts b/datahub/webapp/ui/DraggableList/types.ts
index f28924350..a7f9f14a7 100644
--- a/datahub/webapp/ui/DraggableList/types.ts
+++ b/datahub/webapp/ui/DraggableList/types.ts
@@ -1,4 +1,4 @@
-export interface IDragItem<T = {}> {
+export interface IDragItem<T = Record<string, unknown>> {
     index: number;
     type: string;
     originalIndex: number;
diff --git a/datahub/webapp/ui/ErrorBoundary/ErrorBoundary.tsx b/datahub/webapp/ui/ErrorBoundary/ErrorBoundary.tsx
index 2c9e3d8e7..62fc5f999 100644
--- a/datahub/webapp/ui/ErrorBoundary/ErrorBoundary.tsx
+++ b/datahub/webapp/ui/ErrorBoundary/ErrorBoundary.tsx
@@ -16,7 +16,10 @@ function stringifyError(errorObj: any): string {
     return JSON.stringify(errorObj);
 }
 
-export class ErrorBoundary extends React.Component<{}, IErrorBoundaryState> {
+export class ErrorBoundary extends React.Component<
+    unknown,
+    IErrorBoundaryState
+> {
     public readonly state = {
         hasError: false,
         errorString: '',
diff --git a/datahub/webapp/ui/Form/FormField.tsx b/datahub/webapp/ui/Form/FormField.tsx
index 08f492513..745adb96f 100644
--- a/datahub/webapp/ui/Form/FormField.tsx
+++ b/datahub/webapp/ui/Form/FormField.tsx
@@ -88,64 +88,42 @@ export const FormField: React.FunctionComponent<IFormFieldProps> = ({
 const FormFieldLabelSection: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldLabelSection ${className}`}>{children}</div>
-    );
-};
+}) => <div className={`FormFieldLabelSection ${className}`}>{children}</div>;
 
 export const FormFieldInputSectionRowGroup: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldInputSectionRowGroup ${className}`}>
-            {children}
-        </div>
-    );
-};
+}) => (
+    <div className={`FormFieldInputSectionRowGroup ${className}`}>
+        {children}
+    </div>
+);
 
 export const FormFieldInputSectionRow: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldInputSectionRow ${className}`}>
-            {children}
-        </div>
-    );
-};
+}) => <div className={`FormFieldInputSectionRow ${className}`}>{children}</div>;
 
 export const FormFieldInputSection: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldInputSection ${className}`}>{children}</div>
-    );
-};
+}) => <div className={`FormFieldInputSection ${className}`}>{children}</div>;
 
 export const FormFieldHelpSection: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldHelpSection flex-center ${className}`}>
-            <InfoButton
-                layout={['bottom', 'right']}
-                popoverClassName="FormFieldHelpSection"
-            >
-                {children}
-            </InfoButton>
-        </div>
-    );
-};
+}) => (
+    <div className={`FormFieldHelpSection flex-center ${className}`}>
+        <InfoButton
+            layout={['bottom', 'right']}
+            popoverClassName="FormFieldHelpSection"
+        >
+            {children}
+        </InfoButton>
+    </div>
+);
 
 export const FormFieldErrorSection: React.FunctionComponent<IFormFieldSectionProps> = ({
     children,
     className = '',
-}) => {
-    return (
-        <div className={`FormFieldErrorSection ${className}`}>{children}</div>
-    );
-};
+}) => <div className={`FormFieldErrorSection ${className}`}>{children}</div>;
diff --git a/datahub/webapp/ui/GenericCRUD/GenericCRUD.tsx b/datahub/webapp/ui/GenericCRUD/GenericCRUD.tsx
index ba6b9f6b1..a4d2c63b3 100644
--- a/datahub/webapp/ui/GenericCRUD/GenericCRUD.tsx
+++ b/datahub/webapp/ui/GenericCRUD/GenericCRUD.tsx
@@ -177,6 +177,38 @@ export class GenericCRUD<T extends IWithId> extends React.PureComponent<
         });
     }
 
+    @bind
+    public renderUI() {
+        const { createItem } = this.props;
+        const { items = [], newItem } = this.state;
+        const itemsDOM = items.map((item, index) =>
+            this.itemRenderer(item, index, false)
+        );
+
+        let newItemUI = null;
+        if (createItem) {
+            newItemUI = newItem ? (
+                <div>{this.itemRenderer(newItem, null, true)}</div>
+            ) : (
+                <div>
+                    <Button
+                        title="New"
+                        icon="plus"
+                        onClick={this.handleCreateNewItem}
+                    />
+                </div>
+            );
+        }
+
+        return (
+            <div className="GenericCRUD">
+                {newItemUI}
+                {newItemUI ? <Divider /> : null}
+                {itemsDOM}
+            </div>
+        );
+    }
+
     public itemRenderer(item: T, index: number, isNewItem: boolean) {
         const { createItem, updateItem, deleteItem } = this.props;
         const [isItemValid, invalidReason] = this.validateItemMemoized(item);
@@ -238,38 +270,6 @@ export class GenericCRUD<T extends IWithId> extends React.PureComponent<
         );
     }
 
-    @bind
-    public renderUI() {
-        const { createItem } = this.props;
-        const { items = [], newItem } = this.state;
-        const itemsDOM = items.map((item, index) =>
-            this.itemRenderer(item, index, false)
-        );
-
-        let newItemUI = null;
-        if (createItem) {
-            newItemUI = newItem ? (
-                <div>{this.itemRenderer(newItem, null, true)}</div>
-            ) : (
-                <div>
-                    <Button
-                        title="New"
-                        icon="plus"
-                        onClick={this.handleCreateNewItem}
-                    />
-                </div>
-            );
-        }
-
-        return (
-            <div className="GenericCRUD">
-                {newItemUI}
-                {newItemUI ? <Divider /> : null}
-                {itemsDOM}
-            </div>
-        );
-    }
-
     public render() {
         return (
             <Loader
diff --git a/datahub/webapp/ui/GenericCRUD/SingleCRUD.tsx b/datahub/webapp/ui/GenericCRUD/SingleCRUD.tsx
index b20ba93d3..f832c82af 100644
--- a/datahub/webapp/ui/GenericCRUD/SingleCRUD.tsx
+++ b/datahub/webapp/ui/GenericCRUD/SingleCRUD.tsx
@@ -22,7 +22,7 @@ export interface ISingleCRUDProps<T> extends Partial<FormikConfig<T>> {
     renderItem: (item, handleItemChange) => React.ReactChild;
 }
 
-export function SingleCRUD<T>({
+export function SingleCRUD<T extends Record<any, any>>({
     item,
     createItem,
     updateItem,
diff --git a/datahub/webapp/ui/InfinityScroll/InfinityScroll.tsx b/datahub/webapp/ui/InfinityScroll/InfinityScroll.tsx
index 2cff7dca5..c535153b1 100644
--- a/datahub/webapp/ui/InfinityScroll/InfinityScroll.tsx
+++ b/datahub/webapp/ui/InfinityScroll/InfinityScroll.tsx
@@ -80,12 +80,6 @@ export class InfinityScroll<T> extends React.PureComponent<
         );
     }
 
-    public componentDidUpdate(prevProps) {
-        if (this.props.elements !== prevProps.elements && this.listRef) {
-            this.listRef.forceUpdateGrid();
-        }
-    }
-
     @bind
     public isRowLoaded({ index }) {
         return index < this.props.elements.length;
@@ -107,6 +101,12 @@ export class InfinityScroll<T> extends React.PureComponent<
         });
     }
 
+    public componentDidUpdate(prevProps) {
+        if (this.props.elements !== prevProps.elements && this.listRef) {
+            this.listRef.forceUpdateGrid();
+        }
+    }
+
     public render() {
         const { elements, itemHeight, className, hasMore } = this.props;
         const rowCount = hasMore ? elements.length + 1 : elements.length;
diff --git a/datahub/webapp/ui/JsonViewer/JsonViewer.tsx b/datahub/webapp/ui/JsonViewer/JsonViewer.tsx
index 5ec98c652..a3ddd7560 100644
--- a/datahub/webapp/ui/JsonViewer/JsonViewer.tsx
+++ b/datahub/webapp/ui/JsonViewer/JsonViewer.tsx
@@ -12,7 +12,7 @@ const StyledJsonViewer = styled.div`
 `;
 
 export interface IJsonViewerProps {
-    value: string | {};
+    value: string | Record<string | number, unknown>;
     indent?: number;
     replacerFunction?: () => any;
 }
diff --git a/datahub/webapp/ui/KeyboardKey/KeyboardKey.tsx b/datahub/webapp/ui/KeyboardKey/KeyboardKey.tsx
index 156b40d23..bb2b351d2 100644
--- a/datahub/webapp/ui/KeyboardKey/KeyboardKey.tsx
+++ b/datahub/webapp/ui/KeyboardKey/KeyboardKey.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { isOSX } from 'lib/utils/keyboard';
 import React, { useMemo } from 'react';
 
-const StyledKeyboardKey = styled.span.attrs<{}>({
+const StyledKeyboardKey = styled.span.attrs({
     className: 'KeyboardKey mr4',
 })`
     cursor: default;
diff --git a/datahub/webapp/ui/Level/Level.tsx b/datahub/webapp/ui/Level/Level.tsx
index 87afee0ee..d7b054091 100644
--- a/datahub/webapp/ui/Level/Level.tsx
+++ b/datahub/webapp/ui/Level/Level.tsx
@@ -23,6 +23,6 @@ export const Level = styled.div.attrs<{
     `};
 `;
 
-export const LevelItem = styled.div.attrs<{}>({
+export const LevelItem = styled.div.attrs({
     className: 'LevelItem  flex-row',
 })``;
diff --git a/datahub/webapp/ui/Loader/Loader.tsx b/datahub/webapp/ui/Loader/Loader.tsx
index dcb7a8e67..f05d235f6 100644
--- a/datahub/webapp/ui/Loader/Loader.tsx
+++ b/datahub/webapp/ui/Loader/Loader.tsx
@@ -58,9 +58,9 @@ export const Loader: React.FunctionComponent<ILoaderProps> = ({
                 try {
                     await itemLoader();
                     setIsLoading(false);
-                } catch (errorObj) {
-                    console.error(errorObj);
-                    setErrorObj(errorObj);
+                } catch (newErrorObj) {
+                    console.error(newErrorObj);
+                    setErrorObj(newErrorObj);
                     setHasError(true);
                 }
             })();
diff --git a/datahub/webapp/ui/Menu/Menu.tsx b/datahub/webapp/ui/Menu/Menu.tsx
index 6c426d3c7..452ff47b3 100644
--- a/datahub/webapp/ui/Menu/Menu.tsx
+++ b/datahub/webapp/ui/Menu/Menu.tsx
@@ -13,13 +13,13 @@ export const Menu = styled.div.attrs<{
         overflow-x: hidden;
         overflow-y: auto;`};
 `;
-export const MenuItem = styled.span.attrs<{}>({
+export const MenuItem = styled.span.attrs({
     className: 'MenuItem',
 })``;
-export const MenuInfoItem = styled.div.attrs<{}>({
+export const MenuInfoItem = styled.div.attrs({
     className: 'MenuInfoItem',
 })``;
-export const MenuDivider = styled.div.attrs<{}>({
+export const MenuDivider = styled.div.attrs({
     className: 'MenuDivider',
 })`
     background-color: var(--border-color);
@@ -27,7 +27,7 @@ export const MenuDivider = styled.div.attrs<{}>({
     height: 1px;
     margin: 0px;
 `;
-export const MenuItemPing = styled.div.attrs<{}>({
+export const MenuItemPing = styled.div.attrs({
     className: 'MenuItemPing',
 })`
     pointer-events: none;
diff --git a/datahub/webapp/ui/Pagination/Pagination.tsx b/datahub/webapp/ui/Pagination/Pagination.tsx
index 73c64574d..927c89836 100644
--- a/datahub/webapp/ui/Pagination/Pagination.tsx
+++ b/datahub/webapp/ui/Pagination/Pagination.tsx
@@ -16,17 +16,15 @@ const PageButton: React.FunctionComponent<IPageButtonProps> = ({
     onClick,
     shift = 0,
     className = '',
-}) => {
-    return (
-        <li>
-            <Button
-                className={'Pagination-page-button ' + className}
-                onClick={onClick.bind(null, page)}
-                title={(page + shift).toString()}
-            />
-        </li>
-    );
-};
+}) => (
+    <li>
+        <Button
+            className={'Pagination-page-button ' + className}
+            onClick={onClick.bind(null, page)}
+            title={(page + shift).toString()}
+        />
+    </li>
+);
 
 export interface IPaginationProps {
     currentPage: number;
diff --git a/datahub/webapp/ui/RichTextEditor/RichTextEditor.tsx b/datahub/webapp/ui/RichTextEditor/RichTextEditor.tsx
index 7f2eebef3..cd4348736 100644
--- a/datahub/webapp/ui/RichTextEditor/RichTextEditor.tsx
+++ b/datahub/webapp/ui/RichTextEditor/RichTextEditor.tsx
@@ -67,39 +67,6 @@ export class RichTextEditor extends React.Component<
     private toolBarRef = React.createRef<RichTextEditorToolBar>();
     private selfRef = React.createRef<HTMLDivElement>();
 
-    public componentDidCatch() {
-        // Suppressing error due to LinkDecorator failing on delete
-        // related github issue https://github.com/facebook/draft-js/issues/1320#issuecomment-476509968
-        this.forceUpdate();
-    }
-
-    public get editorState() {
-        return this.state.editorState;
-    }
-
-    public set editorState(editorState: DraftJs.EditorState) {
-        this.setState({
-            editorState,
-        });
-    }
-
-    public get draftJSEditor() {
-        return this.editorRef.current;
-    }
-
-    public getContent() {
-        return this.state.editorState.getCurrentContent();
-    }
-
-    public setContent(contentState: DraftJs.ContentState) {
-        this.setState({
-            editorState: DraftJs.EditorState.createWithContent(
-                contentState,
-                compositeDecorator
-            ),
-        });
-    }
-
     @bind
     public focus() {
         if (this.editorRef) {
@@ -523,6 +490,39 @@ export class RichTextEditor extends React.Component<
         return 'not-handled';
     }
 
+    public componentDidCatch() {
+        // Suppressing error due to LinkDecorator failing on delete
+        // related github issue https://github.com/facebook/draft-js/issues/1320#issuecomment-476509968
+        this.forceUpdate();
+    }
+
+    public get editorState() {
+        return this.state.editorState;
+    }
+
+    public set editorState(editorState: DraftJs.EditorState) {
+        this.setState({
+            editorState,
+        });
+    }
+
+    public get draftJSEditor() {
+        return this.editorRef.current;
+    }
+
+    public getContent() {
+        return this.state.editorState.getCurrentContent();
+    }
+
+    public setContent(contentState: DraftJs.ContentState) {
+        this.setState({
+            editorState: DraftJs.EditorState.createWithContent(
+                contentState,
+                compositeDecorator
+            ),
+        });
+    }
+
     public render() {
         const { className, onFocus, onBlur, readOnly } = this.props;
 
diff --git a/datahub/webapp/ui/RichTextEditorToolBar/RichTextEditorToolBar.tsx b/datahub/webapp/ui/RichTextEditorToolBar/RichTextEditorToolBar.tsx
index cbe293dc6..d5aa43ca6 100644
--- a/datahub/webapp/ui/RichTextEditorToolBar/RichTextEditorToolBar.tsx
+++ b/datahub/webapp/ui/RichTextEditorToolBar/RichTextEditorToolBar.tsx
@@ -104,17 +104,15 @@ export class RichTextEditorToolBar extends React.PureComponent<
         const { editorState } = this.props;
         const currentStyle = editorState.getCurrentInlineStyle();
 
-        const styleButtons = styleButtonsConfig.map((config, index) => {
-            return (
-                <ToolBarButton
-                    key={index}
-                    active={currentStyle.has(config.style)}
-                    icon={config.icon}
-                    tooltip={config.tooltip}
-                    onClick={this.toggleStyle.bind(null, config.style)}
-                />
-            );
-        });
+        const styleButtons = styleButtonsConfig.map((config, index) => (
+            <ToolBarButton
+                key={index}
+                active={currentStyle.has(config.style)}
+                icon={config.icon}
+                tooltip={config.tooltip}
+                onClick={this.toggleStyle.bind(null, config.style)}
+            />
+        ));
         numberOfButtons += styleButtons.length;
 
         const selection = editorState.getSelection();
@@ -123,18 +121,16 @@ export class RichTextEditorToolBar extends React.PureComponent<
             .getBlockForKey(selection.getStartKey())
             .getType();
 
-        const blockButtons = blockButtonsConfig.map((config, index) => {
-            return (
-                <ToolBarButton
-                    key={index + numberOfButtons}
-                    active={blockType === config.style}
-                    title={config.label}
-                    icon={config.icon}
-                    tooltip={config.tooltip}
-                    onClick={this.toggleBlock.bind(null, config.style)}
-                />
-            );
-        });
+        const blockButtons = blockButtonsConfig.map((config, index) => (
+            <ToolBarButton
+                key={index + numberOfButtons}
+                active={blockType === config.style}
+                title={config.label}
+                icon={config.icon}
+                tooltip={config.tooltip}
+                onClick={this.toggleBlock.bind(null, config.style)}
+            />
+        ));
         numberOfButtons += blockButtons.length;
 
         const entityButtons = entityButtonsConfig.map((config, index) => {
diff --git a/datahub/webapp/ui/SmartForm/SmartForm.tsx b/datahub/webapp/ui/SmartForm/SmartForm.tsx
index ccc281244..9304f9962 100644
--- a/datahub/webapp/ui/SmartForm/SmartForm.tsx
+++ b/datahub/webapp/ui/SmartForm/SmartForm.tsx
@@ -149,7 +149,7 @@ function ExpandableFormField<T extends []>({
     );
 }
 
-function StructFormField<T extends object>({
+function StructFormField<T extends Record<string, unknown>>({
     formField,
     value,
     onChange,
@@ -191,7 +191,7 @@ export function SmartForm<T>({
                 onChange={(onChange as unknown) as onChangeFunc<[]>}
             />
         ) : fieldType === 'struct' ? (
-            <StructFormField<{}>
+            <StructFormField<Record<string, any>>
                 formField={formField as IStructFormField}
                 value={value}
                 onChange={onChange}
diff --git a/datahub/webapp/ui/SmartForm/formFunctions.ts b/datahub/webapp/ui/SmartForm/formFunctions.ts
index 1a64d2041..3548be924 100644
--- a/datahub/webapp/ui/SmartForm/formFunctions.ts
+++ b/datahub/webapp/ui/SmartForm/formFunctions.ts
@@ -102,7 +102,9 @@ function validateFormField(value: any, field: IFormField): validationResp {
     return [true, null, null];
 }
 
-export function getDefaultFormValue(form: AllFormField): [] | {} {
+export function getDefaultFormValue(
+    form: AllFormField
+): [] | Record<string, unknown> | ReturnType<typeof getDefaultFormFieldValue> {
     const fieldType = form.field_type;
     if (fieldType === 'list') {
         return [];
diff --git a/datahub/webapp/ui/Tag/Tag.tsx b/datahub/webapp/ui/Tag/Tag.tsx
index 0352ac93d..f01e1d090 100644
--- a/datahub/webapp/ui/Tag/Tag.tsx
+++ b/datahub/webapp/ui/Tag/Tag.tsx
@@ -32,9 +32,7 @@ export interface IHoverIconTagProps extends ITagProps {
 export const TagGroup: React.FunctionComponent<ITagGroupProps> = ({
     className,
     children,
-}) => {
-    return <div className={`${className} TagGroup`}>{children}</div>;
-};
+}) => <div className={`${className} TagGroup`}>{children}</div>;
 
 export const Tag: React.FunctionComponent<ITagProps> = ({
     children,
diff --git a/datahub/webapp/ui/Timer/Timer.tsx b/datahub/webapp/ui/Timer/Timer.tsx
index ac9e4ddba..33e720303 100644
--- a/datahub/webapp/ui/Timer/Timer.tsx
+++ b/datahub/webapp/ui/Timer/Timer.tsx
@@ -20,8 +20,8 @@ export class Timer<T = number> extends React.PureComponent<
     ITimerState<T>
 > {
     public static defaultProps = {
-        formatter: (timestamp) => timestamp,
-        updater: (timestamp) => timestamp + 1,
+        formatter: (timestamp: number) => timestamp,
+        updater: (timestamp: number) => timestamp + 1,
 
         updateFrequency: 1000, // 1 second
         className: '',
@@ -30,7 +30,7 @@ export class Timer<T = number> extends React.PureComponent<
 
     private updateInterval: number = null;
 
-    constructor(props) {
+    public constructor(props: ITimerProps<T>) {
         super(props);
 
         this.state = {
@@ -38,6 +38,16 @@ export class Timer<T = number> extends React.PureComponent<
         };
     }
 
+    @bind
+    public updateTimer(overrideValue = null) {
+        this.setState(({ value }) => ({
+            value:
+                overrideValue != null
+                    ? this.props.updater(overrideValue)
+                    : this.props.updater(value),
+        }));
+    }
+
     public componentDidMount() {
         this.updateInterval = setInterval(
             this.updateTimer,
@@ -49,18 +59,6 @@ export class Timer<T = number> extends React.PureComponent<
         clearInterval(this.updateInterval);
     }
 
-    @bind
-    public updateTimer(overrideValue = null) {
-        this.setState(({ value }) => {
-            return {
-                value:
-                    overrideValue != null
-                        ? this.props.updater(overrideValue)
-                        : this.props.updater(value),
-            };
-        });
-    }
-
     public render() {
         const { formatter, className } = this.props;
 
diff --git a/datahub/webapp/ui/ToggleButton/ToggleButton.tsx b/datahub/webapp/ui/ToggleButton/ToggleButton.tsx
index a692e4624..1e9cff4be 100644
--- a/datahub/webapp/ui/ToggleButton/ToggleButton.tsx
+++ b/datahub/webapp/ui/ToggleButton/ToggleButton.tsx
@@ -15,13 +15,11 @@ export const ToggleButton: React.FunctionComponent<IToggleButton> = ({
     checked,
     title,
     ...otherProps
-}) => {
-    return (
-        <div
-            className={`ToggleButton ${checked ? 'checked' : ''}`}
-            onClick={() => onClick(!checked)}
-        >
-            <Button {...otherProps}>{title}</Button>
-        </div>
-    );
-};
+}) => (
+    <div
+        className={`ToggleButton ${checked ? 'checked' : ''}`}
+        onClick={() => onClick(!checked)}
+    >
+        <Button {...otherProps}>{title}</Button>
+    </div>
+);
diff --git a/datahub/webapp/ui/ToggleSwitch/ToggleSwitch.tsx b/datahub/webapp/ui/ToggleSwitch/ToggleSwitch.tsx
index ca5110439..e007a87e6 100644
--- a/datahub/webapp/ui/ToggleSwitch/ToggleSwitch.tsx
+++ b/datahub/webapp/ui/ToggleSwitch/ToggleSwitch.tsx
@@ -10,13 +10,11 @@ export interface IToggleSwitchProps {
 export const ToggleSwitch: React.FunctionComponent<IToggleSwitchProps> = ({
     onChange,
     checked,
-}) => {
-    return (
-        <div
-            className={`ToggleSwitch ${checked ? 'checked' : ''}`}
-            onClick={() => onChange(!checked)}
-        >
-            <span className="ToggleSwitch-circle" />
-        </div>
-    );
-};
+}) => (
+    <div
+        className={`ToggleSwitch ${checked ? 'checked' : ''}`}
+        onClick={() => onChange(!checked)}
+    >
+        <span className="ToggleSwitch-circle" />
+    </div>
+);
diff --git a/package.json b/package.json
index 0d0aeb1a4..2eb3d48d7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
         "build": "npx webpack",
         "storybook": "STORYBOOK_USER=${USER} start-storybook -p 6006",
         "build-storybook": "build-storybook",
-        "dev": "webpack-dev-server --mode development --open --hot"
+        "dev": "webpack-dev-server --mode development --open --hot",
+        "lint": "eslint 'datahub/webapp/*/**/*.{ts,tsx}' --quiet --fix",
+        "tsc-check": "tsc --noEmit"
     },
     "repository": {
         "type": "git",
@@ -49,6 +51,7 @@
         "fast-json-stable-stringify": "2.0.0",
         "feather-icons": "4.19.0",
         "formik": "2.1.4",
+        "history": "^4.10.1",
         "html-webpack-plugin": "3.2.0",
         "immer": "5.3.2",
         "immutable": "3.7.4",
@@ -79,7 +82,9 @@
         "react-virtualized": "9.21.0",
         "reactour": "^1.15.0",
         "redux": "4.0.4",
+        "redux-logger": "3.0.6",
         "redux-thunk": "2.3.0",
+        "react-hot-loader": "4.12.19",
         "regenerator-runtime": "^0.13.2",
         "reselect": "4.0.0",
         "smooth-scroll-into-view-if-needed": "^1.1.27",
@@ -135,6 +140,9 @@
         "@types/webpack": "4.4.13",
         "@types/webpack-env": "1.13.6",
         "@types/yup": "^0.26.13",
+        "@typescript-eslint/eslint-plugin": "^4.7.0",
+        "@typescript-eslint/eslint-plugin-tslint": "^4.7.0",
+        "@typescript-eslint/parser": "^4.7.0",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-imports": "^2.0.0",
@@ -143,21 +151,23 @@
         "enzyme": "^3.10.0",
         "enzyme-adapter-react-16": "^1.15.1",
         "enzyme-to-json": "^3.4.3",
+        "eslint": "^7.13.0",
+        "eslint-config-prettier": "^6.15.0",
+        "eslint-plugin-import": "^2.22.1",
+        "eslint-plugin-jsdoc": "^30.7.7",
+        "eslint-plugin-prefer-arrow": "^1.2.2",
+        "eslint-plugin-react": "^7.21.5",
         "jest": "24.9.0",
         "json-loader": "^0.5.7",
         "postcss-loader": "^3.0.0",
         "postcss-preset-env": "6.7.0",
         "prettier": "2.0.2",
         "prettier-eslint": "^11.0.0",
-        "react-hot-loader": "4.12.19",
-        "redux-logger": "3.0.6",
         "sass-loader": "8.0.2",
         "source-map-loader": "0.2.4",
         "style-loader": "0.23.0",
         "tsconfig-paths-webpack-plugin": "3.2.0",
-        "tslint": "5.14.0",
-        "tslint-config-prettier": "1.18.0",
-        "tslint-react": "4.0.0",
+        "tslint": "^6.1.3",
         "webpack-dev-server": "^3.7.2",
         "worker-loader": "2.0.0"
     }
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 1bb629a35..000000000
--- a/tslint.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-    "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
-    "rules": {
-        "object-literal-sort-keys": false,
-        "ordered-imports": false,
-        "interface-name": [true, "always-prefix"],
-        "no-submodule-imports": false,
-        "max-classes-per-file": false,
-        "no-string-literal": false,
-        "jsx-boolean-value": false,
-        "no-var-requires": false,
-        "callable-types": false,
-        "no-implicit-dependencies": [
-            true,
-            "dev",
-            [
-                "ui",
-                "components",
-                "lib",
-                "config",
-                "worker-loader!.",
-                "history",
-                "const",
-                "hooks",
-                "context"
-            ]
-        ],
-        "no-shadowed-variable": [
-            true,
-            {
-                "class": true,
-                "enum": true,
-                "function": false,
-                "interface": false,
-                "namespace": true,
-                "typeAlias": false,
-                "typeParameter": false
-            }
-        ],
-        "no-console": false,
-        "jsx-no-lambda": false,
-        "only-arrow-functions": [true, "allow-named-functions"],
-        "triple-equals": [true, "allow-null-check"]
-    }
-}
diff --git a/yarn.lock b/yarn.lock
index 59a80b008..e3df7742d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2154,6 +2154,22 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@eslint/eslintrc@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.1.tgz#f72069c330461a06684d119384435e12a5d76e3c"
+  integrity sha512-XRUeBZ5zBWLYgSANMpThFddrZZkEbGHgUdt5UJjZfnlN9BGCiUBrf+nvbRupSjMvqzwnQN0qwCmOxITt1cfywA==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
 "@hot-loader/react-dom@^16.11.0":
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.11.0.tgz#c0b483923b289db5431516f56ee2a69448ebf9bd"
@@ -2338,11 +2354,32 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@nodelib/fs.scandir@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
+  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.3"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
+  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
+
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
+  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.3"
+    fastq "^1.6.0"
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
@@ -3539,6 +3576,27 @@
   resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.13.tgz#0aeeba85231a34ddc68c74b3a2c64eeb2ccf68bf"
   integrity sha512-sMMtb+c2xxf/FcK0kW36+0uuSWpNwvCBZYI7vpnD9J9Z6OYk09P4TmDkMWV+NWdi9Nzt2tUJjtpnPpkiUklBaw==
 
+"@typescript-eslint/eslint-plugin-tslint@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin-tslint/-/eslint-plugin-tslint-4.7.0.tgz#0be8e29fa31763b6e2dee99630fe34bf727cb2db"
+  integrity sha512-YCL7TzcOQ4mWrRac5UdcM8Cq0xOvVFlyg5+g6f5dl+inrDdQ8OOHvjSkbBDFSK1P+w5qKMztWZgRHmUTPJ7iGg==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "4.7.0"
+    lodash "^4.17.15"
+
+"@typescript-eslint/eslint-plugin@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.7.0.tgz#85c9bbda00c0cb604d3c241f7bc7fb171a2d3479"
+  integrity sha512-li9aiSVBBd7kU5VlQlT1AqP0uWGDK6JYKUQ9cVDnOg34VNnd9t4jr0Yqc/bKxJr/tDCPDaB4KzoSFN9fgVxe/Q==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "4.7.0"
+    "@typescript-eslint/scope-manager" "4.7.0"
+    debug "^4.1.1"
+    functional-red-black-tree "^1.0.1"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@typescript-eslint/experimental-utils@3.8.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.8.0.tgz#ac1f7c88322dcfb7635ece6f0441516dd951099a"
@@ -3550,6 +3608,18 @@
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
+"@typescript-eslint/experimental-utils@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.7.0.tgz#8d1058c38bec3d3bbd9c898a1c32318d80faf3c5"
+  integrity sha512-cymzovXAiD4EF+YoHAB5Oh02MpnXjvyaOb+v+BdpY7lsJXZQN34oIETeUwVT2XfV9rSNpXaIcknDLfupO/tUoA==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/scope-manager" "4.7.0"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/typescript-estree" "4.7.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
+
 "@typescript-eslint/parser@^3.0.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.8.0.tgz#8e1dcd404299bf79492409c81c415fa95a7c622b"
@@ -3561,11 +3631,34 @@
     "@typescript-eslint/typescript-estree" "3.8.0"
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/parser@^4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.7.0.tgz#44bdab0f788b478178368baa65d3365fdc63da1c"
+  integrity sha512-+meGV8bMP1sJHBI2AFq1GeTwofcGiur8LoIr6v+rEmD9knyCqDlrQcFHR0KDDfldHIFDU/enZ53fla6ReF4wRw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "4.7.0"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/typescript-estree" "4.7.0"
+    debug "^4.1.1"
+
+"@typescript-eslint/scope-manager@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.7.0.tgz#2115526085fb72723ccdc1eeae75dec7126220ed"
+  integrity sha512-ILITvqwDJYbcDCROj6+Ob0oCKNg3SH46iWcNcTIT9B5aiVssoTYkhKjxOMNzR1F7WSJkik4zmuqve5MdnA0DyA==
+  dependencies:
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/visitor-keys" "4.7.0"
+
 "@typescript-eslint/types@3.8.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.8.0.tgz#58581dd863f86e0cd23353d94362bb90b4bea796"
   integrity sha512-8kROmEQkv6ss9kdQ44vCN1dTrgu4Qxrd2kXr10kz2NP5T8/7JnEfYNxCpPkArbLIhhkGLZV3aVMplH1RXQRF7Q==
 
+"@typescript-eslint/types@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.7.0.tgz#5e95ef5c740f43d942542b35811f87b62fccca69"
+  integrity sha512-uLszFe0wExJc+I7q0Z/+BnP7wao/kzX0hB5vJn4LIgrfrMLgnB2UXoReV19lkJQS1a1mHWGGODSxnBx6JQC3Sg==
+
 "@typescript-eslint/typescript-estree@3.8.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.8.0.tgz#0606d19f629f813dbdd5a34c7a1e895d6191cac6"
@@ -3580,6 +3673,20 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.7.0.tgz#539531167f05ba20eb0b6785567076679e29d393"
+  integrity sha512-5XZRQznD1MfUmxu1t8/j2Af4OxbA7EFU2rbo0No7meb46eHgGkSieFdfV6omiC/DGIBhH9H9gXn7okBbVOm8jw==
+  dependencies:
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/visitor-keys" "4.7.0"
+    debug "^4.1.1"
+    globby "^11.0.1"
+    is-glob "^4.0.1"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
 "@typescript-eslint/visitor-keys@3.8.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.8.0.tgz#ad35110249fb3fc30a36bfcbfeea93e710cfaab1"
@@ -3587,6 +3694,14 @@
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/visitor-keys@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.7.0.tgz#6783824f22acfc49e754970ed21b88ac03b80e6f"
+  integrity sha512-aDJDWuCRsf1lXOtignlfiPODkzSxxop7D0rZ91L6ZuMlcMCSh0YyK+gAfo5zN/ih6WxMwhoXgJWC3cWQdaKC+A==
+  dependencies:
+    "@typescript-eslint/types" "4.7.0"
+    eslint-visitor-keys "^2.0.0"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -3962,6 +4077,11 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
   integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
 
+acorn@^7.4.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
 add-dom-event-listener@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
@@ -4086,6 +4206,16 @@ ajv@^6.10.2, ajv@^6.12.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -4103,6 +4233,11 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+
 ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
@@ -4261,6 +4396,15 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    is-string "^1.0.5"
+
 array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
@@ -4278,6 +4422,11 @@ array-union@^1.0.1:
   dependencies:
     array-uniq "^1.0.1"
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -4305,6 +4454,14 @@ array.prototype.flat@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
+array.prototype.flat@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 array.prototype.flatmap@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.1.tgz#3103cd4826ef90019c9b0a4839b2535fa6faf4e9"
@@ -4314,6 +4471,15 @@ array.prototype.flatmap@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
+array.prototype.flatmap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
 arraybuffer.slice@~0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
@@ -5258,6 +5424,14 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+call-bind@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
+  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.0"
+
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -5412,6 +5586,14 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 character-entities-legacy@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4"
@@ -5797,26 +5979,26 @@ commander@2.17.x, commander@~2.17.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.12.1:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
-  integrity sha512-6CYPa+JP2ftfRU2qkDK+UTVeQYosOg/2GbcjIcKPHfinyOLPVGXu/ovN86RP49Re5ndJK1N0kuiidFFuepc4ZQ==
+commander@^2.12.1, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@^2.19.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+comment-parser@^0.7.6:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-0.7.6.tgz#0e743a53c8e646c899a1323db31f6cd337b10f12"
+  integrity sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg==
+
 common-tags@^1.4.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -5916,6 +6098,11 @@ constants-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
+contains-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
+
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -6163,6 +6350,15 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -6925,7 +7121,7 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
-debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -6953,6 +7149,13 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
+  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
+  dependencies:
+    ms "2.1.2"
+
 debug@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -6992,7 +7195,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -7138,10 +7341,10 @@ diff-sequences@^24.9.0:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
   integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
 
-diff@^3.2.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
-  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
+diff@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -7160,6 +7363,13 @@ dir-glob@2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
@@ -7199,6 +7409,21 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
+doctrine@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
+  dependencies:
+    esutils "^2.0.2"
+    isarray "^1.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -7531,6 +7756,13 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
 entities@^1.1.1, entities@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -7735,6 +7967,83 @@ escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz#7f93f6cb7d45a92f1537a70ecc06366e1ac6fed9"
+  integrity sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==
+  dependencies:
+    get-stdin "^6.0.0"
+
+eslint-import-resolver-node@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
+  dependencies:
+    debug "^2.6.9"
+    resolve "^1.13.1"
+
+eslint-module-utils@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
+  dependencies:
+    debug "^2.6.9"
+    pkg-dir "^2.0.0"
+
+eslint-plugin-import@^2.22.1:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
+  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flat "^1.2.3"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.4"
+    eslint-module-utils "^2.6.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.1"
+    read-pkg-up "^2.0.0"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
+eslint-plugin-jsdoc@^30.7.7:
+  version "30.7.7"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-30.7.7.tgz#2af2c68e5adaf8a59fc3c72081a4b137098268bb"
+  integrity sha512-DmVMJC2AbpYX7X1KhnVT1a9ex1AUvG+q9G8i6hzjp3cpjW8vmKQTUmZnRS0//W+7HvMqeb+eXPANdCOzGVVZBQ==
+  dependencies:
+    comment-parser "^0.7.6"
+    debug "^4.2.0"
+    jsdoctypeparser "^9.0.0"
+    lodash "^4.17.20"
+    regextras "^0.7.1"
+    semver "^7.3.2"
+    spdx-expression-parse "^3.0.1"
+
+eslint-plugin-prefer-arrow@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.2.tgz#0c6d25a6b94cb3e0110a23d129760af5860edb6e"
+  integrity sha512-C8YMhL+r8RMeMdYAw/rQtE6xNdMulj+zGWud/qIGnlmomiPRaLDGLMeskZ3alN6uMBojmooRimtdrXebLN4svQ==
+
+eslint-plugin-react@^7.21.5:
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz#50b21a412b9574bfe05b21db176e8b7b3b15bff3"
+  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    resolve "^1.18.1"
+    string.prototype.matchall "^4.0.2"
+
 eslint-scope@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
@@ -7759,6 +8068,14 @@ eslint-scope@^5.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
 eslint-utils@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
@@ -7766,18 +8083,23 @@ eslint-utils@^1.4.3:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^2.0.0:
+eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
   integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.1.0:
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
+eslint-visitor-keys@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
+  integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
+
 eslint@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
@@ -7821,6 +8143,49 @@ eslint@^6.8.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
+eslint@^7.13.0:
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.13.0.tgz#7f180126c0dcdef327bfb54b211d7802decc08da"
+  integrity sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@eslint/eslintrc" "^0.2.1"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.0"
+    esquery "^1.2.0"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 espree@^6.1.2, espree@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
@@ -7830,6 +8195,15 @@ espree@^6.1.2, espree@^6.2.1:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
+espree@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348"
+  integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.3.0"
+
 esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -7840,7 +8214,7 @@ esprima@^4.0.0, esprima@~4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1:
+esquery@^1.0.1, esquery@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
   integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
@@ -7854,12 +8228,19 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
 estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
   integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
-estraverse@^5.1.0:
+estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
@@ -8081,6 +8462,18 @@ fast-glob@^2.0.2:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
+fast-glob@^3.1.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
+  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 fast-json-stable-stringify@2.0.0, fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -8096,6 +8489,13 @@ fastparse@^1.1.1:
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
   integrity sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=
 
+fastq@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947"
+  integrity sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w==
+  dependencies:
+    reusify "^1.0.4"
+
 fault@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
@@ -8289,7 +8689,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.1.0:
+find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
@@ -8600,11 +9000,25 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-intrinsic@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
+  integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
   integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -8652,7 +9066,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
   integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
@@ -8763,6 +9177,18 @@ globby@8.0.2:
     pify "^3.0.0"
     slash "^1.0.0"
 
+globby@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
+  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -8999,7 +9425,7 @@ highlight.js@~9.13.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
   integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
 
-history@^4.9.0:
+history@^4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -9269,6 +9695,11 @@ ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+ignore@^5.1.4:
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
+  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
+
 immediate@~3.0.5:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
@@ -9322,6 +9753,14 @@ import-fresh@^3.0.0, import-fresh@^3.1.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-fresh@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.2.tgz#fc129c160c5d68235507f4331a6baad186bdbc3e"
+  integrity sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -9584,6 +10023,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-core-module@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.1.0.tgz#a4cc031d9b1aca63eecbd18a650e13cb4eeab946"
+  integrity sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -9853,6 +10299,11 @@ is-string@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
   integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
 
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-subset@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
@@ -10417,7 +10868,7 @@ js-yaml@^3.13.1, js-yaml@^3.9.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.5.2, js-yaml@^3.7.0:
+js-yaml@^3.5.2:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
   integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
@@ -10430,6 +10881,11 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsdoctypeparser@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/jsdoctypeparser/-/jsdoctypeparser-9.0.0.tgz#8c97e2fb69315eb274b0f01377eaa5c940bd7b26"
+  integrity sha512-jrTA2jJIL6/DAEILBEh2/w9QxCuwmvNXIry39Ay/HVfhE3o2yVV0U44blYkqdHA/OKloJEqvJy0xU+GSdE2SIw==
+
 jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
@@ -10574,6 +11030,14 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz#642f1d7b88aa6d7eb9d8f2210e166478444fa891"
+  integrity sha512-d4/UOjg+mxAWxCiF0c5UTSwyqbchkbqCvK87aBovhnh8GtysTjWmgC63tY0cJx/HzGgm9qnA147jVBdpOiQ2RA==
+  dependencies:
+    array-includes "^3.1.1"
+    object.assign "^4.1.1"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -10668,6 +11132,14 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 lie@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
@@ -10691,6 +11163,16 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -10904,7 +11386,7 @@ lodash@4.17.19, lodash@^4.0.0, lodash@^4.11.1, lodash@^4.15.0, lodash@^4.16.0, l
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-lodash@^4.17.19:
+lodash@^4.17.19, lodash@^4.17.20:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -11141,6 +11623,11 @@ merge2@^1.2.3:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.3.tgz#7ee99dbd69bb6481689253f018488a1b902b0ed5"
   integrity sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==
 
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -11423,6 +11910,11 @@ ms@2.1.1, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
   integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
@@ -11912,6 +12404,16 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
 object.entries@^1.0.4, object.entries@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
@@ -11922,6 +12424,15 @@ object.entries@^1.0.4, object.entries@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.entries@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
+  integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    has "^1.0.3"
+
 "object.fromentries@^2.0.0 || ^1.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.0.tgz#49a543d92151f8277b3ac9600f1e930b189d30ab"
@@ -11942,6 +12453,16 @@ object.fromentries@^2.0.1:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.fromentries@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -11967,6 +12488,16 @@ object.values@^1.0.4, object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.values@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -12051,6 +12582,18 @@ optionator@^0.8.3:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -12364,6 +12907,11 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 path-parse@^1.0.5, path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -12390,6 +12938,13 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
+  dependencies:
+    pify "^2.0.0"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -12457,6 +13012,13 @@ pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
+  dependencies:
+    find-up "^2.1.0"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -12950,6 +13512,11 @@ postcss@^7.0.17:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -13798,6 +14365,14 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg-up@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
@@ -13815,6 +14390,15 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -14036,6 +14620,11 @@ regexpp@^2.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -14069,6 +14658,11 @@ regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
+regextras@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/regextras/-/regextras-0.7.1.tgz#be95719d5f43f9ef0b9fa07ad89b7c606995a3b2"
+  integrity sha512-9YXf6xtW+qzQ+hcMQXx95MOvfqXFgsKDZodX3qZB0x2n5Z94ioetIITsBtvJbiOyxa/6s9AtyweBLCdPmPko/w==
+
 regjsgen@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
@@ -14278,6 +14872,14 @@ resolve@^1.12.0:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.13.1, resolve@^1.17.0, resolve@^1.18.1:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+  dependencies:
+    is-core-module "^2.1.0"
+    path-parse "^1.0.6"
+
 resolve@^1.3.2:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
@@ -14318,6 +14920,11 @@ retry@^0.12.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
   integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
 
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 rimraf@2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
@@ -14372,6 +14979,11 @@ run-async@^2.4.0:
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
+run-parallel@^1.1.9:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
+  integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -14583,7 +15195,7 @@ semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2:
+semver@^7.2.1, semver@^7.3.2:
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
@@ -14747,11 +15359,23 @@ shebang-command@^1.2.0:
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 shell-quote@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
@@ -14825,6 +15449,11 @@ slash@^2.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -15037,6 +15666,14 @@ spdx-expression-parse@^3.0.0:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
 
+spdx-expression-parse@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
 spdx-license-ids@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz#e2a303236cac54b04031fa7a5a79c7e701df852f"
@@ -15235,7 +15872,7 @@ string-width@^4.0.0, string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-"string.prototype.matchall@^4.0.0 || ^3.0.1":
+"string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
   integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
@@ -15384,7 +16021,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.0.1:
+strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -15860,12 +16497,27 @@ tsconfig-paths@^3.4.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
 tslib@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
-tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.2:
+tslib@^1.13.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.2:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
@@ -15875,35 +16527,23 @@ tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
-tslint-config-prettier@1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"
-  integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==
-
-tslint-react@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-4.0.0.tgz#b4bb4c01c32448cb14d23f143a2f5e4989bb961e"
-  integrity sha512-9fNE0fm9zNDx1+b6hgy8rgDN2WsQLRiIrn3+fbqm0tazBVF6jiaCFAITxmU+WSFWYE03Xhp1joCircXOe1WVAQ==
-  dependencies:
-    tsutils "^3.9.1"
-
-tslint@5.14.0:
-  version "5.14.0"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.14.0.tgz#be62637135ac244fc9b37ed6ea5252c9eba1616e"
-  integrity sha512-IUla/ieHVnB8Le7LdQFRGlVJid2T/gaJe5VkjzRVSRR6pA2ODYrnfR1hmxi+5+au9l50jBwpbBL34txgv4NnTQ==
+tslint@^6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/tslint/-/tslint-6.1.3.tgz#5c23b2eccc32487d5523bd3a470e9aa31789d904"
+  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
   dependencies:
-    babel-code-frame "^6.22.0"
+    "@babel/code-frame" "^7.0.0"
     builtin-modules "^1.1.1"
     chalk "^2.3.0"
     commander "^2.12.1"
-    diff "^3.2.0"
+    diff "^4.0.1"
     glob "^7.1.1"
-    js-yaml "^3.7.0"
+    js-yaml "^3.13.1"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
+    mkdirp "^0.5.3"
     resolve "^1.3.2"
     semver "^5.3.0"
-    tslib "^1.8.0"
+    tslib "^1.13.0"
     tsutils "^2.29.0"
 
 tsutils@^2.29.0:
@@ -15920,13 +16560,6 @@ tsutils@^3.17.1:
   dependencies:
     tslib "^1.8.1"
 
-tsutils@^3.9.1:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.14.0.tgz#bf8d5a7bae5369331fa0f2b0a5a10bd7f7396c77"
-  integrity sha512-SmzGbB0l+8I0QwsPgjooFRaRvHLBLNYM8SeQ0k6rtNDru5sCGeLJcZdwilNndN+GysuFjF5EIYgN8GfFG6UeUw==
-  dependencies:
-    tslib "^1.8.1"
-
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -15944,6 +16577,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
@@ -16661,6 +17301,13 @@ which@1, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
@@ -16675,7 +17322,7 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
-word-wrap@~1.2.3:
+word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==