chore: Drive settings sidebar from new config (#3236)

app/components/Sidebar/Settings.tsx

@@ -1,27 +1,14 @@
+import { groupBy } from "lodash";
 import { observer } from "mobx-react";
-import {
-  NewDocumentIcon,
-  EmailIcon,
-  ProfileIcon,
-  PadlockIcon,
-  CodeIcon,
-  UserIcon,
-  GroupIcon,
-  LinkIcon,
-  TeamIcon,
-  BackIcon,
-  BeakerIcon,
-  DownloadIcon,
-} from "outline-icons";
+import { BackIcon } 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 useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import Sidebar from "./Sidebar";
@@ -38,6 +25,8 @@ function SettingsSidebar() {
   const history = useHistory();
   const team = useCurrentTeam();
   const can = usePolicy(team.id);
+  const configs = useAuthorizedSettingsConfig();
+  const groupedConfig = groupBy(configs, "group");
 
   const returnToApp = React.useCallback(() => {
     history.push("/home");
@@ -54,100 +43,19 @@ function SettingsSidebar() {
 
       <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 && (
-              <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.manage && (
-              <SidebarLink
-                to="/settings/import"
-                icon={<NewDocumentIcon color="currentColor" />}
-                label={t("Import")}
-              />
-            )}
-            {can.export && (
-              <SidebarLink
-                to="/settings/export"
-                icon={<DownloadIcon color="currentColor" />}
-                label={t("Export")}
-              />
-            )}
-          </Section>
-          {can.update && (env.SLACK_KEY || isHosted) && (
-            <Section>
-              <Header>{t("Integrations")}</Header>
-              {env.SLACK_KEY && (
+          {Object.keys(groupedConfig).map((header) => (
+            <Section key={header}>
+              <Header>{header}</Header>
+              {groupedConfig[header].map((item) => (
                 <SidebarLink
-                  to="/settings/integrations/slack"
-                  icon={<SlackIcon color="currentColor" />}
-                  label="Slack"
+                  key={item.path}
+                  to={item.path}
+                  icon={<item.icon color="currentColor" />}
+                  label={item.name}
                 />
-              )}
-              {isHosted && (
-                <SidebarLink
-                  to="/settings/integrations/zapier"
-                  icon={<ZapierIcon color="currentColor" />}
-                  label="Zapier"
-                />
-              )}
+              ))}
             </Section>
-          )}
+          ))}
           {can.update && !isHosted && (
             <Section>
               <Header>{t("Installation")}</Header>