Add TypeScript migration dashboard (#13820)

As we convert parts of the codebase to TypeScript, we will want a way to
track progress. This commit adds a dashboard which displays all of the
files that we wish to convert to TypeScript and which files we've
already converted.

The list of all possible files to convert is predetermined by walking
the dependency graph of each entrypoint the build system uses to compile
the extension (the files that the entrypoint imports, the files that the
imports import, etc). The list should not need to be regenerated, but
you can do it by running:

    yarn ts-migration:enumerate

The dashboard is implemented as a separate React app. The CircleCI
configuration has been updated so that when a new commit is pushed, the
React app is built and stored in the CircleCI artifacts. When a PR is
merged, the built files will be pushed to a separate repo whose sole
purpose is to serve the dashboard via GitHub Pages (this is the same
way that the Storybook works). All of the app code and script to build
the app are self-contained under
`development/ts-migration-dashboard`. To build this app yourself, you
can run:

    yarn ts-migration:dashboard:build

or if you want to build automatically as you change files, run:

    yarn ts-migration:dashboard:watch

Then open the following file in your browser (there is no server
component):

    development/ts-migration-dashboard/build/index.html

Finally, although you shouldn't have to do this, to manually deploy the
dashboard once built, you can run:

    git remote add ts-migration-dashboard [email protected]:MetaMask/metamask-extension-ts-migration-dashboard.git
    yarn ts-migration:dashboard:deploy

.circleci/config.yml

@@ -65,6 +65,9 @@ workflows:
       - prep-build-storybook:
           requires:
             - test-storybook
+      - prep-build-ts-migration-dashboard:
+          requires:
+            - prep-deps
       - test-lint:
           requires:
             - prep-deps
@@ -146,6 +149,7 @@ workflows:
             - prep-build-beta
             - prep-build-flask
             - prep-build-storybook
+            - prep-build-ts-migration-dashboard
             - prep-build-test-mv3
             - benchmark
             - stats-module-load-init
@@ -165,6 +169,12 @@ workflows:
               only: develop
           requires:
             - prep-build-storybook
+      - job-publish-ts-migration-dashboard:
+          filters:
+            branches:
+              only: develop
+          requires:
+            - prep-build-ts-migration-dashboard
 
 jobs:
   create_release_pull_request:
@@ -369,6 +379,20 @@ jobs:
           paths:
             - storybook-build
 
+  prep-build-ts-migration-dashboard:
+    executor: node-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Build TypeScript migration dashboard
+          command: yarn ts-migration:dashboard:build
+      - persist_to_workspace:
+          root: .
+          paths:
+            - development/ts-migration-dashboard/build
+
   test-storybook:
     executor: node-browsers
     steps:
@@ -686,6 +710,9 @@ jobs:
       - store_artifacts:
           path: storybook-build
           destination: storybook
+      - store_artifacts:
+          path: development/ts-migration-dashboard/build
+          destination: ts-migration-dashboard
       - run:
           name: build:announce
           command: ./development/metamaskbot-build-announce.js
@@ -722,6 +749,21 @@ jobs:
             git remote add storybook [email protected]:MetaMask/metamask-storybook.git
             yarn storybook:deploy
 
+  job-publish-ts-migration-dashboard:
+    executor: node-browsers
+    steps:
+      - add_ssh_keys:
+          fingerprints:
+            - "3d:49:29:f4:b2:e8:ea:af:d1:32:eb:2a:fc:15:85:d8"
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: ts-migration-dashboard:deploy
+          command: |
+            git remote add ts-migration-dashboard [email protected]:MetaMask/metamask-extension-ts-migration-dashboard.git
+            yarn ts-migration:dashboard:deploy
+
   test-unit:
     executor: node-browsers
     steps:

.depcheckrc.yml

@@ -12,6 +12,8 @@ ignores:
   # dev deps
   #
 
+  # all @types/* packages are imported implicitly by TypeScript
+  - '@types/*'
   # safety fallback for npm lifecycle scripts, not used normally
   - '@lavamoat/preinstall-always-fail'
   # used in testing + ci

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'builds/**/*',
     'development/chromereload.js',
     'development/charts/**',
+    'development/ts-migration-dashboard/build/**',
     'dist/**/*',
     'node_modules/**/*',
   ],

.gitignore

@@ -33,6 +33,8 @@ jest-coverage/
 dist
 builds/
 builds.zip
+development/ts-migration-dashboard/build
+development/ts-migration-dashboard/intermediate
 
 test-artifacts
 test-builds

.prettierignore

@@ -11,3 +11,4 @@ app/vendor/**
 test/e2e/send-eth-with-private-key-test/**
 *.scss
 development/chromereload.js
+development/ts-migration-dashboard/filesToConvert.json

development/metamaskbot-build-announce.js

@@ -93,6 +93,9 @@ async function start() {
   const storybookUrl = `${BUILD_LINK_BASE}/storybook/index.html`;
   const storybookLink = `<a href="${storybookUrl}">Storybook</a>`;
 
+  const tsMigrationDashboardUrl = `${BUILD_LINK_BASE}/ts-migration-dashboard/index.html`;
+  const tsMigrationDashboardLink = `<a href="${tsMigrationDashboardUrl}">Dashboard</a>`;
+
   // links to bundle browser builds
   const depVizUrl = `${BUILD_LINK_BASE}/build-artifacts/build-viz/index.html`;
   const depVizLink = `<a href="${depVizUrl}">Build System</a>`;
@@ -119,6 +122,7 @@ async function start() {
     `mv3: ${bundleSizeStatsLink}`,
     `code coverage: ${coverageLink}`,
     `storybook: ${storybookLink}`,
+    `typescript migration: ${tsMigrationDashboardLink}`,
     `<a href="${allArtifactsUrl}">all artifacts</a>`,
     `<details>
        <summary>bundle viz:</summary>