chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

app/scenes/Settings/Tokens.tsx

@@ -0,0 +1,76 @@
+import { observer } from "mobx-react";
+import { CodeIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import APITokenNew from "~/scenes/APITokenNew";
+import { Action } from "~/components/Actions";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import HelpText from "~/components/HelpText";
+import Modal from "~/components/Modal";
+import PaginatedList from "~/components/PaginatedList";
+import Scene from "~/components/Scene";
+import Subheading from "~/components/Subheading";
+import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
+import TokenListItem from "./components/TokenListItem";
+
+function Tokens() {
+  const team = useCurrentTeam();
+  const { t } = useTranslation();
+  const { apiKeys, policies } = useStores();
+  const [newModalOpen, handleNewModalOpen, handleNewModalClose] = useBoolean();
+  const can = policies.abilities(team.id);
+
+  return (
+    <Scene
+      title={t("API Tokens")}
+      icon={<CodeIcon color="currentColor" />}
+      actions={
+        <>
+          {can.createApiKey && (
+            <Action>
+              <Button
+                type="submit"
+                value={`${t("New token")}…`}
+                onClick={handleNewModalOpen}
+              />
+            </Action>
+          )}
+        </>
+      }
+    >
+      <Heading>{t("API Tokens")}</Heading>
+      <HelpText>
+        <Trans
+          defaults="You can create an unlimited amount of personal tokens to authenticate
+          with the API. Tokens have the same permissions as your user account.
+          For more details see the <em>developer documentation</em>."
+          components={{
+            em: (
+              <a href="https://www.getoutline.com/developers" target="_blank" />
+            ),
+          }}
+        />
+      </HelpText>
+      <PaginatedList
+        fetch={apiKeys.fetchPage}
+        items={apiKeys.orderedData}
+        heading={<Subheading sticky>{t("Tokens")}</Subheading>}
+        renderItem={(token) => (
+          <TokenListItem key={token.id} token={token} onDelete={token.delete} />
+        )}
+      />
+      <Modal
+        title={t("Create a token")}
+        onRequestClose={handleNewModalClose}
+        isOpen={newModalOpen}
+      >
+        <APITokenNew onSubmit={handleNewModalClose} />
+      </Modal>
+    </Scene>
+  );
+}
+
+export default observer(Tokens);