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
2021-11-29 06:40:55 -08:00
parent 25ccfb5d04
commit 15b1069bcc
1017 changed files with 17410 additions and 54942 deletions
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -0,0 +1,169 @@
+import { observer } from "mobx-react";
+import {
+  DocumentIcon,
+  EmailIcon,
+  ProfileIcon,
+  PadlockIcon,
+  CodeIcon,
+  UserIcon,
+  GroupIcon,
+  LinkIcon,
+  TeamIcon,
+  ExpandedIcon,
+  BeakerIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+import Scrollable from "~/components/Scrollable";
+import SlackIcon from "~/components/SlackIcon";
+import ZapierIcon from "~/components/ZapierIcon";
+import env from "~/env";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
+import Sidebar from "./Sidebar";
+import Header from "./components/Header";
+import Section from "./components/Section";
+import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
+import Version from "./components/Version";
+
+const isHosted = env.DEPLOYMENT === "hosted";
+
+function SettingsSidebar() {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const team = useCurrentTeam();
+  const { policies } = useStores();
+  const can = policies.abilities(team.id);
+
+  const returnToDashboard = React.useCallback(() => {
+    history.push("/home");
+  }, [history]);
+
+  return (
+    <Sidebar>
+      <TeamButton
+        subheading={
+          <ReturnToApp align="center">
+            <BackIcon color="currentColor" /> {t("Return to App")}
+          </ReturnToApp>
+        }
+        teamName={team.name}
+        logoUrl={team.avatarUrl}
+        onClick={returnToDashboard}
+      />
+
+      <Flex auto column>
+        <Scrollable topShadow>
+          <Section>
+            <Header>{t("Account")}</Header>
+            <SidebarLink
+              to="/settings"
+              icon={<ProfileIcon color="currentColor" />}
+              label={t("Profile")}
+            />
+            <SidebarLink
+              to="/settings/notifications"
+              icon={<EmailIcon color="currentColor" />}
+              label={t("Notifications")}
+            />
+            {can.createApiKey && (
+              <SidebarLink
+                to="/settings/tokens"
+                icon={<CodeIcon color="currentColor" />}
+                label={t("API Tokens")}
+              />
+            )}
+          </Section>
+          <Section>
+            <Header>{t("Team")}</Header>
+            {can.update && (
+              <SidebarLink
+                to="/settings/details"
+                icon={<TeamIcon color="currentColor" />}
+                label={t("Details")}
+              />
+            )}
+            {can.update && (
+              <SidebarLink
+                to="/settings/security"
+                icon={<PadlockIcon color="currentColor" />}
+                label={t("Security")}
+              />
+            )}
+            {can.update && env.DEPLOYMENT !== "hosted" && (
+              <SidebarLink
+                to="/settings/features"
+                icon={<BeakerIcon color="currentColor" />}
+                label={t("Features")}
+              />
+            )}
+            <SidebarLink
+              to="/settings/members"
+              icon={<UserIcon color="currentColor" />}
+              exact={false}
+              label={t("Members")}
+            />
+            <SidebarLink
+              to="/settings/groups"
+              icon={<GroupIcon color="currentColor" />}
+              exact={false}
+              label={t("Groups")}
+            />
+            <SidebarLink
+              to="/settings/shares"
+              icon={<LinkIcon color="currentColor" />}
+              label={t("Share Links")}
+            />
+            {can.export && (
+              <SidebarLink
+                to="/settings/import-export"
+                icon={<DocumentIcon color="currentColor" />}
+                label={`${t("Import")} / ${t("Export")}`}
+              />
+            )}
+          </Section>
+          {can.update && (env.SLACK_KEY || isHosted) && (
+            <Section>
+              <Header>{t("Integrations")}</Header>
+              {env.SLACK_KEY && (
+                <SidebarLink
+                  to="/settings/integrations/slack"
+                  icon={<SlackIcon color="currentColor" />}
+                  label="Slack"
+                />
+              )}
+              {isHosted && (
+                <SidebarLink
+                  to="/settings/integrations/zapier"
+                  icon={<ZapierIcon color="currentColor" />}
+                  label="Zapier"
+                />
+              )}
+            </Section>
+          )}
+          {can.update && !isHosted && (
+            <Section>
+              <Header>{t("Installation")}</Header>
+              <Version />
+            </Section>
+          )}
+        </Scrollable>
+      </Flex>
+    </Sidebar>
+  );
+}
+
+const BackIcon = styled(ExpandedIcon)`
+  transform: rotate(90deg);
+  margin-left: -8px;
+`;
+
+const ReturnToApp = styled(Flex)`
+  height: 16px;
+`;
+
+export default observer(SettingsSidebar);